Build grid layout page

You can make grid layout by using Page Builder by Siteorigin plugin in Pjax Blog Pro edition.
You should start with import demo data first so that you can easily know how to make it.

Import grid layout demo data

*This feature is available in Pro Edition.

Appearance > Import Demo Data > Template Import Pro 1
* Please note that importing demo data may break your current contents or layout of the website.

– See Demo
https://demo.leap-in.com/pjax-blog-1

Remove blank space between cells

Sometimes, we want to remove margin among rows and cells especially when we try to build 1 column layout like “Template Import Pro 1”.

The default margin of Page Builder is set to 30px. So If you want to remove this, you just do the following steps.
Go to Settings > Page Builder > layout.
Change “Row/Widget Bottom Margin” and “Row Gutter” to 0 px.

 

Declare Grid Layout in the container

Add lp-tiles class to the top level container. It has a role to arrange grid cells in height.

Before adding .lp-tiles class

There is a blank space below the last 2 tiles.

After adding .lp-tiles class

There is no blank space because lp-tiles class force child elements to be the same height.

 

Put an Icon, Title, Description, and Button on the grid layout.

“[Pjax Blog] Text Box For Page Builder” is designed for being used in Page Builder Layout. You can change its sizes, colors, and icons. Empty fields are not going to be displayed so you can use it just for showing Title or Button.

Add padding to the third-party widgets

“[Pjax Blog] Text Box For Page Builder” has padding field “Wrapper Padding”, yet third-party widget such as default image widget doesn’t have padding. In this case, please add padding classes to the widget so that its cell automatically obtain padding regarding window width.

p-l”(large), “p-lr”(larger), “p-sr”(smaller), “p-n”(none)

Add scroll animation to the grid

*This feature is available in Pro Edition.

To add scroll animation to the grid layout, please just add corresponding classes to the widget.
Please see animation classes here.

Advanced Technique: Make a grid sticky

If you want to make a single column sticky in a row like below. Please just add lp-sticky class to the element you want to stick.

 

Related Posts


Pjax Blog – Free WordPress Theme
It contains all functionality you need to make professional blog. All you have to do is including templates and you can start your blog today.

More

Latest Posts