You can switch between Wide and Boxed layouts in TemPlaza Framework. Please go to Admin > Theme Options > Settings > General > Layout Settings.

Wide layout

Boxed layout

When the boxed layout is enabled, you can configure the background color and background image.

TemPlaza Framework comes with a drag & drop layout builder, so you’re able to edit, manage and control the layout of the template. It’s easy to use and add different blocks to create your own layout for pages, as well as adjust elements effortlessly.

Please go to Admin > Theme options > Settings > Layout > Edit or create a new one

Section Settings

Sections are the main building blocks of any layout. Everything that you see at the front end directly or indirectly exists inside a section.

Click on “Add Section” to create a new section

After adding the section you see certain options(icons) like Drag or reorder section, Section name, Toggle section, Add Row, New Section, Edit section, Duplicate, and Delete.

If you click on the “Edit Section” icon, a popup opens that has 3 different tabs General Settings, Design Settings & Responsive Settings. With these settings, you can customize your sections easily.

General

Under this tab the options are as follows:

• Admin Label: enter the admin label of the section for an easy identification
• Custom Class: Write the class name used for writing custom CSS or JS.
• Custom ID: Give a custom ID to override the auto-generated ID.
• Section Layout: Choose the layout for the section from Container, Container Fluid, Container with No gutters, Container fluid with no gutters, Without Container, or a Custom layout.
• Layout Custom Class: If you choose a Custom layout then write the custom class name.
• Text Align: specifies the horizontal alignment of text: Left, Center, or Right

Design Settings

Under this tab the options are as follows:

• Background Type: Select the background type for your section from Color, Image, or Transparent.
• Custom Colors: Choose whether you want to make the text transparent or give it a custom color. And you’re also able to set the color of regular, active and hover-links.
• Spacing: With this, you can set your section’s custom Margin & Padding in 4 different units Px, Em, Rem & % with device responsiveness.

Responsive Settings

Under this tab, the only option is:

• Device Visibility: Choose your preference of hiding or showing the section on different screens like Hide on Extra Small Devices, Hide on Small Devices, Hide on Medium Devices, Hide on Large Devices or Hide on Extra Large Devices.

Row Settings

Add New Row option is provided along with the section name. Other editing options are provided to the right of each row that are Add Column, Edit Grid, Edit Row, Duplicate Row & Delete Row icons.

Edit Grid

When clicking on “Edit Grid”, you can choose one of the given grid layouts or use a custom grid to create your own grid layout (Ex: 2+3+6+1)

When you click on the “Edit Row” icon, a popup opens that has 3 different tabs: General Settings, Design Settings & Responsive Settings. With these settings, you can customize your row easily.

Element Settings

Creating a template layout from scratch just by dragging & dropping elements into your layout, with incredible speed and performance.

Click “Add Element” and choose a suitable element to add to the layout. It’s easy to add new sections, new elements, as well as edit, duplicate or remove them.

If you click on the “Edit Element” icon, it will open a popup that has 2 tabs: General Settings, Design Settings. With these settings, you can customize your element easily.

General Settings

Under this tab the options are as follows:

• Admin Label: Give the element a name to make it easy & clear to understand in the layout manager.
• Text Align: specifies the horizontal alignment of text: Left, Center, or Right
• Custom Class: Write the class name used for writing custom CSS or JS.
• Custom ID: Give a custom ID to override the auto-generated ID.

Design Settings

Under this tab the options are as follows:

• Background: You can change the background color by selecting a color, or choose the “transparent” option
• Spacing: set your element’s custom Margin & Padding in 4 different units Px, Em, Rem & % with device responsiveness.
• Custom Colors: you can set the text color and link color of the element