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:

  1. go to Appearance>Themes>Add new>Upload theme;
    o-install1
  2. Find omni.zip archive on your computer location and upload it;
    o-install2
  3. Activate the theme.
    o-install3
  4. Begin installing and activating required plugins;
    o-install4 o-install5 o-install6 o-install7

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:

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

o-install8

After that simply wait until you see 100% result.

o-install9

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.

Staying up-to-date

There are 2 ways to get theme updates:

  • manual updates;
  • automatical updates.

MANUAL UPDATES

  1. Log in your Themeforest account;
  2. Go to ‘Downloads‘ section;
  3. Click on the button in from of the theme name;
  4. Select “Installable WordPress file only” option from the dropdown menu and download the zip archive.
    o-update1
  5. Unzip ‘omni.zip‘ archive and upload folder ‘omni‘ via FTP to ‘wp-content/themes‘ directory replacing the old files.
  6. 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.

AUTOMATIC UPDATES

In order to activate auto update option, go to Appearance>Customize>Main options section and enter:

  • your theme purchase code;
  • and Envato Access Token.

o-update4

 

How to find my item purchase code?

  1. Log in your Themeforest account;
  2. go to ”Downloads section;
  3. Click on the button;
  4. and download your License and purchase code in PDF or text format.

o-update2

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.

o-update5

  1. Go to Updates section and perform an update from there.
  2. 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.

o-post7

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.

Main options

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:

 

Logotypes

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.

 

 

Blog Options

In Blog Options tab you can adjust the general settings for your blog pages and for single posts.

o-settings3

Page Options

In Page Options section you can set up:

  1. position of the navigation menu – horizontal or vertical;
  2. title style;
  3. enable page title animation.

o-settings4

Typography Options

In Typography options section you can configure font size, font color and font-family for:

  1. headings (h1, h2, h3, h4, h5, h6);
  2. for body text.

o-settings7

Advanced Options

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:

  1. Map api key – enter Google Map API key. More info you can read here
  2. Counter field – here you can add your Google Analytics field to track visitors activity on your site.
  3. JS Code field – you can add some JS codes here.
  4. 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.

o-settings9

Site Identity

In the Site identity section you can:

  1. change your website title and its tagline;
  2. upload site icon that will be shown as a favicon in the browser and as an app icon on your mobile device.

o-settings10

Colors

In the Colors section you can select a background color of the site.

o-settings11

Background Image

In the Background image section you can upload a background image for your site.

o-settings12

Widgets

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.

o-settings13

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:

  1. Make sure that you are using Omni 1.5. If not, please, update it by following instructions from this article.
  2. Get your Google Map API Key as described in this tutorial.
  3. Go to Appearance>Customize>Advanced options and input your key in Map api key box.
    o-map-api
  4. Save changes. After that add map to your page using Google Maps module of Visual Composer.
    o-map-api2

 

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:

  1. Go to Posts>Add New section.
  2. Fill in the title field and begin adding post content.
    o-post1
  3. Assign your post to a category and add tags if needed.
    o-post2
  4. When you are ready, upload a featured image, that will be displayed on a blog page.
    o-post3
  5. Click on button and the post is ready!

Post Formats

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:

  1. Follow steps from the above topic.
  2. Additionally, select required post format from the “Format” section in the right side of the post edit page.
  3. 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. o-post5
  4. When you filled in all fields, click on button.

The post is ready!

 

 

Post Sidebar Options

By defaut post layout comes with the right sidebar. You can change post layout:

  • for all posts in Customize>Sidebar options>Post layout;
    o-post7
    o-post9
  • for individual post – edit the post and change layout in Sidebar Options section.
    o-post11

Blog Page

After you have created a number of posts, you can create a blog page with them.

  1. Create new page at Pages>Add New section.
  2. Give it a title and select News page template from Page Attributes section.
    o-blog1
  3. 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.
    o-blog2
  4. You can also configure page settings for the blog page in Page Settings section.
    o-page6
  5. When the page is finished, click on button.

