Chapter 4: Learn to adjust The Layout for your Pages
In this chapter, you will learn how to edit the page layout with JSN PageBuilder 4 that helps you to create your page with a logical and organized structure.
Understand margin & padding
Firstly, you need to understand the difference between margin and padding to use the right parameter for the job.
Use padding properly
- Use padding to create “inner space” around the content to avoid content “touching” the edge of the container.
- The best practice is to keep the top & bottom and left & right padding the same.
- Set padding for the container which contains the element, not the element itself.
Use margin properly
- Use margin to create spacing between content blocks.
- Margin should be set from top to bottom and left to right. For example:
- Notice that the bottom margin of the top element will overlap with the top margin of the bottom element. Therefore no need to set the top margin of the bottom elements.
- The bottom margin of the last element in the container should be 0px
- Notice that the right margin of the left element will NOT overlap with the left margin of the right element.
- To create vertical spacing between the 2 elements in a column, set the bottom margin of the top element.
- To create horizontal spacing between the 2 elements in a row, set the right margin of the element on the left.
- Set margin exactly to the element that needs surrounding spacing. For example:
- To create vertical spacing between elements inside a container, set the margin to those elements.
- To create vertical spacing between rows inside a section, set the margin to those rows.
Do not use columns to create side spacing
Do not use columns to create side spacing. Instead, set left /right padding for the container.
Set spacing for content “growth”
Set spacing in the way that content can be added later without breaking layout.
Build a proper layout on different devices
Customize layout for different devices
With JSN PageBuilder 4, you can select the device and edit the layout for the individual.
Arrange content in multiple columns on mobile
With the list element, you can set the number of items per row and spacing between them.
Add spacing between two columns
Add an equal amount of spacing around the column
Use the parameter “Columns Spacing” in row settings to change space between columns.
- The system will automatically set the negative left /right margin of the row as half of the Columns Spacing to make row reaches side edges.
- Thus, it’s recommended to have Columns Spacing = 30px by default to build a clear layout.
Add specific side spacing of the column
If you need to have special spacing between columns, use the margin-left /right parameter in the column’s settings.
Align content horizontally at the centre
Align the whole container
- Set equal left/right padding to make the inner container content stand at the centre.
- Don’t forget to check and update this padding on the mobile view. It’s very common that on the desktop there is a big side spacing, but on mobile, the pixels is smaller or even zero.
Align content elements within a container
If Flex is not applied to the container
Select the container and set centre alignment.
If Flex is applied to the container
Set “Justify Content” to “Center”.
Align content vertically in the middle
If the container’s height is fixed
If the column does NOT have any background
Set the “Content Position” parameter in row’s settings to “Center Middle”.
If the column does have a background
- Wrap content to the “Block” element.
2. Set Display Style to Flex for Column, then “Align Items” to “Center”.
If containers height is flexible
Use the top/bottom padding of the Section to adjust its height.
- Do not set the Height parameter for the column at the same time as top/bottom padding.
Align two inline elements vertically
By default, inline elements will stand side by side (left / right) with each other. To align them vertically in an independent row, you need to wrap them in a Block element.
Handle common layout
Content in “zigzag” layout
It’s a common situation when you need to present content in a zigzag layout, i.e. the first row has an image on the left, second - image on the right, etc.
On mobile, the default responsive mechanism will make 2 text blocks appear near each other.
To fix this, select the second row and set Flex Direction to Column-Reverse.
How to do:
- Wrap content to Block element and set padding.
- Set “Image Size” to “Full Width”.
- Use heading for card title.
- Set margin-top of the heading to “0”.
- Set background colour to the block.
How to do:
- Create 1st row with 2 columns layout
- Set Content Position parameter to Center Middle.
- Set margin-right of the left column to adjust the distance between the 2 columns.
- Set margin-bottom of the row to adjust the distance between 2 rows.
- Add Paragraph element and fill in your own content.
How to do:
- Set background image to the column
- Set “Height” in accordance with the banner image’s height.
- Set padding to avoid content “touching” to the edge.
- If you want to align content horizontally at the centre, set parameter “Alignment” to centre.
- If you want to align content vertically in the middle use Flex method.
Content outside the container
To build content outside the box layout as the above screenshot, do the following:
- Set a negative margin to the top or bottom of the column containing content.
Content block on one side
To have content block shifted to the side, do the following:
- Set left / right padding of the container to shift content to the opposite side.
- Don’t forget to check and update this padding on the mobile view. It’s very common that on the desktop there is big side spacing, but on mobile, just a few pixels or even zero.
To build a bar of one or various inline elements standing side by side:
- Wrap all elements in Block containers.
- Set the margin to elements from left to right.
If elements do not have the same height and you need to vertically align them in the middle:
- Set Display = Flex for block, then
- Align Items = Center
- Justify Content = Center