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.
1 - First Steps
Installation - First Steps
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.
Loading Demo Content - First Steps
To upload the demo content (posts,pages,menus etc.) to your website, download the following file;
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
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.
Selecting Front Page - First Steps
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.
How to create a blog page
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.
How to add a header image to a category page
There is an additional header image field on the category pages;
Adding logo - First Steps
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".
You can also use ombre social shortcode to add the social icon list to any post or page.
Page Templates - First Steps
- 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.
2 - Theme Settings
General - Theme Settings
- 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 - Theme Settings
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.
Home Slider - Theme Settings
- 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.
Header Image - Theme Settings
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 - Theme Settings
- 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.
Galleries - Theme Settings
- 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.
Models - Theme Settings
- 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.
Partners - Theme Settings
- 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.
Fonts - Theme Settings
Ombre supports Google Web Fonts. To change default fonts, please follow the following steps;
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.
Colors - Theme Settings
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.
Ecwid - Theme Settings
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.
3 - Custom Post Types
There are 6 custom post type in Ombre Features plugin
Galleries Custom Post Types
To display your galleries, you need to create a page and select a gallery page template. Your galleries will be displayed on this page.
Adding a Photo Gallery
- 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.
Adding a Video 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.
Other fields are the same as photo gallery.
Models Custom Post Types
To display your models, you need to create a page and select a models page template. Your models will be displayed on this page.
Adding a new model
There are a lot of option on add/edit model page. You don't have to use all of them.
- You can use them to create a model page with built-in features
- You can create a minimalist model page without using any additional feature (title+description+featured image)
- 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.
Add New/Edit Model Screen
- 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.
- 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.
Home Slider Custom Post Types
Add New/Edit Slide Screen
- 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.
Team Custom Post Types
Add New/Edit Team Member Screen
- 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.
Testimonials Custom Post Types
Add New/Edit Testimonial Screen
- 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.
Partners Custom Post Types
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;
Add New/Edit Partner Screen
- 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.
4 - Other Features
Page Builder - Other Features
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.
Page Builder Settings - Other Features
We recommend you to change page builder settings like the following;
Widgets - Other Features
Siteorigin Page Builder uses WordPress widgets to build the pages.
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.
Ombre Grid Hero - Widgets Quick Menu
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
Ombre Image - Widgets Quick Menu
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).
Ombre Colorbox Image - Widgets Quick Menu
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).
Ombre Divider - Widgets Quick Menu
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).
Ombre Icon - Widgets Quick Menu
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.
Ombre Google Map - Widgets Quick Menu
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
Ombre Latest Posts - Widgets Quick Menu
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
Ombre Models - Widgets Quick Menu
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
- Autoplay
- Autoplay on or off
- Autoplay duration (second)
- Duration between each slide transition ("Autoplay" must be "True").
- Category
- Category of the model
Ombre Our Team - Widgets Quick Menu
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
- Autoplay
- Autoplay on or off
- Autoplay duration (second)
- Duration between each slide transition ("Autoplay" must be "True").
Ombre Testimonials - Widgets Quick Menu
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.
Shortcodes - Other Features
You can use Shortcode Dropdown which is on the editor to add Ombre shortcodes to your posts/pages.
I suggest you to edit the shortcodes in text mode;
Models - Shortcodes Quick Menu
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).
Our Team - Shortcodes Quick Menu
Displays your team in a carousel.
max: A number
columns: 1,2,3 or 4
autoplay: true or false
duration: A number (second)
Testimonials - Shortcodes Quick Menu
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.
Rounded List - Shortcodes Quick Menu
Adds a numeric list. All roundlistitem
shortcodes must be in roundedlist
shortcode.
Table - Shortcodes Quick Menu
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.
Accordion - Shortcodes Quick Menu
Adds an accordion. All accordion
shortcodes must be in accordioncontainer
shortcode.
You can find all icon names at this official Font Awesome page.
Tabs - Shortcodes Quick Menu
Adds a tabs. All tab
shortcodes must be in tabgroup
shortcode.
type: default or vertical
Displays your social icons.
Title with border - Shortcodes Quick Menu
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".
Box - Shortcodes Quick Menu
A content area with a different background color (Second color of the theme).
Icon Box - Shortcodes Quick Menu
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.
Iframe - Shortcodes Quick Menu
Adds a responsive embed video
Use the shortcode dropdown to add the iframecode shortcode (Others->Iframe) to your page.
PrettyEmbed - Shortcodes Quick Menu
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.
Image with Blockquote - Shortcodes Quick Menu
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.
Google Map - Shortcodes Quick Menu
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
5 - Compatibility
Ombre is compatible with the following plugins;
SiteOrigin Page Builder - Compatibility
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 Widgets Bundle - Compatibility
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.
Ecwid Shopping Cart - Compatibility
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.
WPML - Compatibility
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.
Contact Form 7 - Compatibility
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.
Intuitive Custom Post Order - Compatibility
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 Order6 - Support
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.
Credits
I've used the following scripts and other files as listed;
Social Icons - First Steps