How to install quickstart package using Akeeba kickstart?

Details Step by step how to install quickstart package using Akeeba kickstart tool.

As you have known, most of template providers use Akeeba Backup to back up template with sample data to make simple Quickstart file and Kickstart (restore) file with Akeeba Kickstarter. This blog to show you step by step how to install Quickstart package with Akeeba.With our template, we’re mentioning to LT Business as an example template in this case. You can download LT Business template for Joomla! 3.4 here. This Quickstart package includes Joomla! core, LT Business template, sample data. So, Joomla! install first is not required. Let start it!

In this tutorial, you will find detailed information on How to install quickstart on your cPanel hosting account or How to install quickstart on local host using XAMPP. The installation process is easy, just requires a few clicks. You won’t need any coding or design skills to install a fully-functional Akeeba kickstart within minutes.

Step 1: Download quickstart package (example: LT Business template)

Login to Customer Area, go to section Download, download full package and unzip it, you can see Quickstart package. After that, unzip Quickstart package and you will see the backup and Akeeba Kickstart included. We need to run file kickstart.php.

Step 2. Install quickstart package

Option 1. How to install quickstart on your cPanel hosting account

Step 1: Upload Quickstart File via File Manager

You can install Quickstart package on your hosting following these steps:

  • Upload quickstart files via FTP: access your hosting cPanel, create FTP account and link to your website folder (normal it’s “public_html” folder). Once you connect, simply browse your local drive to upload from the Local Site window on the left. Drag the files to an appropriate folder in the Remote Site on the right, e.g. /var/www/html

  • If your hosting support cPanel (such as Hostgator.com), you can go to cPanel > File Manager, go to your website folder and upload theme Quickstart files.

Step 2: Create a New database

Create new database for your website via Database Manager in Hosting controls. If you don’t know how to create database, just read hosting user guides or contact hosting support staff.

Step 3: Run Install Panel

Last, run install panel by access, just run file ‘kickstart.php’ by go to http://yourdomain.com/kickstart.phpnext steps like Install on localhost.

Option 2: How to install quickstart on localhost using XAMPP

Installing quickstart package on localhost is straightforward but can be tricky the first time you attempt to do it. So for this step we’ve provided instructions on how to do it right from scratch.

Now, in order to run Quickstart package, you need not only a web server, but also 2 more things: PHP script interpreter and MySQL database system. It sounds complicated but thankfully there is a single package called XAMPP with all the elements included.

Let’s install XAMPP on your computer.

Step 1: Installing XAMPP

  1. Download and  Install XAMPP Locally on PC/Windows
  2. Run the installation file as you do with regular software and follow the step-by-step instructions.
  3. Open “XAMPP Control Panel Application” and start “Apache” and “MySQL”.

That’s it, your localhost is now installed. You can check if it works or not by typing the address: “http://localhost” in your web browser. You should see a page as illustrated below.

Step 2: Create a database in phpMyAdmin.

From the XAMPP interface, click phpMyAdmin to start creating database.

Next, click Database in the toolbar as illustrated in the following

And enter the database name and then click “Create

Now you are ready to install quickstart package.

Step 3: Create a new folder in older “htdocs” in the XAMPP folder.

– Create a new folder entitled “test-quickstart” in folder “Test” in folder “htdocs” in XAMPP folder. Normally it will be located at “C:\xampp\htdocs”.

– Unpack the downloaded package file into the folder “test-quickstart”.

– Go to the URL “http://localhost/Test/test-quickstart”.

Step 4: Unzip the file

After having downloaded Quickstart package, unzip in your hosting or folder in folder “htdocs” and you will see the backup and Akeeba Kickstart included. We need to run file kickstart.php.

 

* If you do not see file listing, don’t worry about that, just run file ‘kickstart.php’ by going to http://yourdomain.com/kickstart.php

Step 5: Agree with Akeeba Kickstart policy

… select .jpa (Akeeba backup file) and click ‘Start‘ to extra file

* Default extra method in kickstart tool use ‘Hybrid (use FTP only if needed)‘, but in some case if your hosting do not accept it, just use ‘Directly‘ method instead, you can select it via ‘Write to files‘.

Step 6: Start to extract file

In this step, we will see the screenshot like below. The Select a backup archive will be selected quickstart package by default. It’s backup file and we need to restore it. Another parameter, we should keep it as default, do not change. After everything’s okay, we click to button ‘Start‘ to start extracting backup file

Step 7: Run the installer is the next step when finish extract backup file in step 5.

Step 8: System pre-check

Now, we moved to install board. This is a step to pre-check the hosting configuration before process install. There some params as in Joomla! installation.

 * In some cases, if you have different PHP version, you will get a warning message above, but don’t worry, it’s fine!

Step 9: Enter the information

This step helps you enter the information related to database type, username, database name and password.

P/S: “Allow UTF8MB4 auto-detection” unchecked . Check the “Force UTF-8 collation on database” and “Force UTF-8 collation on tables”

If everything is okay, so we can move to the next style by click button ‘Next‘.
Step 10: Restore the database

Yes, after clicked button ‘Next’ in step 7, it will alert the pop-up box show details of process restore database. As the picture below, if you enter correct database information, it will be restored successful.

 

Step 11: Site info

This step requires you to enter Site Info and FTP Layer Option (this option should be kept as default, we can change it later). At this step, you need to define new username and password for administrator account. I recommend you enter new password.

The default administrator account with the username: admin and the password you want to use when login the admin Joomla Dashboard. ( Exp: password is abc123)

 

Step 12: Last step to remove the installation folder

Yes, this step is the last step to process install Quickstart, just click to button ‘Clean Up’ to clear up Kickstart files which included in backup by default. It will make your source clearly. Also with file backup ‘.jpa’.

Step 13: Ready to start!

Just click to button ‘View your site’s front-end’ and ‘view your site’s back-end’.

Step 14: Yeah, we finished!

