Green Hat Expert

You are here: Home / Archives for WordPress

How to Fix Eliminate render-blocking JavaScript and CSS in WordPress

Last Updated on By

In this post of Green Hat Expert, we shall discuss How to Fix Eliminate render-blocking JavaScript and CSS in WordPress.

How to Fix Eliminate render-blocking JavaScript and CSS in WordPress

Do you want to eliminate render-blocking JavaScript and CSS in WordPress?

When you put your website on Google pagespeed insights, you may face the problem of eliminate render-blocking scripts and CSS.

In this post, I shall show you how to easily fix render blocking JavaScript and CSS in WordPress to increase Google pagespeed score.

What is Render-Blocking JavaScript and CSS?

Every WordPress site consists of theme and plugins which adds JavaScript and CSS files to the front side of your site.

So these scripts can slow your website and increase the load time and also block rendering of the page.

The browser of the user has to load the scripts and CSS before loading the HTML on the page.

It means that those users who have slow connection will wait for a few milliseconds to see the page.

The stylesheets and scripts are known as render-blocking JavaScript and CSS.

Bloggers or site owners will have to fix this issue in order to get 100/100 Google PageSpeed score.

What is Google PageSpeed Score?

Google PageSpeed Insights is an online tool by Google in order to help the users to optimize their sites on mobile as well as on desktop.

This tool will test your websites for Google’s guidelines to check the speed of your site and how to improve it.

Google calculates your score on the number of rules that your site passes.

Most of the sites get 50-70 score.

There are some users who want to achieve 100 that is the highest page score.

Do You Really Need the Perfect “100” Google PageSpeed Score?

Google pagespeed insights give you guidelines to improve the performance and speed of your website.

You do not have to follow these rules strictly.

The speed has become one of the main SEO metrics in Google and it tells Google how to rank your site.

The speed of the site improves the user experience on your website.

A better user experience does not depend on just speed. You have to provide useful information, better user interface with engaging content, text, videos and images.

Your task is to create a fast site which gives great user experience.

So you need to focus on speed as well as improving the user experience.

We suggest that you should use Google Pagespeed insights rules as recommendation. If you can implement on your site without ruining the user experience. Then it is a great thing. Otherwise, do as much as you can do.

Now let’s take a look at what we can do to fix render blocking JavaScript and CSS in WordPress.

I shall give you two methods to fix the render blocking JavaScript and CSS in WordPress. You can select the one that suits you and your site.

  1. Fix Render Blocking Scripts and CSS with Autoptimize

It is a simple method and recommended for most of the users.

First of all, you need to install and activate Autoptimize plugin.

After activation, you need to go to the Settings » Autoptimize page to configure the plugin settings.

autoptimize settings

Begin with checking the box next to CSS and JavaScript options and click the save changes button after doing so.

Use the pagespeed tool to test your website. If you are still having render blocking scripts, you need to go to the plugin’s settings page. Then click on show advanced settings button which is at the top.

autoptimize advanced js

Now you can allow the plugin to include inline JS and remove scripts which are excluded by default like seal.js or jquery.js.

Scroll down to CSS option and allow plugin to aggregate inline CSS.

Then click “save changes and empty cache” button in order to save the changes and empty cache.

After completing it, go ahead to check your site again using PageSpeed tool.

Now thoroughly check your website to see that if anything is broken by optimizing your CSS and JavaScripts.

How does it work?

Autoptimize combines all enqueued JavaScript and CSS. After doing that, it creates minified CSS and JavaScripts files and gives cached copies to your website as deferred or async.

It allows you to fix the render blocking scripts and styles issues or problems. But you need to keep in view that it can also affect the appearance and performance of your website.

2. Fix Render Blocking JavaScript using W3 Total Cache

This method needs a little more work and suggested for users who are already using W3 Total Cache plugin on their site.

First of all, you need to install and activate the W3 Total Cache plugin.

Then, visit Performance>General Settings page and scroll down to minify section.

w3tc enable minify

Firstly, check the option “enable” next to minify option and select manual for minify mode option.

Click on save all the settings button to save your settings.

Your next task is to add the scripts and CSS which you want to minify.

Get the URLs of all the stylesheets and scripts which are render blocking from Google pagespeed insights tool.

You may also like our guide about

How to Score 100/100 in Google Pagespeed insights

