How to Create a Website from scratch using WordPress Page Builders!
WordPress Page Builders are slowly becoming the forefront of content customization in WordPress. These page builders are much powerful and user-friendly compared to WordPress’s inbuilt Live customizer or its visual editor. These tools allow creators to simply insert any element from Icon boxes to Text boxes to images and galleries onto a required spot on the page. These pages are individually customizable to suit the content itself and thus present themselves with their own flair.
But getting used to them is not easy, especially if you’ve been using the default WordPress customizer. While most of these plugins are relatively easy to use, you can be completely lost in their huge list of features and mega menus. It takes time, instructions and assistance to grab how you can use a page builder to its maximum potential.
This is why Beautiful Themes presents you with this blog created to help you understand how to use the market’s most popular WordPress Page builder plugins to create a website from the scratch. As so, we’d like to preface that this blog is not about listing out the pros and cons of a WordPress Page builder but to explain how to use them in a short and understanding manner. Moreover, to However, if you want to learn about our recommendations for the best WordPress Drag and Drop page builders, we’d recommend you check out this list.
How to use WordPress Page Builder Plugins:
Before we start, we recommend you to check out various WordPress website builder plugins we have listed below. We request you to start by installing them on your websites or localhost to fully grab its essence. If you want to learn how to install WordPress plugins, check out this article that covers that topic. This way you can follow the process and steps we’ve listed below hand in hand.
Now without further ado, let’s check out 3 of the most popular free WordPress Page builders and their WordPress website builder tutorials:
1. Elementor:
Elementor is undeniably one of the best WordPress page builder available on the market. It is highly optimized and its drag and drop page building features maximum speed and responsiveness. Elementor is a live page editor which means you can preview how your content will look like on the front end while you’re building it.
The plugin works by building specified sections all over the page with a different number of columns. You can then drag widgets with tons of functionality into these sections. This allows you to create a wide variety of content and elements on your page and customize how these elements are presented.
Adding Elementor sections and widgets:
Let’s take a look at how these sections work. Elementor works by providing you with a sandbox where you can place a wide range of widgets and elements in it. Take a look at the ‘Drag Widget here’ area and click on the Add New section icon/ Plus icon to choose the appropriate section structure for your widgets. This structure defines how many widgets you can place in a single section. The boxes define how many widget areas are provided and how they are placed.
Once the structure area is defined, drag the required widgets from the left bar and drag it onto the sections. You are given a wide range of widgets with various purposes from Image sections to Text editors to Progress bars and Tables. Similarly in order to edit any widget, simply click on it to edit its properties on the left bar.
Using Elementor Templates:
Furthermore, you can also easily use pre-built templates and designs to make your task much easier. In order to use templates, click on the Add Template button next to the Add new section button. The newly appeared window will provide you with tons of page and blocks designs.
Choose any of the page designs you see fit or use any of the premade blocks by clicking on Blocks on the top bar. Once you click on the block or the page template you want, the new window should give a proper view of the element. Click on Insert on the top right of the window to insert the element onto your post. Again, any element on this template is customizable by simply clicking on it and using the Left edit column.
Using the wide range of highly customizable blocks and templates alongside compatible WordPress themes can provide you with a tool that lets you customize a wide range of content to an amazing extent. To check out some of the best Elementor compatible themes on the market, consider taking a look at this article.
2. Site origin Page builder:
SiteOrigin page builder works on a similar basis as Elementor using a combination of Rows and Widgets. Here the rows work as Sections in Elementor. Site Origin provides the added option of not using a Live editor to build your content. This can be quite useful if you want to put out content as fast as possible and edit them later on.
In order to enable SiteOrigin page builder, open any page or post and click on the Page builder tab on the top right of the default editor box. This will open the Site origin Page builder and replace the default Visual editor.
You can place multiple Widgets onto a single column based on the number of columns the row has. You can increase the number of columns by simply right-clicking a row and clicking on Edit. Moreover, widgets are also customized in a similar manner. In order to add a new widget or row, use the top Toolbar the editor provides. The live editor tool allows you to modify your content while viewing how it will look like on the frontend. Additionally, clicking on Revert to Editor takes you back to the default WordPress Visual editor.
Adding Site Origin Rows and Widgets:
In order to add a new row, simply click on the Add Row button to open the New row window. Here you can define the Row layout using the Set Row layout section. Similarly right-clicking on an already existing row will let you edit its details by clicking on Edit row.
The first field lets you define the number of columns while the 2nd and 3rd field define the ratio of the column sizes. You can also manually edit the column size by resizing the column previews on the window on the box below the toolbar. The column on the right can be used to define your row’s attributes. From changing the padding to row layouts to margins and adding backgrounds to defining cell attributes. You can do them all by using the Column on the right.
Similarly adding a new Widget requires you to click on the Add Widget button and clicking on the Widget you want. You can use the search widgets bar on the Top left to find an appropriate widget or browse the widgets on the right. Similarly, the fields on the left column can help you narrow down the widgets you want to check out.
Similar to Elementor you can also use premade templates and layouts in Site origin page builder. To do so, use the Layout button on the top toolbar and use the wide range of pre-made layouts to create a fitting page design for your website. Once you’ve chosen, click on the template and then click on Insert. You can insert the template after the pre-existing rows, before or completely replace them if required.
3. Live composer:
Live Composer is an amazing Visual page builder made to help you create cool page designs and edit the functionality of each element. Using this amazing drag and drop page builder, you can not only edit every element’s styling and outlook but also its functionality. This means you can disable them or enable them on mobile or pc platforms, enable or disable Responsive styling and more.
In order to edit a page in the Live composer, open the required Page by clicking on Pages in the WordPress Admin sidebar and then click on Open In live Composer button on the right bar under Publish box. Alternatively, you can directly open the page in Live composer by hovering the page in the WordPress Pages section and clicking on Open in Page builder.
Adding Live Composer Containers and Modules:
Once your page is open In Live composer’s page builder, you can use the bottom toolbar provided to you to add modules onto the Modules row. To add more modules simply click on Add modules bar. Here the area surrounded by the Grey line is the section where you can insert modules onto. To edit the modules container, simply hover over it so a nifty tool menu appears on the left. You can then use the tools provided to duplicate the section and all its modules, drag to move them, change container width or delete them. Hovering over the Orange lines will provide you a similar menu but with the addition of the Options field that lets you customize the row.
Once you’ve customized your rows, it is time to add some elements to your page. Use the modules bar on the bottom to add any of the modules onto the Modules container. You can also add more containers by dragging the Container icon and dragging it onto the page.
In order to filter the modules, you want to insert, click on the leftmost button to open a popup menu and choose the type of module. You can choose between General, Post based and modules for Templates.
The general modules provide you with tons of elements to insert from Texts to Images to Tabs and Progress bars while Post based modules let you entire Blog lists, Posts lists, user Testimonials, Galleries, and Staff lists. Each of these modules can be easily modified by simply clicking on it. A point to take note of is that you can edit Text modules using the default WordPress customizer by clicking on the Open in WP editor feature hovering over it.
Using Live Composer Template Designs:
Similar to other page builders, the Live composer also lets you use pre-built page builder templates and elements and directly implement them onto your page. You can view these templates by clicking on the icon button on the Top left of the bottom bar just above the Filter menu. Then drag the various variation modules onto the containers to insert them. For the free version, the Live composer will only allow you to use the blog variations but you are completely free to edit each and every part of it if you want.
In order to edit an element simply click so that the Edit menu will show up on the bottom. Here you can use the Functionality tab to change its functions and details, Styling to change its appearance and Responsive to change Responsive styling options for phones and tablets. Finally, click on the Confirm button hovering over the bar to save your changes.
After finishing your page customization, you can Save it as a draft or Publish it completely by clicking on the appropriate buttons that appear on the Top right of the bar. Then, click on Close to close off the Live composer page builder and view your finished page.
Concluding:
Thus using our tutorial, you should have a better understanding of how Drag and Drop page builders work. As the tutorial might show, the core concept of various Page builders is the same to some extent. This is why we recommend our users to check out various Page builders, especially Free ones to get a better hand at what options each provides. That way you can use a Page builder that suits your demands. Finally, do make sure that your WordPress theme itself is compatible with page builders.
WordPress page builders aren’t the only ways you can customize various elements on your WordPress websites. WordPress’s greatest feature is its customizability and we cover various areas and elements you can customize to suit your website better. Check out some of our articles to learn more about what you can do to use WordPress at its full potential:
- How to change WordPress Header to a Slideshow
- Beginner’s guide to creating a WordPress Helpdesk
- How to remove Author from WordPress Posts
