Help Documentation
Ombre Wordpress Theme

Thank you for purchasing my theme ! Please take the time to read through the following sections before asking for support. As many support related questions can be answered simply by re-reading the documentation.

The first thing you need to do when you want to install a new WordPress theme is to login to your site admin page. Once there, go to Appearance -> Themes. Here, you will see all the themes you have currently installed in your application. To add another one, simply click on the Install Themes tab. Upload the zip package which you have downloaded from Themeforest from your local hard drive.

If you want to use the theme with all available features (Custom post types,shortcodes,widgets,page builder...etc), you should upload and activate all the required plugins. After the installation of the theme, you will see a message about them. Click "Begin Installing Plugins", install the plugins and activate them.

To upload the demo content (posts,pages,menus etc.) to your website, download the following file;

Demo.zip

Extract (unzip) the xml file. After that, you can use WordPress import tool to upload this xml file to your website.

For more information about importing content in WordPress; please visit wordpress.org

If you are building a new website, I suggest you to reset your database before uploading the xml file. You can do this easily with this plugin.
All recommended plugins and the theme must be activated before uploading the xml file.

After the demo installation, you should set up sidebars ,select a front page and set up Appearance->Theme Settings manually. Please read the following sections for more information.

First of all, you should create a static page with the "homepage" page template.

For more information about page templates, click here...

After that, go to Settings->Reading and select in the drop-down box this page for the front page display.

To create a blog page, create a blank page (select default page template).

After that go to Settings->Reading and select in the drop-down box the name of the Page that will now contain your Posts. If you do not select a Page here, your Posts will only be accessible via other navigation features such as category, calendar, or archive links.

There is an additional header image field on the category pages;

You can upload your logo from Appearance->Theme Settings->General.

You can also change maximum height of the logo.

You can create menus from Appearance->Menus page.

After creating your menus, you should manage your menu location (Main Menu).

Another way to use a WordPress menu is using custom menu widget.

For more information about WordPress menus, please read the WordPress menu guide

You can add social media icons to the header, to the the footer or to both of them. Just fill the required fields and click "Add Another Icon" to add a new icon or click "Save".

Don't forget to check "Add to Header" and/or "Add to Footer" box.

You can also use ombre social shortcode to add the social icon list to any post or page.

Default Template
This is the standard full width page template.
Blog Masonry - 2 Columns
Displays your blog posts in a 2 column masonry grid.
Blog Masonry - 3 Columns
Displays your blog posts in a 3 column masonry grid.
Galleries - 2 Columns
Displays your galleries in a 2 column masonry grid. Please read the galleries section for more information about galleries.
Galleries - 3 Columns
Displays your galleries in a 3 column masonry grid.
Galleries - 4 Columns
Displays your galleries in a 4 column masonry grid.
Homepage
To display home slider on your page, you should select a homepage template. Please read the selecting front page section.
Homepage - Blog 2 Columns
Displays your blog posts in a 2 column masonry grid with homepage slider
Homepage - Blog 3 Columns
Displays your blog posts in a 3 column masonry grid with homepage slider
Homepage - Blog Sidebar
Displays your blog posts with homepage slider and sidebar
Models - 2 Columns
Displays your models in a 2 column masonry grid. Please read the models section for more information about models.
Models - 3 Columns
Displays your models in a 3 column masonry grid.
Models - 4 Columns
Displays your models in a 4 column masonry grid.
Page - Sidebar
Displays "page sidebar". Please read the sidebars section for more information about sidebars and widgets.

Custom CSS
Please add all your custom CSS here and avoid modifying the core theme files, since that'll make upgrading the theme problematic. Your custom CSS will be loaded after the theme's stylesheets, which means that your rules will take precedence. Just add your CSS here for what you want to change, you don't need to copy all the theme's style.css content.
Logo
Your logo.
Max. height of the Logo
You can play with this value to change the size of your logo on your website.
Dropdown menu width
You can change the width of your dropdown menus according to your title lengths.
Background Color
I used a dark semi-transparent color to make the background image darker. You can play with the alpha slider to change the opacity of the color. "0" will make the color invisible. "1" will make the color solid.

Background Image
You can add a responsive image to the background of your website.
Background image for mobile devices
Recommended image size is 1024x768 px.
Default grid hero background color
Default semi-transparent background color of the grid hero row. For more information about page builder, please look at the page builder section.
Contact form 7 loader
Recommended image size is 26x26 px.

How to Get a Google Maps API Key

To use Google Map widget you must get an API Key from Google.

1. Follow this link and click on Get a key:

2. Agree with the service Terms of Service:

3. Choose a name for your new key and specify the websites on which the key usage will be allowed. If you don’t need any website restriction, just put an * in that field (but don’t leave it blank, unless you are having issues with *! See comments for further information). Then click on Create:

4. Copy paste the key to the theme settings

5. Your API key should be up and running within 5 minutes.

Fakeloader is a lightweight jQuery plugin that helps us create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

Disable Fakeloader
To disable Fakeloader switch it on.
Time to hide
Time in milliseconds for FakeLoader disappear.
Spinner style
There are 7 different spinner style. You can select any of them.
Background color
The background color of the Fakeloader.
Disable autoplay
To disable autoplay, switch on.
Slider autoplay speed
Slider Autoplay Speed (Second).
Slide transition
The type of transition that will occur.
Image Scale Mode
The type of image sizing/positioning for each slide.
Height (PC,laptop)
The height of the slider container (px). The width of the slider is 100% and you can't change this value.
Height (Tablet)
The height of the slider container (px).
Height (Phone)
The height of the slider container (px).

To display home slider on your page, you should select the homepage template. Please read the selecting front page section.

How to add images to the home slider

You can add a custom header image to any post or page.

Height (PC,laptop)
The height of the header image container (px). The width of the header image is 100% and you can't change this value.
Height (Tablet)
The height of the header image container (px).
Height (Phone)
The height of the header image container (px).
404 page header image
You can add a header image to your 404 page.
Blog header image
This image will be displayed on default WordPress blog,archive,search etc. pages.
Remove category menu
To remove category menu from category and blog page templates, switch on.
Remove meta data
To remove meta data (author name, categories, tags) from single post pages, switch on.
Remove gallery category menu
To remove category menu from gallery pages, switch on.
Gallery pages show at most
Maximum number of the galleries.
Default column number
Default column number for the category pages.
Remove gallery category menu
To remove category menu from model pages, switch on.
Model pages show at most
Maximum number of the models.
Default column number
Default column number for the category pages.
Activate autoplay
To activate carousel autoplay, switch on.
Autoplay duration
The time (in seconds) between each auto transition.
Remove gallery category menu
To remove category menu from model pages, switch on.
Partners carousel shows at most
Maximum number of the models.
Default column number
Default column number for the partners carousel.

Ombre supports Google Web Fonts. To change default fonts, please follow the following steps;

Go to Google Web Fonts

Choose a font and click "plus" button on the top right corder of the font. After that copy the codes (like on the screenshots) and paste them to the fields on the theme settings page.

Don't forget to check "customize" tab. You may need to check some boxes on this section.

You also can change the default font sizes from this theme settings section.

I used 6 solid color and 2 transparent color ( to make semi-transparent backgrounds). You can change these colors from this section.

There is an additional slider (alpha slider) in semi-transparent colorpickers. You can play with the alpha slider to change the opacity of the color. "0" will make the color invisible. "1" will make the color solid.

If you need to change a specific element's color (for example; main menu, footer, button etc.), you should add your own css codes to the custom css field. If you don't have enough css knowledge, I suggest you to buy a customization service from Envato Studio because customization is not included in item support.

Envato item support policy

To use built-in Ombre custom Ecwid css theme, you should activate it from this section. If you want to use a standard Ecwid css theme or if you want to make your own css theme, don't activate it.

More information about Ecwid

How to add Ecwid to WordPress


There are 6 custom post type in Ombre Features plugin

To display your galleries, you need to create a page and select a gallery page template. Your galleries will be displayed on this page.

How to change the order of the galleries

Gallery Type
You should select "Photo Gallery" to be able to add images to your gallery.
Gallery Info
You can add a description to your gallery or you can hide the text field completelly which is at the bottom the gallery.
Photo Gallery
All available settings of the photo gallery plugin are in this section.
To add images to your gallery, click "Add or Upload Files" button. You can make a multiselection with CTRL+click (Command+click for Macs). Click "Use these files" button after your selection is finished. You can drag drop thumbnails to change the order of them.
Gallery Categories
You can use categories to organize your galleries. You can find gallery category page links at the WordPress menu page.

How to add a header image to a category page

Featured Image
The thumbnail of the gallery.

Gallery Type
You should select "Video Gallery" to be able to add videos to your gallery.
Video Gallery
To add videos to your gallery, just copy paste your video link to the video url field and click "Add Another Video" to add another video to your video gallery. Video title is optional.
Only You Tube and Vimeo videos are supported.

Other fields are the same as photo gallery.