You will see under the suggestions where it displays the error ‘Eliminate render-blocking JavaScript and CSS in above the fold content’, click on ‘show how to fix’. It will show you the list of scripts and stylesheets.

script urls

Use your mouse to a script and it will show you the full URL. Select the URL and press CTRL+C from your keyboard to copy the URL.

Now go to your WordPress admin area and go to Performance>Minify page.

First of all, add JavaScript files which you want to minify or to be minified. Scroll down to JS section and under the ‘operations in areas’ set the embed type to ‘Non-blocking async’ for the head section.

add scripts

Now click on the ‘add script’ button and start adding the script URLs which you copied from Google PageSpeed tool.

After doing that, scroll down to CSS section and click the button “Add a stylesheet”. Now start adding stylesheet URLs which you copied from Google PageSpeed tool.

add style sheets

Now hit “save settings and purge cache” button to save your settings.

Go to Google PageSpeed tool to test your site again.

Also, check your website thoroughly to see that everything is functional and working fine on your website.

Troubleshooting

It depends on how your WordPress themes and plugins use JavaScript and CSS? It can be challenging to completely fix all render blocking JavaScript and CSS issues in WordPress.

The above tools can be helpful and your plugins may require certain scripts at a different level to work in a proper way.

In that case, the above mentioned solutions can behave unexpectedly or break your plugins.

Google may still show you certain issues like optimizing CSS delivery for above the fold content. Autoptimize can enable you to fix this by adding manually inline CSS needed to display the above fold area of your theme.

However, it can be a difficult task to find what CSS code you will require to display above the fold content.

I hope that this article will help you to learn how to fix Eliminate render blocking JavaScript and CSS in WordPress.

Do not forget to share this post and also like our Facebook page.

 

How to Install and Setup Facebook Comments in WordPress

Last Updated on By

How to Install and Setup Facebook Comments in WordPress

Are you looking to add Facebook comments on your WordPress site?

Facebook is the largest social media network in the world. Therefore, top sites including TechCrunch are using Facebook comment system and avoiding default WordPress comments. In this post, I am going to show you how to install and set up Facebook comments in WordPress.

Before we get to know it, let’s take a look at why would anyone want to use Facebook comments instead of default WordPress comments.

Pros and Cons of Using Facebook Comments in WordPress

The first benefit of using Facebook comments in WordPress is that it boosts your site visibility on Facebook’s network. When someone leaves a comment on your site, they can check the box to share the comment with their Facebook friends. It can give you the potential for additional traffic.

The second benefit of using Facebook comments is that it will remove the anonymity factor, so the users will not leave spammy comments. It is because it will be published on their Facebook profile.

However, it also has a downside too. It is because users do not feel comfortable leaving a comment from their Facebook account or profile due to their sense of anonymity.

Unlike other comment systems such as Disqus, Facebook comments are neither synced to your WordPress comments nor stored. They replace WordPress comments completely. If your post has some posts with WordPress comments, those existing comments will appear after or before Facebook comments.

Now you are aware of pros and cons, now see how to install Facebook comments in WordPress.

Installing Facebook Comments in WordPress

First of all, you have to install and activate the Facebook Comments plugin to your site. After activation, you need to go to Settings> Facebook Comments to setup the plugin.

fb comments plugin settings

If you want to use Facebook comments on your site, you need to create a Facebook app. If you already have created an app for your site, you can use that app ID here. Otherwise, you will have to create a new one.

First of all, visit the Facebook Apps page, then click on the create new app button to create an app.

Now you have to give a name for your app and click on the create app ID button to complete it.

new fb ap

Facebook will create a new app for you to use and it will take you to app dashboard. You will see your app ID there.

Now you will copy and paste this app ID into your plugin settings. Before doing that, you have to configure the app to make it functional on your website. Now click on settings link, click on +Add platform button.

settings platform

You will see a new popup window on the screen. Now click on website to select it as your platform.

platforms

It will add a new website section in the settings of your app’s page where you can enter the address of your WordPress site.

app domain

Now save your settings, you can copy the app ID and paste it into the plugin’s settings page available on your WordPress site.

This WordPress Facebook comments plugins offer a comprehensive set of options. The default settings of the plugin work for most of the sites. If it is not working on your site, you should see the settings to see what to change.

After completing it, click the ‘save changes’ button to save your settings.

Now, go to your website to see Facebook comments in comment section on your site.

fb comments preview

Moderating Your Facebook Comments

