This article will introduce the module position diagram of template OT SmartSolutions and guide you how to configure template and extensions to have your site looked like the demos.
We recommend that you should install quickstart package (if you did not) on your local machine or any testing host to walk around pre-configured template and modules. It will be better than just reading this post only.
1. Template's Position diagram
2. Template style configuration
Basically, after install the template package, the default template style is also installed so you may not have to configure anything. The default template style include layout configuration, preset colors, typography, etc., are configured to have the site match the design.
You may want to change logo, favicon, add Google Analytic code, custom some layout, custom some typo or add some custom CSS code, etc. These works should be done by working in template style edit page. We built a template framework to help you do these things more easily, intuitively and quickly.
To know more what you can do with Jarvis template framework for Joomla!, please read these posts.
3. Extensions configuration
Install third-party extensions first
The template SmartSolutions supports K2 Content component and its modules BUT you need download K2 Content and install it before continue reading. Two modules were used in this template:
- K2 Content module (mod_k2_content)
- K2 Comments module (mod_k2_comments)
Note that if you use the Quickstart package, K2 Content component and modules were installed and configured already.
There are many module instances was created for example purpose and we will introduce them below as grouped by module type.
3.1. K2 Content module
Many module instances of K2 Content module are created to put on many positions for different purposes.
If you use the Quickstart package, you can see all instances of this module as below figure. You can edit them at will.
If you install template package manually or without install sample data, you need to create these module instances (Extensions → Module Manager → New, then choose K2 Content module). We will introduce these in below sub-sections.
3.1.1. Latest Posts module
| Option | Value | Note |
|---|---|---|
| Select sub-template | Use default | |
| Position | bottom-2 | |
| Category filter | (choose All or choose some categories) | |
| Menu assignment | (Show on All pages) | |
| (Other options) | (leave default value of module) |
3.1.2. Slideshow module
| Option | Value | Note |
|---|---|---|
| Module class suffix | carousel-slide | A white space before value |
| Select sub-template | single | |
| Source | Retrieve items from categories | (You can choose "Select specified items" option to select specified items you want only) |
| Show title | Hide | |
| Position | middle-slide | |
| Category filter | (choose a category which contains items for slideshow) | |
| Menu assignment | (Show on homepage only) | |
| (Other options) | (leave default value of module) |
3.1.3. Recent Projects Portfolio module
| Option | Value | Note |
|---|---|---|
| Module class suffix | cols3 carousel-slide mod-style0 title-center | A white space before value |
| Select sub-template | portfolio | |
| Source | Retrieve items from categories | (You can choose "Select specified items" option to select specified items you want only) |
| Show title | Show | |
| Position | middle-area | |
| Category filter | (choose a category which contains projects portfolio items) | |
| Menu assignment | (Show on Homepage only) | |
| (Other options) | (leave default value of module) |
3.1.4. Recent Blog Post module
| Option | Value | Note |
|---|---|---|
| Select sub-template | blog | |
| Show title | Show | |
| Position | left | right | |
| Category filter | (choose some categories contains FAQs) | |
| Menu assignment | (Choose some page you want) | |
| (Other options) | (leave default value of module) |
3.1.5. Accordion FAQs module
| Option | Value | Note |
|---|---|---|
| Select sub-template | accordion | |
| Show title | Show | |
| Position | left | right | |
| Category filter | (choose All or choose some categories for blog posts) | |
| Menu assignment | (Choose some page you want) | |
| (Other options) | (leave default value of module) |
3.2. K2 Comments module
3.2.1. Latest Customer Testimonials
This module instance use K2 Comments module to show what customers says on your articles, your projects portfolios or your works.
| Option | Value | Note |
|---|---|---|
| Module class suffix | carousel-slide title-center | A white space before value |
| Select module functionality | Latest Comments | |
| Show title | Show | |
| Position | maintop | |
| Category filter | (choose All or choose some categories) | |
| Menu assignment | (Show on homepage only) | |
| (Other options) | (leave default value of module) |
3.3. K2 Tools
3.4. Banner module
Use Banner module to get images and links from Banner component and display at home page as clients' logo.
| Option | Value | Note |
|---|---|---|
| Module class suffix | cols4 carousel-slide mod-style0 | A white space before value |
| Alternative Layout | Default | |
| Show title | Show | |
| Category | (Choose a banner category) | |
| Position | mainbottom-1 | |
| Menu assignment | (Show on homepage only) | |
| (Other options) | (leave default value of module) |
3.5. Mega Menu
3.5.1. Menu item settings
Below is sample Main menu structure (Sample content from Quickstart package).
Home (Articles » Featured Articles)
Joomla! Pages (External URL)
|— Layout (Menu Heading) 1
|—|— No Sidebar (Articles » Single Article)
|—|— 1 Sidebar (Articles » Single Article)
|—|— 2 Sidebars (Articles » Single Article)
|— Bonus Pages (Menu Heading) 2
|—|— Bonus 1 (Menu Heading) 3
|—|—|— Login Form (Users Manager » Login Form)
|—|—|— Registration Form (Users Manager » Registration Form)
|—|—|— User Profile (Users Manager » User Profile)
|—|—|— Smart Search (Smart Search » Search)
|—|— Bonus 2 (Menu Heading) 4
|—|—|— News Feeds (Newsfeeds » List News Feeds in a Category)
|—|—|— Weblinks (Weblinks » List Web Links in a Category)
|—|—|— Offline Page (Articles » Single Article)
|—|—|— 404 Page (Menu Item Alias)
Pages (External URL)
|— Team Member (Articles » Single Article)
|— Services Page (Articles » Single Article)
|— Pricing Page (Articles » Single Article)
|— About Us (Articles » Single Article)
|— Module Styles (Articles » Featured Articles)
K2 (External URL)
|— K2 Item (K2 » Item)
|— K2 Layout (External URL)
...
|— K2 Categories (K2 » Categories)
...
|— K2 User Page (K2 » User page - blog)
|— K2 Tags (K2 » Tag)
|— Latest (one column) (K2 » Latest items from one or more users or categories)
|— Latest (more columns) (K2 » Latest items from one or more users or categories)
Contact (Contacts » Single Contact)
In this example, we will configure to group menu items to have each items marked 1, 2, 3, 4 above to be columns as below figure.
And below is menu item settings for items marked 1, 2, 3, 4
3.5.2. MegaMenu module settings
3.6. Custom HTML module
4. Other works
#