-
Frantisek
- Announcements
- Friday, 24 February 2023
New Free Joomla 4 template was released today.
LBOX is free Joomla 4 template that can fit of any type of website. LBOX is very easy to customize. Lightweight, modern and fast-loading design.
Super fast loading speed without caching and WebP!
98 % Performance - A Grade
DEMO: lbox.linelab.org
Info: https://www.linelab.org/tutorials/lbox-free-joomla-4-template
Changelog: http://www.linelab.org/features/changelog/104-lbox-free-joomla-4-template-changelog
Download joomlaportal.cz
The LBOX template color system can help you create a color theme that reflects your brand or style. No code skills needed. Super easy customization. This flexibility gives you an entirely unique design.
Mobile First Design
LBOX is free Joomla 4 template that can fit of any type of website. LBOX is very easy to customize. Lightweight, modern and fast-loading design.
Super fast loading speed without caching and WebP!
98 % Performance - A Grade
DEMO: lbox.linelab.org
Info: https://www.linelab.org/tutorials/lbox-free-joomla-4-template
Changelog: http://www.linelab.org/features/changelog/104-lbox-free-joomla-4-template-changelog
Download joomlaportal.cz
The LBOX template color system can help you create a color theme that reflects your brand or style. No code skills needed. Super easy customization. This flexibility gives you an entirely unique design.
Mobile First Design
Template settings:
Install Template
Go to the System tab and select Site Template Styles from the Templates section
set Linelabox4 as the default template
Click on the template settings to add the logo and save the settings (in the second step, define the color settings and other template features)
Install Template
Go to the System tab and select Site Template Styles from the Templates section
set Linelabox4 as the default template
Click on the template settings to add the logo and save the settings (in the second step, define the color settings and other template features)
Position: banner
Custom html code
You can upload a background image with Parallax effect to this module on the "options" tab
Custom html code
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2 text-center rounded">IMAGE</div>
<div class="col-lg-5 mt-lg-n10 text-center text-lg-start">
<h1 class="display-3 mb-5 mt-5 animate__animated animate__fadeInDown">Lorem <span class="txt-primary">ipsum dolor sit</span> amet, consectetuer adipiscing elit.</h1>
<p class="lead fsi-25 lh-sm mb-12 px-md-10 px-lg-0">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. Quisque porta.</p>
<div class="d-flex justify-content-center justify-content-lg-start"><a class="btn btn-lg btn-primary rounded-pill me-3" href="#">Shop Now</a> <a class="btn btn-lg btn-secondary rounded-pill" href="#">Special Collections</a></div>
</div>
You can upload a background image with Parallax effect to this module on the "options" tab
Position: top-a1
Custom html code
Custom html code
<div class="col-md-8 col-lg-6">
<figure class="rounded">OBRÁZEK</figure>
</div>
<div class="col-lg-5 col-xl-4 offset-lg-1">
<h2 class="display-4 mb-4 mt-4">WHY CHOOSE US</h2>
<p class="mb-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div class="d-flex flex-row mb-6">
<div><span class="btn btn-circle btn-primary pe-none me-4"><span class="number fsi-20">1</span></span></div>
<div>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
<div class="d-flex flex-row mb-6">
<div><span class="btn btn-circle btn-primary pe-none me-4"><span class="number fsi-20">2</span></span></div>
<div>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
<div class="d-flex flex-row">
<div><span class="btn btn-circle btn-primary pe-none me-4"><span class="number fsi-20">3</span></span></div>
<div>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
</div>
Position: top-b1
Custom html code
Custom html code
<h2 class="fsi-20 text-muted mb-3">Our Customer Reviews</h2>
<h3 class="display-5 mb-5">Proin mattis <span class="txt-primary">lacinia justo</span>. Fusce aliquam vestibulum ipsum.</h3>
<p>Aenean id metus id velit ullamcorper pulvinar. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.</p>
<p><a class="btn btn-primary rounded-pill mt-3" href="#">More info</a></p>
Position: top-c1
<div class="col-md-8 col-lg-6 position-relative">
<figure class="rounded">IMAGE</figure>
</div>
<div class="col-lg-5 offset-lg-1">
<h2 class="fsi-20 text-uppercase mb-3 mt-3">Etiam posuere lacus?</h2>
<h3 class="display-4 mb-6">Integer lacinia. Nullam at arcu a est sollicitudin euismod.</h3>
<p class="mb-6">Nullam at arcu a est sollicitudin euismod. Pellentesque sapien. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. In enim a arcu imperdiet malesuada.</p>
<div class="row gy-3 gx-xl-8">
<div class="col-xl-6">
<ul class="mb-0 no-list">
<li>Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
<li class="mt-3">Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
</ul>
</div>
<div class="col-xl-6">
<ul class="mb-0 no-list">
<li>Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
<li class="mt-3">Cras pede libero, dapibus nec, pretium sit amet, tempor quis.</li>
</ul>
</div>
</div>
</div>
Position: bottom-c1
In the template settings, select the fluid layout for "bottom" section
Custom html code:
In the template settings, select the fluid layout for "bottom" section
Custom html code:
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>EXPRESS SHIPPING</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo.</p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>30 DAY RETURN POLICY</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. </p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>EASY INSTALLATION</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. </p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mb-5"> </div>
<h4>100% PAYMENT SECURE</h4>
<p class="mb-3">Nullam at arcu a est sollicitudin euismod. Maecenas aliquet accumsan leo. </p>
<a class="btn btn-primary rounded-pill mt-3 mb-5" href="#">More</a></div>
- Page :
- 1
- 2
There are no replies made for this post yet.
However, you are not allowed to reply to this post.
However, you are not allowed to reply to this post.