Building layout is the most important work of template or website development. It is never easier to build from basic to complicated layout with T4 Layout Builder. T4 Framework is a powerful and advanced responsive template framework for Joomla. It is a modern, flexible and highly customizable framework to build beautiful Joomla websites easier.
To install T4 framework on your existing Joomla website, install T4 framework plugin and install T4 Blank template.
To access working panel of T4 Blank template (or any template built with T4 Framework), from your site back-end, go to Extensions > Templates and open T4 Blank template style.
Dark Mode: To enable Dark Mode, from the setting panel, enable the Dark Mode option on the toolbar bottom.
Template Style: For each T4 template, you can create multiple template styles with different settings and assign to specific menu items. To create new template style, you can duplicate the default style or you can save as copy in setting panel of any style.
Development Mode: When you are developing your site, you should enable this option so any update you made will be instantly displayed without any cache. To enable or disable this option, go to System > Global Configuration > System and find the option Development Mode. When you are not developing your site, you should disable this option to activate T4 cache and improve your site performance.
The site settings include configuration for your site name, site slogan, logo image, custom favicon, and back-to-top option.
You can create multiple site settings profiles with different configurations and assign the profile to different template styles. Thus, you can have different logos, favicon, site name for different pages.
Site name: added to the title tag of site name. In case the logo image is not set, the site name will be used as text logo.
Site slogan: add slogan for the site. When text logo is used, the slogan will be shown below text logo.
Logo Image: browse logo image or upload logo image.
Logo on mobile: the logo image will be shown on mobile layout. If it is not set, it will use global logo.
Change favicon: browse image for the site favicon. You can browse any image, it will be auto generated to .ico file and it will stored in folder: media/t4/t4_blank/
Show back to top button: enable this option to show the Back to top button.
The Global settings include configuration for CSS & JS optimization, Custom code and Add-ons management.
2. Custom Code: You can insert any CSS, JS, meta tags, links, and verification codes using the custom code option. You can add custom code at the following positions in HTML: After <head>, Before </head>, After <body>, and Before </body> tag.
For example, you can add custom code for Google Analytics, Live Chat Integration, Addthis, and so on.
3. Addons Management
The Add-ons panel includes settings to enable or disable font icons like Font awesome, Iconmoon. When an Addon is disabled, its CSS and JS will not be loaded in your website. This is to help keep your site clean and load faster.
You can build from simple to complicated layout with ease based on module positions and customize the existing template in almost any shape without code customization.
A layout is a set of sections (rows). Each row has its own settings and can include one or multiple columns.
Layout Grid: T4 integrates Bootstrap 4 and its layout is based on 12 column layout from Bootstrap 4 with powerful mobile-first flexbox grid to build layouts of all shapes and sizes. When create a section, you can use set number of columns and configure width for each column (based on 12 column grid). The grid system is responsive by default where columns are re-arranged depending on the screen size.
Manage Layouts: In the Layout setting panel, there are multiple default layouts. You can select a layout for any template style from the layout dropdown selection.
1. Section (row) configuration
For each row or section, it includes 3 configuration panels: General, Color Palletes and Overlay.
General settings includes:
Color Palettes: Each color palettes is a set of color setting: background color, text color, link color, link hover color. For each template, there will be multiple default color palettes. You can use the default ones or clone new ones, customize and use.
Overlay: T4 Framework template allows you to make image overlay or video overlay for any section. You can select image or video overlay type, configure the display for selected overlay type based on corresponding settings.
2. Column settings
Column is used to show content for section by assigning column type:
T4 framework has four pre-made header styles block.
You can select a theme from the supported themes for current template style. Theme settings include settings for:
On one website, you can use different menus on different pages.
Megamenu: select a menu and build megamenu for the menu using the megamenu builder
Off-canvas: configuration for off-canvas menu
Menu breakpoint: select the screen that mobile menu will be enabled
In the Tools panel, hit the Edit Custom CSS button and add your own custom CSS rules to the editor.