After finishing last step, we will have the website like our demo site.

Note: All photos used on our template demo site get from free image resources such as unsplash.com and freepik.com, so you can use it for your website.

Troubleshoots 

After installation finished, if your website return sample data but without CSS like the screenshot below

In this case, you just open file ‘configuration.php’ located at the root of your source code and search for

$live_site = “your_domain.xxx”;

and leave it blank like below

public $live_site =””;

Save and it will work.

Default Login

1. Default login: http://yourwebsite/administrator

username: admin

Password like you created at Step 11 (If you left it as blank, so default password is abc123 )

2. If you changed Supper User Settings during install Quickstart package (Step 9), you must use that login info. If you forgot it, you can see the instruction how to restore Joomla! password.

3. If you already put correct login username and password, but can’t login and your system do not appear any error message (normal when you put wrong login, Joomla login panel will show error with user or password), it means you have issue with cookie_domains, just open file ‘configuration.php’ and find “$cookie_domain” parameter, then leave it blank (null value), and recheck.

Full video Guide how to install quickstart package for Joomla template

How to edit demo content in LT Business Joomla template?

We have playlist with details guide how to edit content in LT Business Joomla template, we just make LT Business as example case, actually you can follow it for all Joomla templates from us because it has same template framework. Watch full playlist about how to edit demo content in Joomla templates.

Conclusion

Yes, Akeeba Backup and Akeeba Kickstart are very useful software to backup and restore websites. It’s a simple and fast way that I recommend you should use when you want to bring your whole site to another place. In this case, it’s the best choice to create Quickstart for everyone. Quickstart package is a full demo package, it helps you easier to change the contain and launch your site faster. Thanks for support from http://akeebabackup.com

LT MyPro Joomla! Template Documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Full website like demo)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Third-party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus [name of the menu] Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus About Joomla Add New Menu Item.

To Edit a Menu Item:

  • Select Menus [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules?

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

– How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title: The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent. Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Padding: allows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

 

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration into your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link. Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

With PRO version, you can remove the template copyright by:

– Navigating to Template Settings > Basic > Copyright (old method)
or:
– Going to Admin > Extensions > Modules, then find the Footer 1 module (new Helix Ultimate)

After purchase PRO version, please backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro)
  2. Ticket Support System (Free)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT Sport Joomla! template documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Only PRO version can download and use this package)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to  “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus  [name of the menu]  Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus  About Joomla  Add New Menu Item.

To Edit a Menu Item:

  • Select Menus  [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus  Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

 – How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title:  The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use   allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Paddingallows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

lt-job8

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

 

 

 

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

J2Store https://extensions.joomla.org/extension/j2store/

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

If you’re using Free version, copyright on footer will be shown. You can’t remove it, it’s copyright information for a template that you must to keep in order to use a template as Free license with us.

If you want to remove this copyright or replace with new content, please go with PRO version. Visit all Joomla! templates, find your template name and purchase PRO version.

After purchase PRO version, you backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro Standard & Pro Unlimited Customer)
  2. Ticket Support System (Pro Unlimited Customer only)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT Digix Joomla! template documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Only PRO version can download and use this package)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to  “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus  [name of the menu]  Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus  About Joomla  Add New Menu Item.

To Edit a Menu Item:

  • Select Menus  [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus  Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

 – How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title:  The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use   allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Paddingallows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

lt-job8

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration into your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link.  Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

 

 

 

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

J2Store https://extensions.joomla.org/extension/j2store/

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

If you’re using Free version, copyright on footer will be shown. You can’t remove it, it’s copyright information for a template that you must to keep in order to use a template as Free license with us.

If you want to remove this copyright or replace with new content, please go with PRO version. Visit all Joomla! templates, find your template name and purchase PRO version.

After purchase PRO version, you backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro Standard & Pro Unlimited Customer)
  2. Ticket Support System (Pro Unlimited Customer only)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT AppBank Joomla! Template Documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Full website like demo)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Third-party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus [name of the menu] Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus About Joomla Add New Menu Item.

To Edit a Menu Item:

  • Select Menus [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules?

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

– How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title: The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent. Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Padding: allows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration into your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link. Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

With PRO version, you can remove the template copyright by:

– Navigating to Template Settings > Basic > Copyright (old method)
or:
– Going to Admin > Extensions > Modules, then find the Footer 1 module (new Helix Ultimate)

After purchase PRO version, please backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro)
  2. Ticket Support System (Free)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT Sound Joomla! template documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Only PRO version can download and use this package)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to  “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus  [name of the menu]  Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus  About Joomla  Add New Menu Item.

To Edit a Menu Item:

  • Select Menus  [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus  Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

 – How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title:  The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use   allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Paddingallows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

lt-job8

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration in to your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link.  Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Manage Slider function with Unite Revolution Slider 2

The Unite Revolution Responsive slider is an amazing layered slider for Joomla. You can design your slider with no css or jquery needed an come out with amazing effect.

– From the main menu select “Components” / “Unite Revolution Slider“.
– You will now see a screen with a list of all of Sliders on your website. From this screen you can add new sliders; edit any existing slider and even delete sliders should you need to.

bu31

Slider Settings

Once you Created a Slider, you can open the Slider Settings (Settings) any time to manage any general settings per Slider.

bu32

(1) Slider Title: A Internal used Name for the Slider. Only for Backend Usage.

(2) Slider Alias: An individual name of the slider. Dont use Speical chars and spaces here. This will be used for ShortCode embedding and for any other art for embedding and corresponding/link internal to the slider.

(3) Slider Layouts

  • Fixed: A None Responsive Version of the Slider. Will have a prepared Width and height. Used for Older Themes
  • Custom (it has been called “Responsive” in Earlier version): A Custom Grid system to set size of Slider per Browser Size. You can define different Levels for sizes. Only used for Frameworks where no Fluid Widths has been used. (i.e. Skeleton)
  • AutoResponsive (it has been called “Fullwidth” in earlier versions): Used for Fluid Responsive themes, where the Slider calculates its own size for every Browser size. Only max width hand height of Grid should be defined. In case the Container Width is not Boxed, it will go Fullwidth Automatically
  • FullScreen: Slider will take the height of Window and center the preset Grid within. It will always try to go FullHeight and Fullwidth if the wrapping container allows.

(4) Layers Grid Size:

– Depending on the Layout you can set the Width and Height of the Captions. The Slider will go Fullwdith or Fullwidth and Fullheight in case you set AutoResponsive or FullScreen.  Caption Grid will be centered always within the slider container.

– In some cases (Custom) you can set multiple Levels depending on Screen Size. This is not needed in AutoResponsive and FullScreen mode.

– The fullscreen mode allows you to set a Container (per class or ID) which heights decrease the height of the FullScreen Slider Container automatically in every responsive level.

Edit Sliders

Navigate between the Slides simple selecting The Tabs on the top. Don’t forget to Update the Slide before you leave one tab!

Each Slide has its own General Setting. You can set transitions, Local delays, thumbnails etc.

(1) Slide Title: Used only Internal Naming of the slides

(2) State: Published / Unpublished  – used for Editing, modification the slide. If it is Unpublished, front-end won’t show this slide at all.

(3) Visible From/Until: If set, the Slide will only be visible between the set times. If Visible Until is not set, the Slide will be visible as soon as the Visible From date is reached. If Visible From is not set, the Slide will be visible until the Visible Until date is reached.

(4) Transitions: The Animation Style how the Slide appearance. You can select more than one from a multiple choice drop-down list.  Every new loop will use another Transition if you selected more then one.

(5) The Image Source for the Main Image: A Slide can have an Image, Transparent Image, Solid Color or External Image as Main Image.  This Image is the “Main Layer” in the background which has been animated via the General Settings predefined Transitions parameter.

bu33

(6) Background Fit/Repeat/Position: With these options, the chosen background image can be adjusted.

You can choose from following layers/captions:  HTML Markups,  Image, Video.

(7) Text Layer, Image Layer and Video Layer: For individual TEXT / HTML Markup Layer, Image Layer and Video Layer click on Add Layer and follow the following settings

Style / Edit CSS

– To define a predefined Style or add your own Style use the Style Drop Down list. You can change the Styling of the captions / Layers via the Embedded CSS Editor (Edit Style).

– Use HTML5 Standard markups in case you wish to embed paragraphs, headings, buttons etc.
– The Captions have the white-space: nowrap setting default. It is important because of the transitions. Please use <br> for line breaking, or add different layers for multiple lines.

– For further styling that is not possible through Edit Style, use the Edit Global Styles and put your Styles there.

Align & Positions

– Set the Align of the Layers / Captions. Left Top is default. Drag and Drop move of the Layer will be based on the Align. If you set the Align to Center Center, the Drag And drop will be based on this aligned position and use an Offset.

– i.e. Center Center Offset X -21px Offset Y -46px will be used in every responsive size linear calculated. If the Screen size is scaled to 50% than the Item is still in the middle of the grid and offset is -50px -50px (linear calculated).

– Center Center snaps the Center Center of the Layer to the Center Center position of the Gird. Right Bottom snaps the Right bottom corner of the Layer to the Right Bottom corner of the Grid etc.

slide

This is basic set up for Unite Revolution Slider 2 Extension, for more details about how to use Unite Revolution Slider 2, please go to See How to use Unite Revolution Slider 2

Manage Online Store with J2Store

J2Store is a native Joomla shopping cart and e-Commerce extension. Create your online store and sell online fast and easy. It extends articles as products and lets you to turn articles into full fledged products.

No overhead to the site. No clumsy registration process. Just straight out-of-the-box. Build a beautiful online store using just the Joomla articles.

Use articles as products, define zone based tax rules, create product variants, add advanced pricing by quantity / customer groups and do more. J2Store makes it all possible

Sell any type of products including Digital Goods with J2Store.

Add new products category for Articles

Go to “Content” /  “Category” / click “New” button to create a new Category.

Add new product for Articles

Go to “Content” / “Articles”  click “New” button to create a new Product.

and remember select category for product, prices , images

This is basic set up for J2Store, for more details about how to use J2Store, please go to J2Store Portal document at See How to use J2Store

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

 

 

 

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

J2Store https://extensions.joomla.org/extension/j2store/

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

If you’re using Free version, copyright on footer will be shown. You can’t remove it, it’s copyright information for a template that you must to keep in order to use a template as Free license with us.

If you want to remove this copyright or replace with new content, please go with PRO version. Visit all Joomla! templates, find your template name and purchase PRO version.

After purchase PRO version, you backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro Standard & Pro Unlimited Customer)
  2. Ticket Support System (Pro Unlimited Customer only)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT Fiscal Joomla! template documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Only PRO version can download and use this package)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to  “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus  [name of the menu]  Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus  About Joomla  Add New Menu Item.

To Edit a Menu Item:

  • Select Menus  [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus  Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

 – How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title:  The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use   allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Paddingallows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

lt-job8

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration into your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link.  Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Manage Slider function with Unite Revolution Slider 2

The Unite Revolution Responsive slider is an amazing layered slider for Joomla. You can design your slider with no css or jquery needed an come out with amazing effect.

– From the main menu select “Components” / “Unite Revolution Slider“.
– You will now see a screen with a list of all of Sliders on your website. From this screen you can add new sliders; edit any existing slider and even delete sliders should you need to.

bu31

Slider Settings

Once you Created a Slider, you can open the Slider Settings (Settings) any time to manage any general settings per Slider.

bu32

(1) Slider Title: A Internal used Name for the Slider. Only for Backend Usage.

(2) Slider Alias: An individual name of the slider. Dont use Speical chars and spaces here. This will be used for ShortCode embedding and for any other art for embedding and corresponding/link internal to the slider.

(3) Slider Layouts

  • Fixed: A None Responsive Version of the Slider. Will have a prepared Width and height. Used for Older Themes
  • Custom (it has been called “Responsive” in Earlier version): A Custom Grid system to set size of Slider per Browser Size. You can define different Levels for sizes. Only used for Frameworks where no Fluid Widths has been used. (i.e. Skeleton)
  • AutoResponsive (it has been called “Fullwidth” in earlier versions): Used for Fluid Responsive themes, where the Slider calculates its own size for every Browser size. Only max width hand height of Grid should be defined. In case the Container Width is not Boxed, it will go Fullwidth Automatically
  • FullScreen: Slider will take the height of Window and center the preset Grid within. It will always try to go FullHeight and Fullwidth if the wrapping container allows.

(4) Layers Grid Size:

– Depending on the Layout you can set the Width and Height of the Captions. The Slider will go Fullwdith or Fullwidth and Fullheight in case you set AutoResponsive or FullScreen.  Caption Grid will be centered always within the slider container.

– In some cases (Custom) you can set multiple Levels depending on Screen Size. This is not needed in AutoResponsive and FullScreen mode.

– The fullscreen mode allows you to set a Container (per class or ID) which heights decrease the height of the FullScreen Slider Container automatically in every responsive level.

Edit Sliders

Navigate between the Slides simple selecting The Tabs on the top. Don’t forget to Update the Slide before you leave one tab!

Each Slide has its own General Setting. You can set transitions, Local delays, thumbnails etc.

(1) Slide Title: Used only Internal Naming of the slides

(2) State: Published / Unpublished  – used for Editing, modification the slide. If it is Unpublished, front-end won’t show this slide at all.

(3) Visible From/Until: If set, the Slide will only be visible between the set times. If Visible Until is not set, the Slide will be visible as soon as the Visible From date is reached. If Visible From is not set, the Slide will be visible until the Visible Until date is reached.

(4) Transitions: The Animation Style how the Slide appearance. You can select more than one from a multiple choice drop-down list.  Every new loop will use another Transition if you selected more then one.

(5) The Image Source for the Main Image: A Slide can have an Image, Transparent Image, Solid Color or External Image as Main Image.  This Image is the “Main Layer” in the background which has been animated via the General Settings predefined Transitions parameter.

bu33

(6) Background Fit/Repeat/Position: With these options, the chosen background image can be adjusted.

You can choose from following layers/captions:  HTML Markups,  Image, Video.

(7) Text Layer, Image Layer and Video Layer: For individual TEXT / HTML Markup Layer, Image Layer and Video Layer click on Add Layer and follow the following settings

Style / Edit CSS

– To define a predefined Style or add your own Style use the Style Drop Down list. You can change the Styling of the captions / Layers via the Embedded CSS Editor (Edit Style).

– Use HTML5 Standard markups in case you wish to embed paragraphs, headings, buttons etc.
– The Captions have the white-space: nowrap setting default. It is important because of the transitions. Please use <br> for line breaking, or add different layers for multiple lines.

– For further styling that is not possible through Edit Style, use the Edit Global Styles and put your Styles there.

Align & Positions

– Set the Align of the Layers / Captions. Left Top is default. Drag and Drop move of the Layer will be based on the Align. If you set the Align to Center Center, the Drag And drop will be based on this aligned position and use an Offset.

– i.e. Center Center Offset X -21px Offset Y -46px will be used in every responsive size linear calculated. If the Screen size is scaled to 50% than the Item is still in the middle of the grid and offset is -50px -50px (linear calculated).

– Center Center snaps the Center Center of the Layer to the Center Center position of the Gird. Right Bottom snaps the Right bottom corner of the Layer to the Right Bottom corner of the Grid etc.

slide

This is basic set up for Unite Revolution Slider 2 Extension, for more details about how to use Unite Revolution Slider 2, please go to See How to use Unite Revolution Slider 2

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

 

 

 

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

J2Store https://extensions.joomla.org/extension/j2store/

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

If you’re using Free version, copyright on footer will be shown. You can’t remove it, it’s copyright information for a template that you must to keep in order to use a template as Free license with us.

If you want to remove this copyright or replace with new content, please go with PRO version. Visit all Joomla! templates, find your template name and purchase PRO version.

After purchase PRO version, you backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro Standard & Pro Unlimited Customer)
  2. Ticket Support System (Pro Unlimited Customer only)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT Author Joomla! template documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Only PRO version can download and use this package)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to  “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus  [name of the menu]  Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus  About Joomla  Add New Menu Item.