Now you are the admin of the Facebook app, that is why you will get notifications for new comments whenever you will login or use your Facebook account. You can find the link to your Facebook comment moderation tool in the plugin’s settings page.

fb comment moderation

Click on the settings link in the Facebook comment moderation tool to add new comment moderators.

adding moderators

I hope that you will like this post and it will help you to install and setup Facebook comments in WordPress.

You may also want to check our guide on How to add social media icons to blogger.

Do not forget to share this post and like our Facebook Page.

How to Embed a Facebook Video in WordPress

Last Updated on By

How to Embed a Facebook Video in WordPress

Do you want to embed a Facebook video in WordPress?

Due to the recent popularity of Facebook videos and Facebook live platform, people also want to embed Facebook videos in WordPress. In this post, I shall show you how to embed Facebook videos in WordPress with ease and Facebook live video in WordPress.

Why Add Facebook Videos in WordPress?

I suggest to my friends and followers that they should not upload videos to WordPress. I also suggest using a video sharing site like YouTube.

Currently, Youtube is the largest video hosting platform in the world, Facebook is the biggest social network and their videos are growing very fast. Recently Facebook has introduced Facebook live video and Facebook auto-play features. Marketers are paying attention to these features from all over the world. It is because they increase user engagement and overall reach.

By using Facebook videos, you can increase the likes on your Facebook page. For more social experience, you can install Facebook comments, add Facebook page plugin, and add Facebook like button on your WordPress website.

After this discussion, let’s take a look how to embed Facebook videos on a WordPress website.

Embedding Facebook Videos in WordPress

First of all, you need to select the video that you want to embed on your website.

Now use the right click on the video date or name, and copy the link address.

copy video url

After doing so, you have to go to Facebook embedded video player website and scroll down to reach code generator section.

Now paste the URL that you copied earlier while clicking on the video name or date.

embed code generator

The next step is to click on the get code button and it will show you a popup of two boxes that contain code.

embed code

The first part of the code will go in the header section of your site.

There are several ways to add this code to your site.

If you are comfortable with editing files of theme, then you can add it to your theme and you need to edit header.php file and paste it after the <body> tag.

In addition, you can also install Insert Headers and Footers plugin to add it. For more details, see our post on how to install a WordPress plugin.

After activation, now go to the settings>Insert Headers and Footer page in admin of your WordPress and paste the code in the footer box. And press save changes to save it.

Note: You only have to add the first part of the code one time. For the next time, you need to add a Facebook video, to do that, you will copy and paste the second part of the code.

So go to the Facebook video embedder page to copy the second part of the code to paste it.

You can add the code in your pages, posts and even a sidebar widget of your WordPress site. While adding the code to your page and posts, you will have to go to the text editor, otherwise, WordPress visual editor will mishandle the code.

switch to text

Now go to your site to see the Facebook video embedded.

How to Embed Facebook Live Video in WordPress

You can embed the Facebook live video as well as a regular video let’s see how to do it. The difference is, you need to get the link of your Facebook live video.

The question is how to get the URL of Facebook live video?

Facebook does not enable you to get a URL of your live video before you launch the live video. If you want to broadcast your live video of Facebook on your site, you need to go live.

You need to do the same procedure after going live, right click on the date and select the copy link address to copy the URL of live video.

facebook video embed preview

After getting the URL, you need to visit Facebook embedded video player website and paste the link in the ‘URL of video’ field.

fb live video url

Then the video embed code generator will fetch and show a preview of live Facebook video. You will have to click on the get code button and follow the rest of the instruction as described above to add these codes to your site.

After adding the Facebook live video code on your website, your visitors will be able to watch the Facebook live video from your site directly and also in their Facebook feeds.

live video embed code

I hope that you liked the post and you learn how to embed Facebook videos in WordPress. You may want to see our guide on Voice Search SEO.

How to Set Custom Avatars for Users in WordPress (Gravatar Alternative)

Last Updated on By

Have you ever tried to set custom avatars for those users who leave comments without using Gravatar?

Do you want to set custom avatars for them?

Do you want to get rid of gravatar to speed your page load time?

In this post, I shall show you an alternative to gravatar. It will allow you to use the first letter in the name of the user as their avatar for WordPress comments.

first letter avatars

First of all, you need to install and activate the WP First Letter Avatarplugin.

After activation, you need to go to Settings>WP First Letter Avatar to configure the settings of the plugin.

first letter avatar settings