To display your models, you need to create a page and select a models page template. Your models will be displayed on this page.

How to change the order of the models

There are a lot of option on add/edit model page. You don't have to use all of them.

How to hide metaboxes

  1. You can use them to create a model page with built-in features
  2. You can create a minimalist model page without using any additional feature (title+description+featured image)
  3. You can build a model page with SiteOrigin page builder. To do this, you should check the "Models" box which is at the page builder settings page.
Don't activate the page builder for the other post types (galleries, home slider, team, testimonials and partners).
Featured Image
Featured image will be displayed on all models page templates, model category pages, model carousels etc. as the thumbnail image of your model.
Header Image
You can add a header image to the profile page of the model.
Model Categories
You can use categories to organize your models. You can find model category page links at the WordPress menu page.
Subtitle
You can add a subtitle to the model page.
Model Info
This text represents a brief introduction of the model. It will be displayed on models page templates,category pages and carousels.
Slider
You can add an image slider the model page.
Education - Qualification
You can use this field to create a simple organized text field. It may be suitable to add schools, courses, experiences etc.
Models Carousel
You can use this field to add a models carousel to the bottom of the page.
As default, carousel displays all of your models except the model on this page. To make it a "related models" carousel, you can use categories.
Layout
There are 3 ready to use layout; Full Width, Sidebar-Left, Sidebar-Right. If you select a layout which has a sidebar, sidebar field will be available to edit.
Sidebar
Slider: If you check this box, slider will be displayed at the top of the sidebar.
Image: You can add a full width responsive image to the top of the sidebar.
Info: This field is suitable for adding a plain short text into the sidebar.
Add a list: You can use it to create a 2 column table in the sidebar.
Add a Social icon list: You can add a social icon list to the bottom of the sidebar.
To display home slider, you should create a page with the homepage template.
Title
It will be displayed as a title on the slide.
Subtitle (Optional)
There is an optional subtitle field under the title.
Text Align
There are 4 options for the text (title and subtitle) alignment; Top Left, Top Right, Bottom Left, Bottom Right
Image (Required)
If you don't add any image to the slide, it will not be displayed in the home slider.
Link (Optional)
You can add an internal or en external link to the slide.

Where is the home slider settings ?

To display your team, you should use shortcodes or widgets.
Title
The name (and the surname) of the team member.
Person Info
A brief introduction of the team member.
Social Icons
You can add as many icon as you wish.
Link
You can use this field to create an additional page for your team member. Just create a standard WordPress page for your team member and copy-paste the url of that page here.
Featured Image
The photo of the team member.
To display the testimonials, you should use shortcodes or widgets.
Title
The name (and the surname) of the person.
Testimonial
This text field is suitable for max. 1-2 paragraph text. I also suggest you not to add any additional html tag into this text field.
Image
The photo of the person.

To display the partners carousel at the bottom of your page, check the box which is at the bottom of the add new/edit page;

Logo (Required)
If you don't add any image to the partner, it will not be displayed in the carousel.
Link (Optional)
You can add an internal or en external link to the logo.

Where is the partners carousel settings ?


Linear page layouts are limiting when you’re trying to express a detailed idea. With SiteOrigin’s Page Builder, you can create columized page layouts populated with the widgets and themes you know and love. Its drag and drop interface is so easy to learn, that you'll be up and running in no time.

It is a free plugin and you can download it from WordPress repository.

Please Read the Siteorigin Page builder documentation

We recommend you to change page builder settings like the following;

Siteorigin Page Builder uses WordPress widgets to build the pages.

Ombre is tested only with the standard WordPress widgets and the widgets which are in Ombre Features plugin and SiteOrigin Widgets Bundle plugin. There may be compatibility issues with the other 3th party plugins. Customization of the 3th party plugins are not included in Item Support.

There are 5 widget field in Ombre.

Main Sidebar
This sidebar will be displayed on blog pages.
Page Sidebar
This sidebar will be displayed on Page-Sidebar template.
Footer 1, Footer 2, Footer 3
These widget fields are in the footer of your website. They will be displayed on all pages. You can hide this field from theme settings.

1) Make a full width row

To make a grid hero row, click "edit row".

Open "Design" tab. Check "Grid Hero" box. If you want you can add a background image to the grid hero.

I used a semi-transparent color to make the grid hero background image darker. You can change this color from theme settings.


2) Add "Grid Hero Box" widget to the row