Page Creation

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.

Visual Composer

In order to create a page using Visual Composer:


1. click on button and start adding elements or templates
o-page1

o-page2

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.

o-page3

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.

o-page4o-page5

Page Settings

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.
    o-page6
  • 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.
    o-page7
  • Page inner settings – here you can enable transparent header and select layout for the page.
    o-page8

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.

Interactive Slider

Represented on “Omni Welcome Banner” layout

Info Screen

Represented on “Omni Sidebar Menu” layout

When hovering over the text sections, the image in the middle changes.

Sliding Content

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.

Phone Slider

Vertically sliding images in a phone frame

Attachments Grid

Grid of attachments from Media Library with filterable category panel above them

Poster Slider

Full-width banners that interchange by clicking on the tabs below

Triple Image

Three images that appear layered under each other and animate on page load

Adding Widgets to Sidebars

In order to add widgets to the sidebar or to the footer section, go to Appearance>Widgets tab.

  1. Click on any widget with the left mouse.
  2. Choose the sidebar, to which it should be added.
  3. And click on button.

o-widgets1

Add so many widgets you need, configure their settings and reorder by dragging them with the mouse.

That’s all!

Custom sidebars

Custom sidebars are created with help of Easy Custom Sidebars plugin. It is a free plugin and is available in the WordPress  repository by this link.

Install and activate the plugin under Plugins>Add New.

Go to “Appearance>Theme sidebars” section and create a new custom sidebar

custom-sidebar1

 

Start adding pages/other post types, on which standard sidebar will be replaced by your custom one.

custom-sidebar2

 

In “Sidebar properties” section select which sidebar will be replaced by your custom one.

custom-sidebar3

 

Click “Save sidebar”. After that go to “Appearance>Widgets” section and add widgets to your custom sidebar

custom-sidebar4

 

One Page Layout

In order to create a one page layout with anchor links, do the following:

  1. Edit one of your pages built with Visual Composer.
  2. Open Row Settings in each row, that will contain anchor link.
    o-anchor1
  3. In tab General enter a unique ID name of the row in the Row ID field.
    o-anchor2
  4. When all anchor links are added, save changes.
  5. Create a custom menu as described in “Navigation Menu” documentation section.
  6. Create menu items using “Custom links” tab.

    o-anchor3

  7. Enter unique row IDs with ‘#’sign before them in URL field.
  8. And enter a menu item label in “Link text” field.

    o-anchor4

  9. Add other menu items by analogy and save menu.
  10. After that go back to your page, go down to section Page Settings>Menu Settings and select your custom menu from the list.
    o-anchor5
  11. 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:

  1. Create a new page and select Coming soon template in Page Attributes section.
    o-coming1
  2. Go down to section Coming soon Page Options, upload a background image and select a date from the calendar.
    o-coming2
  3. 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:

  1. Create a new page in Pages>Add New section and select Blank page template in Page Attributes settings.
    o-coming3
  2. 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.o-page1
  3. 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.
    o-coming4
  4. 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.
    o-coming5
  5. When you are ready, save the page by clicking on the button.
  6. 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.
    o-coming6

Theme Localization

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.

d-localization1

 

4. When all phrases are translated, save the file in .PO format.
If you translate polo.pot file the correct file format is {theme_domain}-{ru_RU/en_GB}.{mo|po}
Examples:
omni-nl_NL.po
omni-fr_FR.po
omni-he_IL.po
etc.
If you translate polo_extension.pot file, the correct file format is {plugin_name}-{ru_RU/en_GB}.{mo|po}
Examples:
omni_extension
-de_DE.po

omni_extension-nl_NL.po
omni_extension-fr_FR.po etc.
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:

wp-content/languages/themes – if you translated omni.pot file

wp-content/languages/plugins – 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. omni-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.

o-translation-update1o-translation-update2

Suggest Edit