Sj Builder

Demo Buy Now Support

created: 31/10/2022
by: SmartAddons
email: contact@ytcvn.com

SJ Builder - Builder and Construction Joomla Template.

System Requirements: here

SP Page Builder Component

Download here
Documentation: here

Download Packages from our store: here

This template uses Helix ultimate - Framework . You can refer to the Helix ultimate function: here

Position Layout

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 (refer sj basic4 quickstart): Click here

To install template please refer:

To install extension please refer: (note unzip sj_builder_extensions_j4x_v1.0.0.zip file to install the each moudule/plugin.)

The extensions package include of our Modules and Plugins.

Enable our Modules and Plugins:Go to System >> Manage >> Plugins >> search with key "sj" and "ytshortcode", "System - Helix Ultimate Framework".

3. Install Component

To Install SP Page Builder Component, Joomshop Component, you can follow these steps:

Step 1: Please go to System => Install => Extensions

Step 2: Choose file SP Page Builder.zip that you have downloaded and then Click on the button Upload & Install to install the uploaded package.

4. NOTE Enable Plugin

To enable Plugin System - Helix Ultimate Framework, you can follow these steps:

Step 1: Please go to System => Manage => Extension

Step 2: Choose filter system and then Click on the button Enable & Plugin System - Helix Ultimate Framework and YT Shortcodes plugin

5. Import the layout template files

To import Template Layout, you can follow these steps:

Step 1: Please go to System => Templates => Site Template Styles

Step 2: Choose Styles sj_Builder - Default and then Click on the button Template & Options to advanced tab and choose the Import & Export tab.

Step 3: Unzip the template package (eg name: sj_builder_template_j4x_v1.0.0.zip) to get the json file: "options.json"

Step 4: click the "Import setting" button select the file: "options.json" and then Save

Header Configuration

1. Logo position

Frontend

To configure Logo, please go to System/Templates/Site Template Styles/sj_builder => Templates Options/Basic tab => Logo

2. Menu position

Frontend

Please go to System/Templates/Site Template Styles/sj_builder => Templates Options/Navigation tab => Menu Builder and select your Main menu here

3. Top3 position

Frontend

3.1. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Search module.

Backend Settings:

Module

3.2. Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

Backend Settings:

Module

Copy & Paste the code html into your editor:

<div class="get_touch"><a class="btn" href="#">get in touch</a></div>

4. Top1 position

Frontend

Please go to System/Templates/Site Template Styles/sj_builder => Templates Options/Basic tab => Contact Info

Backend Settings:

Module

5. Top2 position

Frontend

5.1. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Login module.

Backend Settings:

Module

5.2. Please go to System/Manage/Site Modules =>Click New button to create a new module => Select Language Switcher module.

Backend Settings:

Module

Section1 - Slider

6. Position1

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module/ Options

Copy & Paste the code into your editor:

<div id="slider">  
  [yt_content_slider style="default" margin="0" items_column0="1" items_column1="1" items_column2="1" items_column3="1" items_column4="1" type_change="fade" transitionin="fadeInDown" transitionout="fadeInDown" arrows="no" arrow_position="arrow-default" pagination="yes" autoplay="yes" autoheight="no" hoverpause="yes" lazyload="no" loop="yes" speed="0.8" delay="5" ] 
    [yt_content_slider_item src="images/slider/slider-1.png" caption="yes" link="#" ]
      <div class="slide-warp">
        <div class="slide-title">Get Solutions from Expert Consultants</div>
        <div class="slide-descrip">Sed ut perspiciatis unde omnis iste natus error voluptatem accusanti doloremque laudantium totam rem aperiam.</div>
        <div class="slide-button"><a class="link-button" href="#">Primary</a> <span class="video-slider">[yt_lightbox yt_title="" align="none" type="none" style="none" src="images/slider/slider-1.png" video_addr="https://www.youtube.com/watch?v=zIwLWfaAg-8" width="570px" height="480px" margin="0" lightbox="yes" description="" ]</span></div>
      </div>
    [/yt_content_slider_item] 

    [yt_content_slider_item src="images/slider/slider-2.png" caption="yes" link="#" ]
      <div class="slide-warp">
        <div class="slide-title">High Success Rate of Business</div>
        <div class="slide-descrip">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="slide-button"><a class="link-button" href="#">Primary</a> <span class="video-slider">[yt_lightbox yt_title="" align="none" type="none" style="none" src="images/slider/slider-2.png" video_addr="https://www.youtube.com/watch?v=nBdrgGJsCJo" width="570px" height="480px" margin="0" lightbox="yes" description="" ]</span></div>
      </div>
    [/yt_content_slider_item] 

    [yt_content_slider_item src="images/slider/slider-3.png" caption="yes" link="#" ]
      <div class="slide-warp">
        <div class="slide-title">Optimal Use of Human Resources</div>
        <div class="slide-descrip">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione.</div>
        <div class="slide-button"><a class="link-button" href="#">Primary</a> <span class="video-slider">[yt_lightbox yt_title="" align="none" type="none" style="none" src="images/slider/slider-31.png" video_addr="https://www.youtube.com/watch?v=ppfusm6vat0" width="570px" height="480px" margin="0" lightbox="yes" description="" ]</span></div>
      </div>
    [/yt_content_slider_item] 
  [/yt_content_slider]