On the settings page of the plugin, you can select a set of icons. Currently, it only has a default set of icons which is already selected.

If you want to replace Gravatar on your website completely then you need to uncheck the box of ‘Use Gravatar’. After doing so, click the save changes button to store your settings.

Now go to your site to see this plugin in action.

If you chose to use Gravatar then it will display first letter avatars for those users who do not have gravatar image associated with their email address. If you selected to replace gravatar, then this plugin will display the first in the name of user as his avatar.

In the Gmail app, Google shows the first letter of the name of the sender if the contact does not have a photo. So it is an ideal way of following that trend.

I hope that you liked this post and it will allow you to set custom avatars for users in WordPress. It is also Gravatar alternative.

Do not forget to share this post.

How to Install and Setup WP Super Cache for Beginners

Last Updated on By

Now Google and its search engine are considering the site speed as a ranking factor. So I have written this post for our users to improve their site speed to an optimum level. By doing that, you will find out that your site has improved the site speed and got a huge spikes in traffic. I use W3 Total Cache plugin to improve the performance of my website. There are several people who also ask for how to install and setup WP Super cache. That is why in this post, I shall show you how to install and setup WP Super Cache with ease.

Note: Both WP Super Cache and W3 Total Cache are great plugins. I highly suggest that you use one or the other depends on your needs.

First of all, you have to install and activate WP Super Cache plugin (tutorial: how to install a WordPress plugin).

After activation, WP Super Cache will inform you that caching is not enabled on your site right now.

Setting up WP Super Cache – The Easy Way

To enable cache, go to Settings > WP Super Cache.

Under the easy tab, you need to turn cache on and press update status button.

wp super cache

After turning on the cache, you need to click the test cache button to check whether it is working or not. WP Super Cache plugin will fetch your WordPress website twice and will compare the time stamps of both pages. If the both times tamps are matching, it means that cache is working on your website now.

WP Super Cache Advanced Set up

WP super cache is a powerful tool and plugin, it also has advance options. These options have the ability to improve the performance of your site. To set the advance options of WP super cache, visit Settings>WP Super Cache and click on advanced tab.

wp super cache advance

Enable Caching

first of all, check the box that says Cache hits to this website for quick access. Below you will see three more caching options. WP Super Cache uses PHP to serve cache files by default. However, it can be resources intensive on shared hosting if using PHP to serve cache files.

So I would like to suggest that you try using mod-rewrite to serve cache files. Now scroll down and press the update status button to save the settings.

WP Super Cache will show you a notification that mod_rewrite rules must be updated and another notification about scheduling garbage collection.

Scroll down the page to see mod_rewrite rules that need to be added. Click on update Mod_Rewrite rules button to update the rules.

After updating the Mod_Rewrite rules section, you will see that section has turned green.

To get rid of the notification about garbage collection, scroll down on the advance settings page to the ExpiryTime & Garbage collection section and set up a frequency and time for garbage collection of cached files on your server.

wp super cache garbage

Enable Compression in WP Super Cache:

Compression enables WP Super Cache plugin to serve cached files as compressed files. The files are downloaded by the user browsers quickly because they have the smaller size.

Simply check the box that says Compress page so they’re served more quickly to visitor to enable the compression.

Setting up CDN with WP Super Cache

Most content sites serve a lot of static files with each page request. These files are images, stylesheets and JavaScripts etc. unlike your WordPress posts which are generated by PHP, these files can be served by a CDN or Content Delivery Network. If you do not have any idea what is a CDN and why you need a CDN, then you should read our post about What is CDN and why do you need one.

If you need a tutorial on how to install and setup MaxCDN for WordPress then we have one.

The tutorial uses W3 Total Cache but the basic concept is the same.

To setup CDN using WP Super Cache, you need to click on the CDN tab and check the box next to Enable CDN support option.

Enter the offsite URL that will be the URL of your pullzone, for example, https://cdn.greenhatexpert.com

wp super cache max cdn

In the additional CNAMEs field, enter other CNAMEs that you created for pullzone.

For example, https://cdn1.greenhatexpert.com, https://cdn2.greenhatexpert.com, https://cdn3.greenhatexpert.com.

Lastly, check the box that says Skip https URLs to avoid ‘mixed content’ errors and save the changes. Now your site is ready to serve static content using a CDN.

Serve a Static Site with WP Super Cache

WP Super Cache has a preload mode to create super cache static files for all your pages and posts and serve a static site. You may ask why would anyone want to do that?

