Articles in Gutenberg Tag — Blog — Smart Slider 3 — WordPress Plugin Extending the world of WordPress and Joomla. Take your website to the next level with our plugins. Download Smart Slider 3 today and get started building beautiful sliders with confidence using our advanced editor. Fri, 02 Sep 2022 05:49:50 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 Best Free WordPress Page Builder Plugins Compared 2021 https://smartslider3.com/blog/best-free-wordpress-page-builder-plugins/ Wed, 30 Sep 2020 06:00:11 +0000 https://smartslider3.com/?post_type=blog&p=5219 Your website needs to stand out of the crowd, not only with its great and unique content but with its design as well. If your site can’t catch the visitors’ attention, they’ll leave immediately. For this reason, you need to create outstanding pages. The easiest way to do that is to find the best free […]

The post Best Free WordPress Page Builder Plugins Compared 2021 appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Your website needs to stand out of the crowd, not only with its great and unique content but with its design as well. If your site can’t catch the visitors’ attention, they’ll leave immediately. For this reason, you need to create outstanding pages. The easiest way to do that is to find the best free WordPress page builder plugin for your website.

Comparing the best free WordPress page builder plugins

In this article, I’ll compare the most popular free WordPress page builders. Of course, there are many great free builders out there, but I’ll only take a deeper look at four of them. The page builders I chose to compare are Gutenberg, Elementor, Beaver Builder and Brizy. I’ve picked them because they’re popular amongst WordPress users. So I’m curious to figure out which one is the best free page builder for WordPress from these four. I’m going to analyze them based on the following criteria:

Best free WordPress page builders
Best free WordPress page builders

1. Interface

When you choose a page builder for your site, you always need to consider how easy it is to use the plugin. After all, you trust it to help you build beautiful pages for your WordPress site. So the plugin you choose can’t have a clumsy interface. The options need to be laid out logically, they can’t be all over the place. In other words, you need to be able to find your way around quickly. So the best free WordPress page builder needs to have an interface that’s a joy to work with.

2. Available Elements

Unless you have the right tools at your disposal, it’s unlikely you’ll be able to create a stunning website. Page builders need to give more than only the basic heading, text, image and button elements. If these basic elements are not available, it isn’t a good fit for a modern website.

3. Styling options

If a plugin wants to be the best WordPress page builder, it needs to offer more than the ability to add content. It needs to provide options to style or design this content to create something unique.

4. Templates

Being able to create what you imagined is great. But having premade layouts to choose from is always welcomed. That’s because these layouts save time and effort. Additionally, they can teach you about what you can create with each plugin, and how to do it.

5. Pricing

Most plugins have a paid version with extra features. Although, in this article, I focus on finding the best free WordPress page builder. But I have to mention the premium plugins. I’ll compare what more you get, and how much you need to pay for it.

6. Speed

The keys to a successful site are: good content, nice design and fast loading. This is why I want to compare the speed of each page builder. I’m curious to see which of them loads the page that has the same layout, content and images the fastest.

📚 Table of contents

  1. Gutenberg
  2. Elementor
  3. Beaver Builder
  4. Brizy
  5. Speed
  6. Pricing

Gutenberg – free page builder plugin built into WordPress

Gutenberg - one of the best Free WordPress page builder plugins

Download

Gutenberg is WordPress’ built-in, block-based page and post editor. It arrived with WordPress 5, back in December 2018. Gutenberg editor has come a long way since its initial release. As a result, today and in the future, it can compete with the best free WordPress page builders.

Interface of Gutenberg ⭐⭐⭐⭐

Gutenberg looks simple and minimalistic, maybe a bit basic. This makes it fast to learn and easy to use. While it’s a visual, drag and drop editor, it operates on the backend. As a result, you might not see everything the same way as they’ll appear on the frontend during editing. Although, themes can style Gutenberg’s backend editor. As a result, the backend and frontend can look as similar as possible.

Interface of Gutenberg, the free WordPress page builder
Interface of Gutenberg

Gutenberg has an inline editor, which feels natural to use. Additionally, you can paste long text with basic formatting into the visual builder. Gutenberg is capable of automatically creating the paragraphs, headings and lists. You don’t need to create any element before. Very handy.

Available elements ⭐⭐⭐⭐

Gutenberg calls its elements blocks. Adding a new block is super easy, and there are more ways to do it. First, there’s one at the top left part of the fixed toolbar. Additionally, you can find one plus icon right below every block you added.

Blocks in Gutenberg, the Free WordPress page builder
Available Blocks in Gutenberg

Styling options ⭐⭐

Gutenberg offers minimal styling options for the elements. You can adjust the font size, color, and background color. But apart from these, there aren’t many options you can tweak. Nonetheless, they’re useful and nice to have, but it would be great if more were available. For example, I would have loved to be able to adjust the font family of the content I added. Unfortunately, Gutenberg offers no way to do that, it can only inherit it from the theme.

Templates ⭐⭐

Gutenberg offers a few selections of block templates under the Pattern tab. These are simple, but great looking layouts that can give you a head start. The designs are simple and there’s not much you can choose from. Nonetheless, they help you save time when you build your page.

Gutenberg block templates
Gutenberg block templates

Final thoughts about Gutenberg

Gutenberg is a simple, but easy to use tool WordPress offers to create nice looking pages. It works best with a theme, that does the heavy lifting when it comes to styling the page. Paired with such a theme, Gutenberg can beat any competition. However, if you pair it with a minimal theme, you’ll probably have a hard time creating the designs you want.

Elementor – the most popular free page builder plugin

Elementor - one of the best Free WordPress page builder plugins

Download

Elementor is the most popular page builder in WordPress.org’s repository. In fact, it’s one of the most popular WordPress plugins. Right now, the repository has only 7 plugins which have more than 5 million installations. And Elementor is one of these super popular plugins. Having so many users, Elementor managed to keep an impressive 5-star rating out of 5,465 reviews.

Interface of Elementor ⭐⭐⭐⭐⭐

Elementor offers a visual frontend editor to create pages. Many users prefer frontend editing, because they can see how the page is going to look like while they edit it. So, frontend editing saves time, because it removes two editing steps. You don’t need to save and refresh every time you want to take a look at the page you’re working on. Additionally, you can edit textual layers inline which is a great addition.

Interface of Elementor, the best free WordPress page builder
Interface of Elementor

The editor is divided into two main sections. First, there is the Elementor panel on the left side, where you can find the configuration options. For example, this is where you can name your page. Then there’s the wider section, which is the actual editing screen. This is the place you can drag widgets to from the left panel and see what you’ve created.

The Elementor panel has a handy search field to quickly find widgets. This helps speeding up the workflow, as you won’t need to locate the widget you want. Although, you might need to be a little familiar with the elements to use it effectively.

Available Elements ⭐⭐⭐⭐⭐

Page builders need to provide at least the most basic elements to fit into a modern website. Since Elementor is one of the best free WordPress page builder plugins, it offers them. You can create headings, add text, images, and buttons. Additionally, you have other handy widgets at your disposal. For example, the image carousel, counter, progress bar or tabs at your disposal. So Elementor doesn’t only offer the most basic widgets, it gives so much more.

Widgets in the best free WordPress Page builder, Elementor
Widgets in Elementor

There’s a huge list of widgets you can choose from to create your amazing looking Elementor page. These elements will help you create beautiful pages for your website in the long run. Additionally, if you would need more widgets, there are many plugins that offer them. Moreover, there are plenty of these plugins which are available free of charge.

Styling options ⭐⭐⭐⭐

