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:

  1. Bootstrap
  2. UIKit
  3. Material Design
  4. Foundation
  5. Pico

You an select the framework from the Details Tab.

2. Sections

The template is divided into six sections:

  1. Top Bar
  2. Header
  3. Showcase
  4. Main
  5. Footer
  6. 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:

  1. No Sidebar
  2. Right Sidebar
  3. Left Sidebar

The Main section contains four sub-sections:

  1. Top
  2. Component Area
  3. Bottom
  4. 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.