On behalf of our team, we would like to thank you for purchasing this theme. Your support encourages us to build better themes and continuously bring value to our products. This documentation file covers all the information needed to install and use this theme. You'll find everything you need to know to create a stunning and beautiful website in minutes.
NOTE: we will not respond to any support questions on ThemeForest comment section or through e-mail.
If this document doesn't answer your questions fell free to open up a private ticket in our dedicated support forum.
Theme Video Tutorials
We recommend looking through these video tutorials to get familiar with the theme.
Installing the theme
In order to install the theme you need to have a WordPress copy already installed on your own server.
Below are some useful links for WordPress information:
- WordPress Codex - general information about Wordpress and how to install it on your server
- First Steps With Wordpress - general information that covers a wide variety of topics
- FAQ New To WordPress - the most popular FAQ's regarding Wordpress
Install the theme from WordPress or FTP
NOTE: Once you have downloaded the theme package from ThemeForest you must unzip it and upload only the inner zip file named etalon.zip.
Step by step instructions:
- Login to your WordPress site's administration area
- Navigate to Appearance > Themes > Install
- Click on the "Add New" button, then click on the "Upload Theme" button
- Upload the theme zip file named etalon.zip
- Click "Activate"
If this method fails we recommend uploading the theme via FTP. Open your FTP client, move to your WordPress installation path /wp-content/themes and upload the unzipped etalon folder.
After the upload is complete navigate to Appearance > Themes and activate the theme.
Install the child theme
Etalon's main download folder includes a child theme. A WordPress child theme allows you to apply custom code changes to your site. Using a child theme ensures your customizations will not be overwritten, even if you update the parent theme.
Updating the theme - Auto-update feature
In this section we will cover the steps required to get auto-updates for the theme.
Install and activate the Envato Market plugin
- Download the Envato Market plugin from here. The plugin is available via Github and is completely free. All you need to do is to go to the Envato Market Github page and click on the Download .zip button.
- To install the plugin navigate to Plugins > Add New and click on the Upload Plugin button at the top of the page.
- Now that the plugin is installed and active you should see a new Envato Market menu item in your WordPress dashboard.
Envato Market Plugin Setup
You will need to sync the Envato Market plugin with your Envato account to have access to all of your marketplace purchases as well as item updates.
- IMPORTANT: You must be logged into the ThemeForest account that was used to purchase the Etalon theme.
- Navigate to Envato Market menu item seen in your WordPress dashboard menu list.
- Click on the Generate A Personal Token link provided to be directed to the Token Creation page.
- Enter a name in the "Token Name" field. For example: Etalon.
- Under the "Permissions Needed" section, make sure the following checkboxes are checked:
- - View Your Envato Account Username
- - Download Your Purchased Items
- - List Purchases You've Made
- - Verify Purchases You've Made
Updating the theme - Manual update
You can update your theme manually by performing the following steps:
- Download the latest theme zip file from ThemeForest
- Extract the theme archive and locate etalon.zip
- Extract etalon.zip and locate the etalon folder
- Copy/Replace content of the etalon folder to the /wp-content/themes/etalon folder of your web site.
Using this method, none of existing content or settings will be lost.
Install theme required plugins
After the theme is installed a message box will appear requesting you to install 6 required plugins and 2 recommended ones:
- Etalon Framework - Main theme framework plugin
- Visual Composer - Premium content builder plugin
- Revolution Slider - Premium slider plugin
- KeyDesign Addon - theme core plugin
- Contact Form 7 - available for download with WordPress plugin repository
- WordPress Importer - plugin used for importing theme demo data
- Breadcrumb NavXT - available for download with WordPress plugin repository
- WooCommerce - available for download with WordPress plugin repository
These plugins must be installed for the theme to work properly.
Plugin documentation and video tutorials
Video tutorials: available on YouTube
Video tutorials: https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/
When you purchase a theme from ThemeForest that bundles Visual Composer and Revolution Slider, you are free to use these Premium plugins with the theme. However, your Etalon purchase does not give you individual Visual Composer and Revolution Slider licenses that allow you to activate or download these plugins as you wish. Activation doesn’t mean the plugin will not work but only that you cannot receive direct updates. Please don't worry if you see warning messages about the plugin license activation.
You can use these plugins with the Etalon theme and you are fully compliant with the Envato’s policy, but you cannot activate them as the owner (so don't try to use the Etalon purchase code to activate one of these plugins).
New plugin updates will be provided when we issue new theme updates. As soon as a new version is available for download, we will surely update the theme after we will fully test the plugins to make sure there are no bugs that will conflict with our own update. We will also fully test new theme versions before releasing them on ThemeForest.
Importing demo content
The fastest way to import our demo content is to use the Demo Content Importer. The Demo Content Importer provides you with all of Etalon’s pages and posts, sample sliders, widgets, theme options, assigned pages, and more. Using this import feature is recommended for fresh installs. The automatic import will NOT replace existing content however. We always recommend running it on a fresh WordPress installation.
If this is the first time using Etalon theme, we recommend starting with one demo variation (elements from different demo variations can be reused). You will then have everything needed to begin, it makes it easier to understand how the theme works, and you can avoid having to create everything from scratch. Here is what you have to do:
- Make sure you have all the required plugins installed and activated.
- Navigate to Appearance > Theme Options > Import Demo.
- Select one of the demo's listed in the dropdown menu and click the Import button. Please note that the "Coming soon template" can be installed separately from the other templates without affecting your content. More information available in the Coming soon section.
- Wait until the import routine is done. Please be patient and don't navigate away, as this can take few minutes depending on your host's performance.
- You will be notified once the importing process is completed.
- Navigate to Settings > Permalinks and set the Common Settings to "Post name" (required for the main navigation to work properly).
- You can check the results.
IMPORTANT: Importing demo content will overwrite all existing option values, please proceed with caution!
Home Page system
If you like to use the one click demo content installer, please skip this section and see Importing demo content section. After the theme and plugins have been installed you can start creating the one-page structure.
Etalon's one-page layout is made up of a master page and multiple child pages. These child pages represent the sub sections of the single page layout, sections like About us, Services etc.
Creating the one-page structure:
- Navigate to Pages and add 2 new pages - the first page you need to create will be displayed as front page so you must name it "Home". The second page will be used to diplay blog posts so you can name it "Blog".
- Publish both pages.
- Navigate to Settings > Reading and change the setting into A static page. Assign your previously created "Home" page as the Front Page and your "Blog" page as the Posts page.
- Navigate to Settings > Permalinks and set the Common Settings to "Post name"
Reading settings should look like this:
After the one-page structure was created we can begin to create child pages. Follow the instructions below:
- Create a separate page (as child of the master page - "Home") for each of the sections you would like to insert on the Home Page layout.
- The order of these sections is given by the "page order" attribute set for each page when created. Set the page order for each of these child pages (see screenshot below).
To create a stand alone page, separate from the One Page layout, just create a normal page without setting it as a child of master page.
Setting up the portfolio
- Navigate to Portfolio - Add New
- Specify a title for each portfolio item
- Set up a featured image (a minimum size of 800x1000px is recommended). The portfolio section uses a carousel system. All images will be placed one after another.
- Choose a template for the single portfolio page. You have 3 options available: single image side, gallery side and gallery list.
- Create a new page (using the Portfolio template) and save your page. No need to enter any content in this page.
Uploading images for single portfolio items
- Navigate to Portfolio - All Portfolio Items
- Select a portfolio item
- Upload images using the default WordPress "Add Media" upload system. See screenshot below.
- Creating a gallery works the same way. Upload all your images using the same system.
Arranging portfolio items in a custom order
You can use the following plugin: Simple Custom Post Order. With this plugin you can drag and drop the portfolio items and arrange them as you see fit.
Page meta settings
On the bottom of each page there are 2 meta settings boxes. Here you can configure the following:
- Hide the page title
- Add page subtitle
- Overwrite title and subtitle color
- Set up a colored background overlay
- Force full width - the page section will be displayed without a container
- Change page background color
- Top spacing (top padding)
- Bottom spacing (bottom padding)
Setting up the menu
Navigate to Appearance > Menus and create your main menu. Inside the "Manage Locations" tab you can assign this menu as the Header Menu.
The theme features two menu locations: Header and Footer menu.
One-page menu items linking to sections
To create a menu item linking to a section of the Home Page template select Pages from the left side panel, check the box for the child pages and click the "Add to Menu" button.
The left side panel box should look like this:
Menu items linking to stand alone pages
The same as above. If you want to include a stand alone page in the main navigation area use the "Pages" tab, select desired page and click "add to menu".
Setting up the Mega Menu
To set up a mega menu make sure you follow the steps below:
1. Enable CSS classes
Scroll up and find the "Screen Options" at the top right of the Menu, and click on the drop-down arrow. The screen should look like this:
2. Create a new menu item for the Mega Menu
Go back to your "Menus" section and scroll to the "Custom Links" section on the middle left. Change the "URL" to ""#"", and change the label to whatever you want in your menu.
Now click on "Add to Menu", and your custom menu item will appear on your main menu list.
Next, click on the drop-down arrow of the menu item icon, and when the screen opens up, find "CSS Classes" and type mega-menu.
3. Add child menu items to your mega menu item.
See screenshot below:
You can access the Theme Options panel by going to Appearance > Theme Options. Theme various options are organized into vertical tabs on the left side.
Business address - Enter the address of your business
Business phone - Add a phone number where users can contact you
Business email - Add a email address where users can contact you
Social icons - Select which social icons will appear on your website
Social icons links - Add the social media links
Main theme color - Set the theme primary color
Secondary theme color - Set the theme secondary color
Logo style - Choose between a Text and Image logo
Favicon - Upload favicon image
Preloader - Enable/Disable the theme preloader
Coming Soon Mode - Enable the coming soon template (displayed only for visitors)
Google Map API Key - Add your Google APi key. More information here.
Custom CSS - Paste your custom CSS code here
- Select main navigation style - Choose to display the main navigation area in a container or force full width
- Select main navigation behaviour - Choose between sticky or fixed navigation
- Navigation background color - Change the fixed top navigation bar background color
- Sticky navigation background color - Change the sticky navigation bar background color
- Navigation text color - Change the menu texts, header button, cart color for the fixed top navigation bar
- Sticky navigation text color - Change the menu texts, header button, cart color for the sticky navigation bar
- Navigation text color on mouse over - Change the navigation bar texts color on mouse over
- Sticky navigation text color on mouse over - Change the navigation bar texts color on mouse over
- Enable Topbar - Enable the topbar where the business info details are displayed
- Topbar background color - Overwrite the topbar default background color
- Topbar text color - Overwrite the topbar default text color
- Topbar background color on mouse over - Overwrite the topbar default text color on mouse over
- Revolution Slider shortcode - add the revolution slider shortcode used for the header area
You can display a button near the main navigation area. The button has three different actions:
- Open a modal window with a embeded contact form
- Scroll to a custom section withing the main front page
- Open a page within the site
Turn ON/OFF theme compatibility with WooCommerce. If this option is turned OFF, WooCommerce theme resources will not be loaded.
WooCommerce documentation can be found here.
Body font settings - Font Family (Google fonts), Font Weight & Style, Text Align, Font Size, Line Height, Font Color
Headings font settings - Font Family (Google fonts), Font Weight & Style, Text Align, Font Size, Line Height, Font Color
Typekit Script - Paste here the script tag generated from Typekit website
Typekit Body Font Selector - Font Family (Typekit) name used for body texts
Typekit Headings Font Selector - Font Family (Typekit) name used for heading texts
Display sidebar - Turn on/off blog sidebar
Minimal blog - Turn on/off minimal blog layout
Page title - Default: Error 404
Page subtitle - Default: The page could not be found!
Back to homepage button text - Default: Back to homepage
Set footer fixed to bottom - If enabled the footer area will be fixed to bottom
Show back to top button - Enable the back to top button
Display footer panel - Enable to display the business info panel
Footer panel template - Choose footer panel template
Upper Footer Background - Select Upper Footer background color
Lower Footer Background - Select Lower Footer background color
Footer Headings Color
Footer Text Color
Copyright Text - Bottom footer copyright text
Select one of the demo's listed (Barber, Beauty salon, Car rental) and click the Import button.
In order to use the Typekit Webfonts ( Soleil Font - Included in the theme demo ) you will have to:
- Create a typekit account on https://typekit.com
- Create a new kit on typekit.com
- Add your free font ( Soleil ) to the new created kit
- Copy Kit ID and Font Selector
- Go back to your website and paste the Kit ID code under Theme Options->Typography->Typekit Script
- Paste your typekit body and heading font selector, e.g your font name ( for Soleil demo font, use: soleil )
*Note: There are free & premium typekit fonts. Soleil font, used in the theme demos is a free font and you can use it just by following the steps mentioned before. You can choose from 940+ fonts and use only one domain under free subscription plan. Find more on: https://typekit.com/plans/
Visual ComposerThis section details the main elements and aspects of Etalon's unique application of the Visual Composer Page Builder. Discovering the different areas, icons and tools we have included will enable you to build beautiful pages quickly.
How to use the page builder
In this overview, you will find everything you need to know about Visual Composer page builder; starting with how the most commonly used interface elements work. Visual Composer has everything you need to manage content elements with a single click: add, edit, duplicate, remove or create element presets, etc. You can also find some interesting video tutorials with VC Video Academy here: https://vc.wpbakery.com/video-tutorials/
1) Add elements
KeyDesign Elements gives you instant access to 18 built-in content elements. Each element has been carefully crafted, and offers multiple options. Simply insert elements into your page, click on the Plus Icons, and you’ll see an overlay window containing all the available modules. Select the one you want, and it will be inserted onto the page.
2) Drag and drop elements
With the intuitive drag and drop interface you can quickly change your layout or reorder elements. Simply drag elements or modules using the Drag Arrows Icon.
3) Open Settings
You can modify rows, columns, and module presets in seconds, and build complex layouts without using a single line of code. Simply open the setting from the Pen Icons. This will open a different overlay window for every module category with your options organized in convenient tabs.
4) Copy, paste and clone elements
One way to make page building proceed more efficiently is to go to use the copy, paste and close functionalities.
5) Custom CSS code
If you need to insert custom CSS code for use in a single page only, you can easily do so. The custom code will be stamped only for the page in question, and will not appear in any other page. At the top right corner, you will see a Gear icon. Click on it to open a code editor window and insert your custom code.
KeyDesign Elements Overview
Our KeyDesign Addons plugin gives you instant access to 31 built in content elements. Each content element has been carefully crafted and offers multiple options that will enable you to build any layout you desire. You can build complex layouts based on these content elements within minutes, and without requiring a single line of code.
Element list overview:
Enable the Coming Soon page for your website while it's under construction. Anyone who isn't logged in to your site will see the coming soon page, while you or any other logged-in staffers can access the site as normal and do not not see the coming soon page which allows you to work on your changes or content.
Please follow the steps below to properly activate the "Coming Soon" page:
- Navigate to Appearance > Theme options > Import Demo
- Select the "Coming Soon" option listed in the dropdown menu and click the Import button.
- Wait until the import routine is done. Please be patient and don't navigate away, as this can take a while depending on your host's performance.
- Once the import process is completed, navigate to Appearance > Theme options > Global Options and enable the "Coming Soon Mode" option.
- Another option will be displayed underneath. You will need to select the "Coming Soon Template" page.
- Save your changes and check the results.
The "Coming Soon" template is built using Revolution Slider and a countdown element. You can edit the sliders by navigating to Slider Revolution > select the "Coming soon" slider > Edit the slides.
In this section, you will learn how to translate your site into your native language. You will also learn how to transform your site into a multi-language site if you want. The theme is ready for localization via .po/.mo files.
If you are not familiar with translating Wordpress themes, we highly recommend that you read this article: http://codex.wordpress.org/Translating_WordPress
Please follow the steps below to properly translate the theme in your language:
- Find the folder languages of the theme (wp-content/themes/etalon/languages/).
- Duplicate the default.po file.
- Rename your copy of default.po example: fr_FR.po for France, it_IT.po for English, de_DE.po for Deutch.
- Download POEdit: https://poedit.net/download
- Open your file with POEdit software.
- Translate your file.
- In File click on Preferences and tick "Automatically generate mo".
- Save your file.
- Upload both .po/.mo files to the theme languages folder (wp-content/themes/etalon/languages/) using a FTP client.
Are you willing to contribute and help us translate the theme?
Please, send your translation to firstname.lastname@example.org
1) Are you sure you want to do this?
When you are trying to install the theme and WordPress comes back with the message "Are you sure you want to do this?" it means that your PHP has a setting for upload files lower than the ZIP file size.
What you need to do is contact your hosting provider and ask to increase the "upload_max_filesize" and "post_max_size" to at least 32mb.
2) Demo images not included in the sample content
Due to copyright restrictions some of the live preview images/videos were not included with the demo content. We are not allowed to redistribute them.