Have you installed Elementor on your site for the very first time? I recommend setting up the typographies first. You can find them at Elementor Editor’s Settings Panel > Hamburger Menu > Site Settings. After that you can select these at any widget you add, speeding up your workflow.

Elementor Styling options
Elementor Styling options

There are many options you can use to style every element to your heart’s content. Although there are many settings, they are easy to understand. Even if you aren’t sure what an option does, you can try it with confidence and undo the change if you wouldn’t like them. While there are many styling options, there were a few things which I missed being able to set. For example, the line height can only be a pixel or em value. I’d have loved to simply set it to 1.5, but I couldn’t. The custom CSS giving option would have been a workaround for this. But that option is available in Elementor Pro only.

Templates ⭐⭐⭐⭐

Elementor offers a huge template library, but first, you need to create a free account at them. After that, you’ll have access to a bunch of great looking designs. You can import full pages which then you can customize to your heart’s content. Or you can import separate blocks and assemble the page piece by piece.

Connect to reach Elementor's Template Library
Connect to reach Elementor’s Template Library

There’s an incredible amount of beautiful designs you can choose from. It can be time-consuming to look at all available templates. Luckily, there’s a search option so you can try to find blocks or pages by related keywords. Additionally, at the right side of the Block templates, there’s a category selector. If you’re looking for contact or pricing sections, you can choose it there and see what’s available.

But there is one thing I don’t like about the templates popup. It’s the fact that pro templates are seamlessly mixed with the free ones. You can’t filter for the Pro or Free ones only. As a result, you can spend too much time trying to find a template you both like and can import.

Block templates in Elemento
Block templates in Elemento

You can also save your own designs as templates which you can easily import later. It’s handy when you have the same looking elements across your site, like a subscription or contact block.

Final thoughts about Elementor

Elementor is an exceptional page builder. It’s easy to learn to use, although it might take some time to master. In any case, Elementor allows you to build modern and great looking websites. It doesn’t matter whether you’re a beginner or a professional

Beaver Builder – one of the best free WordPress page builder plugins

Beaver Builder one of the best free WordPress page builder plugins

Download

Beaver Builder is another popular free WordPress page builder plugin. It powers over 300.000 websites, and has an impressive 5-star rating on WordPress.org out of 342 reviews. So, a lot of people use and like this plugin. Let’s see what the hype is all about!

The interface of Beaver Builder ⭐⭐⭐⭐

You can use Beaver Builder to build pages for your site in two ways. The first way is using the floating Content panel which you can drag anywhere. The second way is sticking the Content panel to the left or right sides of the browser. As a result, you can add and configure the elements on the left side, and see the result on the right.

Interface of Beaver Builder, the best free WordPress page builder plugin
Interface of Beaver Builder

Beaver Builder offers inline editing, which is very convenient to use. It’s easy to figure out how to add new elements, and configuring them is just as effortless. However, adding a new element makes a loading icon appear in the area where you drop it. Although it only lasts for a few seconds, I found it irritating. Additionally, I felt it was interrupting the editing process. Also, the drag’n’dropping of the modules sometimes produced interesting movements.

Available Elements ⭐⭐

Beaver Builder offers the bare minimum of elements, or modules as they call them. There’s only 5 available: audio, HTML, photo, text editor and video. Additionally, you can create rows to place content into. The WordPress widgets are also available to choose at Beaver Builder. This gives slightly more tools to work with. Still, this free WordPress page builder plugin has very few elements to offer.

Elements in Beaver Builder
Elements in Beaver Builder

You can use the Text editor to create headings, so you can structure your content properly. What’s more frustrating is that there’s no button module, at least in the Lite version. That’s a bummer because CTA plays an important role in a website’s conversion. Of course, if you have coding knowledge, you can create buttons using the HTML or Text Editor modules. But let’s face it: if you wanted to write code to have a button, you wouldn’t have used a page builder.

Styling options ⭐⭐⭐

Beaver Builder seems to expect the styling to be done from the theme’s end. By default, it inherits the layout the theme sets nicely. If you want to create a custom layout, you can use Beaver Builder’s options to do so. However, there’s no global, or page level styling. At the rows or columns you can only set text colors, but not font specific options, like size or family.

Beaver Builder styling options
Beaver Builder styling options

Templates

Many WordPress plugins offer quick access to some templates, which users can use to get a head start. It’s useful for those who are new to the plugin, or don’t have much design knowledge, or are in short of time. In Beaver Builder, templates are available only after purchasing a paid plan. So users of the Free plugin won’t be able to import any templates.

Final thoughts on Beaver Builder

Beaver Builder is a nice and easy to use free WordPress page builder plugin. However, it seems it’s aimed for developers, rather than the average WordPress users. In the free version, it’s not possible to create a Hero header, because there’s no option to create a button. Unless you code the button yourself, and I don’t think that’s acceptable from a visual builder in 2020.

Brizy – innovative free page builder plugin

Brizy - one of the best Free WordPress page builder plugins

Download

Brizy is a relatively new plugin, released in April 2018. The page builder plugin market is full of big fish like Elementor or Beaver Builder. On the paid front, there are plugins like Divi or Visual Composer. So new plugins need to offer something more, something new to be able to attract users. And that’s not an easy task.

Yet, Brizy has managed to earn more than 60.000 people’s trust in just two years. Additionally, it promises to offer a new and intuitive way of visual page building. This makes me curious to see if this free WordPress page builder can keep its promise.

Interface of Brizy ⭐⭐⭐⭐⭐

Like the other page builders, Brizy also has a visual frontend editor. It has a narrow panel on the left side of the browser window. This is where you can add new elements, adjust the order of the added blocks, or set the styling. The large right-hand side is for placing the content. As a result, the interface offers plenty of space to see the content you’re creating.

Interfaece of Brizy, the best free WordPress page builder plugin
Interfaece of Brizy

Brizy has inline text editing by default, which is very convenient to use. In fact, Brizy’s solution feels as natural as Gutenberg’s. And that’s a big achievement. I’ve tested Elementor, which also has inline editing, but it doesn’t feel as seamless.

Brizy inline editor
Brizy inline editor

Available Elements ⭐⭐⭐⭐

Brizy offers a handful of elements to create content with. You can create headings or paragraphs with the text module, or add a button to your page. You can also add images, icons, or videos. There are cool extras, like the counter or Google map elements. To sum it up, Brizy has all elements you’ll need to create a content rich website.

Elements in Brizy
Elements in Brizy

Styling options ⭐⭐⭐

Before you start creating your pages with Brizy, make sure you set up colors and text styles first. This will make the editing experience faster. In the text settings, you can find the most essential options. You can set the font size, family, weight, line height and letter spacing. Other options, such as the text-align, are available at the text element.

Styling options in Brizy
Styling options in Brizy

Templates ⭐⭐⭐⭐⭐

The page creation in Brizy starts with adding a new block. First, you need to choose whether you want to start from a template or create an empty block. In case you chose to add with an empty block, you can build your content from scratch. But even if you start with a template, you’ll be able to tweak anything you want.

Beautiful templates in Brizy
Beautiful templates in Brizy

There’s a total of 502 blocks you can choose from, and you can use them to build your page piece by piece. There are also 41 full-page layouts ready for importing. The only downside is that pro and free templates are totally mixed. As a result, it can take time to find what you can import in the free page builder.

Final thoughts on Brizy

Brizy is easy to use whether you have any developer knowledge or not. Additionally, its inline editing feels like a breeze and is very easy to get used to. Of course, there’s plenty of room for improvement. For example, I’d love to have more styling options. Nonetheless, I feel Brizy has created something unique.

Speed of the best free WordPress page builders compared

There are three key factors for creating a successful site. These are: a good copy, an eye-catching design, and a fast loading time. Most plugins you add to your site have an impact on your website’s speed. So you need to choose what you install carefully.

When you choose a page builder for your site you need to consider how much impact it has on your page’s loading time. A resource heavy plugin will have a negative impact on your site’s speed. And you haven’t even added your content yet.

To help you find the best free WordPress page builder plugin, I’ll compare their loading speed. In other words, I’ll check how fast the page you create with these plugins loads. Additionally, I’ll test how much weight they add to the page speed, and how many requests they make.

Testing environment

I wanted to run the speed test on a page that had the same content. So I built the layout of the Healthcare template in each page builder. I run the test using the Hello Elementor theme. When I run the tests, no other were active at the same time but the one I was testing. All images and fonts were the same in each builder. Additionally, I’ve cleared the cache before each speed test.

First I ran the speed test on the WordPress Sample page, to give you an idea about Hello Elementor theme’s speed. The internet speed used for the tests was 10Mb/s.

Speed test results

Hello Theme Gutenberg Elementor Beaver Builder Brizy
Loading time 198ms 361ms 2.05s 1.26ms 1.42s
Page size 90.0kb 230kb 964kb 418kb 1.5 MB
Requests 6 17 35 21 26

Gutenberg is an obvious winner here. It loads faster than any of its competitors, weighs less and makes fewer requests. Of course, it’s much more limited than any of the other plugins in this article in terms of styling. So, based on its speed alone, Gutenberg is the best free WordPress page builder plugin.

But we should look deeper than the page speed. Take the styling options and available elements into account as well. In this case, Gutenberg won’t keep its first place. With these in mind, the best free WordPress page builder plugin is either Elementor or Brizy. Elementor loads slower, but it weighs less. Brizy, on the other hand, is faster, but heavier. So, if you need a good page builder for your site, I recommend giving Elementor or Brizy a try.

Which one is the best free WordPress page builder plugin?

If you still haven’t decided which plugin to pick, here’s how the scores stack up (in order):

Gutenberg Elementor Beaver Builder Brizy
Interface ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Available Elements ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐
Styling options ⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐
Templates ⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Speed ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐
Total 15/25 21/25 13/25 20/25

Based on these scores, the best Free WordPress page builder is Elementor. But it’s closely followed by Brizy. If you start a new project, I recommend checking these out first. But it’s also worth considering whether Gutenberg would be enough.

Pricing

As mentioned before, I wanted to take a look at the paid version of the best free WordPress page builder plugins. You might want to go pro later, even if you’re satisfied with the plugin now. Or you might upgrade because you want to support the developers of the plugin.

As Gutenberg is part of WordPress core, it has no premium plan you could upgrade to. But if you should need more blocks or templates, you can find a bunch of free or premium plugins to help you with that.

However, there’s a premium version of Elementor, Brizy and Beaver Builder. You can choose from the following pricing options:

Elementor Beaver Builder Brizy
Price/year $49 $99 $199 $99 $199 $399 $49 $99
Domain license 1 site 3 sites 25 sites 3 sites

What more do you get if you buy the premium plugin?

  • Elementor: You get 50 more widgets to build. Also, 300+ more templates, and 10+ full website kits. The Theme, WooCommerce and Popup Builder is also available in one of the paid plans.
  • Beaver Builder: Each Beaver Builder package is different. In the cheapest plan you get Premium Modules & Templates, and pro support. Additionally, in the middle package, you get the Beaver Themer and multisite compatibility. What’s more, the highest package offers White Labeling.
  • Brizy: The Pro version of Brizy gives you access to 250+ Premium Designs. You can also access Brizy Cloud, where you can get amazing new templates from.

Final Thoughts

Choosing a WordPress page builder plugin for free is never easy. There are just too many options, any not all plugins are equally great. Additionally, they might not be a good fit for your website.

So, what’s the best free WordPress page builder? Either of these four plugins can be the best for your project. If you have a theme with nice styling, Gutenberg would probably be enough for your site. As a result, your site would load faster than with any other plugins I’ve tested for this article.

But if you don’t have such a good theme, or you prefer to create everything by yourself, you still have good options. You can choose Elementor or Brizy as the free page builder for your site. Both plugins offer a great number of features to create an amazing website.

The post Best Free WordPress Page Builder Plugins Compared 2021 appeared first on Smart Slider 3 — WordPress Plugin.

]]> How to Create WordPress Call to Action? https://smartslider3.com/blog/wordpress-call-to-action/ Wed, 20 May 2020 11:39:45 +0000 https://smartslider3.com/?post_type=blog&p=22708 When you create a WordPress website, you have a single goal in mind which you want your website to achieve. Any content you add to your website, whether they are images or texts, need to serve this goal. For example, the goal of a photographer’s website is to get new clients. For this reason, the […]

The post How to Create WordPress Call to Action? appeared first on Smart Slider 3 — WordPress Plugin.

]]>
When you create a WordPress website, you have a single goal in mind which you want your website to achieve. Any content you add to your website, whether they are images or texts, need to serve this goal.

For example, the goal of a photographer’s website is to get new clients. For this reason, the photographer creates a page for their portfolio. They can also create another page to read the previous clients’ testimonials. Most importantly, they need a contact page, where soon-to-be clients can reach them.

But how to get the visitors to find these pages? With the power of the WordPress call to action!

What is a Call to Action button?

The Call to Action button, also known as CTA is a type of button, tells the visitor to do something specific. For instance, if you sell a product or service, you can place a CTA to your homepage to urge the visitor to buy it. A good CTA can increase your conversions and give you a heavy revenue boost.

wordpress cta book a class
A simple but effective WordPress Call to Action prompting the visitor to book a class

How can I use a Call to Action button?

CTAs are super versatile design elements, so you can use them for any purpose that suits your website’s main goal. For instance, if you have a newsletter or an email list, create email opt-ins with a CTA. Do you have a social media page which they should check out? Use A CTA button to send the visitors there!

How to create a good CTA?

Let’s make it simple: a good CTA button stands out. If the visitor can’t see your call to action button, they won’t click on it. Play with the colors, to make sure it stands out from the background. Consider creating a couple of variations, and split test your call to action buttons to see which one works best.

wordpress call to action fitting layout
The CTA button fits nicely to the layout, yet stands out, which makes sure that the button will be clicked

Choose the perfect label

Another way to create a good CTA is to craft the button label carefully. A simple, yet easy-to-understand text like “Buy now” is much more effective than a long and complex text. Of course, you don’t have to aim for two words long CTAs, just make sure your message is clear and simple.

For instance, let’s see the CTA on our Rotating Banner demo. The label isn’t just two words long, it says: “Download Now – It’s Free”. But it’s still encouraging, because it says the download is free, and who doesn’t like free stuff?

wordpress call to action long label
The orange call to action button’s label encourages the visitors to click.

Try to use effective words, like “now”, “free”, “get”, “try” or even use numbers to get more clicks. For instance, use “Buy now – 60% off” instead of “Buy now and get a discount”.

Always test your CTA

Don’t make up your mind too early about your perfectly designed and labelled CTA. Be sure to split test it to see if it performs the way you want it to. It’s also useful to monitor and track your conversions with analytic plugins. If your CTA’s click rate is low, it means your CTA isn’t as effective as it should be.

If you believe your CTA isn’t effective, try varying the colors or find a more suitable label to deliver your message.

wordpress cta pink button
The large, pink button on the dark blue background is impossible to miss.

How to add a Call to Action button to your WordPress website?

