Creating a custom layout with nested rows in SP Page Builder - JoomShaper

Creating a custom layout with nested rows in SP Page Builder

20 November 2017
Hits 12,621
4 min read
Creating a custom layout with nested rows in SP Page Builder

In order to create advanced layouts with complex structure, the nested inner row is a must-have feature. SP Page Builder 3 cannot deprive you from this awesome functionality. With SP Page Builder 3 nested row option, you can easily create a complex layout on your web page.

Sometimes, due to the specific nature of a project, the default layout is not enough. You need something more flexible. A nested inner row and custom column layouts are SP Page Builder’s awesome built-in functionalities that let you get these easily.

Today we are going to find out how you can add nested inner rows with custom column structure using SP Page Builder frontend editor.

Add new row

You can add rows in two ways on the frontend. If you haven’t added any element to your page, you will get an option to add your first row right away. To add your parent row, click on the “Add New Row” button.

Or, after every row there is a plus(+) button to add another row.

After clicking on the Add new row button or the plus button to add  new row, a new pop up window will open to add the column structure of your row.

All about column structure

Column structure of SP Page Builder 3 follows the grid system of Bootstrap. In Bootstrap, the whole column is divided into 12 grids.

Photo credit: w3schools

That’s why, to get 3 columns, you have to divide the whole grid into 3 portions and that is 4, 4, 4. That means four grid for every column. The sum of the grid value 4+4+4 = 12. So, whatever column structure you choose, the sum of the total grid value must be 12.

Photo credit: w3schools

The same way to get two columns you have to divide the grid into two portions and that is 6,6.

Photo credit: w3schools

Now, to add a complex row-column structure, you need to generate your desired layout. As per the bootstrap grid system, you have to create the column structure according to your requirement, ensuring that the sum of the grid values remains 12.

Three column: 4+4+4

Two column: 6+6

Something more complex

Now we will head towards the complex stuff. If you want two rows, where the first row will have one column and the second one will have three columns. The input will be like 12+4+4+4. SP Page Builder will make two rows. The first one input 12 completes the 12 grid, so it will accommodate the 4+4+4 input to the second row.

Generate column structure

To add your column structure, insert your desired grid combination into the specified field and click generate. Your column structure will be generated.

Add nested row

After adding the column structure, you will have the option to add inner nested row inside the columns you have added. To add the nested inner row, click on the “Parent Column” icon in the addon editor.

Then a drop-down menu will open. Now select “Add Inner Row” to add you nested inner row

Your inner row is now added.

From backend

You can also add nested row from backend editor. The proceedings are stated below.

Adding row

To add your nested inner row, first you have to add a parent row. At the bottom of every row, you can find the “Add New Row” button. To add the parent row, click on the "Add New Row" button.

Or after creating your new page you will have the option of adding a new row.

Generate column structure

To generate a complex column structure, click on the “add/manage column”, option on the top right top corner of every row. Insert your desired column structure and click generate.

Adding nested row

In every column, there is an icon on the top right corner named “Column Options”.

Click Column Options and select “Add New Row” from the drop-down list.

Here is what your added nested inner rows will look like.

So, this is how you can create custom layouts with SP Page Builder nested row feature. You can generate unlimited nested rows and create your desired layout. We believe this article will help you develop your custom layout. Meanwhile, if you have opinions regarding the article please use our comment section below. 

Get SP Page Builder

Comments (4)

This comment was minimized by the moderator on the site

black friday

Paul Frankowski
Paul Frankowski    Dixara
This comment was minimized by the moderator on the site

Will be, You will be able to save few dollars for Ice-Creams.

pepperstreet    Paul Frankowski
This comment was minimized by the moderator on the site

Also looking forward to blackfriday/cybermonday offer. My subscription ends on 1st December

Arafat Bin Sultan
Arafat Bin Sultan    pepperstreet
This comment was minimized by the moderator on the site

We have some exciting offers for this season that you'll love!

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.