</div>

Section2 - About

7. Position2

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module

Copy & Paste the code into your editor:

<div class="block-about">
  <div class="container">
    <div class="row">
      	<div class="col-12 col-sm-6 col-md-12 col-lg-6 col-xl-6">
  			<div class="box-image">
              <img class="mark-lazy" src="images/banners/banner-1.jpg" alt="" />
              <div class="img-thumb">
                <img class="mark-lazy" src="images/banners/banner-2.jpg" alt="" />                
              </div>
              <div class="signature">
                  <span class="ab-year"><b>25+</b> Years</span>
                  <span class="ab-exp">of experience in consulting service</span>
              </div>
          	</div>
		</div>
      	<div class="col-12 col-sm-6 col-md-12 col-lg-6 col-xl-6">
          	<div class="box-content">
              <div class="pre-text">About Us</div>
              <h3 class="heading-title">One Of The Fastest Way To Gain Business Success</h3>
              <p>Builder is a global management consulting service company. Builder has the trusted advisor to the world's leading businesses, finance, and institutions. Builder Business Consulting Joomla Template is the most modern and feature-rich Theme. This Business Consulting Joomla Template is designed for various business and consulting services.
              </p>
              <div class="box-noti">
                Helped Fund <span>78,743 Projects</span> in 30 Countries, Benefiting Over <span>7.6 Million</span> People.
              </div>
              <div class="box-end">
                <span class="signature"><img class="mark-lazy" src="images/banners/ab-signature.png" alt="" /></span>
                <span class="ab-name">
                  <span>Richard E. Harrisona</span>
                  <span class="ab-position">CEO & Founder</span>
                </span>
              </div>
           </div>
		</div>
  	</div>
  </div>
</div>

Section3 - Video

8. Position3

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module/ Options

Copy & Paste the code into your editor:

<div class="block-video">
  [yt_lightbox yt_title=""  align="none"  type="none"  style="none"  src="images/bg_video.png"  video_addr="https://www.youtube.com/watch?v=zIwLWfaAg-8"  width="1920px"  height="600px"  lightbox="yes"  description=""] 
  <div class="video-content">    
    <span class="video-button"></span>
    <h3 class="title">
      Mission Is To Protect Your Businesses &amp; </br> Much More Secure Level
    </h3>
   	<a class="link-button" href="#" target="_blank">Contact Us</a>
  </div>  
</div>

Section4 - Services

9. Position4

Frontend

Backend Settings

Please go to System/Manage/Site Modules => Click New button to create a new module => Select SJ Extra Slider for Content module.

Backend Settings: Module/ Source Options/ Item Options/ Image Options/ Effect Options/ Advanced

Note enter the content html below for "pre-text" in Advanced tab:

Section5 - Banner

10. Position5

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module

Copy & Paste the code into your editor:

<div class="block-banner">
	<div class="banner">
  	  <a href="#"><img class="mark-lazy" src="images/banners/banner_1.jpg" alt="" /></a>
      <div class="text-banner">
        <p>
          Let’s discuss about how we can help <br> make your business better
        </p>
        <a href="#" class="link-button">Let’s Work Together</a>
      </div>
  	</div>
</div>

Section6 - Consultancy

11. Position6

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module/ Options

Copy & Paste the code into your editor:

<div class="block-consultancy">
  <div class="container">
    <div class="row">
      	<div class="col-12 col-sm-6 col-md-12 col-lg-6 col-xl-6">
          	<div class="box-content">
              <div class="pre-text">Just A Consultancy</div>
              <h3 class="heading-title">We know how to manage business globally</h3>              
              <ul class="box-list">
                <li>
                  <div class="box-icon"><img class="mark-lazy" src="images/icon/consul_1.png" alt="" /></div>
                  <div class="box-text">
                  	<h6 class="box-title">
                      Best Business Consulting
                    </h6>
                    <p>
                      Builder is a global management consulting service company. Builder has the trusted advisor.
                    </p>
                  </div>                
                </li>
                <li>
                  <div class="box-icon"><img class="mark-lazy" src="images/icon/consul_2.png" alt="" /></div>
                  <div class="box-text">
                  	<h6 class="box-title">
                      24/7 Customer Support
                    </h6>
                    <p>
                      Builder is a global management consulting service company. Builder has the trusted advisor.
                    </p>
                  </div>                
                </li>
              </ul>
              <div class="box-contact">
                <a class="link-button" href="#">Contact us</a>
                <span class="video-button">[yt_lightbox yt_title="" align="none" type="none" style="none" src="images/banners/banner-3.jpg" video_addr="https://www.youtube.com/watch?v=zIwLWfaAg-8" width="570px" height="480px" margin="0" lightbox="yes" description="" ]</span>
              </div>
           </div>
		</div>
      	<div class="col-12 col-sm-6 col-md-12 col-lg-6 col-xl-6">
          <div class="box-image">
  			<div class="box-image-in">
              <img class="mark-lazy" src="images/banners/banner-4.jpg" alt="" />
              <div class="img-thumb">
                <img class="mark-lazy" src="images/banners/banner-3.jpg" alt="" />                
              </div>              
          	</div>
          </div>
		</div>      	
  	</div>
  </div>
</div>

Section7 - Counter

12. Position7

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module/ Options

Copy & Paste the code into your editor:

<div class="block-counter">
  <div class="container">
  	<div class="row">
      <div class="item col-lg-3 col-md-3 col-sm-3 col-xs-12">
        [yt_counter count_start="0"  count_end="868"  counter_speed="5"  prefix=""  suffix=" +"  separator="no"  align="left"  background="transparent"  border_radius="0px"  icon="images/icon/counter_1.png"  icon_color="#ffffff"  count_color="#ffffff"  count_size="36px"  text_color="#ffffff"  text_size="16px"  border="0px solid #DDD" ] Sucess Project [/yt_counter] 
      </div>
      <div class="item col-lg-3 col-md-3 col-sm-3 col-xs-12">
        [yt_counter count_start="0"  count_end="680"  counter_speed="5"  prefix=""  suffix=" +"  separator="no"  align="left"  background="transparent"  border_radius="0px"  icon="images/icon/counter_2.png"  icon_color="#ffffff"  count_color="#ffffff"  count_size="36px"  text_color="#ffffff"  text_size="16px"  border="0px solid #DDD" ] Media Activities [/yt_counter] 
      </div>
      <div class="item col-lg-3 col-md-3 col-sm-3 col-xs-12">
        [yt_counter count_start="0"  count_end="688"  counter_speed="5"  prefix=""  suffix=" +"  separator="no"  align="left"  background="transparent"  border_radius="0px"  icon="images/icon/counter_3.png"  icon_color="#ffffff"  count_color="#ffffff"  count_size="36px"  text_color="#ffffff"  text_size="16px"  border="0px solid #DDD" ] Skilled Experts [/yt_counter] 
      </div>
      <div class="item col-lg-3 col-md-3 col-sm-3 col-xs-12">
        [yt_counter count_start="0"  count_end="26"  counter_speed="5"  prefix=""  suffix="K +"  separator="no"  align="left"  background="transparent"  border_radius="0px"  icon="images/icon/counter_4.png"  icon_color="#ffffff"  count_color="#ffffff"  count_size="36px"  text_color="#ffffff"  text_size="16px"  border="0px solid #DDD" ] Happy Clients [/yt_counter] 
      </div>  
    </div>
  </div>