The most popular WordPress themes have the ability to create gorgeous CTA buttons. The upside of this is that the button will surely fit your theme’s layout with minimal effort. On top of that, these CTA designs are made by the designers of the theme. As a result, they’ll look gorgeous on your site lowering the time you’ll need to spend on split testing the look. The downside is that you’ll need to create a new button everytime you want a new CTA.

avada theme wordpress call to action
WordPress Call to Action button on Avada’s demo

Creating a CTA with WordPress plugins

If your theme doesn’t have the option to create CTA, visit the WordPress.org repository. You’ll find many call to action plugins there to help you create gorgeous CTAs. After setting up your CTA with these WordPress plugins, you’ll probably get a shortcode to display it.

This means you don’t have to create your button on every page where you want to use it. Using a plugin has another great advantage. Your CTA actually exists in one place only, so if you need to make changes, you can do it at one place. For instance, if you want to try a more effective label, you won’t have to go through all your pages. You only need to go to your Call to Action plugin, do your edits and you’re done!.

Use Gutenberg to create a Call to Action button

If you use Gutenberg, WordPress’ block based editor, you don’t even need a plugin for creating a CTA button. Gutenberg has its own Button block which is perfect to create your next amazing call to action!

With Gutenberg, you can configure your button in a visual way, like you can edit any other block. You can select different colors for the background and text. You can also choose the button style, which can be the default “pill” type of button, outlined or square. That’s enough for any kind of button you’ll want to create!

gutenberg cta
Create a Call to Action button with Gutenberg editor’s Button block!

Creating Call to Action with Smart Slider 3

Smart Slider 3 is a powerful tool to create gorgeous sliders and blocks for your website. You can create fully responsive sliders and you can add Call to Action buttons to them. Best of all, you don’t even need the Pro version of Smart Slider 3 for this. Even with the free version of Smart Slider 3 you can create eye catching CTA for your WordPress site.

wordpress cta with smart slider 3
CTA button created with the Free version of Smart Slider 3 that tells the visitor to learn more

How to create a gorgeous CTA with Smart Slider 3?

Smart Slider 3 makes it super easy to create your own CTA. Simply create a new slider, add a slide and put down a button layer. You can completely customize the button to create a converting CTA. For example, you can change the color and font size to create the perfect WordPress call to action for your site.

The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

Additionally, Smart Slider 3 has a bunch of great looking presets for you to choose from. You can also save your own preset for later use, which is super hady.

Once you’ve created the perfect button for your slider, all you need to do is publish this slider to your pages. Smart Slider 3 plugin offers many ways to do that. You can copy and paste the slider’s shortcode anywhere, or use the Gutenberg block to display your slider. Good news is that if you use a page builder, like Divi or Elementor: Smart Slider 3 has its own module for the most popular page builders!

Conclusion

Call to Action buttons are the best tools at your disposal to tell your visitors what you want them to do. By leading them to take action and complete your site’s goal, you can boost your sales fast. So, what are you waiting for? Start creating WordPress Call to Actions now!

The post How to Create WordPress Call to Action? appeared first on Smart Slider 3 — WordPress Plugin.

]]> What are the best Gutenberg plugins? https://smartslider3.com/blog/best-gutenberg-plugins/ Sun, 12 Apr 2020 11:00:42 +0000 https://smartslider3.com/?post_type=blog&p=23496 Many people say Gutenberg is the future of WordPress, while others disagree. If you check the reviews of the Gutenberg plugin, you’ll find lots of people who dislike and eager to disable it. Well, bad news for them: Gutenberg isn’t going to go away anytime soon. In fact, more and more developers create new Gutenberg […]

The post What are the best Gutenberg plugins? appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Many people say Gutenberg is the future of WordPress, while others disagree. If you check the reviews of the Gutenberg plugin, you’ll find lots of people who dislike and eager to disable it. Well, bad news for them: Gutenberg isn’t going to go away anytime soon. In fact, more and more developers create new Gutenberg plugins to extend its functionality.

What is the Gutenberg editor?

Before you can learn about the best Gutenberg plugins to add to your site, let’s see what Gutenberg is. Gutenberg is WordPress 5.0’s new editor to create content for your site. Gutenberg brings a new idea to create content: using blocks. What’s a block? A heading, a paragraph of a text or an image. To make it simple, a block can be anything you can add to your page or post content.

Gutenberg is a visual editor and it’s super easy to use. It allows fine-tuning of content in a way that was only possible with shortcodes before. The future is the visual editing and Gutenberg does a marvelous job at supporting this.

A nice touch for WordPress theme developers: Gutenberg allows customizing its editor. They can make the backend editor look and feel like a frontend editor. For example, Gutenberg can use the font family and size at the backend, what the frontend uses. Theme developers can change the content width, set background color, and many more.

How to use Gutenberg?

When you create a new post or page in WordPress 5.0 or above, Gutenberg will open. Using its visual editor, you can write your next most trending post, or create a stunning page. Everything is visual and live, so you’ll see the result right there.

Clean Gutenberg editor interface
Clean Gutenberg editor interface

Using Gutenberg couldn’t be simpler. Type the title of your post or page to the large “Add title” field, then start creating content below. You can use many different blocks to create your content. You’ll probably use the paragraph, heading, image and button blocks the most. But you can easily add a list, video or a simple gallery with Gutenberg.

What are the best WordPress Gutenberg plugins?

Every website is unique and has its own needs. Because of that, many developers have created custom blocks for the editor and released it as a plugin. As a result, many amazing WordPress Gutenberg plugins were created for the community.

This means you will find what you need for your website for sure. On the downside, having many plugins to choose from makes it complicated to find the plugin you are looking for. To help you with your quest, here’s a list of some of the best Gutenberg plugins you can find. Best of all, they’re all free plugins. So let’s dig in!

1. Gutenberg Blocks – Ultimate Addons for Gutenberg

Gutenberg Blocks

Download

Ultimate Addons for Gutenberg is one of the most popular plugins for Gutenberg. The plugin offers many useful widgets. Additionally, after installing Ultimate Addons plugin, you won’t need to waste time to figure out which new content was added. The developers have created their own panel, where their blocks are easily accessible.

Ultimate Addons blocks in Gutenberg Editor
Ultimate Addons blocks in Gutenberg Editor

Some of the coolest blocks you can create: advanced heading, testimonial, social share, content timeline, blockquote (with an option to tweet the quote). There’s also a table of contents block which is useful for bloggers. It automatically reads every heading from your post and creates a table of contents for easy navigation. The block updates itself, so you don’t have to maintain it. Gutenberg blocks is really trying to be the ultimate blocks plugin for Gutenberg.

2. Kadence Blocks – Gutenberg Page Builder Toolkit

Kadence Blocks

Download

Kadence Blocks is yet another popular WordPress Gutenberg plugin. In this plugin, you can enable or disable the blocks you need. This way you can keep your editor nice and clean, without showing options you’ll never use. They also create their own panel to access their blocks in one place.

Some of the blocks Kadence Blocks plugin offers
Some of the blocks Kadence Blocks plugin offers

Some of the coolest blocks they have: Spacer/Divider, Advanced Button, Tabs, Info Box. You can also create an accordion layout where you can adjust the content of each tab by moving any block. I like how well this integrates with the Gutenberg experience.

3. Atomic Blocks – Gutenberg Blocks Collection

Atomic Blocks

Download

Atomic Blocks offers a handful of useful blocks to enhance your posts and pages. The plugin’s header shows some interesting icons which I have expected to see in Gutenberg. After seeing their colorful banner, it was disappointing to see that their icons are so simple.

Blocks in Atomic Blocks

