JSN ExpNews Released

WELCOME OFFER 25%

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.

Configure spacing

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

Padding setting
Padding setting
  • 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

Margin setting
Margin setting
  • 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

Side Spacing
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.

Bad approach
Bad approach
Good approach
Good approach

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.

All devices layout
All devices layout

Arrange content in multiple columns on mobile

Multiple columns
Multiple columns

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

Column spacing
Column spacing

Use the parameter “Columns Spacing” in row settings to change space between columns.

Note:

  • 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

Column margin
Column margin

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

Align whole container
Align whole container
  • Set equal left/right padding to make the inner container content stand at the centre.

Important!

  • 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

Not flex container
Not flex container

Select the container and set centre alignment.

If Flex is applied to the container

Flex container
Flex 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

Column without background
Column without background

Set the “Content Position” parameter in row’s settings to “Center Middle”.

If the column does have a background

  1. Wrap content to the “Block” element.
Column with background
Column with background

2. Set Display Style to Flex for Column, then “Align Items” to “Center”.

Column Flex setting
Column Flex setting

If containers height is flexible

Flexible height
Flexible height

Use the top/bottom padding of the Section to adjust its height.

Important!

  • Do not set the Height parameter for the column at the same time as top/bottom padding.

Align two inline elements vertically

Inline elements
Inline elements

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.

Zigzag layout
Zigzag layout

On mobile, the default responsive mechanism will make 2 text blocks appear near each other.

Layout on mobile
Layout on mobile

To fix this, select the second row and set Flex Direction to Column-Reverse.

Column Reverse
Column Reverse

Content card

Card #1

Card 1
Card 1

How to do: 

  1. Wrap content to Block element and set padding.
  2. Set “Image Size” to “Full Width”.
  3. Use heading for card title.
  4. Set margin-top of the heading to “0”.
  5. Set background colour to the block.

Card #2

Card 2
Card 2

How to do: 

  1. 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.
  2. Create the 2nd row with 1 column layout
    • Add Paragraph element and fill in your own content.

Content banner

Content banner
Content banner

How to do: 

  1. Set background image to the column
    • Set “Height” in accordance with the banner image’s height.
  2. Adjust spacing inside the banner
    • 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.
  3. Don’t forget to choose content element properly. 

Content outside the container

Content out of the box
Content out of the box

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

Content on one side
Content 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.

Important!

  • 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.

Content bar

Content bar
Content bar

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.
Elements different height
Elements different height

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

References


Previous chapter:

Chapter 3: How to add Content to Joomla page

Next chapter:

Chapter 5: Style your Pages with default settings

 

Comments (0)

There are no comments posted here yet
Rate this article
(0 votes)