01. 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.

The Joomla! 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.

Common Settings

These are common settings across all the sections available in custom style.

Container Type: Select from Container or Container Fluid.

The Container- Fluid covers the whole width of any device whereas the Container is set to cover a set maximum width on the largest viewports.

Container Class: Add classes to the container element.

1. Top Bar

This section can be used to include contact information, social media links or secondary navigation. Just add one or more modules to this module position.

Container: Select the type of container. The type of container defines the horizontal padding.

Background: Select the background type for the top bar section.

Text: Select the text type for the top bar section. The text should be in contrast with the background.

Alignment: Select the alignment.

2. Header

2.1 Section Settings

Section Class: Add classes to change the background and spacing for the section. For example: bg-primary py-4

Section Padding: Select the vertical padding for the section.

Section Margin: Select the vertical margin for the section.

Alignment: Select the alignment for content under this section.

Text: Select the text type for the top bar section. The text should be in contrast with the background.

Background: Select the background type for the top bar section.

Background Image: To include background image for the section, select the image.

Attachment: Select the attachment type for the background image.

Blend Mode: Select the blend mode for the background image.

2.2 Container Settings

Container Class: Add style classes for the container.

Container Type: Select the type of container. The type of container defines the horizontal padding.

Container Padding: Select the vertical padding for the container.

2.3 Header Options

Navbar: Show or hide the navigation.

Site Name: Show or hide the site name.

Logo: Show or hide the logo. Generally, you should either display site name or logo.

Feature: Show or hide the feature block.

Sticky: Enable it to make the header sticky.

3. 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.