Some of the best blocks are: Notice, Drop Cap, Profile Box, Sharing (you can use this to share on Facebook or Twitter). They integrate with Mailchimp and have a handy block to allow adding a newsletter subscription block. The pricing block they have is one of the coolest blocks I’ve seen.

4. Stackable – Gutenberg Blocks

Stackable

Download

Stackable – Gutenbergs Blocks extends your Gutenberg editor with a list of colorful blocks.

Stackable adds a handful of new Gutenberg blocks
Stackable adds a handful of new Gutenberg blocks

Some of the coolest blocks are: Notification, Blockquote, Team Member and Call to Action Button. They also have a separator block that looks like the Shape dividers in Smart Slider 3. My favorite block from them is their Card block. You can use it to create a block with an image, heading and description.

5. Advanced Gutenberg

Advanced Gutenberg

Download

Advanced Gutenberg by JoomUnited is yet another WordPress Gutenberg plugin. It promises to add all the missing blocks and configuration you need to build professional websites. Indeed, they offer some unique but useful blocks to enhance your website.

Advanced Gutenberg blocks
Advanced Gutenberg blocks

Some of the coolest blocks are: Advanced Accordion, Video, Count Up and Social Links. Another block I loved is the Login/Register Form block. Many people want to handle the login and registration outside of the /wp-login.php for some reason. Advanced Gutenberg Blocks makes it easy to create a page and have a login/registration form inside. For this reason, many website owners will love JoomUnited’s plugin.

6. Gutenberg Blocks and Template Library by Otter

Gutenberg Blocks and Template Library by Otter

Download

ThemeIsle’s Gutenberg Blocks plugin starts with a cool tour to learn the basics of their plugin. Some of the options they show are targeting developers (like the option enable the Custom CSS module), so it might worth disabling it during the tour.

Some blocks Gutenberg Blocks and Template Library by Otter creates
Some blocks Gutenberg Blocks and Template Library by Otter creates

Some of their best blocks are: About Author, Service and Pricing. What’s cool in this plugin is that they don’t only offer blocks. They offer templates (created with Gutenberg blocks) to help those who don’t have an eye for design. To add a template, add a new section under the Otter panel.

7. WooCommerce Blocks

WooCommerce Blocks

Download

Ecommerce is blooming. Because of this, it’s not possible not to add a Gutenberg plugin with eCommerce features to our list. Meet WooCommerce Blocks which is the most popular Gutenberg plugin to add WooCommerce blocks to your post or pages.

WooCommerce blocks are super useful for every webshop owner
WooCommerce blocks are super useful for every webshop owner

The most notable blocks are: Featured Product, On Sale Products and Products by Category. I love the Reviews by Product block, as it’s very useful for promoting any product. The Newest Products block is also great, especially for landing page building.

8. Page Builder Gutenberg Blocks – CoBlocks

Page Builder Gutenberg Blocks – CoBlocks

Download

CoBlocks has some interesting features some of which target business owners. For example, they have a Hero block which you can use to create a beautiful hero section for your website. There’s also a Contact form block which you can use to add a simple contact form to your page. A contact form can help you get new clients (e.g. if you’re a photographer) so they are important to have.

A few blocks CoBlocks will enhance your website
A few blocks CoBlocks will enhance your website

If you run a restaurant, check out CoBlocks. Their Food Item block will be super useful to display your menu. Their Social Profiles block seems to allow the most social sharing features compared to the other plugins on this list.

What’s the future of Gutenberg?

Gutenberg is already fantastic, but still has lots of room for improvement. As a matter of fact, there are many ways to move forward with such a versatile plugin. Luckily, the developers are full of amazing ideas about the future of Gutenberg.

What are these cool ideas? At the moment, Gutenberg is only responsible for content creation at posts and pages. The developers’ plan is to extend this and make Gutenberg the menu and sidebar editor as well. In other words, they plan to replace the current widget system with Gutenberg blocks. This sounds like an excellent idea, and we’re curious to see how it goes.

Conclusion

Gutenberg block editor is the future of creating content in WordPress. It will make the editing experience consistent across different parts of your site. Because of that, WordPress will be easier and faster to use and learn for everyone. As a result, more and more people will be interested in building their site with WordPress.

The only question is how long will it take for Gutenberg to revolutionize how you can work with your WordPress site.

The post What are the best Gutenberg plugins? appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Gutenberg and Smart Slider 3: How to Add Sliders to WordPress https://smartslider3.com/blog/gutenberg-and-smart-slider-3-how-to-add-sliders-to-wordpress/ Wed, 05 Sep 2018 08:00:19 +0000 https://smartslider3.com/?post_type=blog&p=10662 Soon the Gutenberg editor will officially become part of WordPress core. What does this mean for sliders in WordPress? Well, it means a couple of things: Gutenberg sliders will be easier than ever to add to pages and posts, and you’ll be able to preview all your sliders in the Gutenberg editor. In this post, […]

The post Gutenberg and Smart Slider 3: How to Add Sliders to WordPress appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Soon the Gutenberg editor will officially become part of WordPress core. What does this mean for sliders in WordPress? Well, it means a couple of things: Gutenberg sliders will be easier than ever to add to pages and posts, and you’ll be able to preview all your sliders in the Gutenberg editor.

In this post, I’ll walk you through the basics of Gutenberg so you can see how it works, and then I’ll show you how to add a slider to a post using the Gutenberg editor. Lastly, we’ll take a look at some of the different types of sliders you can add using Gutenberg that make great additions to posts.

What is Gutenberg?

Gutenberg will soon be the new visual editor for WordPress. The existing visual editor hasn’t changed much at all since WordPress was first released back in 2003. Since then, other platforms have come along with simplified writing experiences that make WordPress look old-school. Basically, Gutenberg is WordPress’ attempt at catching up with the cool kids.

Here’s what the classic editor and the Gutenberg editor look like side-by-side:

Classic WordPress editor and Gutenberg editor
Classic WordPress editor and Gutenberg editor

When you put together a page or post with Gutenberg you use “content blocks,” which are basically blocks of text, headings, images, and other media. With blocks, you can achieve what might otherwise require shortcodes or custom HTML.

Work on Gutenberg started in early 2017 and it’s still a work in progress. You can download it as a plugin from WordPress.org and try it out. It’s slated for release with WordPress 5.0 but there’s no set date. Some say it might be released later this year or even early next year.

So far, reviews have been mixed—people either love it or hate it. In fact, reviews are split down the middle with an average 2.5 stars.

I’m firmly in the “love it” camp. I’ve had Gutenberg installed on my site for a few months now and it’s been cool seeing how the interface has changed with every update.

As a writer who’s been working with WordPress for many years, I think Gutenberg is a breath of fresh air and well overdue.

I mean, why shouldn’t WordPress be as easy to use as Medium?

Working with Gutenberg and Content Blocks

After installing and activating Gutenberg, it will become the default visual editor for your WordPress site. You’ll notice a new Gutenberg menu item at the bottom of the sidebar, which includes a demo (which we’ll explore below).

Gutenberg menu in sidebar
Gutenberg menu in sidebar

You’ll also see links underneath your posts that let you switch between using Gutenberg and the classic editor.

Edit your post in Classic Editor
Edit your post in Classic Editor

If you haven’t used it yet, let’s take a look at how it works using the demo post:

On the right, you’ll see the sidebar has been copied over from the classic editor. It hasn’t changed all that much and still includes all the usual options, such as updating visibility, and post time and date. Underneath, you’ll see meta boxes for categories, tags, and featured image, as well as excerpt and discussion.

The “Publish” button has been moved to the top right, and you can still preview posts. When you click the click cog, it hides the sidebar so there’s even more room to write.

Gutenberg Editor
Gutenberg Editor