Title
The title of the grid hero
Header Level
The size of the title
Sub Title
An italic text area under the title
Destination Url
An internal or external link (Optional). To enable the button, you should add a link to this field
Link Target
Self: Opens the linked document in the same frame as it was clicked (this is default)
Blank: Opens the linked document in a new window or tab
Parent: Opens the linked document in the parent frame
Top: Opens the linked document in the full body of the window
Button text
Text of the button

Displays an image with a caption and an internal or external link.

Title
Title of the widget (Optional).
Image
The image.
Caption
Caption of the image (Optional).
Url
An internal or external link (Optional).
Link Target
Self: Opens the linked document in the same frame as it was clicked (this is default)
Blank: Opens the linked document in a new window or tab
Parent: Opens the linked document in the parent frame
Top: Opens the linked document in the full body of the window
Margin-bottom
You can set the bottom margin of the image (px).

Displays an image with a caption and colorbox.

Title
Title of the widget (Optional).
Image
The thumbnail of the image.
Colorbox Image
Full size image.
Caption
Caption of the image (Optional).
Margin-bottom
You can set the bottom margin of the image (px).

Adds a horizontal line between sections

You can use negative numbers.

Margin-left
You can set the left margin of the divider (px).
Margin-right
You can set the right margin of the divider (px).
Margin-top
You can set the top margin of the divider (px).
Margin-bottom
You can set the bottom margin of the divider (px).

Adds a text box with a circle icon.

Title
Icon Title
Header Level
The size of the title
Font Awesome Icon Name
You can find all icon names at this official Font Awesome page.
Icon Align
The side of the icon
Destination Url
You can add an internal/external link to the icon.
Text
Short description field

Adds a responsive embed You Tube video with a custom video thumbnail.

Title
Title of the widget
You Tube video id
The video ID is the part between v= and & of the video URL. For example id of the following video url is; feOScd2HdiU
https://www.youtube.com/watch?v=feOScd2HdiU
Thumbnail
Custom thumbnail image. Recommended ratio of the image is 4:3.

Adds a responsive custom Google Map.

Title
Title of the widget
Latitute
Latitute. Click here to find your coordinates (latitude and longitude)
Longitude
Custom thumbnail image. Recommended ratio of the image is 4:3.
Zoom
Zoom level of the map (1-19)
Grayscale
Grayscale map skin
Marker Color
Color of the map marker. Default color is the fourth color of the theme.
Widescreen
Ratio of the responsive map container

Display your latest blog posts which have a featured image. I suggest you to use it in the sidebar (Appearance->Widgets).

Title
Title of the widget
Maximum number of posts
Maximum number of the posts

Displays your models in a carousel.

Title
Title of the widget
Maximum number of person
Maximum number of the models
*Columns
Maximum number of the columns
If you add this widget to the sidebar or any other small field, to display the carousel correctly, you should change the column number with a smaller number. "4" is suitable for full width, large fields.
Autoplay
Autoplay on or off
Autoplay duration (second)
Duration between each slide transition ("Autoplay" must be "True").
Category
Category of the model

Displays your team members in a carousel.

Title
Title of the widget
Maximum number of person
Maximum number of the team member
*Columns
Maximum number of the columns
If you add this widget to the sidebar or any other small field, to display the carousel correctly, you should change the column number with a smaller number. "4" is suitable for full width, large fields.
Autoplay
Autoplay on or off
Autoplay duration (second)
Duration between each slide transition ("Autoplay" must be "True").

Displays your testimonials in a carousel.

Title
Title of the widget
Autoplay
Autoplay on or off
Autoplay duration (second)
Duration between each slide transition ("Autoplay" must be "True").
Auto Height
If you select "False", main container of the testimonials height will be equal to the longest testimonial height.

You can use Shortcode Dropdown which is on the editor to add Ombre shortcodes to your posts/pages.

Shortcodes and widgets have the same functionality. I recommend you to use SiteOrigin page builder and try to build your web pages with widgets instead of shortcodes.

I suggest you to edit the shortcodes in text mode;

Displays your models in a carousel.

max: A number

columns: 1,2,3 or 4

autoplay: true or false

duration: A number (second)

categoryid: A number. You can find the category ids at Models->Model Categories page (ID).

Displays your team in a carousel.

max: A number

columns: 1,2,3 or 4

autoplay: true or false

duration: A number (second)

Displays testimonials in a carousel.

autoplay: true or false

duration: A number (second)

autoheight: true or false. If you select "false", main container of the testimonials height will be equal to the longest testimonial height.

Adds a numeric list. All roundlistitem shortcodes must be in roundedlist shortcode.

Adds a two column responsive table. All ombretableitem shortcodes must be in ombretable shortcode.

You can find all icon names at this official Font Awesome page.

