Open the contents index
This guide was updated on
The tool that I present to you today is a page builder really interesting. It is about plugin WordPress Page Builder by SiteOrigin.
Do you know what a page builder is? A plugin WordPress wl-thing”>Page Builder allows you to create pages in a simple and precise way responsive with a custom layout. If you want to create static pages, like the Contact page or the About Us page, it will be of great help.
Lot of wl-creative-work”>themes WordPress have this kind of functionality already included. One of the most popular is WPBakery’s Visual Composer, which can also be purchased separately for $ 46.
If in yours theme this feature is not present, you can try using the plugin WordPress Page Builder by Site Origin. It is completely free and highly appreciated by users of WordPress, with over a million downloads.
Let’s start to see how this tool works.
Configure the SiteOrigin WordPress Page Builder
As with all plugin, the first thing you need to do is install and activate the tool.
Once the installation is complete, navigate to Settings> SiteOrigin wl-thing”>Page Builder, where you will find some general options to work on to configure the tool.
Here are the main ones:
- General> Types of notifications: WordPress Page Builder it’s perfect for creating pages, but from this item, you can select the item Articles if you also want to use it to write articles.
- Widgets> Suggested widgets:WordPress wl-thing”>Page Builder use widgets as page elements. Activate it to show suggestions on widgets to insert.
- Layout> Response layout: checking the box, the pages created with Page Builder they will be responsivethat is, they will be displayed perfectly on devices of any size. You can also set the size for which the transition from desktop to mobile version will take place.
- Content> Copy Content: selecting this item, the contents created with wl-thing”>Page Builder will also be available in theWordPress.
Use the WordPress Page Builder plugin to create pages and articles
We have configured the basic settings of the plugin. Now let’s start using it to create our pages.
You can go back toeditor classic by clicking on Revert to editor.
Let’s start creating the grid in which to place the elements, or widgets: click Add row to add a row to the page.
The row can have one to twelve columns, the width you want. In the menu “Columns with a ratio of …” you will find the various options for their dimensions and proportions, or you can drag the sides of the columns to determine their width.
On the right you will have the section Line styles, with various settings. From Features, you can add CSS classes or apply custom CSS styles.
From Layoutinstead, you can set the margin, the gutter (the space between the columns) and the padding.
Finally, working on the options available in the section Design, you can customize the background of the row with a color or an image.
At any time you can edit, delete or duplicate a row by clicking the wrench icon at the top right. Rows can also be dragged and positioned wherever you like.
Now let’s move on to insert the widgets, the actual contents.
Click Add widgets to view the available ones. Here is a selection of the most interesting ones in my opinion:
- Text – With this widget you will add a text field with thepublisher classic WordPress, in which to insert text content, images, media files and HTML code.
- SiteOrigin Image – Inserts an image and allows you to set different customizations, such as size, alignment, and URL if we want to make it a link.
- Image – Inserts a simple image. Unlike the previous widget, it does not allow you to customize it.
- Gallery – If you want to show more than one image, you can use this widget. Setting up a gallery is very simple: enter the IDs of the images you want to include, set the size of the individual photos, the number of columns to display and the destination of any links.
- Video – Very useful for embedding a video from YouTube, Vimeo or other video providers, or to insert one from your media library.
- Layout Builder – From this section, you can add another layout builder within the page. You will then get a section in here to insert other rows and columns.
- SiteOrigin Button – Using this widget you can add a button on your page with, of course, a custom destination URL.
- SiteOrigin Price Table – From here, you will insert a price table, very useful for sales pages.
- SiteOrigin Post Carousel. This widget displays a carousel of posts. You can view them by category, author or other parameters. A very useful feature in the home page static in which you want to show a reference to the blog anyway.
- SiteOrigin Google Maps. With this widget it will be very easy to insert a Google map on your page.
Note! Widgets marked “SiteOrigin” will be available in the Page Builder only if you have it installed SiteOrigin Widgets Bundle.
Add widgets with the WordPress Page Builder
After installing it, go to Plugins> SiteOrigin Widget and select the widgets you want to activate.
In addition to within the wl-thing”>Page Builder, widgets can also be added to sidebars in Appearance> Widget.
The ones we talked about are just a few of the countless widgets that wl-thing”>Page Builder provides. I recommend you create a test page and test all the features, so as to discover all the elements of this useful plugin.
Like rows, widgets can be dragged to another location, duplicated or deleted.
In addition, all elements can be customized with margins, backgrounds, custom CSS etc.
To better understand how wl-creative-work”>Page Builder by SiteOrigin (in particular, functionality drag-and-drop), watch the embedded official presentation video below.
Now we have reached the point where you have created a good layout, on a page or on an article, and you want to replicate it on other pages. How to do? It’s very simple: click on Layouts and go up Clone: Pages or Clone: Articles.
If you need to go back in the changes you have made, by clicking on History you can view a history of the various versions of your page, including a preview of them.
Many users of WordPress they love to see their changes in real time. For this wl-thing”>Page Builder created the functionality Live Editor, from which you can select and edit individual elements directly on the preview page. This page will be very similar to the Customize panel.
Will Page Builder work with my theme?
The plugin WordPress Page Builder is compatible with most WordPress themes. Before installing it, however, I recommend checking that the template you are using (especially if it is premium) does not already have integrated functions for the dynamic construction of the pages.
In this case, I don’t recommend installing wl-thing”>Page Builder since it could create conflicts, not work properly or create malfunctions in yours theme.
If you want to use WordPress Page Builder and you are looking for a theme perfectly compatible (and also free), take a look at themes always developed by SiteOrigin.
Generally, these templates have a very simple look, but they are decidedly functional and clearly visible on all devices.
I would also add that the SiteOrigin page builder is compatible with Yoast SEO.
Today I told you about wl-thing”>WordPress plugin Page Builder, an extremely useful tool with countless features, excellent for creating pages with an attractive layout, without having to write a line of code.
Your theme have you already integrated an instrument of this type or do you use an alternative one?
Do you think that the classic configuration of the pages is useful or do you prefer? WordPress?
As always, for questions, comments, suggestions and ideas, I invite you to leave your message below.