To Edit a Menu Item:

  • Select Menus  [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus  Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

 – How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title:  The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use   allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Paddingallows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

lt-job8

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration in to your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link.  Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Manage Slider function with Unite Revolution Slider 2

The Unite Revolution Responsive slider is an amazing layered slider for Joomla. You can design your slider with no css or jquery needed an come out with amazing effect.

– From the main menu select “Components” / “Unite Revolution Slider“.
– You will now see a screen with a list of all of Sliders on your website. From this screen you can add new sliders; edit any existing slider and even delete sliders should you need to.

bu31

Slider Settings

Once you Created a Slider, you can open the Slider Settings (Settings) any time to manage any general settings per Slider.

bu32

(1) Slider Title: A Internal used Name for the Slider. Only for Backend Usage.

(2) Slider Alias: An individual name of the slider. Dont use Speical chars and spaces here. This will be used for ShortCode embedding and for any other art for embedding and corresponding/link internal to the slider.

(3) Slider Layouts

  • Fixed: A None Responsive Version of the Slider. Will have a prepared Width and height. Used for Older Themes
  • Custom (it has been called “Responsive” in Earlier version): A Custom Grid system to set size of Slider per Browser Size. You can define different Levels for sizes. Only used for Frameworks where no Fluid Widths has been used. (i.e. Skeleton)
  • AutoResponsive (it has been called “Fullwidth” in earlier versions): Used for Fluid Responsive themes, where the Slider calculates its own size for every Browser size. Only max width hand height of Grid should be defined. In case the Container Width is not Boxed, it will go Fullwidth Automatically
  • FullScreen: Slider will take the height of Window and center the preset Grid within. It will always try to go FullHeight and Fullwidth if the wrapping container allows.

(4) Layers Grid Size:

– Depending on the Layout you can set the Width and Height of the Captions. The Slider will go Fullwdith or Fullwidth and Fullheight in case you set AutoResponsive or FullScreen.  Caption Grid will be centered always within the slider container.

– In some cases (Custom) you can set multiple Levels depending on Screen Size. This is not needed in AutoResponsive and FullScreen mode.

– The fullscreen mode allows you to set a Container (per class or ID) which heights decrease the height of the FullScreen Slider Container automatically in every responsive level.

Edit Sliders

Navigate between the Slides simple selecting The Tabs on the top. Don’t forget to Update the Slide before you leave one tab!

Each Slide has its own General Setting. You can set transitions, Local delays, thumbnails etc.

(1) Slide Title: Used only Internal Naming of the slides

(2) State: Published / Unpublished  – used for Editing, modification the slide. If it is Unpublished, front-end won’t show this slide at all.

(3) Visible From/Until: If set, the Slide will only be visible between the set times. If Visible Until is not set, the Slide will be visible as soon as the Visible From date is reached. If Visible From is not set, the Slide will be visible until the Visible Until date is reached.

(4) Transitions: The Animation Style how the Slide appearance. You can select more than one from a multiple choice drop-down list.  Every new loop will use another Transition if you selected more then one.

(5) The Image Source for the Main Image: A Slide can have an Image, Transparent Image, Solid Color or External Image as Main Image.  This Image is the “Main Layer” in the background which has been animated via the General Settings predefined Transitions parameter.

bu33

(6) Background Fit/Repeat/Position: With these options, the chosen background image can be adjusted.

You can choose from following layers/captions:  HTML Markups,  Image, Video.

(7) Text Layer, Image Layer and Video Layer: For individual TEXT / HTML Markup Layer, Image Layer and Video Layer click on Add Layer and follow the following settings

Style / Edit CSS

– To define a predefined Style or add your own Style use the Style Drop Down list. You can change the Styling of the captions / Layers via the Embedded CSS Editor (Edit Style).

– Use HTML5 Standard markups in case you wish to embed paragraphs, headings, buttons etc.
– The Captions have the white-space: nowrap setting default. It is important because of the transitions. Please use <br> for line breaking, or add different layers for multiple lines.

– For further styling that is not possible through Edit Style, use the Edit Global Styles and put your Styles there.

Align & Positions

– Set the Align of the Layers / Captions. Left Top is default. Drag and Drop move of the Layer will be based on the Align. If you set the Align to Center Center, the Drag And drop will be based on this aligned position and use an Offset.

– i.e. Center Center Offset X -21px Offset Y -46px will be used in every responsive size linear calculated. If the Screen size is scaled to 50% than the Item is still in the middle of the grid and offset is -50px -50px (linear calculated).

– Center Center snaps the Center Center of the Layer to the Center Center position of the Gird. Right Bottom snaps the Right bottom corner of the Layer to the Right Bottom corner of the Grid etc.

slide

This is basic set up for Unite Revolution Slider 2 Extension, for more details about how to use Unite Revolution Slider 2, please go to See How to use Unite Revolution Slider 2

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

 

 

 

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

J2Store https://extensions.joomla.org/extension/j2store/

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

If you’re using Free version, copyright on footer will be shown. You can’t remove it, it’s copyright information for a template that you must to keep in order to use a template as Free license with us.

If you want to remove this copyright or replace with new content, please go with PRO version. Visit all Joomla! templates, find your template name and purchase PRO version.

After purchase PRO version, you backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro Standard & Pro Unlimited Customer)
  2. Ticket Support System (Pro Unlimited Customer only)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT Pine Joomla! template documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Only PRO version can download and use this package)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to  “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus  [name of the menu]  Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus  About Joomla  Add New Menu Item.

To Edit a Menu Item:

  • Select Menus  [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus  Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

 – How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title:  The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use   allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Paddingallows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

lt-job8

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration in to your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link.  Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Manage Online Store with J2Store

J2Store is a native Joomla shopping cart and e-Commerce extension. Create your online store and sell online fast and easy. It extends articles as products and lets you to turn articles into full fledged products.

No overhead to the site. No clumsy registration process. Just straight out-of-the-box. Build a beautiful online store using just the Joomla articles.

Use articles as products, define zone based tax rules, create product variants, add advanced pricing by quantity / customer groups and do more. J2Store makes it all possible

Sell any type of products including Digital Goods with J2Store.

Add new products category for Articles

Go to “Content” /  “Category” / click “New” button to create a new Category.

Add new product for Articles

Go to “Content” / “Articles”  click “New” button to create a new Product.

and remember select category for product, prices , images

This is basic set up for J2Store, for more details about how to use J2Store, please go to J2Store Portal document at See How to use J2Store

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

 

 

 

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

J2Store https://extensions.joomla.org/extension/j2store/

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

If you’re using Free version, copyright on footer will be shown. You can’t remove it, it’s copyright information for a template that you must to keep in order to use a template as Free license with us.

If you want to remove this copyright or replace with new content, please go with PRO version. Visit all Joomla! templates, find your template name and purchase PRO version.

After purchase PRO version, you backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro Standard & Pro Unlimited Customer)
  2. Ticket Support System (Pro Unlimited Customer only)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.

LT Joyful Joomla! template documentation

System Requirement

Localhost (PC)