Adds an accordion. All accordion shortcodes must be in accordioncontainer shortcode.

You can find all icon names at this official Font Awesome page.

Adds a tabs. All tab shortcodes must be in tabgroup shortcode.

type: default or vertical

Displays your social icons.

Adds a title with a bottom border. Click "Title with border" in the ombre shortcodes dropdown. A popup will appear. Enter your title, select header level (size) and click "ok".

Adds a button. Click "Button" in the ombre shortcodes dropdown. A popup will appear. Enter destination url and button text, select link target and click "ok".

A content area with a different background color (Second color of the theme).

Adds a text box with a circle icon.

Use the shortcode dropdown to add the icon shortcode (Others->Icon Box) to your page.

You can find all icon names at this official Font Awesome page.

Adds a responsive embed video

Use the shortcode dropdown to add the iframecode shortcode (Others->Iframe) to your page.

You should add iframe links to this shortcode. Click here for more information...

Adds a responsive embed You Tube video with a custom video thumbnail.

Use the shortcode dropdown to add the prettyembed shortcode (Others->PrettyEmbed) to your page.

Video id:The video ID is the part between v= and & of the video URL. For example id of the following video url is; feOScd2HdiU

https://www.youtube.com/watch?v=feOScd2HdiU

Displays an image with a caption and an internal or external link.

Use the shortcode dropdown to add the image shortcode (Others->Image with caption) to your page.

Click "Add Media" button, select an image and add it between "fleximage" tags.

Displays an image with a blockquote.

Use the shortcode dropdown to add the image shortcode (Others->Image with Blockquote) to your page.

Click "Add Media" button, select an image and add it between "imagequote" tags.

Adds a responsive Google Map.

Use the shortcode dropdown to add the googlemap shortcode (Others->Google Map) to your page.

Latitute
Latitute. Click here to find your coordinates (latitude and longitude)
Longitude
Custom thumbnail image. Recommended ratio of the image is 4:3.
Zoom
Zoom level of the map (1-19)
Grayscale
Grayscale map skin
Marker Color
Color of the map marker. Default color is the fourth color of the theme.
Widescreen
Ratio of the responsive map container

Ombre is compatible with the following plugins;

Linear page layouts are limiting when you’re trying to express a detailed idea. With SiteOrigin’s Page Builder, you can create columized page layouts populated with the widgets and themes you know and love. Its drag and drop interface is so easy to learn, that you'll be up and running in no time.

SiteOrigin Page Builder

The SiteOrigin widget bundle gives you a collection of widgets that you can use and customize. All the widgets are built on our powerful framework, giving you advanced forms, unlimited colours and 1500+ icons.

SiteOrigin Widgets Bundle

Ecwid (pronounced as "eck-wid", short for "e-commerce widgets"), is a revolutionary shopping cart that seamlessly integrates with your existing website. It can also be added to your page on social media networks, such as Facebook or Tumblr.

You can add your Ecwid shop to your WordPress website easily with Ecwid Shopping Cart plugin.

To use built-in Ombre custom Ecwid css theme, you should activate Ecwid Skin from theme settings.

Ecwid Shopping Cart

Visit the Official Ecwid Website

WPML makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.

With WPML you can translate pages, posts, custom types, taxonomy, menus and even the theme’s texts.

Visit the Official Website

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Contact Form 7

Please read the Documentation

You can use this plugin to change the order of the custom post types. After the plugin activation, you should select sortable items from 'Intuitive CPT' menu of Setting menu in WordPress.

Intuitive Custom Post Order

Beginner's Guide to WordPress

If you are not an experienced WordPress user, I suggest you to start from this free course. After taking this free course you'll be completely comfortable with installing WordPress, adding new content, customising WordPress themes, using WordPress plugins, and managing existing blogs or websites.

Help Documentation

Many support queries and technical questions will already be answered in this documentation. So please take the time to read through all the sections.

Knowledge Base

Your question may already be answered in the knowledge base...

Item Support

Item support is a service provided by many authors on ThemeForest and CodeCanyon.


What's included in item support

Answering questions about how to use the item

Answering technical questions about the item (and included third party assets)

Help with defects in the item or included third party assets

Item updates to ensure ongoing compatibility and to resolve security vulnerabilities


What's NOT included in item support

Item customization

Installation of the item

Hosting, server environment, or software

Where can I get the item support?

Item support is a service provided by many authors on ThemeForest and CodeCanyon.

I've used the following scripts and other files as listed;

As you can see on the item description page (at the bottom of the page), demo images are not included in the download.