Rate this item

I/ How to install template?

1/ 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.

2/ 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 login 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

II/ How to Edit template content?

For onepage template, all content should be placed in single page. So, all link in navigation menu will scroll and move to target content that you defined. So, how to do it?.

A page jump is made of two parts:
– The link: this the link that you put for menu item.
– The anchor: this is the spot where you want to jump readers to.

For quickstart package with sample data, we use page builder content. In each block, we have option called ‘Row Settings’, click to ‘Row Settings’, you will see option called ‘Section ID’ in popup content. By follow steps below, you will see details:

+ First step,  Admin > SP Page Builder > Home > Rows Options

In popup content, you find option called ‘Section ID’. In this field, you can put anchor (ID) for block content that you want to jump readers to. Example: I put ‘lt-banner’ as ID for my block content that I want to jump.

+ Second step, Go to Admin >  Menu > Main Menu and create new menu item (example: Services). In option “Menu Item Type”, you click “Select”, in popup content you click to “System” and select “External URL” and use that section id utility that you defined above with character “#” before for field “Link” and hit save.

bu2

Well, it’s done! By click to menu item ‘Services’, you will jump to block content that you defined with section id ‘lt-banner’.

2/ Building content with SP Page Builder

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

2.2/ 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 go 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 drap-drop content with this extension.

b) Edit content in menu item “Pages”: all sub pages 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, you to insert one addon inside block from long list of available (their number depends on the version of SP Page Builder)

+ Finally Step, each column have its own options which allows you to set 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 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 a optimum distance from the Top element.

(7) Title Margin Bottom: Set a 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 wish to style particular content element differently, 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 effect of animation for a column. These include simple, standard animations that are frequently used.

(4) Animation Duration: set how many millisecond 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 wish to add custom style for particular content element, then use this field to add a class name and then refer to it in your css file.

1

2

– 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 module on your website.

– How to edit existing modules? 

Bottom modules place at position ‘bottom 1’, ‘bottom 2’, ‘bottom 3’ and ‘bottom 4’, you can find it via Module Manager with ‘Select Position’.

Footer modules based on position ‘footer 1’ and ‘footer 2’ as well.

– How to Create New?

When creating a new Module, you will be presented with a modal pop up 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 an existing modules, publish/ unpublish modules, and even delete modules should you need to.

3

 

bu444

5

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 is 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 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 that display will depend on the what has been set up for this site.

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.

6– 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 note, installed Extensions may contain more parameters in Additional Options. Please refer to the specific Extension Module’s information provided by the Extension developer.

4/ Manage portfolio feature with Advanced Portfolio Pro

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. It will help you create and manage multiple image or video portfolios for your website with different sets of items and individual settings. It’s very easy and fast to create stunning portfolios and integrate them into your Joomla! site. Package can be download for free and use in both private & commercial projects.

7

– How to add new items?

From the main menu select “Components” / “Adv Portfolio Pro” / ” 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.

upshop2

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

upind2

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.

5/ How to change image background for website

9

Step 1 – Log on 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 “extensions” / “Templates”
– You will now see a screen with a list of all of style on your website. Please click “Lt_interior” as guidance.

insile1

Step 3 – Click folder “css” / click file “default.css” , scroll to line 159 and change the links that point to the picture that you want to change a background.

Note: Your images must be upload to the right on the folder “templates / lt_interior / images / slider_1.png”

6/ Manage Logo, Layout, Menu, Typo via Template Manager

From the main menu select “Extensions” / “Templates” / “lt_interior-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.

10

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

bu17

Basic: There are 8 options for Basic: HEADER, BOXED LAYOUT, LOGO, BODY BACKGROUND IMAGE, FOOTER, SOCIAL ICONS, CONTACT INFORMATION, COMING SOON.

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

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

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

– Body Background Image:  The Body Background Image setting provides the ability to easily change Image, Repeat, Size, Attachment and Position.

– 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.

bu18

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

bu19

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

bu20

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

bu21

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

bu22

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

bu23

Assignment: Joomla! gives you the option of switching between two or more styles on the Front-end. This is done with “Menu Assignment”, so you can set different styles for each menu or only a menu item. This allows specific “pages” that are defined by menu links to set for a “specific” style. Styles can be of different templates.

bu37

III/ Party Build-in Document

1/ Template Framework

Helix3 http://www.joomshaper.com/documentation/helix3/docs

– Page Builder

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

2/ Extensions Build-in

Advanced Portfolio Pro https://extstore.com/support/documentation/components/advanced-portfolio-pro

3/ CSS Libraries

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

Bootstrap CSS http://getbootstrap.com/

4/ CMS Using

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

IV/ Support system

We provide two support system includes:

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

If you have any pre-questions before go to PRO version, please feel free to Contact Us!

V/ Extra Services

  1. Install Service https://ltheme.com/install-service/
  2. Customization Task https://ltheme.com/customization-template/
  3. Development Service https://ltheme.com/development-service/
Want to save development time with Quickstart package and get PRO Dedicated Support for 1 year? Access PRO version with 25% OFF on this week!
[SUMMER HOLIDAY DISCOUNT] GET 50% OFF FOR ALL NEW ORDERS! - Discount only available in this week! GET THIS DISCOUNT NOW!