Installing the theme
Once you purchased the theme on Themeforest, begin installing the theme:
- download theme package from “Downloads” section in your Themeforest account;
- unzip it;
- open “THEME IN THAT FOLDER!” directory and find installable “omni.zip” archive in it.
Log in your domain with freshly installed WordPress and:
- go to Appearance>Themes>Add new>Upload theme;
- Find omni.zip archive on your computer location and upload it;
- Activate the theme.
- Begin installing and activating required plugins;
That’s all! The theme and plugins are installed and you can start importing demo data.
Theme Installation Video
Demo Data Import
After the theme has been installed, you can import demo data. Before doing it, please, make sure of 2 points,that will ensure the proper demo data import:
- Your WordPress installation is clean. It means that there is no other content (themes, plugins, images, pages, menus etc.) there, except Omni theme and plugins bundled with it.
- You don’t have WordPress Importer plugin installed or it is inactive. WordPress Importer plugin may conflict with the theme’s importer and import process may freeze in the middle. So it is important condition that it is either not installed at all or at least deactivated.
When you are ready, go to Appearance>Import Demo Data section and click on the button.
After that simply wait until you see 100% result.
In case import process cannot be finished even after you have taken precautions described above, please, get in touch with your server administrator and ask him to increase max_execution_time value in PHP.INI file. If you are a server admin yourself, more about this issue, you can find here.
There are 2 ways to get theme updates:
- manual updates;
- automatical updates.
- Log in your Themeforest account;
- Go to ‘Downloads‘ section;
- Click on the button in from of the theme name;
- Select “Installable WordPress file only” option from the dropdown menu and download the zip archive.
- Unzip ‘omni.zip‘ archive and upload folder ‘omni‘ via FTP to ‘wp-content/themes‘ directory replacing the old files.
- After that go to Appearance>Install Plugins section and update the required plugins. If there is no such section in your admin dashboard, it means that all plugins are up-to-date and there are no new versions available.
In order to activate auto update option, go to Appearance>Customize>Main options section and enter:
- your theme purchase code;
- and Envato Access Token.
How to find my item purchase code?
- Log in your Themeforest account;
- go to ”Downloads section;
- Click on the button;
- and download your License and purchase code in PDF or text format.
Where to get access token?
Access token can be generated at Envato API website.
Log in it using yiur Themeforest credentials and generate your Access Token at this page.
UPDATE PROCESS USING AUTO UPDATE OPTION
After you have inserted your theme purchase code and Envato Access Token in Main options section, you will get notifications about the new theme versions in your admin dashboard.
- Go to Updates section and perform an update from there.
- After that go to Appearance>Install Plugins and update the required plugins from there. If there is no such section in your admin dashboard, it means that all plugins are up-to-date and there are no new versions available.
PLEASE NOTE: Auto update option is available beginning from theme version 1.1. So if your current theme version is 1.0 , please, update manually.
Customize (Theme Settings)
General theme settings serve to control the overall structure and style of the theme.
To adjust settings for each section of the theme, click on button at the admin top bar.
There will appear the number of tabs, each of which includes settings for a particular theme section or element. Let’s take a short tour through each of them.
Purchase code – here you enter your purchase code. Where to find it you can read here
Access token – this field you can leave empty
Disable preloader animation – activate or deactivate preloader image (image is set under Logotypes tab>Custom preloader image)
Disable animation on mobile devices – you can disable preloader image only for mobile devices
Enable search after menu – adds search field in a menu row:
Header Logotype – the logo is displaying on the top:
Sticky Header Logotype – the logo is displaying in a sticky header on scroll:
Custom preloader image – this image is displaying when page loads. If the option is turned on in Main Options, but the image is not uploaded, the logo will be displayed instead
Enable retina – this option is made for your logo look sharp on mobile. If it is checked, you need to upload your logo image of the size twice bigger than it is.
In Blog Options tab you can adjust the general settings for your blog pages and for single posts.
In Page Options section you can set up:
- position of the navigation menu – horizontal or vertical;
- title style;
- enable page title animation.
In Typography options section you can configure font size, font color and font-family for:
- headings (h1, h2, h3, h4, h5, h6);
- for body text.
In Advanced Option section you can add custom codes to modify elements, if you don’t find a suitable option for them.
There are four fields available:
- Map api key – enter Google Map API key. More info you can read here
- Counter field – here you can add your Google Analytics field to track visitors activity on your site.
- JS Code field – you can add some JS codes here.
- CSS Code field – you can add custom CSS codes here to change appearance of some theme elements.
404 Page Options
The options under this section allow you to upload your custom logo and background image for 404 page
Color Scheme Options
In the Color scheme options section you can select one of 8 predefined color schemes of set a custom color.
In the Site identity section you can:
- change your website title and its tagline;
- upload site icon that will be shown as a favicon in the browser and as an app icon on your mobile device.
In the Colors section you can select a background color of the site.
In the Background image section you can upload a background image for your site.
In this section you can add and edit widgets inside your sidebars (more about sidebars creation read here)
Static Front Page
In the Static Front Page section you can select the home page and the posts page of your site.
Google Map activation
Recently it became required to integrate Google Map API key to activate Google maps on your site.
This option is already available in version 1.5. of Omni theme. All you have to do is:
- Make sure that you are using Omni 1.5. If not, please, update it by following instructions from this article.
- Get your Google Map API Key as described in this tutorial.
- Go to Appearance>Customize>Advanced options and input your key in Map api key box.
- Save changes. After that add map to your page using Google Maps module of Visual Composer.
Single Post and Post Formats
Posts can be created under Posts tab in the left panel of your admin dashboard.
In order to create a standard post:
- Go to Posts>Add New section.
- Fill in the title field and begin adding post content.
- Assign your post to a category and add tags if needed.
- When you are ready, upload a featured image, that will be displayed on a blog page.
- Click on button and the post is ready!
There are 6 post formats available in the theme: standard, quote, image, audio, video and gallery.
In order to create a post of a different post format:
- Follow steps from the above topic.
- Additionally, select required post format from the “Format” section in the right side of the post edit page.
- After you have selected a post format, there appears a meta box in the upper right corner of the page. Fill in the fields in it. The fields are different for each post format depending on the format you select.
E.g if you selected a QUOTE format, there appear the fields for the quote text and author.
If you select a GALLERY format, there appears a section with button.
- When you filled in all fields, click on button.
The post is ready!
After you have created a number of posts, you can create a blog page with them.
- Create new page at Pages>Add New section.
- Give it a title and select News page template from Page Attributes section.
- At the bottom of the page there will appear Blog Page Options section. There you can configure:
– style of the blog page;
– disable post date and excerpt;
– select categories to display;
– choose number of posts to display on one page;
– enable animations.
- You can also configure page settings for the blog page in Page Settings section.
- When the page is finished, click on button.
Gallery pages include images that are added to Media Library. Images can have different size and can be assigned to different categories. That’s why before creating a gallery page, go to Media Library and configure settings for images, that you are going to add to your gallery page:
- Click on the image;
- In the bottom right corner click on button;
- On the right of the image you will see two sections “Attachment Extra details”. There you can change the size of the image. The first section is linked to Gallery style 1 and the second one – to Gallery style 2. That’s why if you are going to use the same image for both gallery styles, change the size of the image in both sections.
- On the bottom right of the image you will see “Attachment categories” section, where you can create categories and assign images to them.
After you have configures image settings, you can create a gallery page:
- Go to Pages>Add new;
- In Page attributes section select Attachments Gallery template;
- Go down the page to section Gallery Page Options. There you can select:
– one of two available gallery styles – with spaces and without spaces;
– attachment categories to display;
– number of images;
– and the order of display – Ascending or Descending.
- Click on button.
As a result you will get a beautiful gallery page. Below you can see two example pages with both gallery styles:
To create a custom page go to Pages tab in your admin dashboard, click on Add New tab, give a title to the new page and start adding content to it.
You can add the content either using a default WordPress editor or with help of Visual Composer, that comes with the theme as the main page builder.
In order to create a page using Visual Composer:
1. click on button and start adding elements or templates
2. There are about 70 elements in the theme, that you can use on your pages. Add elements and configure settings in each of them.
3. You can split rows into columns using predefined layouts or create a custom layout.
4. After you added elements to the page, configure row and columns settings. You can:
- make rows full-width or keep default width;
- change paddings and margins between the rows;
- add background color, image, video background;
- enable parallax or fixed background;
- enable overlay, that will be displayed above your background image or video;
- change font color of the row;
- add extra class names and row IDs etc.
5. After you have finished adding elements to the page, you can configure page settings. For this go down to Page Settings section. There you will see 3 tabs, where you can adjust the following:
- Menu settings – select position of the menu (horizontal or vertical), select custom menu, or stick menu to the bottom of the screen.
- Title settings – select style of the title, enable animation for it, or disable it at all. You can also disable padding, that is added before the page content.
- Page inner settings – here you can enable transparent header and select layout for the page.
When you are ready, click button to save changes.
VC Elements Overview
There are many diverse and interesting elements in the theme, that are used on the demo layouts. In this documentation section we will review some of them to make it easier for you to find them among the rest of Visual Composer modules.
Layered vertical style
Layered horizontal style
Default style with 1 image per slide
Default style with 3 images per slide
3D Cloverflow style
Logos carousel style
Represented on “Omni Welcome Banner” layout
Represented on “Omni Sidebar Menu” layout
When hovering over the text sections, the image in the middle changes.
With text on left and image on right
With team members
With image on right and text on left
Sliding Image Box
Row divided into 4 columns with Sliding Image Box inside each of them. Columns are visually divided by borders set in Columns settings.
Vertically sliding images in a phone frame
Grid of attachments from Media Library with filterable category panel above them
Full-width banners that interchange by clicking on the tabs below
Images that are built in Masonry Grid style
Before adding Isotope Gallery element, you should create Attachment categories and assign images to them. It can be done it two ways:
- Go to Media > Attachment Category and create categories there. After that click on the image in Media library and enter name of the existing category in Attachment categories field. After these actions, image will be automatically assigned to the selected category.
- Open image in Media library and press Edit more details link at the bottom of the right sidebar. In the settings popup you can check existing categories or create a new one directly from Attachment Categories box.
When you are ready, add Isotope Gallery element to your page. If you need to display only selected categories in the gallery, simply enter them in Taxonomies field of Isotope Gallery options popup.
Three images that appear layered under each other and animate on page load
One Page Layout
In order to create a one page layout with anchor links, do the following:
- Edit one of your pages built with Visual Composer.
- Open Row Settings in each row, that will contain anchor link.
- In tab General enter a unique ID name of the row in the Row ID field.
- When all anchor links are added, save changes.
- Create a custom menu as described in “Navigation Menu” documentation section.
- Create menu items using “Custom links” tab.
- Enter unique row IDs with ‘#’sign before them in URL field.
- And enter a menu item label in “Link text” field.
- Add other menu items by analogy and save menu.
- After that go back to your page, go down to section Page Settings>Menu Settings and select your custom menu from the list.
- Save page and one page layout is ready!
Coming Soon Page
If you would like to set the so called maintenance mode on your site, you can create a Coming soon page.
For this do the following:
- Create a new page and select Coming soon template in Page Attributes section.
- Go down to section Coming soon Page Options, upload a background image and select a date from the calendar.
- Click on button and the page is ready!
Coming Soon page with video background
Coming Soon page with video background can be created as a standard page using Visual Composer blocks. Here are the steps needed to create one:
- Create a new page in Pages>Add New section and select Blank page template in Page Attributes settings.
- Add elements to the page from Visual Composer backend editor. You can add any elements you like to be on the coming soon page. Make sure that all elements are added to one row. It is important condition, if you want to add a video background to the entire content area.
- When you finished adding elements to the page, you can add a video background to the background of entire content area. For this edit row and switch to Video background tab. Add two links to video files, that you uploaded to Media library beforehand – first in MP4 and second – in WEBM or OGG formats. It is required to do , because different browsers support different video formats. More detailed about it you can read in this article.
- After you have added video background, you can make the row full-width so the video background is stretched across the screen. For this edit Row Settings and in General settings tab select ‘Stretch row‘ option.
- When you are ready, save the page by clicking on the button.
- If needed you can enable footer or header sectiojn on the page. Go down the page to ‘Blank page options‘ setion and switch the toggle on/off.
There is a list of words and phrases in the theme that can be translated into different languages.
You can translate them by different means:
- WPML String Translation – this is a paid plugin with its own documentation. Visit plugin page here.
- Loco Translation – a free plugin with its own documentation. Visit plugin page here.
- Polylang – a free plugin with its own documentation. Visit plugin page here.
- POedit software – free translation editor. Visit official site here.
Omni theme is translated into Russian and German and includes .PO/.MO and the .POT file in “languages” folder of the theme.
How to translate with POedit into a different language?
1. Install POedit on your computer http://poedit.net/ .
2. Open omni/languages/omni.pot file (if you translate the theme) or omni_extension/lang/omni_extension.pot file ( if you translate Omni extension plugin) in it.
3. Begin translating all or some phrases into your language.
4. When all phrases are translated, save the file in .po format. Example:
nl_NL.po, fr_FR.po, he_IL.po – for the theme
omni_extension-de_DE.po, omni_extension-nl_NL.po – for Omni Extension plugin.
5. After the .PO file is saved, a .MO file is generated automatically.
6. Upload both files , .PO and .MO, via your FTP account to folders:
omni/languages/ – if youtranslated omni.pot file
omni_extension/lang/ – if you translated omni_extension.pot
Translation will be applied automatically, if you have installed WordPress in corresponding language.
7. Sometimes there are added new options to the theme and there appear new phrases that have to be translated. In such cases we update the main POT files of the theme and Omni extension plugin. In order to update your translation, open .PO file of your language ( e.g. fr_FR.po – if you translate the theme, or omni_extension-fr_FR.po – if you translate Omni Extension plugin) in POedit programme, go to Catalogue>Update from POT file and select POT file ( crum.pot file – if you translate the theme, and omni_extension.pot – if you translate Omni Extension plugin ). There will be loaded new strings and shown on the top of the list. After that translate as described above.