If you’re working on localhost (your PC), I recommend you use XAMPP as best Apache for Joomla! CMS.

Hosting / Server

Joomla! 3 requires PHP version from 5.6.x or higher, this is a highlight for hosting compatible, for more details please read it here.

Template Installation

Install Quickstart Package (Only PRO version can download and use this package)

A quick-launch Joomla! Installation package that contains all the data and extensions to replicate the live demo. You just log in to Customer Area and download Template Quickstart package, then see this blog instruction for more details how to install Quickstart package with Akeeba Kickstart file

Install Template Package

Template package use for new website that you want to build content from zero without sample data, or using for your website with existing data. For install it, just download Template Install Package file and install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload). After finish, you can go to Template Manager, switch default Joomla! template to new template.

For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc. Other extensions such as Page Builder, Slider, Portfolios, etc. you can see download links and documents via part Party Build-in Document.

Template Content & Styles

How to Display Main Menu

Open a new browser window and type in the URL, which will be similar to http://www.your-site-name-here.com/administrator or, if you have Joomla! installed on your local computer, http://localhost/your-folder-name-here/administrator. Here you will have to log in as an Administrator or Super Administrator.

Go to  “Extensions” / “Templates” / “Styles” / “[template_name]-default”. This is where you edit template styles.

Please click button “Template Options“.

Please click tab Navigation and choose Main Menu.

Click the Save or the Save & Close toolbar button to save the Main Menu. To leave without saving click the Cancel toolbar button.

How to display the off-canvas sidebar?

Publish a module on the “off-canvas” module position. It is a built-in Joomla module position in the off-canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type “offcanvas” as the module position name:

Click the Save or the Save & Close toolbar button to save the Module Off Canvas Menu. To leave without saving click the Cancel toolbar button.

Add Menu Items to Your Menu

To Create a New Menu Item:

  • Select Menus  [name of the menu]  Add New Menu Item from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “About Joomla”, select Menus  About Joomla  Add New Menu Item.

To Edit a Menu Item:

  • Select Menus  [name of the menu] from the drop-down menu on the back-end of your Joomla! installation. For example, if a Menu is called “Main Menu”, select Menus  Main Menu. Then either click the title of the menu item in the table list or select the menu item checkbox and click the “Edit” icon in the toolbar.

How to Add a New Menu

Create a New Menu

There are 2 ways to add a Menu: Within the site administration panel, select Menus from the menu bar in the upper left corner. From the drop-down list, choose the “Manage” then choose “Add New Menu”. You can also select a Menu Manager from the left column and then select “New” from the top left corner icons.

3. Fill in the “Title”, “Menu Type” and a “Description”:

  • Title *: A proper title for the menu. This is used to identify the menu in the Menu Manager in the backend.
  • Menu type *: This should be a unique identification name used by Joomla! to identify this menu. Spaces are not allowed but you may use the ‘-‘ character such as news-menu.
  • Description: A description of the menu, useful for your own reference.

Click the Save or the Save & Close toolbar button to create the new menu. The Save & Close button will return you to the Menu Manager. To leave without saving click the Cancel toolbar button.

4. If you saved and closed, you will see your new menu in the list of Menus.

– How to Access?

From the main menu select “Extensions” / “Module”

– After that, click on the ‘New’ button in the toolbar to create a new Module Item, or select a Module by double clicking the Module’s Title or check the ‘check box’ and click on the ‘Edit’ button.
– You will now see a screen with a list of all of the module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom1’, ‘bottom2’, ‘bottom3’ and ‘bottom4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer1’ and ‘footer2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal popup window. Choose the module type by clicking on the module name to be taken to the ‘edit’ details screen.

bu48

 – How to Edit Modules?

From this screen you can search module by Filter: Site or Administrator; Select Status, Select Position, Select Type, Select Access and Select Language. And you can edit existing modules, publish/ unpublish modules, and even delete modules should you need to.bu43

MODULE TAB

1. Title:  The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

2. Custom HTML: This module allows you to create your own HTML Module using a WYSIWYG editor.

3. Position: Click button for drop down window to select Module position by available positions in a Template(s) installed.

4. Status: The published status of this item.

  • Published: Item is visible in the front end of the site.
  • Unpublished: Item will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still stored in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

5. Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

6. Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

7. Access: Select the viewing access level for this item from the list box. The access levels will depend on the what has been set up for this site to display.

8. Language: Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of ‘All’.

9. Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.

MENU ASSIGNMENT TAB

– Module Assignment: Click for drop down choice of module assignment.

– All pages: Module will show on all pages in the selected module position.

– No pages: Module will not show on any pages in the selected module position.

– Only on pages selected. Module will show only on pages in the selected module position as selected by menu item type(title).

– On all pages except those selected: Module will show on all pages in the selected module position, except those selected by menu item type(title).

OPTIONS TAB
Additional Options, such as Basic and Advanced can be found on the specific Module Type Help screen. Please notice that installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

Third-party extension to build template content

Building content with SP Page Builder

For Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in template to present for your content.

For Pro version, you can install Quickstart package, and this is a way you can edit demo content.

* We’re using SP Page Builder (Free) extension for all Joomla! templates, you can consider going with SP Page Builder (Pro) to get extra add-ons and unlimited features for page builder.

a) Edit content in Homepage: all content in ‘Home’ page based on SP Page Builder Free (see part “3-Party Build-in Document” to know more about this extension), so you can edit it via Admin > SP Page Builder, edit ‘Home’ page. This is very easy to edit based on drag-drop content with this extension.

b) Edit content in menu item “Pages”: all subpages in this menu items also based on SP Page Builder content, so you can edit it via SP Page Builder like “Home” page, go to Admin > SP Page Builder, select page that you want to edit and click to edit.

+ First step, is always this same, use ADD NEW ROW to create a new row.

+ Second step, use   allows you to divide current row into columns.

