Beginner’s WordPress Layouts Builder Tutorial

Beginner’s WordPress Layouts Builder Tutorial

beginners wordpress builder tutorial

A website is often divided into header, content, and footer. Each section is divided into smaller layouts. For example, content is often divided into the main content, sidebar, and footer. It depends on the target users. But there are tons of different layout designs to choose from.
In this WordPress Layouts Builder Tutorial, I am going to show you how to build a simple layout for your WordPress pages from one place and without writing a single line of code, and we will build the same layout for two different pages step by step, so we can make changes from one place and it will be affecting all pages without modifying each page individually.

What is WordPress Layouts Builder?

WordPress layout builders or WordPress builders are plugins that allow you to create, edit, and customize your website layout without writing any code.

There are several great WordPress layouts builder plugins available. They allow you to create completely custom website designs on WordPress without writing a single line of code. In this WordPress Layouts Builder Tutorial, I will show you how to use HayyaBuild to build a simple layout for WordPress.

What will you need for this tutorial?

  • WordPress version 5.0 or higher.
  • HayyaBuild plugin version 5.0 or higher “you can get it for free from here”. This plugin allows you to easily create custom WordPress layouts without having any coding knowledge.

This tutorial will work with any WordPress theme. So, you can use any theme you want.

See also:

What are we going to do in this tutorial?

We are going to build the layout shown below for two pages (About Us and Contact Us) from one place with just a few clicks. You can add more pages if you want.

Large Devices
Medium Devices
Small Devices

This layout is for explanation only. You can use a more suitable layout.

How To Install WordPress layouts builder?

First, you have to install HayyaBuild. It’s free, and you can download it from the WordPress plugins directory. It’s also easy to install via WordPress admin panel. Just search for it in WordPress plugins directory.

Install HayyaBuild
Install HayyaBuild

After installation, you will get a new item on the menu. This is the plugin’s content list, where you can find a list of HayyaBuild content like headers, layouts, shortcodes, and footers. Also, you will find the help page where you will find basic information, how to get support, and how to reach the developer’s team.

HayyaBuild main page
HayyaBuild main page

Ok, everything is ready. We can now start building our layout. In general, this plugin comes with more than 25 Gutenberg blocks that will help you to create any content regardless of whether you want to build headers, layouts, pages, posts, shortcodes, or even building footers. So it’s possible to use its blocks with pages, posts, or any other posts type that uses Gutenberg editor.

To create a new layout simply navigate your way to HayyaBuild → New Content.

How To Use WordPress layouts builder?

The first step we have to do is giving a clear name to our layout. Let’s give it the “WordPress layouts builder” name. Of course, you should select a more described name for your layouts.

Give our layout a clear name

Also, you can build shortcodes from here. To create a shortcode select New Content then keep the Pages List option empty after that you can add this shortcode to any place.

Pages list option
Pages list option

Now you can add rows, columns and other sections to build your layout from scratch. Also, The Pro version comes with ready-made templates to quickly get you started.

Let’s start by adding a row with two columns by clicking on the plus sign ‘Add Block’ button. Then search for ‘Row and Column’ and click on it.
This will add a new row with two columns with a 50% width for each.

Roe/Columns block
Roe/Columns block

As you can see, we’ve to change the width of the column to 66.66% for the left one and 33.33% for the right one. To do that just select Row block from Block navigation button at the top of the editor. Then click on the ‘2/3 + 1/3’ button from block settings at the right sidebar.

Change columns width
Change columns width

In the right column, you can add your contact info or any other content, but in the left column where we want to add the original page content, we will add the ‘Page Content’ block. This block will display the original content of the currently displayed page.

Pages content block
Pages content block

Also, you can use the ‘Magic Box’ block to show or hide content sections from pages, this block is considered one of the most important blocks through which you can control the display of content according to the conditions that you specify.

Let’s now make our columns responsive for screen sizes to work perfectly in all devices. Select the Row block then from block settings on the right sidebar select ‘Medium Screen’ from Screen size to make it responsive in tablets.

Then select the right column and click on HayyaBuild Options from block settings at the right sidebar then check the ‘Hidden on small screen’ option to hide this column in mobiles.

Hide in small devices
Hide in small devices

All HayyaBuild blocks come with these options, So you can manage visibility as you want.

Let’s now adding the “Our Team” section by clicking on the plus sign ‘Add Block’ button at the top of the editor. Then search for ‘Row and Column’ and click on it.
Then select Row block and click on ‘1/3 + 1/3 + 1/3’ button from block settings at the right sidebar.

Our team row
Our team row

You can now start adding your team one by one in columns. It’s better to use the ‘HayyaBuild Info Card’ block it comes with many useful options.
Let’s now make it responsive in mobile devices. Select our team Row then from block settings at the right sidebar select ‘Small Screen’ from Screen size to make it responsive in mobiles.

You can now preview your changes before you publish anything by clicking the publish button (you have to keep the ‘Pages List’ option empty). Then go to https://yourwebsie.com/?hayyabuild=preview&content=ID
replace ID with this layout id
If you find everything is perfect then go to the next step.

And finally, select the pages that you want to display layout in. As you can see in our case I have selected (About Us and Contact Us) pages. After that just click Update to publish your changes.

Select pages from Pages list options
Select pages from Pages list options

Conclusion

HayyaBuild is one of WordPress layouts builder plugins. It’s a free plugin that complementary to the Gutenberg editor to make it more effective and comprehensive which is integrates with any WordPress theme. You can easily build pages, shortcodes, and layouts for your WordPress website, and you don’t need any coding skills. Also, you can build headers and footers but you’ll need a theme that supports the plugin or you have to make simple changes in header and footer files in your theme. You can get HayyaBuild for free from here.

Do you need more tutorials about HayyaBuild?

You can post requests for it in comments.

Matooq 10

Hi! I am Hassan Matooq, a web designer/developer. Designing and Coding have been my passion since the days I started working with computers but I found myself into web design/development since 2008.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *