Loading...

T4 Blank BS5

T4 Blank BS5 is the latest new template on theT4 framework that is based on Bootstrap 5 version with a lot of new features.

The section helps you understand more about T4 Blank BS5 Joomla template framework supported layouts and bonus pages, how it works and how to configure them.

Layouts

In T4 blank BS5 we have introduced new layouts to create corporate and Magazine layout with customized style of Joomla articles category module.

Corporate Layout

Corporate Layout is a new layout with a variety of modules to create corporate business homepage. Follow the below steps to configure the same view on site.

Here is the instruction to create the same Corporate page

1. Create a template style

The page uses HomeBiz layout so we have to create a template style. The best way to create the template is by cloning the T4 blank default template style. to create the different types of Homepages like in the demo you need to duplicate the default template style and assign it to the different pages.

Here is the default layout structure of the same Page.

Home biz layout

2. Create Corporate page menu item

Go to Menu » Main menu, add a new menu item, select Article » Single Article menu type and assign "JA T4 BS 5 blank Home" template style.

corporate menu

3. Assign content to the Corporate page

Content of the Homepage is loaded from modules. Here is the detailed configuration of each module.

1. Slideshow Custom HTML Module

corporate slideshow module

Module position: slideshow
Module Suffix: NOT USED
Alternative layout: default

HTML Code

<div class="slideshow-wrap">
  <div class="row align-items-center">
    <div class="col-12 col-md-5 mb-4 mb-md-0 text-center text-sm-start">
      <h3 class="fs-sm text-uppercase mt-0 mb-1 text-warning">We are making</h3>
      <h1 class="fs-1 mt-0 mb-3">Build beautiful website with T4 Framework</h1>
      <p class="lead mb-4">Aliquam pharetra purus finibus quam dignissim, quis congue arcu convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <div class="action-wrap">
        <a href="#" class="btn btn-primary btn-lg shadow rounded-pill px-4">Check out now</a>
      </div>
    </div>
    
    
    <div class="col-12 col-md-6 offset-md-1">
      <img src="images/demo/misc/sl-2.png" alt=""/>
    </div>
  </div>  
</div>

2. Trust by Custom HTML Module

corporate Trustby module

Module position: section-1
Module Suffix: NOT USED
Alternative layout: default

HTML Code

<ul class="brand-list">
  <li><a href="#" title="Sample brand"><img src="images/demo/misc/logo-1.png" alt="Logo 1" /></a></li>
  <li><a href="#" title="Sample brand"><img src="images/demo/misc/logo-2.png" alt="Logo 1" /></a></li>
  <li><a href="#" title="Sample brand"><img src="images/demo/misc/logo-3.png" alt="Logo 1" /></a></li>
  <li><a href="#" title="Sample brand"><img src="images/demo/misc/logo-4.png" alt="Logo 1" /></a></li>
  <li><a href="#" title="Sample brand"><img src="images/demo/misc/logo-5.png" alt="Logo 1" /></a></li>
  <li><a href="#" title="Sample brand"><img src="images/demo/misc/logo-6.png" alt="Logo 1" /></a></li>
</ul>

3. About us Custom HTML Module

corporate About-us module

Module position: section-2
Module Suffix: NOT USED
Alternative layout: default

HTML Code

<div class="row">
  
  <div class="col-12 col-md-12 col-lg-4 mb-4 mb-lg-0">
    <div class="section-heading">
      <h3 class="fs-sm text-uppercase mt-0 mb-2 text-warning">About us</h3>
      <h2 class="fs-1 mt-0 mb-3">Best Joomla! Framework 2021</h2>
      <p class="fs-md lead mb-5">Since 2006 we are phasellus tristique eu lectus in pellentesque. Nam pellentesque, urna id fermentum faucibus, neque sapien varius metus, ac venenatis augue metus non elit.</p>
      <a href="#" title="More detail" class="btn btn-outline-primary btn-lg rounded-pill shadow-sm fs-md px-4 border-2">Learn more</a>
    </div>
  </div>
  
  <div class="col-12 d-none d-md-block col-md-12 col-lg-8">
	<div class="row">
      <div class="col-12 col-md-4 pe-1">
        <img src="images/demo/misc/about-2.jpg" alt="About 1" class="rounded-4 shadow-sm w-100" />
      </div>
      <div class="col-12 col-md-8 ps-1">
        <div class="media-item w-100 mb-2">
        	<img src="images/demo/misc/about-1.jpg" alt="About 1" class="rounded-4 shadow-sm w-100" />
        </div>
       
		<div class="media-item d-flex align-items-start">
          <img src="images/demo/misc/about-3.jpg" alt="About 1" class="rounded-4 shadow-sm w-50 me-1" />
          <img src="images/demo/misc/about-4.jpg" alt="About 1" class="rounded-4 shadow-sm w-50 ms-1" />
        </div>
       

      </div>
    </div>
  </div>
  
</div>

4. Our services Custom HTML Module

corporate Our-services module

Module position: section-3
Module Suffix: NOT USED
Alternative layout: default

HTML Code

<div class="row justify-content-center">
  <div class="col-12 col-md-10 col-lg-6">
    <div class="section-heading text-center mx-auto mb-5">
      <h3 class="fs-sm text-uppercase mt-0 mb-2 text-warning">Our services</h3>
      <h2 class="fs-1 mt-0 mb-3">Web design &amp; development.</h2>
      <p class="fs-md lead mb-5">We are phasellus tristique eu lectus in pellentesque. Nam pellentesque, urna id fermentum faucibus.</p>
    </div>    
  </div>
</div>


<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
  
  <div class="col mb-4">
    <div class="card bg-light rounded-4 shadow-sm border-0 text-center h-100 p-3">
      <div class="card-body">
        <span class="display-5 d-inline-block mb-3 text-secondary"><i class="fas fa-swatchbook"></i></span>
        <h4 class="mt-0 mb-3 fs-5 fw-bold">Web Design</h4>
        <p>Beautiful websites fusce efficitur mauris quam, sit amet mattis odio tincidunt vel. Aliquam erat volutpat. Ut malesuada, sapien in eleifend ullamcorper, mi metus elementum turpis, quis ultricies nulla ipsum.</p>
      </div>
    </div>
  </div> <!-- End: col -->
  
  <div class="col mb-4">
    <div class="card bg-light rounded-4 shadow-sm border-0 text-center h-100 p-3">
      <div class="card-body">
        <span class="display-5 d-inline-block mb-3 text-secondary"><i class="fas fa-fill-drip"></i></span>
        <h4 class="mt-0 mb-3 fs-5 fw-bold">Web Development</h4>
        <p>Websites built Aliquam rutrum, risus et pellentesque vestibulum, orci nunc condimentum diam, quis ultrices eros libero sed tellus. Aliquam pharetra purus finibus quam dignissim, quis congue arcu convallis.</p>
      </div>
    </div>
  </div> <!-- End: col -->
  
  <div class="col mb-4">
    <div class="card bg-light rounded-4 shadow-sm border-0 text-center h-100 p-3">
      <div class="card-body">
        <span class="display-5 d-inline-block mb-3 text-secondary"><i class="fas fa-pencil-ruler"></i></span>
        <h4 class="mt-0 mb-2 fs-5 fw-bold">Ecommerce</h4>
        <p>Websites built Mauris enim est, iaculis vitae nulla a, vulputate tristique nisl. Donec non odio diam. Duis efficitur, urna euismod mattis tincidunt, massa velit fringilla odio, id placerat arcu diam et ante.</p>
      </div>
    </div>
  </div> <!-- End: col -->
  
  <div class="col mb-4 mb-lg-0">
    <div class="card bg-light rounded-4 shadow-sm border-0 text-center h-100 p-3">
      <div class="card-body">
        <span class="display-5 d-inline-block mb-3 text-secondary"><i class="fas fa-layer-group"></i></span>
        <h4 class="mt-0 mb-2 fs-5 fw-bold">Ecommerce</h4>
        <p>Websites built Mauris enim est, iaculis vitae nulla a, vulputate tristique nisl. Donec non odio diam. Duis efficitur, urna euismod mattis tincidunt, massa velit fringilla odio, id placerat arcu diam et ante.</p>
      </div>
    </div>
  </div> <!-- End: col -->
  
  <div class="col mb-4 mb-md-0">
    <div class="card bg-light rounded-4 shadow-sm border-0 text-center h-100 p-3">
      <div class="card-body">
        <span class="display-5 d-inline-block mb-3 text-secondary"><i class="fas fa-paint-roller"></i></span>
        <h4 class="mt-0 mb-2 fs-5 fw-bold">Ecommerce</h4>
        <p>Websites built Mauris enim est, iaculis vitae nulla a, vulputate tristique nisl. Donec non odio diam. Duis efficitur, urna euismod mattis tincidunt, massa velit fringilla odio, id placerat arcu diam et ante.</p>
      </div>
    </div>
  </div> <!-- End: col -->
  
  <div class="col">
    <div class="card bg-light rounded-4 shadow-sm border-0 text-center h-100 p-3">
      <div class="card-body">
        <span class="display-5 d-inline-block mb-3 text-secondary"><i class="fab fa-figma"></i></span>
        <h4 class="mt-0 mb-2 fs-5 fw-bold">Ecommerce</h4>
        <p>Websites built Mauris enim est, iaculis vitae nulla a, vulputate tristique nisl. Donec non odio diam. Duis efficitur, urna euismod mattis tincidunt, massa velit fringilla odio, id placerat arcu diam et ante.</p>
      </div>
    </div>
  </div> <!-- End: col -->
  
  
</div>

5. Customer testimonials Custom HTML Module

corporate Customer-testimonials module

Module position: section-4
Module Suffix: NOT USED
Alternative layout: default

HTML Code

<div class="row justify-content-center">
  <div class="col-12 col-md-10 col-lg-6">
    <div class="section-heading text-center mx-auto mb-5">
      <h3 class="fs-sm text-uppercase mt-0 mb-2 text-warning">Customer testimonials</h3>
      <h2 class="fs-1 mt-0 mb-3">What is our customer say?</h2>
      <p class="fs-md lead mb-5">Yes, we are pretty awesome, but take a look at what just some of our amazing clients have to say about working with T4 Framework.</p>
    </div>    
  </div>
</div>


<div class="row">
  
  <div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
    <div class="row g-0 border bg-white rounded-4 overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-5 d-flex flex-column position-static">
          <span class="fs-sm d-inline-block mb-2 text-secondary">#Joomla, #Framework</span>
          <h4 class="mb-3">Managing business operations with teams across geopraphies</h4>
          <div class="d-flex align-items-center">
            <span class="icon-md rounded-circle me-3"><img src="images/demo/misc/avt-3.jpg" alt="Author" class="rounded-circle p-1 border" /></span>
            <div>
              <h6 class="mt-0 mb-1">Martin Lee</h6>
              <p class="fs-sm my-0 text-secondary">Co-Founder <span class="text-primary">Joomlart.com</span></p>              
            </div>
          </div>
        </div>
      
        <div class="col-auto d-none d-lg-block">
          <img src="images/demo/misc/test-1.jpg" alt="Sample image" />
        </div>
      </div>
  </div>
</div>

6. Statistics Custom HTML Module

corporate Statistics module

Module position: section-5
Module Suffix: NOT USED
Alternative layout: default

HTML Code

<div class="row row-cols-2 row-cols-md-4">
  
  <div class="col mb-3 mb-md-0">
    <div class="text-center">
      <strong class="display-5 fw-bold d-block">6,500</strong>
	  <span>Joomla! Templates</span>
    </div>
  </div> <!-- End: col -->
  
  <div class="col mb-3 mb-md-0">
    <div class="text-center">
      <strong class="display-5 fw-bold d-block">7 top</strong>
	  <span>Joomla! Clubs</span>
    </div>
  </div> <!-- End: col -->
  
  <div class="col">
    <div class="text-center">
      <strong class="display-5 fw-bold d-block">300k</strong>
	  <span>Active Members</span>
    </div>
  </div> <!-- End: col -->
  
  <div class="col">
    <div class="text-center">
      <strong class="display-5 fw-bold d-block">15+</strong>
	  <span>Experience</span>
    </div>
  </div> <!-- End: col -->
  
</div>

7. Blog post Articles category Module

T4 blank documentation

Module position: section-6
Module Suffix: NOT USED
Alternative layout: blog-layout

8. Footer

T4 blank documentation

Footer module contains Menu type Module to show different menu items and social links via custom module.

Magazine Layout

Magazine Layout is a new layout with variation of modules to create Magazine business homepage. Follow the below steps to configure the same view on site.

Here is the instruction to create the same Magazine page

1. Create a template style

The page uses Homemagz layout so we have to create a template style. The best way to create the template is by cloning the T4 blank default template style. to create the different types of Homepages like in the demo you need to duplicate the default template style and assign it to the different pages.

Here is the default layout structure of the same Page.

Home magz layout

2. Create Magazine page menu item

Go to Menu » Main menu, add a new menu item, select Article » Category blog menu type and assign "JA T4 BS 5 blank Magz" template style.

Magazine menu

3. Assign content to the Magazine page

Content of the Magz Homepage is loaded from modules. Here is the detailed configuration of each module.

2.1. Highlight news Articles category Module

T4 blank documentation

Module position: section-1
Module Suffix: NOT USED
Alternative layout: Highlight-layout

2.2. Section 2 Modules

T4 blank documentation

Section 2 module use to show further 3 different module that are loaded via Layout options in 3 different columns. Each column is divided in equal width and load the module.

You can create similar split modules via Layout builder option in template style > Layout Configurations as below :

T4 blank documentation

Here are the module configurations as set up in the demo site.

2.3. IT Procurement Module

Module position: none
Module Suffix: NOT USED
Alternative layout: List-layout

2.4. Mobile Module

Module position: none
Module Suffix: NOT USED
Alternative layout: List-layout

2.5. Technology Module

Module position: none
Module Suffix: NOT USED
Alternative layout: List-layout

2.6. Grid Layout Module

T4 blank documentation

Module position: section-3
Module Suffix: NOT USED
Alternative layout: grid-layout

Bonus Pages

In T4 blank BS5 we have added new Bonus pages to make it full multipurpose Joomla template. here is list:

  • Blog Grid Layout
  • Blog List Layout
  • About us Page
  • Pricing table

Blog Grid

Blog Grid Layout is a new layout style based on Joomla category blog menu with variation of articles in grid format. Follow the below steps to configure the same view on site.

Here is the instruction to create the same page

1. Create a template style

The page uses no sidebar layout so we have to create a template style. The best way to create the template is by cloning the T4 blank default template style. to create the different types of Homepages like in the demo you need to duplicate the default template style and assign it to the different pages.

Here is the default layout structure of the same Page.

blog grid layout

2. Create blog grid page menu item

Go to Menu » Main menu, add a new menu item, select Article » Category blog menu type and assign "JA T4 BS 5 blank no sidebar" template style.

blog-grid menu

Blog list

blog list Layout is a new layout style based on Joomla category blog menu with variation of articles in list format. Follow the below steps to configure the same view on site.

Here is the instruction to create the same page

1. Create a template style

The page uses default layout so we have to create a template style. The best way to create the template is by cloning the T4 blank default template style. to create the different types of Homepages like in the demo you need to duplicate the default template style and assign it to the different pages.

Here is the default layout structure of the same Page.

blog list layout

2. Create blog list page menu item

Go to Menu » Main menu, add a new menu item, select Article » Category blog menu type and assign "JA T4 BS 5 blank default" template style.

blog-list menu

About us Page

About us Page is based on Joomla single article menu to display about and team member profile. Follow the below steps to configure the same view on site.

Here is the instruction to create the same page

Create About us page menu item

Go to Menu » Main menu, add a new menu item, select Article » Single Article menu type and assign "JA T4 BS 5 blank default" template style.

About-us menu

You can download the HTML source code of About us Page from Here

Pricing Page

Pricing Layout is a new layout style based on Joomla single article menu to display a Pricing table. Follow the below steps to configure the same view on site.

Here is the instruction to create the same page

Create Pricing page menu item

Go to Menu » Main menu, add a new menu item, select Article » Single Article menu type and assign "JA T4 BS 5 blank default" template style.

Pricing menu

You can download the HTML source code of Pricing Page from Here