To conserve server resources.
To serve an old site that is not being updated anymore.
To improve the speed of site by serving static content only.

These are the few reasons but there can be several reasons and situations where you may want to entirely disable PHP processes.

Do not worry your WordPress will work in a normal way, you can still be able to manage your content on WordPress.

wp super cache preload

Refresh preload cache files options will be set to zero by default, minimum required time is at least thirty minutes. Pre-loading your full WordPress website takes some time and consumes a lot of resources on your server. You can leave it to zero (0) if you do not want your static files to expire ever until you manually refresh cache.

I hope that this post will help you to setup WP Super Cache on your WordPress blog.

For other feedback and questions, please leave it in the comment section.

Do not forget to share this post.

How to Use GTMetrix Plugin to Improve WordPress Site Performance

Last Updated on By

GTMetrix is one of the tools that a number of people use to get more detailed reports about the site’s performance. It is a free tool which analyzes the page speed performance of your page using Google Page Speed and Yslow.

GTMetrix not only gives scores of your pages or website but also gives actionable suggestions on how to fix them. In this post, I shall show you how to use GTMetrix plugin to improve your WordPress site performance.

The benefit of using the GTMetrix WordPress plugin is that it allows the users to run analyses using their WordPress dashboard. It also enables you to schedule reports on daily, weekly or monthly basis. GTMetrix plugin also allows you to receive alerts about the status of your site using WordPress admin.

You need to register for a free GTMetrix account. The free account API is limited to a certain number of requests per day.

If you do not want to use the plugin, then you can always use their website by simply going to GTMetrix website.

In addition, you can also add the GTMetrix Bookmarklet in your Google Chrome, Firefox, and internet explorer.

Now I have covered all.

How GTMetrix helps you improve your WordPress site performance?

GTMetrix gives a detailed report that tells you what do you need to fix. Check the example of report:

gtmetrix report

If you notice that the same websites have two separate grade 95% A from Google Page Speed and 87% B from Yslow. If your Yslow score is low, it means that your site is not smart enough for Yslow system. They cannot always detect your CDN. You need to go to your user settings to define the CDNs vs Google automatically detects it.

As you can observe in the report, it will show all the things that you need to work on priority level. In my case, it was optimizing images. The best part of using GTMetrix is that when you click the tab, it tells you exactly which image needs to be optimized and how much size you can reduce.

In addition, it also enables you to preview the optimized version of the image. You need to right click on the optimized image and save it. GTMetrix is doing the work for you.

It is one of the examples. Every tab has a little “what does this mean” icon. If you click on it, it will elaborate the full details that what does each item mean.

gtmetrix what does this mean

GTMetrix is a gem for those bloggers or website owners who want to optimize their sites. Instead of downloading the Yslow extension or visiting Google Webmaster tools to get Google Page Speed score. You can get all these tools using GTMetrix.

If you even have GTMetrix WordPress plugin you can get these features.

What do you know about GTMetrix?

What are your ideas about GTMetrix?

Have you ever used it?

Let us know and share your experience.

Do not forget to share this post.

5 Best Drag and Drop WordPress Page Builders Compared

Last Updated on By

In this post of Green Hat Expert, we shall discuss the Best Drag and Drop WordPress Page Builders in 2018.

5 Best Drag and Drop WordPress Page Builders Compared (2018)

Are you looking for an easy way to customize or build your WordPress website?

So you need drag and drop WordPress page builder plugins for this purpose.

Best WordPress page builders will allow you to edit, create and customize the layout of your site without any coding. In this article, we shall review and compare 5 of the best drag and drop WordPress page builders.

Why Use a Drag and Drop Page Builder for WordPress?

When a blogger starts his WordPress website then he considers it a difficult task to customize or change his page layouts.

There are a number of premium WordPress themes available which has different page layouts. They are extremely hard to customize if one does not aware of CSS/HTML coding.

So this is the reason that user asks the question “how to make WordPress drag and drop?” or “is there an easy drag and drop WordPress page builder?”

When the users shift from Wix to WordPress or from Weebly to WordPress, they wish that WordPress should have a drag and drop site builder.

There are many drag and drop page builder plugins available for WP.

These plugins enable you to customize every element or component on your website without coding.

It includes adding multiple columns, full width images, content slider and parallax backgrounds etc.

Users can use these elements to create their own layouts within the WordPress themes.

