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 inner blocks: Move mouse over and click Add inner blocks button, i add 2 blocks for logo and navigation
After added blocks, adjustment block width as image below:
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
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:
And then click Add inner block button.
4. Create footer sections 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:
And i can add new position name or select a already exist 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:
