There are many different ways to edit pages in WordPress. The first of these ways is to change the small details you see necessary with CSS. Of course, these changes made with CSS can also be thought of as “make-up“. CSS does not allow you to add a new element to your page.
The display: none command gives you the flexibility to hide certain elements. PHP code must be changed to alter the page structure. For beginners, it can be risky to change the PHP code and make changes to the page. A few lines of wrong code can even lead your site break. At this point, it would be an appropriate choice to use Page Builders, plugins to make safe visual and functional changes on our WordPress site.
There are many options, both paid and free. We often find that page building tools, which are initially offered for free, require a certain amount of upgrade fee for more detailed functions. The plugins we have reviewed in our article will be discussed separately in terms of paid and free features.
Best free WP page builder
Elementor Page Builder
This plugin, which has more than 3 million active downloads, is a useful software that allows you to edit your WordPress pages by drag-and-drop method and has a free version.
I am listing the components and opportunities the free version offers you:
- Adding a button
- Spacers and dividers: “space” pixels you can use for design purposes
- Google Maps component
- Various icons
- Picture boxes: Pre-designed visual fields where you can place any text next or below to
- Picture gallery
- Sliding picture gallery
- Iconic list
- Progress bar (97% etc.) – Progress bar
- Quote boxes: Can be thought of as sections where you can include the words your customers have said about your company.
- List with pop-up items (toggle list)
- Social media icons
- Alarm and warning boxes
- Possibility to upload SoundCloud file
- Ability to add custom HTML codes
- Side component area (sidebar)
- Possibility to include wordpress components on your page
Let’s talk about the paid features:
- List of your WordPress posts: can be thought of as “recent posts” and so on. If you want to use this feature for free, you can use the WordPress plugin called “recent posts“.
- Ability to add forms. I think this feature can also be used for free. Because various WordPress form plugins are available for free. If the WordPress form plugin you choose offers shortcodes, you will be able to add a form to the page using the shortcode feature in the free version of the plugin.
- Portfolio component: Again, if the existing free WordPress plugins are provided with shortcodes (most of them provide shortcodes), it is possible to use this feature without upgrading to the paid version.
- Slider feature: many free WordPress Slider plugins support shortcode feature. So I think you can use this feature in the free version.
- Login section for users – same way
- Share buttons: there are free WordPress plugins that do this again. Most of the time, you don’t even need to use a shortcode. Social media sharing button plugins do not even require you to use a shortcode by integrating itself into the fundamental files of your site.
- Comparative price charts
- Price list
- Animated titles
- Facebook post and page embedding feature
- Facebook comments feature
- Facebook like button
- In-site search feature
- Woocommerce product display feature
- Woocommerce category display feature
- Yoast SEO – Ability to show breadcrumb components
With the components offered to you, you create the layout closest to the page you want to have in the structural sense, then you do the visual detail work. This plugin also provides you a live preview of your changes.
WPBakery Page Builder
I’m talking about this page builder plugin because it is one of the most widely used page builder plugins. Many professional WordPress themes come with WPBakery Page Builder. If you have purchased a professional theme from various sites (such as Envato / ThemeForest) , there is a high chance that this plugin is already installed on your site -for free.
First of all, the plugin has 2 different modes that you can edit. The first of these is the guest-visible area, which we can call frontend, and the other is the editor area, which we can call backend.
We are at the stage of preparing a more detailed article on how to use this plugin, but to put it simply, let’s talk about how to change the sections mentioned on the screenshot above.
Rows can be thought of as containers / boxes where you can place the components. In the upper left corner of each line, the new component adding button is located in the form of “+”. Right to the left of this button is the information that determines the layout ratio of the row.
Although there are different options, 1/3 to 2/3 or 1/2 to 1/2 are among the most preferred. I think these are the layouts that won’t let you down visually. After choosing your layout, it’s time to add a new component. After creating your component by pressing the plus (+) key, it is enough to drag and drop it to the section you want.
Let’s give a more detailed explanation by giving a quick example. For example, you want to include a picture in 1/3 space on your page. There should be a text explaining this picture in the 2/3 area to the right. In this case, we specify the required layout information as 1/3 to 2/3 on the current line of the plugin or after creating a new line. Then it is time to add new element. What you need to do here is to create a new picture element and drag it to 1/3 area. Likewise, you need to create a new text element and move this element to 2/3 area.
After placing our components correctly, we can arrange the container of these components (a small order box from the row) and select a color or style we want. Afterwards, we can deal with the details that determine the main content, such as which picture we want to select or which text we want to write in the required field by directly editing the element. After updating our page, it is possible to open it in a new tab and check how it looks.
If you want to make certain edits while you are on the page (frontend), you just select the “Edit with WPBakery” option in the WordPress bar above the page you are viewing. This way you will have the chance to see your changes live.