If you’re wondering how to switch to the code editor, just click on the three dots in the top-right and you’ll see the option there. With all this familiar kind of stuff out of the way, let’s dive into working with content blocks.

Using Content Blocks

On the left you’ve got a big ol’ space for writing. It’s especially convenient for laptop users (like myself!) who struggle using the classic editor’s bulky interface.

To access content block, click on the “+” icon in the top-left. You’ll see “most used” blocks displayed first, but when you scroll down you can access other blocks for formatting, layout, widgets, and a ton of different embeds for everything from YouTube and Twitter to Spotify and SoundCloud.

Blocks in Gutenberg Editor
Blocks in Gutenberg Editor

Let’s take a look at how these blocks work. The demo already has a title and when you hover over it, you can click anywhere within the block to edit the text. Clicking on the block also brings up the option to edit the post’s permalink.

Edit the permalink of the post
Edit the permalink of the post

Underneath the title is a cover image block, which is a new concept for WordPress. This type of block lets you display text over an image, or just an image without text. When you click on this block, it displays options at the top for editing the image, including replacing it and alignment.

Options also pop up for editing the text to make it bold, italicized, or to add a link. Strangely enough, there’s a fourth option for adding a strikethrough.

Editing the text in Gutenberg
Editing the text in Gutenberg

Adding and editing text is super intuitive. Gutenberg treats each paragraph of text as a separate block, so when you type something and hit ‘enter,’ a new paragraph block will be automatically created so you can continue writing.

When you click on a paragraph of text, you get options for aligning and formatting the text, and also adding links and strikethroughs.

Adding a link to your text in Gutenberg
Adding a link to your text in Gutenberg

Overall, Gutenberg is really easy to use and it takes no time at all to work out how to use it. I would suggest installing it on a staging site before adding it to your live site, just so you can get a feel for how it works before you start playing with post on your live site.

Adding Gutenberg Sliders to WordPress

The Smart Slider 3 team have been working hard since Gutenberg was announced to ensure that sliders are compatible.

And I’m happy to tell you Smart Slider 3 is compatible with Gutenberg! When you update SS3, you’ll see a new slider content block the next time you use Gutenberg.

Here’s how to add Gutenberg sliders to WordPress using the new Smart Slider 3 content block:

1. First up, install (or update) Smart Slider 3 so you’re running the latest version.
2. Click on Smart Slider in the sidebar, create a New project and choose the Start with a Template option.

Import a template in Smart Slider
Import a template in Smart Slider

3. Choose the template you would like to use. I’m going to go for a simple image slider.

Smart Slider Templates
Smart Slider Templates

4. You’ll be redirected to the editing screen for your imported slider. Go ahead and make any changes to your slider.

5. When you’re ready to add your slider to your post, open it up in Gutenberg and click the content blocks icon. You’ll see Smart Slider 3 has been added to your “Most Used” list of blocks.

Smart Slider 3 block in Gutenberg
Smart Slider 3 block in Gutenberg

6. When you click it, a new slider block will be added to your post. If you don’t have a block in your post currently selected, by default your slider will be inserted at the bottom of the post. If you do have a block selected, it will be inserted underneath your highlighted block.

Select slider in Gutenberg block
Select slider in Gutenberg block

7. Click Select Slider and your sliders for Smart Slider 3 will be displayed. Choose your slider and it will appear in your post.

Slider in Gutenberg post
Slider in Gutenberg post

8. There’s one more easy way you can add sliders to your post: When you add a new paragraph content block, you’ll see three little icons in the bottom-left of the block, including the Smart Slider 3 icon. When you click it, you can then insert a slider.

And that’s all you need to do to add a slider to a post using Gutenberg. Even easier than copy+pasting a shortcode, if you ask me!

The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

So Many Smart Slider 3 Possibilities!

Now that you know how to add sliders to Gutenberg, let’s take a look at all the different kinds of sliders you can add to your posts and pages.

1. Gallery Slider

Let’s start with an obvious one: image galleries. Much like the example I used above, adding an image slider to a post lets you display a series of images for your readers. For example, if you have a travel blog, you could display several photos from your latest holiday to a Gutenberg slider.

Gallery Slider
Gallery Slider

2. Lightbox Slider

If you’ve got limited space for displaying a slider, you can enable the lightbox slider option in Smart Slider 3 so that when users click an image it will be displayed in a larger view, taking up most of the screen. This is a particularly useful feature if the container width for your posts is fairly narrow, or you’re a photographer and want to give your images as much room for display as possible.

Lightbox Slider
Lightbox Slider

3. Parallax Effects

Want to quickly and add some kind of parallax effect to your website? You can do it with Smart Slider 3! This is one of my favorite effects and it’s so incredibly easy to do with Smart Slider 3. All you need to do is create a Gutenberg slider with parallax enabled and when you add the slider to a post you’ll get a stunning parallax effect.

Parallax Effects

4. Latest Blog Posts

A great way to direct visitors to other content on your blog is by display related posts. But what if you just want to highlight your latest posts? With Smart Slider 3, you can create Gutenberg sliders that display dynamically generate content such as the latest posts on your blog.

Latest Post Carousel
Latest Post Carousel

Conclusion

Well, there you have it. If you were worried that it would be difficult adding sliders or blocks with Smart Slider 3 to WordPress with Gutenberg, you can rest assured that it’s even easy to do than it is with the classic editor!

I hope you’ve found this tutorial useful. If you have any questions or need any help at all adding sliders to WordPress with Gutenberg, leave a comment below!

The post Gutenberg and Smart Slider 3: How to Add Sliders to WordPress appeared first on Smart Slider 3 — WordPress Plugin.

]]> 13+1 Design Predictions for WordPress Themes in 2018 https://smartslider3.com/blog/13-design-predictions-wordpress-themes-2018/ Wed, 31 Jan 2018 10:33:20 +0000 https://smartslider3.com/?post_type=blog&p=5272 Around this time of year, articles predicting web design trends are a dime a dozen, they’re everywhere. So I thought I’d jump on the bandwagon and write another one. Original, right? The only difference is that this post focuses specifically on what’s happening in the WordPress world. Because there’s a helluva lot going on right […]

The post 13+1 Design Predictions for WordPress Themes in 2018 appeared first on Smart Slider 3 — WordPress Plugin.

]]>
Around this time of year, articles predicting web design trends are a dime a dozen, they’re everywhere. So I thought I’d jump on the bandwagon and write another one. Original, right?

The only difference is that this post focuses specifically on what’s happening in the WordPress world. Because there’s a helluva lot going on right now. Gutenberg, mostly. ThemeForest is still dominating as the go-to marketplace for themes. Page builders aren’t going anywhere. Then there’s the REST API and the Tide project.

In putting this post together, I looked at hundreds of themes to see what’s hot and what’s not, and talked to WordPress designers and developers to gauge their thoughts on this year’s theme and design trends.

Here’s what I found.

1. Gutenberg

Gutenberg. Everybody’s talking about it. So I can’t not mention it first. Whether you love it or hate it, 2018 is going to be the year of Gutenberg. It’s slated for inclusion with WordPress 5.0, which at the time of writing doesn’t have a release date, just sometime this year.

If you’ve been living under a rock during the past 12 months, Gutenberg is basically a new page builder that will add content block and page builder-like functionality to WordPress. When in use, it will replace TinyMCE as the default content editor.

Gutenberg editor interface
Gutenberg editor interface

There’s been a lot of healthy debate going on around Gutenberg. WordPress co-founder Matt Mullenweg has been pushing for it and you can read his thoughts on it here: We Called it Gutenberg for a Reason. WP Tavern has published an exhaustive collection of posts and conversations about Gutenberg here: A Collection of Gutenberg Conversations, Resources, and Videos.