There are several types of drag and drop page builders and there are some which are available in theme frameworks.

On the other hand, there are some plugins, so we shall compare them. It will help you to choose the best page builder for WordPress.

Our criteria for comparing these WordPress page builders include flexibility, ease of use and design output etc.

Let’s check the best page builder for WordPress.

Beaver Builder

Beaver Builder

Beaver Builder is a premium WordPress drag and drop builder plugin for users. It is the best WordPress page builder plugin available on the market.

It has built in tour that enables the users to become familiar with its interface and it is extremely fast.

It has a live drag and drop interface. You have to drag elements from the right sidebar and drop them on your page to add them. Additionally, you can click on any component in a page to edit it.

It consists of many basic and advanced modules and it will fulfill your requirements.

In addition, you can add modules such as carousel, sliders, backgrounds and content blocks, buttons and much more.

If you are a beginner, Beaver Builder is an easy one to use.

Pricing: Starting from 99$ for unlimited sites.

Our Grade: A+

Review: Beaver Builder is one of the easiest page builders for WordPress in the market. It has pre-made templates to give you a start. It has the ability to customize everything and details and it makes it an easy one for WordPress.

Elementor

Elementor

Elementor is another powerful drag and drop WordPress page builder. It is fast and you will automatically get to know how fast and responsive it is.

It is a live page builder because when you make changes to your page, you will see your page live as you edit in Elementor.

You can select the number of columns for every section and create sections too.

You can drag and drop widgets from the left panel. It has a number of widgets such as commonly used website elements.

From basic image and text widgets to advanced sliders, icons, social media tabs, testimonials etc. Each widget has its own settings.

Elemenator also enables you to add widgets made by other WordPress plugins.

If you do not want to build your own layout, Elemenator has ready to use templates which you can use for your pages.

You need to point and click in order to edit any item on the page and you can replace it with your content.

Pricing: Starting from 49$ and the license is for a single site.

Our Grade: A

Review:Elemenator is also one of the best page builder plugins on the market and it is super fast. Additionally, it is easy to use and has a number of modules and templates.

Divi

Divi Page Builder

Divi is another drag and drop WordPress page builder and theme. It is also super fast WordPress and easy to use.

It consists of 20+ different templates or layouts and you can use it for different kind of websites.

You can also compose and save your Divi layouts.

Export a layout from one Divi installation into another easily.

It has several elements which you can drag and drop anywhere in your layout.

Pricing: Starting from $69 per year

Our Grade: B

Review: Divi is a good page builder and its functionality is majestic. It enables you to work with other WordPress themes. It consists of tons of shortcodes which can make it difficult for you to change themes or page builder in the future.

Themify Builder

Themify Builder

If you are a WordPress user and using the theme that is, Themify. It means that you already have Themify builder in your theme.

If you are not a Themify theme user, you can also get Themify builder plugin.

It is also a simple page builder which has many ready to use modules which you can use for your posts and pages. Usually, you require separate WordPress plugins to install in order to get these modules.

You can either edit your page from your live site or from the admin area using Themify builder.

If you are using live editing, you will be able to see the change live on your site.

Themify builder has ready to use layouts which you can apply to your posts in a moment.

Pricing: $39

Our Grade: C+

Review: Page builder consists of promising features but you have to learn it. Learning can become a frustration for you. It is free.

Page Builder by Site Origin

Page Builder by Site Origin

This page builder has more than 1 million installs. Site Origin’s page builder is another eminent WordPress page builder on the market. The price is one of the basic reason because it is free of cost. It is a fully functional plugin that is free.

Site Origin page builder is easy to use and it is compatible with any standard WordPress theme. Use WordPress widgets for components and it has its own widgets. You can download and install its widgets. It also has a history tool which can allow you to redo or undo your changes or actions. So it is a time saver and you can work with it by peace of mind. It is because you know that you can undo your actions.

Pricing: Free

Our Grade: C

Review: Site Origin page builder is free of cost plugin which has a drag and drop interface and you can also create and customize layouts.

Conclusion

After doing the comparison between drag and drop WordPress page builders, we have come to the conclusion that Elementor and Beaver Builder are the best choice.

If you can spend a little money to get the best builder in the market with guaranteed support from developers. You need to select these two plugins and it is the perfect choice to make.

I hope that you will like this article about the best WordPress drag and drop page builder plugins in 2018.

If you have liked our post, do not forget to share this post to share your love.