</div>

Section8 - Projects

13. Position8

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module/ Options

Copy & Paste the code into your editor:

<div class="block_project">
  <div class="container">
    <div class="row">
	 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="pre-text">
        Our Project
      </div>  
      <h3 class="heading-title">Our Completed Projects</h3>
      [yt_content_slider style="default"  margin="0"  items_column0="1"  items_column1="1"  items_column2="1"  items_column3="1"  items_column4="1"  type_change="slide"  arrows="yes"  arrow_position="default"  pagination="yes"  autoplay="no"  autoheight="no"  hoverpause="yes"  lazyload="no"  loop="yes"  speed="0.6"  delay="4" ] 		[yt_content_slider_item src="images/project/pro-1.jpg"  caption="yes"  link="#" ] 
        <div class="box-content">
          <div class="icon">
            <img src="images/icon/pro-icon1.png" loading="lazy" width="100" height="100" data-path="local-images:/icon/pro-icon1.png"/>
          </div>
          <h3>Pro Business Solution</h3>
          <div class="pre">Case Stydy, Growth</div>
          <div class="pro-content">
            Our Advisor's great ideas and methodologies help our client's growth as well as ours. Builder Business Consulting WordPress Theme is built with Elementor Page Builder therefore.
          </div>
          <a class="link-button" href="#">Contact us</a>
        </div>
        [/yt_content_slider_item] 
        
       	[yt_content_slider_item src="images/project/pro-2.jpg"  caption="yes"  link="#" ] 
        <div class="box-content">
          <div class="icon">
            <img src="images/icon/pro-icon2.png" loading="lazy" width="100" height="100" data-path="local-images:/icon/pro-icon1.png"/>
          </div>
          <h3>Business Strategy Solution</h3>
          <div class="pre">Case Stydy, Growth</div>
          <div class="pro-content">
            Our Advisor's great ideas and methodologies help our client's growth as well as ours. Builder Business Consulting WordPress Theme is built with Elementor Page Builder therefore.
          </div>
          <a class="link-button" href="#">Contact us</a>
        </div>
        [/yt_content_slider_item] 
       	
       	[yt_content_slider_item src="images/project/pro-3.jpg"  caption="yes"  link="#" ] 
        <div class="box-content">
          <div class="icon">
            <img src="images/icon/pro-icon3.png" loading="lazy" width="100" height="100" data-path="local-images:/icon/pro-icon1.png"/>
          </div>
          <h3>Build Professional Solutions</h3>
          <div class="pre">Case Stydy, Growth</div>
          <div class="pro-content">
            Our Advisor's great ideas and methodologies help our client's growth as well as ours. Builder Business Consulting WordPress Theme is built with Elementor Page Builder therefore.
          </div>
          <a class="link-button" href="#">Contact us</a>
        </div>
        [/yt_content_slider_item] 
      [/yt_content_slider] 
      </div>
    </div>
  </div>
</div>

Section9 - Brand

14. Position9

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module/ Options

Copy & Paste the code into your editor:

<div class="block-brands">
  <div class="container">
    <div class="row">
      [yt_content_slider style="default" margin="30" items_column0="6" items_column1="6" items_column2="5" items_column3="3" items_column4="1" type_change="fade" transitionin="fadeIn" transitionout="fadeOut" arrows="no" arrow_position="arrow-default" pagination="no" autoplay="yes" autoheight="no" hoverpause="yes" lazyload="no" loop="yes" speed="0.6" delay="4" ] 
        [yt_content_slider_item src="images/brands/brand-1.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] 
        [yt_content_slider_item src="images/brands/brand-2.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] 
        [yt_content_slider_item src="images/brands/brand-3.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] 
        [yt_content_slider_item src="images/brands/brand-4.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] 
        [yt_content_slider_item src="images/brands/brand-5.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] 
        [yt_content_slider_item src="images/brands/brand-6.png" caption="no" link="#" ] Add Content Here [/yt_content_slider_item] 
      [/yt_content_slider]
    </div>
  </div>
</div>

Section10 - Blog

15. Position10

Frontend

Backend Settings

Please go to System/Manage/Site Modules => Click New button to create a new module => Select SJ Extra Slider for Content module.

Backend Settings: Module/ Source Options/ Item Options/ Image Options/ Effect Options/ Advanced

Note enter the content html below for "pre-text" in Advanced tab:

Section11 - Newsletter

16. Position11

Frontend

Please go to System/Manage/Site Modules => Click "New" button to create a new module >> Select "Custom" module.

Backend Settings:

Module/ Options

Copy & Paste the code into your editor:

<div class="box-newsletter">
<div class="introtext">Latest Business Ideas
<h3>Sign Up Newsletter</h3>
</div>
<form class="form-inline newsletter" action="#" method="post"><input class="input-large" name="youremail" size="18" type="text" value="Enter your search..." /> <button class="button btn">Subscribe</button></form></div>

Bottom Section

17. Bottom1

Frontend

Backend Settings

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Menu module.

Backend Settings: Module

18. Bottom2

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Custom module.

Backend Settings:

Module/ Advanced

Copy & Paste the code into your editor:

<div class="footer-contact">
<ul class="work-time">
  <li><span>Week Days</span><span>09:00 - 24:00</span></li>
<li><span>Saturday</span><span>08:00 - 03:00</span></li>
<li><span>Sunday</span><span>Off</span></li>
</ul>
<a class="btn" title="Contact Us" href="#">Contact Us</a></div>

19. Bottom3

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Sj Basic News module.

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

Note enter the class "popular_news" for the Module Class option in the Advanced tab:

Footer Section

20. Footer1

Frontend

Please go to System/Templates/Site Template Styles/sj_builder => Templates Options/Basic tab => Footer

Backend Settings:

Template Options

Create new SP Page Builder

Please go to Components => SP Page Builder => Click New button => Enter the Title: Home Page

Please go to Menus => Main menu => Click New button => Enter the Title: Home Page. Select "SP Page Builder » Page: home page"

Backend Settings

To import sp page builder page, you can follow these steps:

Step 1: Please go to Components => SP Page Builder => Page click "New" button

Step 2: Click Import

Step 3: Unzip the template package (eg name: sj_builder_template_j4x_v1.0.0.zip) to get the json files: "sp-hompage.json"

Step 4: Select the sp builder home page file: "sp-hompage.json" and then Save

Step 5: Then configure the module follow the each position. (refer the layout positions)

Create new SP Page Builder

Please go to Components => SP Page Builder => Click New button => Enter the Title: Home Page

Please go to Menus => Main menu => Click New button => Enter the Title: Contact Us. Select "SP Page Builder » Page: contact page"

Backend Settings

To import sp page builder page, you can follow these steps:

Step 1: Please go to Components => SP Page Builder => Page click "New" button

Step 2: Click Import

Step 3: Unzip the template package (eg name: sj_builder_template_j4x_v1.0.0.zip) to get the json file:"sp-contactpage.json"

Step 4: Select the sp builder home page file: "sp-contactpage.json" and then Save

Frontend

Please go to System/Manage/Site Modules => Click New button to create a new module => Select Sj Contact Ajax module.

Backend Settings: Module/ Captcha Options/ Maps Options/ Advanced

Note enter the class "popular_news" for the Module Class option in the Advanced tab:

Please go to System => Manage => Languages to install the language that you wanto use.

Then go toSystem => Manage => Content Languages and click "New" button to crete the New Content Language.

To remove Designed by SmartAddons.Com at the footer of template, please purchase our Copyright Removal here

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!

Sj Builder

System Requirements – Joomla version 4.x

Component Requirements

DOWNLOAD

Helix ultimate - Framework

Layout Position

Install with Quickstart Package

Install with Template and Extensions

Header, Footer, Positions

Home page

Contact page

Install multilingual site in SJ Template

Copyright

Support