It's time to create new or re-design your websites to bring it to the next level.
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 the highlight for hosting compatible, for more details please read it here.
Install Template Package
Before installing the Free Template Package, you must make sure that you have installed Joomla. Download the latest release of Joomla 3 at http://www.joomla.org/download.html. For more information on how to install Joomla, you can refer to How To Install Joomla CMS.
1/ Install Free Template Package: Template package use for a new website that you want to build content from zero without sample data, or using for your website with existing data. For unzip it, just install it via Extension Manager (Admin > Extensions > Extension Manager, browser file and click to upload).
After finish, you can go to “Extensions” / “Templates” / “Styles” / “[template_name]-default”, switch default Joomla! template to new template.
For start to build your website, you can use standard Joomla! elements such as Articles, Module, etc.
Install Quickstart Package and Active all Features (PRO)
If you want to access all features and get sample data and layout as on live demo, consider getting PRO version of the template. This package only available in PRO version, by access PRO version, you just go to our Onepage Joomla! Template Listing, find your template name and go to the detail of template and order PRO version.
With PRO version, you have all access for template features, Quickstart download and 12 months for dedicated support service!
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.
Off-canvas (Mobile Menu)
Publish a module on the “offcanvas” 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
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 Menu Manager from the left column and then select “New” from the top left corner icons.
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.
If you saved and closed, you will see your new menu in the list of Menus.
How to make menu navigation for the one-page template?
For the one-page template, all content should be placed in the single page. So, all link in navigation menu will scroll and move to target content that you defined, that’s anchor links.
A page jump is made of two parts:
- The link: this the link that you put for a menu item.
- The anchor: this is the spot where you want to jump readers to, it’s based on an ID of the content element.
Example: You want to create a new menu item called “Services” with the intro about your company, so you just create an anchor (ID) for your part in content, example:
<p id=”lt-intro”>Intro about your company</p>
So, via details of menu item “Services” in Joomla!, you just use “External URL” menu item type, and put anchor #lt-intro for “Link” attribute.
Bottom, Footer, and other modules
– 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.
– 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.
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 the 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. The 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).
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 the Free version, you must build content by yourself from ZERO, you can use Joomla! single article and modules in the template to present for your content.
For the Pro version, you can install the 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, the 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 addons 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 a 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.
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.
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 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 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 template, you can select 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 layout template by using: Add Columns, Add Row and Settings.
Menu (Location & Styles)
The Menu setting provides the ability to easily change Menu, Menu Type, Dropdown Width and Dropdown Animation.
Typography (Style & 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.
Advanced (Compress / Import & Export Options)
Import & Export Options
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
Party Build-in Document
Helix Ultimate https://www.joomshaper.com/helix
SP Simple Portfolio https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio
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)
Font Awesome http://fortawesome.github.io/Font-Awesome/
Bootstrap CSS http://getbootstrap.com/
Joomla! CMS http://www.joomla.org/
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 the template that you must to keep in order to use the 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 activate your new PRO theme and import Template Settings to remove copyright on footer and access all pro features.
Forum & Ticket System
- Forum Support System (Pro Standard & Pro Unlimited Customer)
- Ticket Support System (Pro Unlimited Customer only)
If you want to install Quickstart package on your hosting, you can order here.
If you want to hire our developer to the custom template, you can request here.
Looking for new template for your project, and only use it for your website, ask our developer here.
Are you Web Freelancer or Web Design Company? Join our Club and Access our Resource!