Template Structure, Layout and Sections Guide
Air (or BootOne) Template a multipurpose Joomla template that can be used as a standalone template or it can be used as a framework for a wide range of different websites. You can use this template with TF Page Builder or any other page builder also.
After installing the template, you can access and configure it from the System -> Site Template Styles. Select the template style.
1. Framework
Air template supports multiple CSS frameworks:
- Bootstrap
- UIKit
- Material Design
- Foundation
- Pico
You an select the framework from the Details Tab.
2. Sections
The template is divided into six sections:
- Top Bar
- Header
- Showcase
- Main
- Footer
- Foot Bar
Each section has its configuration or settings under different tab as section name. The first setting for each section enables or disables the section completely. Disabling all sections will create a blank page.
You can create multiple styles by clicking "Save as Copy". For example, one style for Home page and Default style for all other pages.
3. Container
Container Type: This is one of the important setting for the section. This determines the width and margin for the section.
- None - the section expands to the full width
- Container
- Container Fluid
4. Showcase
Showcase Style: Select from any pre-made style or choose custom to define your own styles.
4. Main
Layout: There are three options to choose from:
- No Sidebar
- Right Sidebar
- Left Sidebar
The Main section contains four sub-sections:
- Top
- Component Area
- Bottom
- Sidebar
Section Settings: Same as the header section.
Container Settings: Same as the header section.
Module Positions: For each subsection, you can enable or disable and add any classes for styling.
5. Footer
The footer section includes five module positions: footer, footer-1, footer-2, footer-3, footer-4.
Section Settings: Same as the header section.
Container Settings: Same as the header section.
6. Foot Bar
Section Settings: Same as the header section.
Container Settings: Same as the header section.
Alignment: Select the alignment for the footer elements.
Fixed: Toggle switch to enable or disable fixed footer.