Installation
The most important decision to make before proceeding with your installation is whether you should install the template manually, or if you can use the Quickstart package, which will install everything for you.
Which installation method you should use depends on the current status of your site. Also, before installing either the template manually or the Quickstart Package, please make sure you meet the Joomla! and the template requirements.
Requirements
- Apache 2.2+ or Microsoft IIS 7 (Apache strongly recommended)
- PHP 5.4+ (PHP 5.5+ Recommended)
- MySQL 5.1+
- Joomla 3.4+
Also, please have a look at the Gantry5 requirements. Basically, they are the same as the above, but you will find some additional details there.
Quickstart Installation
The Quickstart Package consist of a full installation of Joomla! that installs Joomla itself, the template, the extensions, the demo content and the database data to match our demo layout. Have in mind that as this is a full Joomla! installation it may only be used on a clean server; the package cannot be installed in an existing Joomla installation. It can only be used when you start a new project/website.
Installing the Quickstart Package is a fairly simple process. Generally, a Quickstart install will consist of these small steps:
- Ensure you have installed an FTP client and prepared a database for your server, or have the credentials for an existing database.
- Download and extract the Quickstart Package.
- FTP the extracted Quickstart contents to your preferred install location.
- Open your browser to the install location on your server to begin the Joomla! installation process, entering the database credentials where required.
Once this final step is complete you will have a fresh install of Joomla!, along with the template and all the settings and content needed to match the demo, including sample article content. However, the images from the demo will NOT be included, as they are licensed via a third party. Instead, blank placeholder images will be included so that you can customize the content easily with your own images. For some users, the above steps are all that is needed for a successful installation of the Quickstart Package, but for those who are less experienced with this process, we recorded the following videos (they are for the Oxygen template but the process is absolutely the same for all our templates).
This video, from the official Akeeba Backup documentation, shows the whole process of installing the Quickstart package (restoring an Akeeba Backup file).
Also, make sure that you click on the "Override tmp and log paths" button during the installation and that you update the admin user details.
Manual Installation
Manual Installation refers to installing the template on your Joomla! powered website. This means you already have a website with content items, modules, extensions, so you just decided you want to improve the design of your website.
You can find step-by-step instructions as well as a video instructions regarding the Manual Installation in the Gantry5 Documentation, in the "Installation" chapter.
Customization
All your customization (custom code) should be placed in your "Custom Style Sheet" file. This is the custom.scss
file. By default, the custom.scss
file does not exists, so you will need to create it. You need to create this file in root/templates/TEMPLATE_NAME/custom/scss
. You will find all details in the Gantry5 Documentation, in the "Adding a Custom Style Sheet" chapter.
Changing the logo and centering the menu
You will need to change the logo, that's for sure. You can do that easily by editting the settings of the "Logo (Advanced)" particle:
- Go to the "Template Manager"
- Click on "Solo - Default"
- Select the "Base" Outline
- Go under the "Particle Defaults" tab, scroll down to the "Logo (Advanced)" particle and upload your logo file
You can also change the logo from the Layout Manager by editing the "Logo" particle in it.
The logo (and the menu) defines the height of the Header section so if your logo is with different height than the Solo demo logo (80px) you might need to adjust the menu margins in order to make it in the middle of the Header. You can do that easily by adding the following code in your "custom.scss" file (the below example and video example are with logo which has 48px height):
#g-header .g-main-nav .g-toplevel > li > .g-menu-item-container { padding: 40px 20px; }
By changing the 40px value for top and bottom padding of the menu, you can center the logo.
Have a look at the following video. It shows everything that we explained above.
Update
Updating the template
Updating the template is really easy. Here are the steps you need to perform:
- Download the new version of the template from the "Download" section on our website
- Go to "Extensions" -> "Manage" and click on the "Browse" button
- Select the template file you downloaded in step 1. It will usually be called
tpl_it_NAME.zip
- Click on the "Upload & Install" button
Gantry5 Framework update
This is just a simple one click task. If there is a newer version of the Gantry Framework released you will notice that in your Joomla Admin as well as in the Template Manager. Then just click on the button.
You might also want to read the "Updating" and "Updating Themes" chapters in the Gantry5 Documentation.
Joomla 3 to Joomla 4 MigrationJOOMLA 4
Here are the steps you need to perform:
- Get yourself familiar with the Joomla 3.x to 4.x Step by Step Migration Guide.
- Make sure you are on the latest Joomla 3.10 version.
- Make sure you are on the latest Gantry 5 version.
- Install the latest version of the template.
- Uninstall the extensions that are not compatible with Joomla 4 (RokSprocket, News Show SP2, etc) and create/configure their replacements ("Portfolio" particle, "Accordion" and "Accordion (Joomla)" particles, "Tabs" particle, "Slideshow" particle, "News PRO (Joomla)" particle, etc).
- IMPORTANT: If you are using the AcyMailing extension and it is not v7 already, make sure you migrate to v7.x. Once you have migrated to v7, make sure you have completely uninstalled all v5 plugins (Extensions Manager -> Manage -> Search for "AcyMailing"). If you do not do that the update will fail and your site will become unusable.
- IMPORTANT: If you are using the Falang v3.x extension, make sure you disable all its plugins (Extensions Manager -> Manage -> Search for "Falang") prior to the update. If you do not do that the update will fail and your site will become unusable. Once you update to Joomla 4, install Falang v4.x and enable all its plugins.
- Perform the Joomla 3 to Joomla 4 update.
Gantry 5 Basics
Please have a look at the Gantry Documentation in order to discover what Gantry is all about, the core-concepts behind it, and how to get started with this next-generation framework.
The most important things you need to know when working with our Gantry5-based templates are:
- The Layout Manager is used mostly for creating your module positions. Apart from the module positions, you should also keep the static content in the Layout Manager. By "static content" we mean the "Logo" particle, the "Menu" particle, the "System Messages" particle, the "Page Content" particle, the "To Top" particle and the "Mobile Menu" particle.
- If you want to hide some modules/elements on some devices (phones, tablets, etc) you should use the
hidden-phone
,hidden-tablet
, etc. classes but you should add them in the particular module positions (under the "Block" tab) in the Layout Manager, rather then in the "Module Class Suffix" field for the particular module. You will find more details in the "Layout Manager" chapter in the Gantry Documentation. - As mentioned above, you create your module positions in the Layout Manager, but then you will use the Module Manager to assign your modules, as you would do in any other framework as well as in the default Joomla!
- In order to publish the custom particles that come with the template you will use the "Gantry5 Particle" module in the Module Manager, rather than adding them directly in the Layout Manager.
- If you want to change the style of some sections (background color, background image, text color, etc.) globally, for the whole website, you should do it under the "Styles" tab in the "Base" outline. The "Base" outline holds the defaults for the whole website. You can then override those defaults in each outline you create.
- If you want to load an asset (JS, CSS, etc.) globally in the whole website, you can do it under the "Page Settings" tab in the "Base" outline.
- If you want to create an empty page so you can assign modules to it, you will use the "Gantry5 Themes" -> "Custom Page" menu item type. Previously, you would use the "Featured Items" menu item type.
Required Atoms
Please have a look at the Atoms sections in the Gantry Documentation so you know what they are all about.
Atoms basically load assets (scripts and stylesheets).
You must load the following atoms so the template can work properly. We recommend adding these atoms to the "Base" outline so the assets can be loaded on all your pages:
- "UIkit for Gantry5" Atom - loads a modified and optimized version of the UIkit Framework.
- "Template.js" Atom - loads the template specific JavaScript code.
Optionally, you can also add the "ScrollReveal.js" atom if you want to have onscroll animations. ScrollReveal.js is a library to easily reveal elements as they enter the viewport.
You need to load these Atoms if you install the template manually (refer to the "Installation" section for more details).
The following video shows how you add the Atoms.
Particles
Gantry5 comes with a brand new Particle system which makes it easy to create, configure, and manage content blocks.
Basically, everything that you would create a Custom HTML module for is now coded in to a particle. You no longer need to copy/paste long HTML codes and edit them, you just need to click here and there and fill out fields in the Admin.
In this chapter we will show you the custom particles that we developed as well as some of the core Gantry 5 particles that we modified and enhanced, for example the "Social" particle.
Accordion
The "Accordion" particle is basically the UIkit Accordion coded into a particule and brought as a feature in our Gantry5-based templates. The following video explains everything.
Animated Counter
The "Animated Counter" particle displays numbers that you can animate as you wish. The following video shows the particle itself and most of its options.
Branding
The "Branding" particle is almost the same as the Custom HTML particle - it allows you to displays a text/HTML of your choice. The following video shows the particle itself and most of its options.
CTA Button
The "CTA Button" particle display a really nice and highly effective Call-to-action button. The following video shows the particle itself and most of its options.
Contacts
The "Contacts" particle displays contact information. It is a really flexible particle so you can basically display whatever contact details you want. The following video shows the particle itself and most of its options.
Companies
The "Companies" particle displays logos/images where you can optionally add some text. This particle is supposed to be used for sections like "Our Clients", "Our Sponsors" and so on. The following video shows the particle itself and most of its options.
Features
The "Features" particle displays, the quite popular nowadays, features that you, your company or your product provides. The following video shows the particle itself and most of its options.
Feedback 2
The "Feedback 2" particle displays feedback of users, clients and guests. The following video shows the particle itself and most of its options.
Gallery
The "Gallery" particle is also a very advanced particle that incorporated several UIkit components. It is now a piece of cake to build awesome, responsive galleries in your Joomla! website. The following video shows the particle itself and most of its options.
Google Map
The "Google Map" particle is really flexible and displays a Google Map. The following video shows the particle itself and most of its options.
Image Features
The "Image Features" particle is divided into a left and right side and allows you to present your features/services in a great way. It shows the features in columns (customizable) where you have the image on the left and title, description, special text (with icon) and a link on the right. The following video shows the particle itself and most of its options.
Main Feature
The "Main Feature" particle is divided into a left and right side. It displays an image and some text with a button. You can achieve some really nice visual effects if you add the ScrollReveal.js functionality to this particle. The following video shows the particle itself and most of its options.
Modal Search and Offcanvas Toggle
We put these two particles together because they are both supposed to be used inside the Main Menu. The "Modal Search" particle displays a nice magnifier icon and when you click on it a small popup window with the Joomla Search appears. The "Offcanvas Toggle" button displays an icon of your choice which, when clicked, triggers the Offcanvas section. The following video shows the particles themselves and most of their options.
OnePage Menu
The "OnePage Menu" particle display a sidebar, vertical menu that gets sticky/fixed when the user starts scrolling. And the page gets smoothscrolled to the particular sections when a menu item is clicked. The following video shows the particle itself and most of its options.
Our Team
The "Our Team" particle is a variation of the "Content PRO" particle. It displays team members together with their social accounts in a nice way. The following video shows the particle itself and most of its options.
Page Title
The "Page Title" particle is a nice, small particle that shows a title, icon and description. The following video shows the particle itself and most of its options.
Portfolio
The "Portfolio" particle is also a very advanced particle that incorporated several UIkit components. It is now a piece of cake to build awesome, responsive portfolios in your Joomla! website. The following video shows the particle itself and most of its options.
Pricing Tables
The "Pricing Tables" particle displays pricing tables. The following video shows the particle itself and most of its options.
Single Project
The "Single Project" particle is a variation of the "Room Page" particle. It is a great particle that allows you to create a whole page for each and every project. The following video shows the particle itself and most of its options.
Skill Bars
The "Skill Bars" particle has 4 unique styles to display skill bars. The following video shows the particle itself and most of its options.
Slideshow
The "Slideshow" particle is basically the UIkit Slideshow coded into a particle and brought as a feature in our Gantry5-based templates. The following video shows the particle itself and most of its options.
Social
The "Social" particle displays social icons and/or text. We enhanced it so you can now also have tooltips with custom test. The following video shows the particle itself and most of its options.
Tabs
The "Tabs" particle is basically the UIkit Tabs and UIkit Switcher coded into a particule and brought as a feature in our Gantry5-based templates. The following video shows the particle itself and most of its options.
Fixed/Sticky Navigation
Solo has a nice fixed/sticky Header that stays on the top of the screen when you start scrolling down. This effect is achived with the UIkit Sticky component. Basically, all you need to do is to add the following "Tag Attribute" to the Header section:
data-uk-sticky="{media: 768}"
You can use only "data-uk-sticky" but then the Navigation will always be fixed, on all devices. The "{media:768}" tells, that the Header should only be fixed on devices that are wider than 768px.
You can easily disable the fixed Header or make another section fixed. The following video explains everything (the video is from Oxygen, but the process is exactly the same in Solo.
Modules and Positions
Solo comes with unlimited module positions. Thanks to the awesome Gantry 5 framework you can now easily create as many module positions as you want. You just need to go to the Layout Manager, drag and drop the "Module Position" particle wherever you want it to be and set the module position name.
Quickstart Package - Modules Overview
Here, just for your orientation, you can see where the modules from the demo are published and what Module Class Suffixes they use.
"Home Default - Gardener" Page:
1. Contact | Top
Particle: Features (Style 2)
Items per row: 3
Module Position: top-a
Module Class Suffix: none
Show Title: Hide
2. Social Icons | Top
Particle: Social
Module Position: top-b
Module Class Suffix: none
Show Title: Hide
3. Logo
4. Menu
5. Gardener Welcome Image
Particle: Main Feature
Module Position: showcase-a
Module Class Suffix: none
Show Title: Hide
6. Gardening Services
Particle: Features (Style 6)
Items per row: 3
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
7. Why To Choose Us
Particle: Features (Style 3)
Items per row: 3
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show
8. Recent Projects
Particle: Portfolio (Style 1)
Module Position: subfeature-a
Module Class Suffix: title-center
Show Title: Show
9. Pricing
Particle: Pricing Tables (Style 2)
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show
10. Company Numbers
Particle: Animated Counter (Style 1)
Module Position: extension-a
Module Class Suffix: title-center
Show Title: Show
11. Clients Testimonials
Particle: Feedback 2
Items per row: 4
Module Position: additional-a
Module Class Suffix: title-center
Show Title: Show
12. Coupon Home Pages
Particle: Image Features
Item Class: coupon
Module Position: bottom-a
Module Class Suffix: none
Show Title: Hide
13. Call to Action | Home Pages | Our Team
Particle: CTA Button (Style 1)
Module Position: aftebottom-a
Module Class Suffix: none
Show Title: Hide
14. About Us
Particle: Custom HTML
Module Position: footer-a
Module Class Suffix: none
Show Title: Show
15. Social Icons | Footer
Particle: Social
CSS Class: uk-margin-top
Module Position: footer-a
Module Class Suffix: none
Show Title: Hide
16. Google Maps Footer
Particle: Google Map
Map Class: pull-up
Module Position: footer-b
Module Class Suffix: none
Show Title: Hide
17. Contact Us
Particle: Contacts
Module Position: footer-c
Module Class Suffix: none
Show Title: Show
18. Copyright (Branding)
Particle: Branding
Module Position: copyright-a
Module Class Suffix: none
Show Title: Hide
19. To Top
"Home 2 - House Cleaning" Page:
1. Contact | Top
Particle: Features (Style 2)
Items per row: 3
Module Position: top-a
Module Class Suffix: none
Show Title: Hide
2. Social Icons | Top
Particle: Social
Module Position: top-b
Module Class Suffix: none
Show Title: Hide
3. Logo
4. Menu
5. House Cleaning Slider
Particle: Slideshow
Module Position: fullwidth
Module Class Suffix: none
Show Title: Hide
6. House Cleaning Services
Particle: Features (Style 6)
Items per row: 3
Items CSS Class: invert
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
7. Why To Choose Us
Particle: Features (Style 3)
Items per row: 3
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show
8. Products We Use
Particle: Companies (Style 2)
Module Position: subfeature-a
Module Class Suffix: title-center
Show Title: Show
9. Pricing
Particle: Pricing Tables (Style 2)
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show
10. Company Numbers
Particle: Animated Counter (Style 1)
Module Position: extension-a
Module Class Suffix: title-center
Show Title: Show
11. Clients Testimonials
Particle: Feedback 2
Items per row: 4
Module Position: additional-a
Module Class Suffix: title-center
Show Title: Show
12. Coupon Home Pages
Particle: Image Features
Item Class: coupon
Module Position: bottom-a
Module Class Suffix: none
Show Title: Hide
13. Call to Action | Home Pages | Our Team
Particle: CTA Button (Style 1)
Module Position: aftebottom-a
Module Class Suffix: none
Show Title: Hide
14. About Us
Particle: Custom HTML
Module Position: footer-a
Module Class Suffix: none
Show Title: Show
15. Social Icons | Footer
Particle: Social
CSS Class: uk-margin-top
Module Position: footer-a
Module Class Suffix: none
Show Title: Hide
16. Google Maps Footer
Particle: Google Map
Map Class: pull-up
Module Position: footer-b
Module Class Suffix: none
Show Title: Hide
17. Contact Us
Particle: Contacts
Module Position: footer-c
Module Class Suffix: none
Show Title: Show
18. Copyright (Branding)
Particle: Branding
Module Position: copyright-a
Module Class Suffix: none
Show Title: Hide
19. To Top
"Home 3 - Electrician" Page:
1. Contact | Top
Particle: Features (Style 2)
Items per row: 3
Module Position: top-a
Module Class Suffix: none
Show Title: Hide
2. Social Icons | Top
Particle: Social
Module Position: top-b
Module Class Suffix: none
Show Title: Hide
3. Logo
4. Menu
5. Electrician Welcome Image
Particle: Main Feature
Module Position: showcase-a
Module Class Suffix: none
Show Title: Hide
6. Electric Services
Particle: Features (Style 6)
Items per row: 3
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
7. Why To Choose Us
Particle: Features (Style 3)
Items per row: 3
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show
8. Know Your Wiring | Image
Particle: Custom HTML
Module Position: subfeature-a
Module Class Suffix: none
Show Title: Show
9. Know Your Wiring
Particle: Accordion
Module Position: subfeature-b
Module Class Suffix: none
Show Title: Show
10. Pricing
Particle: Pricing Tables (Style 2)
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show
11. Company Numbers
Particle: Animated Counter (Style 1)
Module Position: extension-a
Module Class Suffix: title-center
Show Title: Show
12. Clients Testimonials
Particle: Feedback 2
Items per row: 4
Module Position: additional-a
Module Class Suffix: title-center
Show Title: Show
13. Coupon Home Pages
Particle: Image Features
Item Class: coupon
Module Position: bottom-a
Module Class Suffix: none
Show Title: Hide
14. Call to Action | Home Pages | Our Team
Particle: CTA Button (Style 1)
Module Position: aftebottom-a
Module Class Suffix: none
Show Title: Hide
15. About Us
Particle: Custom HTML
Module Position: footer-a
Module Class Suffix: none
Show Title: Show
16. Social Icons | Footer
Particle: Social
CSS Class: uk-margin-top
Module Position: footer-a
Module Class Suffix: none
Show Title: Hide
17. Google Maps Footer
Particle: Google Map
Map Class: pull-up
Module Position: footer-b
Module Class Suffix: none
Show Title: Hide
18. Contact Us
Particle: Contacts
Module Position: footer-c
Module Class Suffix: none
Show Title: Show
19. Copyright (Branding)
Particle: Branding
Module Position: copyright-a
Module Class Suffix: none
Show Title: Hide
20. To Top
"Home 4 - Plumber" Page:
1. Contact | Top
Particle: Features (Style 2)
Items per row: 3
Module Position: top-a
Module Class Suffix: none
Show Title: Hide
2. Social Icons | Top
Particle: Social
Module Position: top-b
Module Class Suffix: none
Show Title: Hide
3. Logo
4. Menu
5. Plumber Welcome Image
Particle: Main Feature
Module Position: showcase-a
Module Class Suffix: none
Show Title: Hide
6. Plumbing Services
Particle: Features (Style 6)
Items per row: 3
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
7. Why To Choose Us
Particle: Features (Style 3)
Items per row: 3
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show
8. Plumbing Banner | Free Pipes
Particle: Custom HTML
Module Position: subfeature-a
Module Class Suffix: none
Show Title: Show
9. Pricing
Particle: Pricing Tables (Style 2)
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show
10. Company Numbers
Particle: Animated Counter (Style 1)
Module Position: extension-a
Module Class Suffix: title-center
Show Title: Show
11. Clients Testimonials
Particle: Feedback 2
Items per row: 4
Module Position: additional-a
Module Class Suffix: title-center
Show Title: Show
12. Coupon Home Pages
Particle: Image Features
Item Class: coupon
Module Position: bottom-a
Module Class Suffix: none
Show Title: Hide
13. Call to Action | Home Pages | Our Team
Particle: CTA Button (Style 1)
Module Position: aftebottom-a
Module Class Suffix: none
Show Title: Hide
14. About Us
Particle: Custom HTML
Module Position: footer-a
Module Class Suffix: none
Show Title: Show
15. Social Icons | Footer
Particle: Social
CSS Class: uk-margin-top
Module Position: footer-a
Module Class Suffix: none
Show Title: Hide
16. Google Maps Footer
Particle: Google Map
Map Class: pull-up
Module Position: footer-b
Module Class Suffix: none
Show Title: Hide
17. Contact Us
Particle: Contacts
Module Position: footer-c
Module Class Suffix: none
Show Title: Show
18. Copyright (Branding)
Particle: Branding
Module Position: copyright-a
Module Class Suffix: none
Show Title: Hide
19. To Top
"Home 5 - Babysitter" Page:
1. Contact | Top
Particle: Features (Style 2)
Items per row: 3
Module Position: top-a
Module Class Suffix: none
Show Title: Hide
2. Social Icons | Top
Particle: Social
Module Position: top-b
Module Class Suffix: none
Show Title: Hide
3. Logo
4. Menu
5. Babysitter Welcome Image
Particle: Main Feature
Module Position: showcase-a
Module Class Suffix: none
Show Title: Hide
6. Our Sitters
Particle: Features (Style 6)
Items per row: 3
Item CSS Class: invert
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
7. Why To Choose Us
Particle: Features (Style 3)
Items per row: 3
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show
8. We can...
Particle: Skill Bars (Style 3)
Module Position: subfeature-a
Module Class Suffix: title-center
Show Title: Show
9. Pricing
Particle: Pricing Tables (Style 2)
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show
10. Company Numbers
Particle: Animated Counter (Style 1)
Module Position: extension-a
Module Class Suffix: title-center
Show Title: Show
11. Clients Testimonials
Particle: Feedback 2
Items per row: 4
Module Position: additional-a
Module Class Suffix: title-center
Show Title: Show
12. Coupon Home Pages
Particle: Image Features
Item Class: coupon
Module Position: bottom-a
Module Class Suffix: none
Show Title: Hide
13. Call to Action | Home Pages | Our Team
Particle: CTA Button (Style 1)
Module Position: aftebottom-a
Module Class Suffix: none
Show Title: Hide
14. About Us
Particle: Custom HTML
Module Position: footer-a
Module Class Suffix: none
Show Title: Show
15. Social Icons | Footer
Particle: Social
CSS Class: uk-margin-top
Module Position: footer-a
Module Class Suffix: none
Show Title: Hide
16. Google Maps Footer
Particle: Google Map
Map Class: pull-up
Module Position: footer-b
Module Class Suffix: none
Show Title: Hide
17. Contact Us
Particle: Contacts
Module Position: footer-c
Module Class Suffix: none
Show Title: Show
18. Copyright (Branding)
Particle: Branding
Module Position: copyright-a
Module Class Suffix: none
Show Title: Hide
19. To Top
"Home 6 - Builder" Page:
1. Contact | Top
Particle: Features (Style 2)
Items per row: 3
Module Position: top-a
Module Class Suffix: none
Show Title: Hide
2. Social Icons | Top
Particle: Social
Module Position: top-b
Module Class Suffix: none
Show Title: Hide
3. Logo
4. Menu
5. Builder Slider
Particle: Slideshow
Module Position: fullwidth
Module Class Suffix: none
Show Title: Hide
6. Building & Renovation Services
Particle: Features (Style 6)
Items per row: 3
Item CSS Class: ruler
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
7. Why To Choose Us
Particle: Features (Style 3)
Items per row: 3
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show
8. Recent Constructions
Particle: Portfolio (Style 1)
Module Position: subfeature-a
Module Class Suffix: title-center
Show Title: Show
9. Pricing
Particle: Pricing Tables (Style 2)
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show
10. Company Numbers
Particle: Animated Counter (Style 1)
Module Position: extension-a
Module Class Suffix: title-center
Show Title: Show
11. Clients Testimonials
Particle: Feedback 2
Items per row: 4
Module Position: additional-a
Module Class Suffix: title-center
Show Title: Show
12. Coupon Home Pages
Particle: Image Features
Item Class: coupon
Module Position: bottom-a
Module Class Suffix: none
Show Title: Hide
13. Call to Action | Home Pages | Our Team
Particle: CTA Button (Style 1)
Module Position: aftebottom-a
Module Class Suffix: none
Show Title: Hide
14. About Us
Particle: Custom HTML
Module Position: footer-a
Module Class Suffix: none
Show Title: Show
15. Social Icons | Footer
Particle: Social
CSS Class: uk-margin-top
Module Position: footer-a
Module Class Suffix: none
Show Title: Hide
16. Google Maps Footer
Particle: Google Map
Map Class: pull-up
Module Position: footer-b
Module Class Suffix: none
Show Title: Hide
17. Contact Us
Particle: Contacts
Module Position: footer-c
Module Class Suffix: none
Show Title: Show
18. Copyright (Branding)
Particle: Branding
Module Position: copyright-a
Module Class Suffix: none
Show Title: Hide
19. To Top
"About" Page
1. Page Title (Breadcrumbs Position)
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide
2. Breadcrumbs
Module Position: breadcrumb-b
Module Class Suffix: none
Show Title: Hide
3. Who Are We
Particle: Main Feature
Module Position: intro-a
Module Class Suffix: none
Show Title: Hide
4. Our Skills
Particle: Skill Bars
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show
5. Our Team
Particle: Our Team
Module Position: subfeature-a
Module Class Suffix: title-center
Show Title: Show
"Services" Page
1. Page Title (Breadcrumbs Position)
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide
2. Breadcrumbs
Module Position: breadcrumb-b
Module Class Suffix: none
Show Title: Hide
3. Services
Particle: Features (Styles 6)
Items per row: 3
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
4. Call to Action | Home Pages | Our Team
Particle: CTA Button (Style 1)
Module Position: afterbottom-a
Module Class Suffix: none
Show Title: Hide
"Portfolio" Page
1. Page Title (Breadcrumbs Position)
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide
2. Breadcrumbs
Module Position: breadcrumb-b
Module Class Suffix: none
Show Title: Hide
3. Portfolio
Particle: Portfolio (Styles 1)
Columns: 3
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show
"Contact" page (Component Contacts > Single Contact):
1. Page Title (Breadcrumbs Position)
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide
2. Breadcrumbs
Module Position: breadcrumb-b
Module Class Suffix: none
Show Title: Hide
3. Get a Quote Banner | Contacts
Particle: Custom HTML
Module Position: sidebar-left
Module Class Suffix: none
Show Title: Hide
4. Who Are We
Module Position: sidebar-right
Module Class Suffix: box1
Show Title: Show
"Typography" Page
(this is a Joomla article with the following modules):1. Page Title (Breadcrumbs Position)
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide
2. Breadcrumbs
Module Position: breadcrumb-b
Module Class Suffix: none
Show Title: Hide
3. OnePage Menu (Typography)
Particle: OnePage Menu
Module Position: sidebar-left
Module Class Suffix: none
Show Title: Hide
Extensions
The Web is full of all kinds of different Joomla extensions. Throughout the years we had the chance to work with many extensions from many different providers which helped us to filter the best of the best ones. The extensions that we use in our templates have the cleanest code, the best functionality and they've been very well supported by their developers.
Below you will find the Download link and the Documentation for each extension (Component, Module, Plugin) that we have used in this template.
- ChronoForms - Download | Documentation