Since 2010, there’s been a default WordPress theme released each year with the exception of 2017. Mullenweg said the decision to skip a year was to “keep the focus on the focuses,” for WordPress core last year, which were the REST API, the Editor and the Customizer. There will be a default this this year, however, with Mullenweg promising at WordCamp US that there would be “extra cool stuff for next year” in the Twenty Eighteen default theme.

The upcoming merger of Gutenberg into core has kept theme developers on their toes, particularly those that have products with drag and drop. Robby McCullough, co-founder of Beaver Builder, said the page builder was “in a bit of a limbo period awaiting the arrival of Gutenberg.”

“The initial release of Gutenberg is not going to provide an alternative for what Page Builders are doing now, but we know the core team is going to tackle site customization next. Our strategy is to double down on developers and web professionals. Big names in WordPress like WP Engine and Crowd Favorite trust and use Beaver Builder. We want to continue to focus on stability and features that cater to professionals and power users.” – Robby McCullough, Beaver Builder

2. More Hand-Drawn Illustrations

As far as actual design trends go, let’s kick off with illustrations and custom graphics, and how we’re seeing more of both. In past years, developers and designers have relied heavily on stock photography to fill out imagery in themes. But heading into 2018, we’re seeing the work of illustrators and graphic designers take center stage.

Take web host Kinsta‘s recently redesigned homepage, for example. The completely custom graphics are eye-catching to say the least. Imagine if they’d used a stock photo instead?

Kinsta’s site redesign uses custom graphics.
Kinsta’s site redesign uses custom graphics.

Brian Jackson said the competition in any WordPress niche or space was pretty fierce and to stand out, having the best features or prices wasn’t enough.

“Your design, brand, and illustrations also need to catch people’s attention. When our team discussed the idea of needing a complete refresh, there was no hesitation in outsourcing this to a professional local design agency. Even three months after launching our new site and branding we’re still working with the agency and designers to help improve other areas of our service, such as the UI in our hosting dashboard. Unless you have amazing in-house designers, let the professionals do what they do best! Working with an outside agency was a great investment for us, both timewise and getting the quality of work we wanted.” – Brian Jackson, Kinsta

It’s interesting that more and more WordPress companies are using the talents of illustrators. WPMU DEV and Yoast, for example, both have in-house illustrators on staff who create all of their custom graphics, animations and blog post feature images.

Julian Savio, the designer who creates all of WPMU DEV’s illustrations, said illustrations were able to trigger interest and create instant connections with people in a way that stock imagery couldn’t.

“Unlike stock photography, illustrations can be be uniquely created to explain complex topics, emphasize an article’s theme, or simply created to compliment a client’s site – something that would be very costly and time consuming to achieve even with an in-house photographer.” – Julian Savio, WPMU DEV

Outside of WordPress, one of my favorite examples of how illustrations have been used effectively is the meditation app Headspace. As John Moore Williams describes in his design trends round-up for 2018, “illustrations can be very powerful in bringing more abstract concepts to vivid life.”

Williams notes that illustrations can neatly resolve representational challenges posed by photography. In recent years, off-line organizations have scrambled to ensure any photography they use features a diverse mix of people. You’ll notice that Headspace’s illustrations leave specifiers like race, gender, nationality, and much more undefined, making it easier for us, as Williams notes, “to project ourselves into the role of that lone thinker, contemplating the creative possibilities illuminated by a guiding light.”

Headspace uses illustrations that don’t define race, gender or nationality.
Headspace uses illustrations that don’t define race, gender or nationality.

3. Bolder Typography Choices

Big, bold typefaces have been on trend for a couple of years now and you can expect to see more of it this year. Not only are bigger fonts ridiculously eye-catching and hard to miss, but they fill white space well and allow businesses focus their message.

The year focus of Abcdr of Sound's Rap Album of the Year round-up couldn't be clearer thanks to a clever use of bold typography.
The year focus of Abcdr of Sound’s Rap Album of the Year round-up couldn’t be clearer thanks to a clever use of bold typography.

ThemeFuse’s Dimi Baitanciuc said it wasn’t too long ago when using custom fonts on the web meant having to include them as rendered images with JavaScript.

“It was a mess. Now you just embed Google Fonts (it’s free), Typekit (if you want a premium top notch option) or even a custom font you purchased. The access to thousands of custom fonts empowered designers to create very cool typography on the web. I think typography will always be an important aspect, and we’ll continue to see great typography in websites in 2018.” – Dimi Baitanciuc, ThemeFuse.

Ztian Miller uses huge font sizes for his portfolio.
Ztian Miller uses huge font sizes for his portfolio. Click through to check out his unique portfolio.

Serif fonts are also everywhere right now. They’re classy and bring to mind feelings of elegance and literary polish, both of which are evident in Themes Kingdom’s Collecto theme:

Theme Kingdom's Collecto theme exclusively uses serif fonts.
Theme Kingdom’s Collecto theme exclusively uses serif fonts.

4. Broken Grid Layouts

Designers are breaking free from the constraints of grids, creating rule-breaking layouts with images and text that overlap and converge. Some designs even look like they are unintentional errors that are the result of broken CSS.

A quick scroll through ThemeForest and you’ll see the majority of themes play it safe, sticking to the same ‘ol layouts they’ve been using for years and trying to secure sales using tried and trusted designs techniques. A bit boring if you ask me. However, some themes like Albert are embracing modern trends.

The Albert theme overlaps text and images, creating a "broken" appearance.
The Albert theme overlaps text and images, creating a “broken” appearance.

Outside of WordPress, sites like Surfers Against Sewage and Roccafiore Winery use broken grids more subtly.

The Surfers against Sewage website takes a more subtle approach to breaking the grid.
The Surfers against Sewage website takes a more subtle approach to breaking the grid.

5. CSS Grid

“…the web is about to become a much more beautiful place than what we’re accustomed to,” according to Robin Rendle on CSS-Tricks who goes on to explain that CSS Grid is the “first real layout system for the web.”

“It’s designed for organizing content both into columns and rows and it finally gives developers almost God-like control of the screens before us. That means that we can finally ditch decades of hacks and workarounds for setting elements on a web page – ultimately it means that complex layouts and beautifully typeset pages are now not only possible but easy and maintainable.” – Robin Rendle, CSS-Tricks

Themeco’s Kory Wakefield, a lead developer for the popular X theme, said that with all the incredible new layout power that CSS Grid offered, he was excited to see what creative solutions developers would come up with to age-old layout problems, not to mention the potential for new design patterns and approaches compared to flexbox.

“I might even go so far as to say that using CSS grid for all layout considerations is better in terms of consistency, a more readily apparent mental model, and greater control over the relationships between cells across rows. I also love that I can create “self-referential” layouts that respond to element size rather than global media queries using CSS grid’s minmax()function. It gives me just a tiny glimpse of what using “container/element queries” down the road might be like if we ever get to see such features developed, and it’s a very powerful tool to have at your disposal.” – Kory Wakefield, Themeco

6. Brutalism and “Ugly” Websites

Big, bold blocks of web safe colors, lots of white space (though it usually isn’t white), color combinations you’d never think to use (think blue and pink), and even links that are hard to find… yes, you’ve stumbled across a site with a brutalist design.

Brutalism comes from the French word for “raw”. At first, many brutalist websites look like a horror show of random images and clashing colors and fonts. But there is some method to the madness. Well, sort of. Interestingly, fashion websites such as Gucci and Fiorucci have embraced this trend.

