In previous post, i showed you how to use Jarvis layout builder and in this post i will create a simple Joomla! template layout. It's easy and quickly to build an Joomla! template layout.

1. Adding sections: In this tutorial, i will add sections for header(it includes logo, navigation blocks), section for middle slider (it includes middle slide block), section body (it includes left, body, right blocks. With body block, i will create 3 sections inner for system message, component and main bottom blocks), footer section and footer widget section.

Create header section: Click Add Section area

create header section

Create header inner blocks: Move mouse over and click Add inner blocks button, i add 2 blocks for logo and navigation

Add inner block into header section

After added blocks, adjustment block width as image below:

Adjustment blocks header 

2. Create middle slide section and block: This step is similar create header section and block but i just need add one block for middle slider module only

add middle section and block

3. Create body section and blocks: In this step, add section and then add 3 inner blocks (left column, body and right column) and adjust width of block. Now i need add more 3 sections inner block by click add inner section button:

create body section and blocks

 add body blocks

And then click Add inner block button.

body block added

4. Create footer setions and blocks: 

add section footer and blocks

5. Add module position into Joomla! template layout: With Jarvis framework, i don't need open Joomla! template xml file to add/create more position but we can do it here, add module position into block. Just move over block area and then click Mapping Position button:

add module position

And i can add new position name or select a already exist position and select module style.

add module position and select module style

Then add all module positions i will have new Joomla! layout template. Now i'm going to custom my new Joomla! layout template with others device resolution, Jarvis allows you do it for each device resolution (Adjust blocks, section by width, on/off visible, custom background for section, add more div class, id).

Click edit button (section, block): Example i don't want left and right block appear on small and extra small device then i click edit button:

visible or invisible section and block

For more detail, you can watch this video:

 

Articles in the same category

  1. How to create Joomla! template layout with Layout Builder
  2. Jarvis Framework