Sj Basic4 - Responsive Free Joomla 4 Template

Sj Basic4 - Responsive Free Joomla 4 Template

System Requirements – Joomla version 4.x

System Requirements:

  • PHP 7.2
  • MySQL 5.6 (Note: The minimum MySQL version can be subject to change during the lifetime of Joomla 4 if necessary)
  • PostgreSQL 11.0
  • Minimum browser version set to n-2
  • End of support of Internet Explorer

DOWNLOAD

Download Packages from our store: here

Download Joomla4: here

Install with Quickstart Package

By using this package, you will see your website exactly as our Demo with sample data. This is applied when you need a fresh Joomla with our template

The following steps will guide to install a quickstart package of SmartAddons Joomla Template: Click here

Install with Template and Extensions

To install please refer: here

Layout Position

Position Layout

Sj-Basic4-Responsive-Free-Joomla-4-Template

         

Template Configuration

Go to System => Site Template Styles => sj_basic4 - Default

- Advanced tab: templates settings




       

Header, Footer, Section Configuration

Header Configuration

1. top-1 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Menu module.

Backend Settings: Menu

2. top-2 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Login module.

Backend Settings: Login

3. user-1 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select SJ WEATHER module.

Backend Settings: SJ WEATHER

4. user-2 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Smart Search module.

Backend Settings: Smart Search

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings: custom

Copy & Paste the code into your editor:

<ul class="mod-socials list-unstyled">
<li class="facebook"><a href="https://www.facebook.com/SmartAddons.page" target="_blank" rel="noopener"><i class="icon-facebook1">Facebook</i></a></li>
<li class="twitter"><a href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><i class="icon-twitter1">Twitter</i></a></li>
<li class="youtube"><a href="#" target="_blank" rel="noopener"><i class="icon-youtube">Youtube</i></a></li>
<li class="pinterest"><a href="#" target="_blank" rel="noopener"><i class="icon-instagram">instagram</i></a></li>
<li class="linkedin"><a href="#" target="_blank" rel="noopener"><i class="icon-linkedin2">linkedin</i></a></li>
</ul>

5. Menu position

Frontend Appearance

Menu

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Flat Menu module.

Backend Settings: Sj Flat Menu

Section1

6. position-1 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

7. position-2 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

8. position-3 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings: custom

Copy & Paste the code into your editor:

<div class="banners"><a href="#"><img src="images/banners/banner-1.jpg" alt="image" /></a></div>

Section2

9. Position-4

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings:

Module/ Advanced

Copy & Paste the code into your editor:

<div id="acymailing_module_formAcymailing" class="acymailing_module">
<div id="acymailing_fulldiv_formAcymailing" class="acymailing_fulldiv"><form id="formAcymailing" action="#" method="post" name="formAcymailing">
<div class="acymailing_module_form">
<div class="acymailing_introtext">To be updated with all the latest news, offers and special announcements.</div>
<div class="acymailing_form">
<p id="field_email_formAcymailing" class="onefield fieldacyemail"><span class="acyfield_email acy_requiredField"> <input id="user_email_formAcymailing" class="inputbox" style="width: 100%;" title="Email..." name="user[email]" type="text" value="Email..." /> </span></p>
<p class="acysubbuttons"><input class="button subbutton btn btn-primary" name="Submit" type="submit" value="Subscribe" /></p>
</div>
</div>
</form></div>
</div>

10. position-5 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select SJ Social Media Counter module.

Backend Settings: Module/ Advanced

Section3

11. Position-6

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings:

Module

Copy & Paste the code into your editor:

<div class="banners"><a href="#"><img src="images/banners/banner-2.jpg" alt="image" /></a></div>

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

Section4

12. Position-7

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

13. Position-8

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

Section5

14. Position-9

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings:

Module

Copy & Paste the code into your editor:

<div class="banners"><a href="#"><img src="images/banners/banner-3.jpg" alt="image" /></a></div>

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

Bottom Section

15. bottom-1 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings:

Module

Copy & Paste the code into your editor:

<p class="logo-footer"><img src="images/logo-footer.png" alt="" /></p>

16. bottom-2 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings:

Module/ Module

Copy & Paste the code into your editor:

<ul class="mod-socials list-unstyled">
<li class="facebook"><a href="https://www.facebook.com/SmartAddons.page" target="_blank" rel="noopener"><i class="icon-facebook1">Facebook</i></a></li>
<li class="twitter"><a href="https://twitter.com/smartaddons" target="_blank" rel="noopener"><i class="icon-twitter1">Twitter</i></a></li>
<li class="youtube"><a href="#" target="_blank" rel="noopener"><i class="icon-youtube">Youtube</i></a></li>
<li class="pinterest"><a href="#" target="_blank" rel="noopener"><i class="icon-instagram">instagram</i></a></li>
<li class="linkedin"><a href="#" target="_blank" rel="noopener"><i class="icon-linkedin2">linkedin</i></a></li>
</ul>

17. bottom-3 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Custom module.

Backend Settings:

Module

Copy & Paste the code into your editor:

					<ul class="mod-app list-unstyled">
<li class="app-google"><a href="#" target="_blank" rel="noopener">Get it on Google Play</a></li>
<li class="app-store"><a href="#" target="_blank" rel="noopener">Get it on App Store</a></li>
</ul>

18. bottom-4 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Articles - Categories module.

Backend Settings: Module

19. bottom-5 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Articles - Categories module.

Backend Settings: Module

20. bottom-6 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

Footer Section

21. footer2 position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Menu module.

Backend Settings: Module
 

Main body

Please go to Menus => Main menu => Click New button => Enter the Title: Home"

Backend Settings

22. main-top position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

23. sidebar-right position

Frontend Appearance

please go to Home Dashboard => Module => Click New button to create a new module => Select Sj Basic News module.

Backend Settings: Module/ Other options/ Image options/ Advanced

please go to Home Dashboard => Module => Click New button to create a new module => Select SJ Instagram Gallery module.

Backend Settings: Module/ Source options/ Effect options/ Advanced

Support

Thank you so much for purchasing this template. If you have any questions that are beyond the scope of this help file, please send us via: Submit a Ticket

Thanks so much!