In this toturial, I will show you how to create a dynamic Joomla! template layout with Jarvis Layout Builder, it helps you create separator layout for each device screen resolution: Large, Medium, Small and Extra Small and add module position into blocks.

The first thing, we need add section:

layout builder add a section

Creating a new section:

section added

Section(Row) setting: If you need to addbackground, add id, class(to custom css) and hide or show this section on screen resolutions then you can click Edit section(row) setting.

row setting

Configure layout setting: you can adjust block width by drag and move the block. So when you add inner blocks it will display as you want.

layout setting for section

Add inner blocks: In this step, you can add blocks that you want, just click Add inner block icon, it will show you exactly as you config at layout setting step, but you can change block width by drag and move bocks.

Now i will create a sample header section and you can add direct module positions here. I will create header section with navigator, logo, top-area, middle-slide module positions.

1. Add a new section then add inner blocks

2. I'm adding 4 inner blocks and change block width by drag and move blocks as screenshot below.

3. Add module position into block, click icon in red area(3)

adding inner blocks

 After click Map Position icon (3) you can select position or add new position here and you can select style for your module too

add module positions

After added module position for other blocks, we will have header section layout as this screenshot below:

module positions added

Okey, so now you can understand how Jarvis layout builder work! but i will show you more detail about creating body section(this post will show you how to add section into inner block) and custom device screen resolution layout in next post. 

Thanks for reading!

Articles in the same category

  1. Create a simple Joomla! template layout
  2. Jarvis Framework