Hello, WP fellow! WpCtrl.com is the place to catch up with all the latest WordPress trends. We review, both free and premium items, to give you the best perspective on what will work best for you and your project. If you find the stuff on this website helpful, hit that sharing buttons because it helps the site a great deal. And it is scientifically proven that you will feel happier!
Drag and drop page builders are powerful tools that gave the opportunity to the regular WordPress users to create pages and layouts, similar to what only experienced web designers were able to do a decade ago.
The process of web designing is becoming more user-friendly with every year and WordPress is the best platform for non-tech savvy users.
What you’ll find in this article:
Why having a page builder plugin is necessary
The difference between the plugins interfaces
The actual process of designing a section with a page builder
The available elements for both plugins
The web is changing quickly and webmasters want a flexible environment to change their websites with a similar phase. Having a website is no longer a “set it and forget it” work, another contact channel just to fill the info on your business card.
Today most of the themes on the market come with some kind of visual page builder. This is giving the owners the opportunity to easily manage the look of their websites and update things quickly when needed, without hiring a professional.
Why do you Need a Page Builder?
Let’s take a look at one of the most popular themes on the market – The Genesis Framework themes.
The Genesis Framework is valued for its clean code, speed, security and SEO friendliness.
The themes are stylish, clean and completely inflexible.
If you take a look at any Genesis Framework child theme, you’ll see the same issues with all of themes – they are predefined!
For example, You can love the Essence Pro when you first see the theme demo. Let’s say you decide that this is your theme and you buys it.
What you’ll probably find out later is, except the complicated setup to make it look like the demo, is that you have absolutely no control over your layouts. You are given a few widgets and that’s it!
For Genesis Framework, even simple tasks like adding a search to your header, or changing the colours of your site are made so complicated and frustrating even for experienced users.
If you want to feature a new section on your homepage, to list new services or anything else, you will be stuck.
And that’s the reality with most of the predefined “section ready” themes.
Elementor has a FREE version. You can create the hero section and some more basic designs, but you won’t have access to the premium widgets and elements.
Now let’s get into it. I’ll make one of the most used section that almost every website or landing page have – the hero section, with both Elementary and WPBakery Page Builder.
Hero Section with WPBakery Page Builder
This is what your visitors see first, so you better grab their attention with clear messages and design.
How to create a hero section with WPBakery Page Builder?
Make sure you have disabled any sidebars and preferably choose a full-width layout if you have the option in your page/theme settings.
Switch to “Backend editor” (this will enable the page builder instead of the classic text editor) then click the “Add Element” button. Choose “Row”.
Note: You can also use the frontend editor of WPBakery Page Builder, but I find it easier to work in the backend.
Add an empty row first
The row columns layout
Row settings – from here you set the background, width, setting the margins and paddings and more.
This is the style of the column
From here you add your elements (content)
The hero section needs a background image. Head to the row settings (2). On the ‘General’ tab set the row stretch to ‘Stretch row’, this will make your row full width.
Then go to the ‘Design options’ tab.
Here you can choose your hero image and set the row paddings, this is necessary in order to get enough space around your elements.
In the drop-down menu, below the thumbnail, set the option to ‘Cover’.
Note: You can play with the paddings to get the desired height of your row. I choose percentages, but you can use px, em or rem values.
Click Save changes.
Note: Later when I added the headings I changed the top padding to 10%.
The default background options of WPBakery Page Builder are very limited. You can add overlays, parallax effects, gradients and more with any of these additional add-ons.
What you should get is a nice full-width section ready for some extra elements.
Adding text and Call-to-Action button
WPBakery Page Builder comes with its own Custom Heading element.
For this example, we’ll use two custom heading elements, the second will play the role of a subheading.
Choose your desired font, size, colour and align in the element’s settings screen.
Clone the element for the subheading and just change text and the size to a smaller one.
Click the small plus sign below your element to add a CTA.
Select the ‘Button’ element and select your prefered settings (size, color, url etc.). Remember to add some padding to give your CTA space to breath – go to the ‘Design options’ tab of your button and add 15px top padding!
Our Hero Section is ready to get some clicks.
Hero Section with Elementor Pro
Let’s try the same example but this time using Elementor Pro.
The main difference is that Elementor is a frontend page builder only, the moment you click the ‘Edit with Elementor’ Button you will be redirected from your backend.
Both page builders have a very different interface and approach to design.
First things first, you want to get rid of any sidebar you might have and hide the page title.
Then click the purple plus icon to add a new section. Before we add the image and the heading, there is some work to be done in the row settings.
When you hover over the section, three small icons appear at the top left corner. Click the middle one (the 6 dots) and the settings panel will appear on the left side.
To get a nice full-width section turn on the Stretch section option and from the Content width drop-down choose Full Width.
In the Style tab, you can set your font colour, alignment and more.
Hover again and another small icon will appear at the top left corner, that is where we’ll place our image and set the paddings.
Note that your background won’t appear until you add your an element.
Click the plus icon and drag the Heading widget to your section. Then again drag another heading for the subheading and finally drag a button below the two.
Click update and your hero section is ready.
Here is the final result.
Elementor or WP Bakery Page Builder?
If you want a front end drag-and-drop page builder – Elementor is the better choice. It has also a free version, which might be totally enough for some users. It’s also more intuitive and easier to get used to. If you want to get creative, I think WP Bakery is the one you should get. Combined with some of the premium addons on the market it becomes a powerful tool to create almost anything.
TablePress is the most popular and widespread WordPress table plugin (700 000+ active installs).
The plugin does a great job and the creator Tobias Bäthge is providing amazing support for a free plugin! It is perfect for data tables and with some work, it could also be used for comparison tables (powerful marketing tool).
But the thing is that the plugin default styling looks old-fashioned and not very appealing to the eye of the modern user.
Here is a preview of our test table with the default styling and options:
What will probably grab your attention is the poor alignment of the text and elements, the unnecessary sorting and search options and some other minor details, that we’ll want to get rid of.
Center the alignment of all elements
You can see how the text is aligned in the top left corner of the cell.
Even if we centre it, it’d still be at the top which looks bad. Instead, we’ll set it to be centred in the middle of the cell, no matter of the height of the row.
To do that add this line of CSS to your Custom CSS (you can use this free plugin):
WooCommerce has proved itself over the past decade as a major e-commerce platform. Combined with the powerful WordPress functionalities and the abundance of plugins available, it is reasonable for some shop owners to switch to WooCommerce.
Migrating stores over platforms is a pain in the ass and even more when it comes to moving the users’ accounts with passwords.
So for one of my stores (running on Presta since forever) I decided to start a second store from scratch, keeping only the products (a total of 646) and the categories.
And I wanted to do this fast.
I searched the web for a FREE solution and I found this plugin.
For me, that was more than enough to start my WooCommerce version of the shop. What I noticed afterward was that the plugin puts all products that were disabled or out of stock in the PrestaShop dashboard to drafts which was very handy.
What will you need for the migrate process?
First, you will need to install WooCommerce and the FG PrestaShop to WooCommerce plugin.
After that, you will see an “import” link in the plugin’s box.
This will lead you to the plugin’s settings page, where you will need to fill your PrestaShop database information.
Database User and password
The rest should be left as default in most cases.
In case your Presta store is on a different server you have to export the database (from phpMyAdmin), then create a new database and user on the server where your WordPress website is hosted, and import the previously downloaded .sql file to the new database. Then fill the details of it in the plugin’s settings page.
If everything is set properly you should get a green light – Connection Succesful!
Now you are ready to start the importing process. Brace yourself because it takes a while, and by while I mean forever.
What I found was that the importing gets stuck after 2-3 minutes of working. The best thing you can do is refresh the page and click the “Start/Resume the import” button. Then repeat the process until you reach 100%
Also Note: The Import progress goes beyond 100%, so wait for it to finish, don’t close it when it reaches 100%!
Hope this plugin works for you as it worked for me. With its help, I managed to get the store from nothing to full catalog with prices featured images and descriptions.
Are you writing amazing detailed reviews with valuable information? Long articles are great for SEO and you should totally stick to them.
On the other side, you have your readers, actual human beings (in a hurry most of the day) that want to find the information they search for in the fastest way possible, or they can get annoyed and leave your website.
Then you have your conversion goals, you want to design your posts in a way that suggest a call to action in an intuitive and not too pushy manner.
Here’s an easy piece of shortcodes that you can try for your product reviews or for whatever other purposes you chose.
The Summary Box
This box is telling the user what is all about within few seconds. It’s responsible and it will integrate smoothly with any theme and post layout.