1. Frantisek
  2. Announcements
  3. 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

https://www.linelab.org/images/tutorials/GTmetrix-performance-report-lbox.png


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 version 1.3 - see attachment


https://www.linelab.org/images/lbox/lbox_pages.jpg

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.

https://www.linelab.org/images/tutorials/colorize_template.jpg

Mobile First Design
https://www.linelab.org/images/tutorials/phone_webiste_layout.jpg
Responses (23)
Frantisek Accepted Answer Pending Moderation
Linelabox Support
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)

https://www.linelab.org/images/tutorials/logo.jpg
  1. more than a month ago
  2. Announcements
  3. # 1
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Module settings

Position: topbar1
https://www.linelab.org/images/tutorials/topbar1.jpg
  1. more than a month ago
  2. Announcements
  3. # 2
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: topbar2
https://www.linelab.org/images/tutorials/topbar2.jpg
  1. more than a month ago
  2. Announcements
  3. # 3
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: below-top1
https://www.linelab.org/images/tutorials/below-top1.jpg
  1. more than a month ago
  2. Announcements
  3. # 4
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: below-top1
https://www.linelab.org/images/tutorials/below-top1-2.jpg
  1. more than a month ago
  2. Announcements
  3. # 5
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: below-top1
https://www.linelab.org/images/tutorials/below-top1-3.jpg
  1. more than a month ago
  2. Announcements
  3. # 6
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: below-top1
https://www.linelab.org/images/tutorials/below-top1-4.jpg
  1. more than a month ago
  2. Announcements
  3. # 7
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: below-top1
https://www.linelab.org/images/tutorials/below-top1-5.jpg
  1. more than a month ago
  2. Announcements
  3. # 8
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: below-top1
https://www.linelab.org/images/tutorials/below-top1-6.jpg
  1. more than a month ago
  2. Announcements
  3. # 9
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: menu
https://www.linelab.org/images/tutorials/menu.jpg
  1. more than a month ago
  2. Announcements
  3. # 10
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: search
https://www.linelab.org/images/tutorials/search.jpg
  1. more than a month ago
  2. Announcements
  3. # 11
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: banner
https://www.linelab.org/images/tutorials/banner.jpg

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
  1. more than a month ago
  2. Announcements
  3. # 12
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: top-a1

https://www.linelab.org/images/tutorials/top-a1.jpg

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>
  1. more than a month ago
  2. Announcements
  3. # 13
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: top-b1

https://www.linelab.org/images/tutorials/top-b1.jpg

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>
  1. more than a month ago
  2. Announcements
  3. # 14
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: top-b2
https://www.linelab.org/images/tutorials/top-b2.jpg
  1. more than a month ago
  2. Announcements
  3. # 15
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: top-c1

https://www.linelab.org/images/tutorials/top-c1.jpg


<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>
  1. more than a month ago
  2. Announcements
  3. # 16
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: main-top
https://www.linelab.org/images/tutorials/main-top.jpg
  1. more than a month ago
  2. Announcements
  3. # 17
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: main-bottom
https://www.linelab.org/images/tutorials/main-bottom.jpg
  1. more than a month ago
  2. Announcements
  3. # 18
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: bottom-a1
https://www.linelab.org/images/tutorials/bottom-a1.jpg


Position: bottom-b1
https://www.linelab.org/images/tutorials/bottom-b1.jpg
  1. more than a month ago
  2. Announcements
  3. # 19
Frantisek Accepted Answer Pending Moderation
Linelabox Support
Position: bottom-c1

https://www.linelab.org/images/tutorials/bottom-c1.jpg

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>
  1. more than a month ago
  2. Announcements
  3. # 20
  • Page :
  • 1
  • 2


There are no replies made for this post yet.
However, you are not allowed to reply to this post.