Whoever designed the Fiorucci website has brought scrolling marquees back, baby. Scroll to the bottom of the homepage to see the marquees in action.
Whoever designed the Fiorucci website has brought scrolling marquees back, baby. Scroll to the bottom of the homepage to see the marquees in action.

7. Louder, More Vibrant Colors

Dropbox made a splash and got designers talking when it launched its redesigned website, surprising everyone with its bold use of color, a huge departure from its previously clean design.

The redesigned Dropbox.design website is bold, to say the least.
The redesigned Dropbox.design website is bold, to say the least.

We’re going to see an excess of colors online this year as designers say goodbye to web-safe colors and continue to experiment with bolder color combinations and super-saturation that looks amazing on retina screens.

There are explosions of color on ThemeForest, especially when you search for newer themes. Pinata is a fun example and offers multiple homepage designs using lots of bright colors.

The Pinata theme is fun and colorful.
The Pinata theme is fun and colorful.

Inside The Head, an online publication inspired by the delusions, confusions and illusions experienced by young adults, used bold, block colors in combination with gentle animations.

Inside The Head uses contrasting block colors.
Inside The Head uses contrasting block colors.

8. Dynamic Gradients Are Back

In 2018, they’re making a come-back in their own right with loud, bright colors. We’re also seeing gradient filters over photos – a great way to breath life into less interesting images. Take the Ivery theme, for example, which features a large photo over a gradient background.

Ivery makes full use of bright, colorful gradient design.
Ivery makes full use of bright, colorful gradient design.

The folks at Wyde Themes who created the Ivery theme said gradients were on-trend for two reasons: they allowed for unique color combinations and were memorable.


“As you know, there are not enough different colors in order to let brands create their unique identity. When using gradients, you can fade two or more different colors so you have something that feels like a new color and unique. Also, we don’t see gradients in web design a lot. Our eyes catch them as something new. We remember these unusual colors much better than usual and flat colors. And, of course, being memorable is exactly what you want for your design.”
– Wyde Themes

Stripe is a prominent example of a site that uses gradients to create a sense of movement.

Stripe's use of gradients creates a sense of action and movement.
Stripe’s use of gradients creates a sense of action and movement.

The great thing about gradients is that they can provide an on-trend solution for sites that lack photography, illustrations or other imagery.

9. Microinteractions and Animations

The things about microinteractions is that they’ve become so pervasive now that when you come across a site that doesn’t have them, they tend is feel a bit boring and lifeless.

These small moments are the little bits of magic that delight and surprise users. At the same time, they provide the subtle animation needed to direct a person’s attention to the right content at the right time, ensuring site visitors don’t miss crucial links of copy or important CTAs.

The popular Bridge theme uses microinteractions beautifully in its Bakery demo, bringing to life the everyday elements you would find in a kitchen as the homepage loads.

bridge bakery

The designers at Qode Themes who create Bridge’s demos said thanks to touch devices and apps, users had come to expect microinteractions online.

“We think that striving to integrate or to replicate similar functionality for WordPress themes is very good because users who are already used to this will recognize similarities and they will appreciate it. In short, when you are used to something which is good, you don’t want to change it, and offering the same thing will make users comfortable using your product. Designers have recognized this, and we think that the popularity of this trend will continue for some time.” – Qode Themes

10. A Greater Emphasis On Copyrighting and UX Writing

“Words are really important because the graphics don’t make sense sometimes.” So says John Maeda, Automattic’s head of computational design, in his 2017 Design in Tech Report.

As it turns out, code isn’t the only unicorn skill. Copywriting, and more specifically user experience writing, is finally being acknowledged as necessary to web design. It’s still an emerging field, but as Google explains, the role of a UX writer is someone who helps “shape product experiences by crafting copy that helps users complete the task at hand.”

MailChimp is my go-to example for UX writing. If you’ve ever used it, you’ve probably felt a little pinch of anxiety just after hitting send on an email that’s going out to thousands of people. The folks at MailChimp know that feeling, so their email success message helps lighten the mood:

By itself, the animation is fun, but it doesn’t mean much without the words that go with it and provide meaning and context.

As a UX writer myself, I’m really excited to see that copywriting is becoming an important role in web and product design. Interestingly, more and more theme developers have reached out to me in recent months, asking for help with copy because Lorem Ipsum just doesn’t cut it anymore.

11. Sliders Will Become Even More Pervasive

I want to say that sliders are making a coming back, but the truth is, they didn’t go away in the first place. Whether you realize it or not, sliders are everywhere.

I wrote about sliders recently for this blog and provided extensive proof of the pervasive nature of sliders in modern web design, how companies big and small are using them, and that – for the record – they don’t suck.

I don’t want to reinvent the wheel, so check out the post for more. But here’s a sneak peek of one of my favorite modern implementations of a slider:

Hero slider
Squarespace’s use of a hero slider is gorgeous

12. WordPress REST API

The REST API has been around for a couple of years now and while WordPress development agencies are using it extensively to build custom projects for enterprise-level clients, it’s yet to become a mainstream inclusion in everyday themes.

There are some themes that use the REST API, such as the Wallace theme and Foxhound, the latter of which is a React-based them and the first in the WordPress.org directory to use the REST API endpoints included in WordPress 4.7.

At last year’s WordCamp U.S. Mullenweg said the REST API still needed a lot of work to make it a “first-class citizen” in the WordPress world. So it will be interesting to see how it evolves and how agencies continue to use it to create WordPress projects that look nothing like WordPress.

13. The Tide Project

Last, but not least, I want to mention Tide, a project that XWP, Google, Automattic and WP Engine have teamed up on in an effort to raise the code quality of themes and plugins across the WordPress ecosystem. As Rob Stinson explains on the XWP site:

“Tide is a service, consisting of an API, Audit Server, and Sync Server, working in tandem to run a series of automated tests against the WordPress.org plugin and theme directories. Through the Tide plugin, the results of these tests are delivered as an aggregated score in the WordPress admin that represents the overall code quality of the plugin or theme. A comprehensive report is generated, equipping developers to better understand how they can increase the quality of their code.” – Rob Stinson

The project is still in development and, according to WP Tavern, the Tide team is continuing to experiment with different ways to making the plugin audit available data, as well as refining how the data is weight when delivering a Tide score.

13 + 1: Elementor Page Builder

If you want to create posts and pages for your WordPress website, then a page builder plugin is the best way to do so in 2018. Elementor is not only the fastest growing page builder, but also one of the most popular WordPress plugins of all time less than two years after launch. With over 800.000 active installations, and a 4.9 out of 5 stars rating based on 720 user reviews.

Elementor Theme Builder


“Elementor Theme Builder is the perfect all-in-one tool to take your theme design to the next level. Visually customize your header, footer, single post and archive page without using any code. Take control over your theme design, customize different styles for different blog categories, edit ACF content. What used to take hours of PHP code can now be done in minutes.”
– Ben Pines

What Do You Think 2018 Will Hold for WordPress Theme Design?

Looking back on what’s I’ve covered in this article, there’s so much going on right now in design. I had to leave some things out, such as page transitions and unexpected scrolling rates, that were trending in 2017 but look to be sticking around this year.

It’s great to see so many theme designers and developers experimenting with the latest design trends and creating some truly gorgeous themes. But at the same time, it seems some theme authors are stuck in the dark ages and haven’t updated their themes in years.

Do you have a favorite trend or one you think I’ve missed that you’d like to highlight? Let us know in the comments what your WordPress design predictions are for 2018.

The post 13+1 Design Predictions for WordPress Themes in 2018 appeared first on Smart Slider 3 — WordPress Plugin.

]]>