+ Third step, insert one addon inside block from a long available list (number of addon depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allow you to set a few typical appearance settings:

– Row Options

A few typical appearance settings:

(1) Section Title: Insert a title which will display as a section title. Leave blank if the section does not require any title.

(2) Heading: Select Title Heading from the list.

(3 and 4)Title Font Size & Title Font Weight: Set font size & weight for this selector( e.g. 25px & bold).

(5) Title Color: Title Text Color.

(6) Title Margin Top: Set an optimum distance from the Top element.

(7) Title Margin Bottom: Set an optimum distance from the Bottom element.

(8) Section subtitle: Insert a section subtitle which will display as a section subtitle (description). Leave blank if section does not require any subtitle.

(9) Title & Subtitle Position: Set position for both Title & Subtitle element.

(10) Background Color: Set the background color of an element. Use a background color and a text color that makes the text easy to read (contrast).

(11) Background Image: Set background images for an element. Always set a background-color to be used if the image is unavailable.

(12) Section ID: Set the ID attribute for the specific element. An ID should be unique within a page, each element can have only one ID.

(13) CSS Class: If you want to style a particular content element, then use this field to add a class name and then refer to it in your css file.

– Column Options

A few typical appearance settings:

(1) Background Color: Choose background color, by default it’s transparent.  Use a background color and a text/font color that makes the text easy to read (contrast).

(2) Column Paddingallows you to change paddings for chosen column, default values are equal: 10px 10px 10px 10px (Top Right Bottom Left).

(3) Column Animation: this option provides several effects of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many milliseconds an animation takes to complete one cycle, it means how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.

(5) CSS Class: if you want to add custom style for a particular content element, then use this field to add a class name and then refer to it in your css file.

Manage Blog with K2 Extension

Once you are up and running with your own Joomla website, and feel ready to start blogging (or creating content as it is now fashionably called), follow these rules to get the most out of your website, boost your website visits from search engines, and avoid making the common K2 mistakes.

Step 1 – Log in to your Joomla Admin Panel. You can usually access this by inserting the URL www.mysite.com/administrator/ into your web browser (make sure you substitute your actual domain in for mysite.com)
Step 2 – From the main menu, select “components” / “K2” / “items” (“items” is just the confusing K2 term for what is otherwise known as a blog, article or webpage). Note – please leave all other options in the K2 menu untouched unless you have web development knowledge or have been told otherwise by your web agency.
– You will now see a screen with a list of all of the blog items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.

bu24

Step 3 – For the purpose of this tutorial, we will create a new item (blog) – so click on the “New” button.
– Now you can write your K2 item and make any edits using the detailed instructions below.

* The compulsory fields in a K2 blog

lt-job8

1. Title: Add a Title that clearly describes what your blog item is about. If you want to optimize your new blog for search, then your chosen keyword/ keyphrase should be included in the Title.

2. Title Alias (URL): When you first save your item, the Title alias (URL) will auto-complete based on the Title you created, so you don’t actually need to touch this field. Here are a few simple and very important rules to follow when creating a Title alias (URL):

  • The Title alias (URL) will be the link to your new blog page. Once your blog goes live, the Title alias (URL) should NEVER be changed, otherwise, you will lose your social shares, backlinks from other websites to your article plus any potency that the page has achieved in search engines rankings such as Google.
  • The page URL (or link) should be descriptive, pertinent to the k2 article and human readable (ie. without funny characters and symbols). If you have any doubts at all, just make sure that the URL is identical to your item Title.

3. Category: When creating your website, your webmaster will have set up a selection of K2 Categories. The Category is an extremely powerful field that dictates in which section of your website the blog item will show up. Changing the Category field will move the item to a different section of the website.

In general, once a blog is live you will never want to change the Category as it could upset your page links. If your item has been published for more than a few days, always check with your web agency before changing the Category field.

4. Published: Publish is a straight-forward yes/no field that will publish or un-publish your K2 blog item. If you want to remove an item from your website simply set this field to No. You can revert back to “published” whenever you want.

5. Content: The content tab is where you write the text for your new page.

We are now in the world of Web 3.0 and the Semantic web. Realistically if you want your K2 blog item to rank well on Google, then we advise a minimum of 1000 words, and ideally around 2000 word of high quality, informative copy. Simply put, if there are better pages out there on the web covering the same subject, then you will struggle rank well and get new visitors from Google (which is usually the main writing a blog).

– A word of warning about using the Text Editor:

  • Keep use of the Text Editor buttons to an absolute minimum.
  • Applying bold, underline, italics and headers to the article is time-consuming and your site will not be unique.
  • Any good web designer will have built your website using a central graphic override file called a .css or .less file. From here they will be able to control the look of your entire website in a few seconds – rather than you going through every single page to make a graphics change.
  • Controlling the graphics from the central graphic override file will ensure that your website has a consistent professional look throughout.
  • Although you cannot see it, text editors often adding lots of unnecessary code to your page, making your website slower to load, and harder for Google to rank.
  • Use the image button (found directly below the Text Editor) to add images into your K2 blog item. First of all, click within the item text exactly where you want the image to appear, hit the “Image button”, and a pop-up window will appear.

car9

6. The Image tab: technically, although it is not compulsory, adding an image to each blog item is a wise idea. It is the truth that, although we shouldn’t judge a book by its cover, we somehow all do! Choosing a striking image that reflects your blog will work wonders for your article especially on social networks. Looking for free images? Try these free stock image websites. You have the option to either select the image directly from your server or upload from your computer.

7. Meta Description: Open the Meta information tab and click on the Description field. The Description is what will show up in Google search listings.

Use your Description to elaborate on your page title and give your potential viewers a better idea of what will be on the page when they click. A typical search results page has 10 website listings, so a well-written Description will ensure your website stands out and will improve your click-through-rate. Try and describe exactly what your page is about using superlative terms and even the odd UPPERCASE word to give your page a competitive advantage.

Google shows 150 – 160 characters (including spaces) of a page’s description (aka meta description tag). If your Description exceeds 160 characters, it will be truncated.

car11

Once everything is finished, make sure you click “Save and close“. Otherwise, the item will remain locked and other website administrators will be unable to access.

This is basic set up for K2 Extension, for more details about how to use K2, please go to See how to use K2 Extension

Manage portfolio feature with SP Simple Portfolio

SP Simple Portfolio extension is a free Joomla! 3.x component designed to create interactive portfolio functionality with category filtration in to your website. Easy Portfolio contains also a module, which can be used on any place on current layout.

– How to add new items?

From the main menu select “Components” / “SP Simple Portfolio” / “Projects
– You will now see a screen with a list of all of portfolio items on your website. From this screen you can add new items; edit any existing items, publish/ un-publish items, and even delete items should you need to.
– You have to start from adding a new tags in component, without them you won’t be able to add new items. Add at least one new Tag. The same tag can be applied to many different items across portfolio.

Each new tag have its own name and alias. If you add one or more tags you can start to add new items.

You have to fill all fields marked with * : title, image, description and tags.

(1) Alias – the Alias is used in creating the URL (website address) for the detail page. By default component will use the Title for creating the alias (with modifications) unless you type an Alias in yourself. Joomla will make the alias all lower case, replace spaces with dashes and take out any characters that can not be accepted.
(2) Image – About choosing a image for item, you can use those which you have or upload a new one. We recommended image size : 1170px X 800px, but of course if you have only smaller you can also use them.
(3) Video URL – Portfolio items can contain not only images but also Youtube or Vimeo video clip. Just insert your video URL. Leave this filed blank if video is not required.
(4) Description – in this field you can add description or even addcional images which will be displayed on the item detail page under main image.

(5) Tags – All items are based on Tags system, which are similar to categories. Once you get to three letters you will start to see suggested tags that already exist. The advantage of this solution is that each item can be assigned to multiple tags. Also the same tag can be applied to many different content items across portfolio. Tags will be used to filter portfolio items.

(6) URL – Each item can include its own link.  Leave this blank if you do not want to show project URL.

(7) Status – Whether this item is published or not.

(8) Language – Items include a basic way to implement a multi-language site. All items may be associated in different languages.

Template Settings

From the main menu select “Extensions” / “Templates” / “ltexample-Default“. This is where you edit template styles. When a template is first installed, a default style is created for it. The default style for the template will have the same name as the template with a – Default suffix.

There are 8 options for Style: Basic, Presets, Layout, Menu, Typography, Custom Code, Advanced, Blog, Assignment.

Basic Options

There are 8 options for Basic: LOGO, HEADER, BODY, FOOTER, SOCIAL ICONS, CONTACT INFO, COMING SOON, ERROR PAGE

– Logo: The Logo setting provides the ability to easily change the Logo Type, Module Position, Image, Retina Logo and Mobile Logo.

– Header: The Header setting provides the ability to easily change the Sticky Header and Favicon of the header area.

– Body: This feature provides the ability to easily enable boxed layout.

– Footer: The Footer setting provides the ability to easily change Copyright.

– Social Icons: The Social Icons setting provides the ability to easily change Icons and Module Position.

– Contact Information: The Contact Information setting provides the ability to easily change the Information and Module Position.

– Coming Soon: The Coming Soon setting provides the ability to easily change Coming Soon Title and Content.

 

 

 

Presets (Color Styles)

The Presets setting provides the ability to easily change Styles and Options.

We defined 8 color presets for the template, you can select an existing color you want and Enable this option to use custom styles. Built-in presets will not work if this option is enabled.

Layout (Template Positions)

The Layout setting provides the ability to easily change the layout template by using: Add Columns, Add Row and Settings.

Menu (Location & Style)

The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.

Typography (Font & Size)

The Typography setting provides the ability to easily change Font Family, Font Weight & Style, Font Subset, Font Size and update Google Fonts List.

Blog (Joomla! Articles)

The Blog setting provides the ability to easily change Icon Post Format, Comment Setting and Social Share.

Compression Settings

With this features, you can enable Compress Function for CSS and Javascript files, or Exclude Javascript you want.

With this feature, you can import and export template settings. It is also possible to export initial settings such as typography, logo, and importing available settings of the template that you want to install

Third-party Build-in Document

Template Framework

Helix Ultimate https://www.joomshaper.com/helix

Extensions Build-in

SP Page Builder http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

K2 Extension http://getk2.org/documentation

United Revolustion Slider http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation (paid extension and it won’t includes in download package, just in Quickstart package of PRO version)

CSS Libraries

Font Awesome http://fortawesome.github.io/Font-Awesome/

Bootstrap CSS http://getbootstrap.com/

CMS Using

Joomla! CMS http://www.joomla.org/

Support system

Pre-Sale Support

If you have any questions with the product before to buy, feel free to contact us via Live-Chat or Contact Form.

If you’re using Free version, copyright on footer will be shown. You can’t remove it, it’s copyright information for a template that you must to keep in order to use a template as Free license with us.

If you want to remove this copyright or replace with new content, please go with PRO version. Visit all Joomla! templates, find your template name and purchase PRO version.

After purchase PRO version, you backup your Template Settings by use export function (see screenshot below) via “Template Settings” / “Advanced“, then uninstall your current Free template.

Next, please go to Customer Area, download PRO package and unzip it, find Template Install package, reinstall it via “Extension” / “Manage” / “Install“, then active your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.

Forum & Ticket System

  1. Forum Support System (Pro Standard & Pro Unlimited Customer)
  2. Ticket Support System (Pro Unlimited Customer only)

Extra Services

Install Service

If you want to install Quickstart package on your hosting, you can order here.

Customization Task

If you want to hire our developer to a custom template, you can request here.

Development Service

Looking for new template for your project, and only use it for your website, ask our developer here.