This documentation will help you understand the principles of the Themo. Please, take your time and meet all THEMO features and you will see that THEMO is only theme you need.


To learn more about the Parallax Composer please visit:

PC Online Documentation PC Getting Started Tutorials

INTRODUCTION

Welcome to THEMO. Thank you for your interest in our theme. We give you very powerful tool, and it is just the beginning. We will make every effort to make your work enjoyable and effective.


THEMO is totally innovative theme with advanced management options, so you can create amazing sites for every purpose. THEMO is fully customizable, with multilevel management and smart coloring, it gives you endless possibilities of creation. As the first theme ever, THEMO includes the Parallax Composer - world's innovative tool designed to animate graphic, text and audio layers and to animate content on the websites. Creating web animations never was so easy.

This documentation will help you understand the principles of the Themo. Please, take your time and meet all THEMO features and you will see that THEMO is only theme you need.

Multilevel management

THEMO is loaded with options which allows you to customize every single element on your website without any coding knowledge. All options are divided into three major management levels: Customizer (theme options), Page options and Shortcodes options. All levels are related with each other. It means that you can customize your website globally in Customizer and than you can override most of those global settings for every single page or post, and finally you can build content with fully customizable THEMO shortcodes.

Our advanced options and multilevel management give you ability to customize every page element on your website globally and create totally different appearance for each element on every single page or post.

CUSTOMIZER / THEME OPTIONS

THEMO Customizer is an useful tool which combines theme options with live preview. Every change you make will be immediately displayed on live preview screen, so you can revise your changes and return to previous setting without saving and refreshing.

Customizer is the heart of the theme, every time you create new website you should start with it. THEMO delivers default options but depending on your needs and likings you can change default styles, skins and dozens of other options for each element of your site.

For your convenience all options in Customizer are divided into sections corresponding with main website elements. Navigate to Customizer section in this documentation and meet our advanced theme options.

Customizer section

PAGE / POST OPTIONS

Page options are the second management level directly related with theme options from Customizer - default values in Page options are taken from Customizer's settings. In Page/Post options you can override most of global settings for every single page, blog post, portfolio post and team member post. Thanks to that you can create different design and appearance for particular pages and posts. You can override settings for layout, backgrounds, header and menu, page title, footer, sidebar etc. on particular pages.

For your convenience Page/Post options are divided into sections corresponding with Customizer's sections. Navigate to appropriate section in this documentation and get detailed information about page and posts options.

Page options Blog post options Portfolio post options Member post options

SHORTCODES

Shortcodes options are third level management where you can freely customize your content. Each shortcode is different, each shortcode has its own set of advanced options.

You can customize each shortcode individually using advanced options but THEMO shortcodes has one big advantage - smart coloring system. THEMO delivers 4 unique, separate styles (color palettes) based on 6 main colors for Colored styles and 4 main colors for Transparent styles. Each of those main colors affects on several elements in shortcodes. In Customizer you can set globally only those main colors, for as many styles as you are going to use, and you have guarantee that every shortcode will be look great and all shortcodes will be kept in uniform style. Once you set main colors for each style in Customizer then you can choose one of those customized styles in shortcode editing window. And your coloring options do not end here. In each shortcode editing window you can override every single color for chosen style.

Navigate to Shortcodes section in this documentation to learn more about shortcodes options and smart coloring.

Shortcodes section

THEME INSTALLATION

Themo can be used only with WordPress and we assume that you have already installed appropriate WordPress version and you are ready to start the journey with Themo. If you don't have WordPress installed then you should start with WordPress Basics section.

Once you have downloaded the THEMO.zip file from themeforest.net you can start theme installation. You can install THEMO using two different methods: Installation via WordPress or Installation via FTP. When you install THEMO you have to also install and activate all required and recommended plugins to get full potential of the theme.

WordPress Basics

Before you start the journey with Themo you need to have installed a working version of WordPress. Find he most important informations about WordPress, installation instructions and much more in WordPress Codex

Server requirements

To run WordPress and use Themo with all its powers your host has to meet several requirements. Below you find list of these requirements, so make sure that your host meet them all.

Hosting providers

Good quality host is the basis and we have to warn you against low budget hosts which do not meet the minimum requirements for WordPress themes. WordPress need the right environment to work properly, so if you want to avoid nstallation, import and other basic problems with you should consider buying the host which is optimized for WordPress.

We strongly recommend using host services delivered by reliable hosting providers like: Siteground or Cloudways. They offer good quality products, optimized for WordPress themes, 24/7 support, one-click installers and what's most important you can change server parameters by your own, so you can easily adapt server to Themo requirements.

Server requirements

To use Themo, you must be running WordPress 4.5 version or higher, PHP from version 5.6 to 7.0, and MySQL 5.6 or higher. Make sure that your hosting provider meets these requirements.

PHP Configuration limits

There are several PHP configuration limits which has to be increase to the minimum for succesful demo content import and proper functioning of Visual Composer:

memory_limit - 128M

max_execution_time - 120

max_input_vars - 3000

upload_max_filesize - 32M

post_max_size - 32M


These limits are often lower, especially when you choose cheaper hosting package, but can be increased in php.ini file. You can change limits by your own or ask your web host for help. To increase PHP configuration limits by your own you need to edit and modify several files: php.ini, wp-config.php, and .htaccess. See below how to do this.

If you have full access to your server or if you work on local host you should start with Step 1 and change php.ini file first - it may be sufficient. But it may happened, especially if you use shared host, that your will not have direct access to php.ini file because it affects the whole server and your host provider want to have control over it. In this case you should Step 2 and Step 3. It may be good enaugh but if it won't be you have to contact your host provider and ask to change limits in php.ini file.

Changing limits in php.ini file

  1. Find your php.ini file and open it.

  2. Locate several lines of code by searching following phrases one by one (use ctrl+f shortcut to open a search field) and increase parameters values:

    memory_limit - increase to 128M

    max_execution_time - increase to 128M

    max_input_vars - increase to 3000

    upload_max_filesize - increase to 32M

    post_max_size - increase to 32M

  3. Save changes, and reboot your server.

Changing limits in wp-config.php file

  1. Find your wp-config.php file in WordPress root folder and open it.

  2. Locate define('WP_DEBUG', false); phrase (use ctrl+f shortcut to open a search field) and right below that phrase paste following lines of code :

    define (‘WP_MEMORY_LIMIT’, ‘256M’);

    set_time_limit(120);

  3. Save changes and it's done.

Changing limits in .htaccess file

  1. Find your .htaccess file in WordPress root folder and open it.

  2. Paste following lines of code:

    php_value memory_limit 128M

    php_value max_execution_time 120

    php_value max_input_vars 3000

  3. Save changes and it's done.

Installation via WordPress

  1. In WordPress admin panel, navigate to Appearance/Themes tab.

  2. Click Add new button on the top of the page

  3. Click Upload theme button, browse your hard drive and open themo.zip file, click Install now button.

    Installation process may take a while, so stay patient and do not refresh your browser until it is finished.

  4. When installation is ready, in WordPress admin navigate to Appearance/Themes, hover over Themo thumbnail and click Activate button.

  5. THEMO is ready to use. Now you should install required plugins. At the top of the page is an information about required and recommended plugins, so click Begin installing plugins and follow the instructions to install and activate plugins (see Plugins installation section below for more details).

Instalation via FTP

  1. Using FTP client log in to server where your WordPress site is installed.

  2. Upload extracted THEMO folder from you hard drive to /wp-content/themes folder.

  3. When your THEMO folder is already in /wp-content/themes/ directory (under your WordPress website's root directory) then navigate to Appearance/Themes tab in WordPress dashboard, hover over Themo item and click Activate button.

  4. THEMO is ready to use. All you have to do is to install required plugins. Click begin installing plugins and follow the instructions to install and activate plugins or see Plugins installation section for details.

Plugins

Once you have installed THEMO you should install and activate required and recommended plugins:

  • Themo Core (required, included) - it is absolutely required for theme work, it contains general theme funcionalities.
  • Themo Importer (required, included) - it is absolutely required for import demo content.
  • Visual Composer (required, included) - it is the most popular page builder for WordPress with some modifications and it is necessary to discover all Themo powers.
  • The Grid (required, included) - it is WordPress premium plugin with many predefined grids and skins which is necessary for portfolio showcase but can be also used for galleries, blog lists and team presentation.
  • Contact form 7 (recommended, not included) - it is one of the most popular contact plugins for WordPress where you can build your own contact forms or use our pre-built contact forms.
  • Revolution slider (recommended, included) - it is the most popular Slider plugin with drag and drop slide builder and dozens of customization options. See Revolution slider showcase page for details.
  • Layer slider (recommended, included) - it is a premium multi-purpose slider for creating image galleries, content sliders and stunning slideshows. See Layer slider showcase page for details.
  • Duplicate post (recommended, not included) - it is a WordPress plugin which allows to clone single pages and single posts (blog, portfolio, team member) so you can easily transfer all page settings from one page to another.
  • Advanced carousel (recommended, included) - it is a WordPress plugin for Visual COmposer which allows to display any items as a carousel.
  • Envato market (recommended, included) - it is absolutely required for theme updates.

Licensing and updates

When you purchase Themo from themeforest you get several premium plugins for free: Visual Composer, Revolution slider, Layer slider, The Grid, Advanced carousel. It means that you can freely use these plugins with our theme but you do not have direct access to plugins downloads and updates. And these rules are in line with Envato's policy and ensure that you use plugins versions which are compatible with the theme, so you don't have to buy your own license (don't worry about warning messages about the plugin license activation).

We are going to test the latest versions of plugins and release them with theme updates as often as possible, so stay tuned, check our updates and changelogs. Before every update you have to be sure that the plugin version which you are going to run is compatible with the current Themo version.

Plugins installation

When you installed and activated Themo you need to install all required plugins and recommended plugins. Follow below steps to learn how to do this. It's quick and easy process:

  1. In WordPress admin navigate to Appearance/Install plugins section and on plugins list click Install link for THEMO CORE plugin (it is absolutely required plugin so you should start with it). You will be inform about the successful installation and you can return to install plugins list and do the same for other required and recommended plugins.

  2. After installations, return to Install plugins list and activate all plugins one by one by clicking Activate link.

Demo Content

The easiest way to import our demo content is to use Themo Importer. Themo Importer is included to themo.zip file as a plugin, so you should install Themo Importer firts if you haven'y done it yet (see Plugins installation section for details).

Important notes:

  • Make sure that your host meets all minimum PHP Configuration requirements. Otherwise, the import process may not succeed.

  • We recommend to import demos on a clean WordPress installation.

  • All theme options (in Customizer) and Parallax Composer settings will be override but none of existing pages, posts, grid, footers or any other data will be deleted or modified.

  • Before importing make sure that all required and recommended plugins are installed and activated.

  • Import may take a while because importer has to upload all pages and posts, settings, attachments and generate style to make your site good looking. When you importing Main demo it may take even few minutes.

  • Do not refresh the page or close the tab while importnig – wait until the overlay with loader disappear.

  • Not all of images which you see on our online demos will be imported because of copyrights but they will be replaced by graphics to keep pages good looking.


To install demo content, in WordPress admin panel navigate to Themo importer section, choose demo site which you want to import and click Import button. Import process can take few minuts so be patient.

Theme Updates

The easiest way to update Themo theme is to use Envato Market plugin which is included to themo.zip file. You can also use the manula method which requires more steps but it can be useful for some reasons.

Themeforest has an option to notify you by email about theme updates. Log in to your themeforest account, go to Downloads page. find Themo on the list and check Get notified by email if this item is updated option.

Before updating you should always check our update notifications and changelogs. After theme update it may be necessary to update required plugins but you should always update Themo Core plugin to be sure that your updated theme will work properly.

Envato Market Auto-Updates

At the beginning make sure that you have Envato Market plugin installed (navigate to Plugins/Installed Plugins section). If the plugin is installed the Envato Market section is available in WordPress admin, so click on it. You will be transferred to plugin page where you can connect your purchases with Envato Market API. All you need to do is to generate a personal token, paste it in Token texfield and save changes. After that, the new tabs with all purchased items thumbnails will appear. From now, WordPress will be inform you about available updates and you will be able to update any of your purchased items (including Themo of course) with just few clicks.

Manual updates

Manual update involves more steps but it is also easy. You can update theme manualy via WordPres or via FTP but the first thing you need to do is to download the newest version of Themo from themeforest. Log in to your account, navigate to Downloads tab and find the Themo purchase. Click Download button and download Installable WordPress file only. When you get the newest version of Themo, follow below steps to update the theme using one of two acceptable methods.

Manual update via WordPress

To update theme via WordPress you have to deactivate and remove your current theme and simply install the newest version as same as you installed theme for the first time.

  1. To deactivate current Themo theme you need to simply activate another theme, so navigate to Appearance/Themes section, hover on another installed theme (e.g. Twenty Fifteen) and click Activate button.

  2. After deactivation you have to delete Themo theme permanently, so hover on Themo thumbnail and click Theme details. On the pop up window click Delete button localized in the right-bottom corner.

  3. Now, you have to install newest version of Themo as same as you installed theme for the first time. Navigate to Appearance/Themes section in WordPress admin and click Add new button. Browse the new themo.zip file and click Install now button. When the installation is complete, navigate to Appearance/Themes section in WordPress admin, hover on Themo thumbnail and click Activate button. If you forgot how to install new theme, navigate to Installation via WordPress section for details.

Manual update via FTP

To update Themo via FTP you have to replace current theme folder with the newest version. Unlike installation via WordPress, this time you will need extracted themo folder.

  1. Log in to your server, navigate to wp-content/themes folder. Change the themo folder name (for example to themo-old or something) to keep that folder on the server just in case.

  2. Now, drag the extracted Themo folder with updated files and drop it into wp-content/themes folder on your server - exactly in the same place from which you delete your old theme version.

Customizer

THEMO Customizer is a very functional tool that combines theme options and live preview without saving changes. All changes are visible on the preview right after you make it, and it doesn't matter you change skin, colors, layout or media. You can decide to publish those changes or return to previous set up.

In Customizer you can set global appearance using Generals, Fonts and Advanced sections or customize appearance and styling of each page element separately (in Header, Page title, Shortcodes, Footer, Sidebar, Blog, Portfolio and Lightbox sections). You can use our predefined styles or take advantage and create an unique design suits to your individual purposes. In Customizer you can also take an advance coding work like styling in Custom CSS and JS or add some extra code to Head and Body section.

THEMO Customizer is filled with many options which are logically grouped in sections (tabs) making website management clear, fast and very flexible. For your convenience all content in this part of documentation are divided into section, as same as they are divided in Customizer. Each section contains a description that will help you understand how to operate the various options.

Every Customizer section has plenty of options and most of those options are part of multilevel management. You can override those options on lower management levels (in Page/Post options).

Customizer performance

Our Customizer has almost 600 options which are part of multilevel management so Customizer's loading may take a while. We are currently optimizing the Customizer and soon we will release an update, in which the loading time will be shortened by half, but by that time you may feel some inconveniences, especially when you use Firefox browser.

If you use Firefox, it may give you a "Warning: Unresponsive script" prompt that says "A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete." If this happens, you should click CONTINUE button and wait a bit longer until Customizer is loaded.

If you want to avoid that prompt in the future, you can increase script run time in your browser. Go to Firefox support and follow the instructions.

GENERALS

In General section in Customizer you can customize the most important global options like layout, backgrounds and styling. You can also use some advanced options like Smooth scroll, connect your site with Google Analytics tool and add additional HTML tags to head and body sections.

Read descriptions in sub-sections below to learn more about General options and find out how powerfull tool you get, or go directly to Customizer and start the journey. For your convenience, most of options available in Customizer have detailed descriptions in tooltips (simply hover over question mark and tooltip will be displayed).

Layout

In Layout section you can choose Boxed or Wide layout for your website and define content width.

Boxed layout - the content is fitted in a centrally positioned grid. When Boxed layout is in use the boundary of the content container is clearly defined by the background and all page elements are placed inside content container - you are able to set one background for content area and second background for outer area.

Wide layout - the content is able to cover full width of the page. You can set one background which cover entire screen and you are able to decide whether to display elements inside the defined width of the page, or display these elements to the full width.

Styling

In this section with just few clicks you can customize colors for your site. You can choose Light or Dark skin and define primary accent color.

This option affects globally for default skins of every single element on the site (Background, Fonts, Header, Page title Fonts skin, Header skin, Page title skin, Shortcodes, Footer, Sidebar). Naturally, you can override skins and even single colors for every element separately in appropriate Customizer sections (globally) or in Page options (for single pages and posts).

Background

In this section you can customize global background on your site. Depending on which version of layout you have chosen you should customize appropriate background:

  • for Wide layout use options available in Content background section;
  • for Boxed layout use options available in Content background section and options available in Outer area background section.

THEMO gives you two background types for Content and Outer area: Color and Image backgrounds. Depending of which type you choose appropriate options will be available for you.

Notice that those options can be override for single pages and posts, you have exact the same options available in Page/Post options so you can use different backgrounds for differen pages.

Settings

In this section you can use some additional options. You can upload the Favicon which will be displayed in the browser address tab, you can enter Google maps API Key and you can add extra html to head and body tags.

Google maps API Key is absolutely necessary according to Google requirements, so if you're going to use a Google map on your website go to Google Map API section in this documentation to learn how to generate and use API Key

Smooth scroll

In this section you can enable the Smooth scroll which make the page scrolling soft and smooth. Selecting the scroll method is a very individual and subjective matter, so you should try each type and choose the one that best suits to your site. Scroll type is particularly important if you are going to create animations in Parallax Composer because different scroll types allows you to create totally different effects.

!!! We provide 5 different settings for Smooth scroll for websites but notice that Firefox and Internet Explorer browsers do not support this type of scroll so when you use this type of scroll, you have to keep in mind that on FF and IE the ideoSmoothscroll will be set in place of Smooth scroll for websites.

Advance Smooth Scroll Control

Themo includes 2 types of smooth scroll and from v.1.2 version of Themo you have ability to control particular parameters for both scroll types using javascript code. To customize the scroll speed you have to paste appropriate lines of code into Custom JS textfield in Customizer (Theme Options/Custom JS)


For IdeoSmoothScroll:

ideoconfig.set('ideosmooth.duration',0.5);
ideoconfig.set('ideosmooth.deltaratio',1);

duration parameter controls the duration of the single scroll (how many seconds the single scroll will take)

deltaratio parameter control the length of the single scroll (how many pixels will be scrolled with the single scroll) where 1=100px


For Smoothscroll for websites:

ideoconfig.set('scroll4websites',{

frameRate: 60,
animationTime: 2000,
stepSize: 120,
pulseAlgorithm: true,
pulseScale: 5,
pulseNormalize: 1,
accelerationDelta: 20,
accelerationMax: 2,
keyboardSupport: true,
arrowScroll: 50,
touchpadSupport: true,
fixedBackground: true,
excluded: ''

});

This is much more complicated and it takes a little more time to customize because some of these parameters affect each other. You can compare parameters values of our 3 predefined types to understand how they work.


Dynamic:

ideoconfig.set('scroll4websites',{

frameRate: 150,
animationTime: 400,
stepSize: 100,
pulseAlgorithm: true,
pulseScale: 4,
pulseNormalize: 1,
accelerationDelta: 50,
accelerationMax: 3,
keyboardSupport: true,
arrowScroll: 50,
touchpadSupport: false,
fixedBackground: true,
excluded: ''

});

Short tail:

ideoconfig.set('scroll4websites',{

frameRate: 150,
animationTime: 700,
stepSize: 80,
pulseAlgorithm: true,
pulseScale: 8,
pulseNormalize: 1,
accelerationDelta: 20,
accelerationMax: 1,
keyboardSupport: true,
arrowScroll: 50,
touchpadSupport: false,
fixedBackground: true,
excluded: ''

});

Medium tail:

ideoconfig.set('scroll4websites',{

frameRate: 60,
animationTime: 1200,
stepSize: 100,
pulseAlgorithm: true,
pulseScale: 4,
pulseNormalize: 1,
accelerationDelta: 20,
accelerationMax: 1,
keyboardSupport: true,
arrowScroll: 50,
touchpadSupport: true,
fixedBackground: true,
excluded: ''

});

Long tail:

ideoconfig.set('scroll4websites',{

frameRate: 60,
animationTime: 2000,
stepSize: 120,
pulseAlgorithm: true,
pulseScale: 5,
pulseNormalize: 1,
accelerationDelta: 20,
accelerationMax: 2,
keyboardSupport: true,
arrowScroll: 50,
touchpadSupport: true,
fixedBackground: true,
excluded: ''

});

FONTS

In Fonts section in Customizer you find general fonts options. You can choose a the Global font extension (writing system, alphabet) and Global font family for chosen alphabet. You can also define font families and styling separately for particular text tags.

Read descriptions in sub-sections below to learn more about general fonts management or go directly to Customizer and start the journey. For your convenience, most of options available in Customizer have detailed descriptions in tooltips (simply hover over question mark and tooltip will be displayed).

!!! Remember, that you can override fonts settings for the most important elements on website: header and menu, page title, Footer and Copyrights using options in appropriate sections in Customizer.

Global font extension

There is only one option available in this section - you can choose the Global font extension (writing system, alphabet). Notice that some font families do not support all alphabets, so depending on which font extension you choose such font families will be available in the next section.

Body font settings

In this section you choose body font family which will be set as default for all text elements on your website, but naturally, you can override font family setting for the most important text elements like menu, page title, footer widgets, copyrights and sidebar widgets.

In this section you find also several body font stylig options but those are already overridden form main text elements, so they affect only for body font.

Text tags settings

In this section you can customize html text tags, each tag separately. Simply choose from dropdown single tag and appropriate font options will be available. Customize font options for chosen tag and when you finish choose another tag from dropdown and customize it as well. Do the same for each tag one by one.

Coloring

In this section you can customize text tags colors: set main coloring skin and customize colors for each text tag separately, for chosen skin.

HEADER

In Header section in Customizer you can choose and customize global header type, upload logos for header, select and customize global style for chosen header type and customize every single color for each style.

Read descriptions in sub-sections below to find out how powerfull Header you get, or go directly to Customizer and start the journey. For your convenience, most of options available in Customizer have detailed descriptions in tooltips (simply hover over question mark and tooltip will be displayed).

THEMO allows you to use different headers on different pages. In Page options you can choose different header type and style for particular single pages or posts. It means that in Customizer beside global header type and style you can also customize other header types and styles to use them wherever you want.

Header type

In this section in Customizer you can choose the Global header for your site. General header type you choose in Customizer became default header (it will be displayed by default on all pages and posts) but remember that you can choose different header type for individual pages and posts using Page options.

THEMO delivers 4 header types:

TOP HEADER. Standard header is classic header type which stays at the top of the page after scroll.

TOP/STICKY FADE. Sticky header is header type which gets fixed position in relation to the browser window, so it stays visible on the screen after scroll. Initial header (Top header) stays at the top of the page (disappear after scroll) but final header (Sticky header) fades in and stays sticked to the top of the browser (so it stays visible on the screen). Notice that using Sticky header you can set separately appearance of the initial header (Top header) and separately appearance of the final header (Sticky header).

TOP/STICKY SLIDE. Sticky header slide is header type which gets fixed position in relation to the browser window, so it stays visible on the screen after scroll. Initial header (Top header) stays at the top of the page (disappear after scroll) but final header (Sticky header) slides downe and stays sticked to the top of the browser (so it stays visible on the screen). Notice that using Sticky header slide you can set separately appearance of the initial header (Top header) and separately appearance of the final header (Sticky header).

SIDE HEADER. Side header is a header type which is displayed on left or right side of the browser window. To customize Side header use options in SIDE HEADER SETTING section.

Logo

In this section you can upload several logos which you can set for headers which you are going to use (in appropriate headers sections). If you are going to use one header type over your whole website simply upload Normal logo and choose it for your header. Remember however, that with THEMO you can use different headers on different pages so you can add as many logos as you need for your headers.

In Logo section you can also turn on or off retina logo support. When you turn it on you get extra upload fields for retina logo versions. Remember that retina logos are sharper on hi-res screens, so theirs size should be twice bigger than standard logos versions.

Settins: Top/sticky and topbar

This section is available only if Top or Sticky header is chosen in header type section.

In this section you find header and topbar main options. You can choose hover style for menu, choose dropdown animation, choose style or disable search field, enable social and languages icons inside header, enable sticky header loading effect and define after what scroll sticky header slide will appear. You can also enable or disable topbar for desktop and mobile devices and define topbar height.

Styling: Top/sticky headers

This section is available only if Top or Sticky header is chosen in header type section.

As you probably notice this section is divided into two sub-sections which contain the same options but separated for Top header and Sticky header. If you use Top header on your website use options only in Top header sub-section, but if you use sticky header you can customize different appearance for Top and different for Sticky header. You can choose header style, define header width and header content width, define header height, choose one of updated logos, define logo height and margin-top, and define header distance from the top of the page.

Settings and styling: Side header

This section is available only if Side header is chosen in header type section.

In this section you can customize Side header appearance. You can choose header style, decide on which side the header will be displayed (left or right), choose content alignment (menu, social icons and copyrights), choose one of updated logos, define logo height and logo margins, disable search form and social icons and enter copyright text.

Settings and styling: Mobile header

Mobile header is displayed automatically when sreen width is smaller than 992 pixels. In this section in Customizer you can customize Mobile header appearance. You can choose mobile header skin, define header height, choose one of uploaded logos, define logo height, disable search bar and social icons displaying in mobile header.

Fonts

In this section you can override font settings for several text elements in header. As you probably notice this section is divided into sub-sections which contain the same options but for different text elements, so you can customize those elements separately. You can set font sizes, choose different font families, define line heights, font weights for chosen families, define letter spacings and choose text transform.

Header coloring

In header coloring sections you can customize colors for every single element of header. THEMO allows you to use different headers on different pages, that's why in Customizer you get 4 coloring sections for Top and sticky headers and 2 coloring sections for Side header. You can colorize separately as many header styles as you are going to use over your website.

If you are going to use one header type and one of its styles over your whole site then you need to customize colors only for that particular chosen type and style (using options available in appropriate coloring section). But if you are going to use more than one header type and style on different pages then you can colorize each style for each type separately. Once you customize colors for several headers and styles you can apply for those already colorized styles in Page options.

PAGE TITLE

In Page title section in Customizer you can set main displaying options for page title and breadcrumbs, customize theirs backgrounds, override global font settings for text elements and colorize every single element in page title area.

Read descriptions in sub-sections below to learn more about Page title and find out how powerfull tool it is, or go directly to Customizer and start the journey. For your convenience, most of options available in Customizer have detailed descriptions in tooltips (simply hover over question mark and tooltip will be displayed).

THEMO allows you to use different page titles on different pages. All page title options set in Customizer can be override in Page options for particular single pages or posts.

Settings

In this section you can enable or disable page title area globally. When you turn it on you can choose its skin, defeine its height, choose content alignment and enable the Parallax effect which makes that the content moves irrespectively of the background and gets additional fade-out animation.

In this section you can also turn on or off the breadcrumbs, choose where they will be displayed and decide to display breadcrumbs on mobile devices.

Background

In this section you can customize background for global Page title. You can use Color, Image or Video background for page title and depending on which type you choose appropriate options will be available.

Page title background has very advanced design options. You can freely customize colors, patterns, image position, background motion and much more.

Fonts

In this section you can customize fonts for page title, page subtitle and breadcrumbs. You can set font sizes, override global font family, define line heights, font weights for chosen font families, define letter spacings and choose text transform.

Coloring

In this section in Customizer you can customize colors for every single element of Page title area. You can colorize both skins separately. Firstly, you should colorize that skin which you set as global Page title skin in settings section. But with THEMO you can use different page title skins on different pages, so you can also colorize the second skin and simply apply for that skin on any page using Page options.

SHORTCODES

In this section in Customizer you can set colors for 4 main palletes which are part of smart coloring and you can also customize radius for all buttons used on the website.

Coloring

THEMO delivers 4 unique, separate styles (color palettes): Colored dark, Colored light, Transparent dark i Transparent light. Colored styles have an additional color backgrounds behind the content, so they work perfectly when you set image as page backgrounds. Transparent styles have not an additional backgrounds, so they work perfectly with uniform, one color backgrounds. But it is not a rule. You can adopt every shortcode style for any background using smart coloring and totally advanced coloring options in shortcode edit.

Colored palletes based on 6 main colors, transparent palletes based on 4 main colors. Each of these colors affects on several elements in shortcodes what is indicated by their names. Using those palettes, only few colorpickers, you have guarantee that every shortcode will be look great by default and all shortcodes will be kept in consistent style.

Remember that in Customizer you can customize colors for as many styles as you are going to use over your website and then simply apply for one of those styles in shortcode edit.

Button radius

In this section you can choose global button radius type (None, Small or Big) which will be used as default for all buttons on your site. You can also define precise value for each radius type.

With THEMO you can choose radius type for every single button which you add to the site. That's why in Customizer, beside default radius type, you can also customize radius value for second radius type and apply for that type while element editing.

In this section in Customizer you can choose global Footer which will be used over whole website. You can enable or disable footer globally, choose footer type (Standard or Advanced), its skin, enable sticky footer effect and if you are going to use Standard footer then in Customizer you can also customize footer layout, background, colors and customize copyrights area.

Read descriptions in sub-sections below or go directly to Customizer and start the journey. For your convenience, most of options available in Customizer have detailed descriptions in tooltips (simply hover over question mark and tooltip will be displayed).

You can use two different footer types based on two different content builders, both gives you endless configuration and appearance possibilities.


Standard footer

It based on WordPress widgets, to build Standard footer content use widgets available in Appearance/Widgets section in WordPress dashboard. To customize Standard footer appearance use options available in Customizer. See sections below.


Advanced footer

It based on Visual Composer page builder, you can build Advanced footer content using Page section and all THEMO shortcodes. Go to Footer section in WordPress dashboard and see how simple it is. You can build as many Advanced footer as you need.

Settings

In this setion you can enable or disable footer globally, over your whole site and if you decide to turn it on you can choose footer type, footer skin and add sticky effect to the footer.

In this section you can also customize copyrights, turn on or off copyrights, enter copyright text, choose skin, define paddings and content alignment.

Standard footer layout

In this section you can customize layout for Standard footer. You can choose between In grid, Fullwidth and Custom layout, define number and width of columns and define footer paddings.

Standard footer background

In this section you can customize background for Standard footer. You can use Color or Image background for footer and depending on which type you choose appropriate options will be available.

Standard footer background has very advanced options. You can freely customize colors, patterns, image position, background motion and much more.

Standard footer coloring

In this section in Customizer you can customize colors for every single element of Standard footer area. You can colorize two skins versions separately. Firstly, you should colorize that skin which you set as global footer skin in Settings section. But with THEMO you can use different skins on different pages, so you can also colorize the second skin and simply apply for that skin on any page using Page options.

In this section you can customize font for Standard footer widgets titles. You can set font size, override global font family, define line height, font weight and letter spacing.

Copyright coloring

In this section you can colorize Copyright area elements. You can color two skins separately but firtsly you should colorize that skin which is chosen as default skin.

In this section you can customize font for Copyrights text. You can set font size, override global font family, define line height, font weight and letter spacing.

SIDEBAR

In this section you can customize global sidebar on your site. You can enable sidebar globally (or turn sidebar off), decide on which side you want to display it, choose and customize sidebar skins.

Read descriptions in sub-sections below or go directly to Customizer and start the journey. For your convenience, most of options available in Customizer have detailed descriptions in tooltips (simply hover over question mark and tooltip will be displayed).

THEMO allows you to use different sidebars on different pages. Most of sidebar options set in Customizer can be override in Page options for particular single pages or posts.

Settings

I this section you can enable or disable sidebar globally. When you decide to turn it on, in this section you can also choose which of already created sidebars you want to display and choose global skin for sidebar.

Coloring

In this section in Customizer you can colorize Sidebar skins. You can colorize two skin versions separately. Firstly, you should colorize that skin which you set as global sidebar skin in Settings section. But with THEMO you can use different sidebars with different skins on different pages, so you can also colorize the second skin and simply apply for that skin on any page using Page options.

BLOG

In this section you can customize several elements for Blog pages. Using options in appropriate sections you can set meta data displaying and customize several elements for single posts, archives and categories pages, and for search result pages.

Read descriptions in sub-sections below or go directly to Customizer and start the journey. For your convenience, most of options available in Customizer have detailed descriptions in tooltips (simply hover over question mark and tooltip will be displayed).

Settings

In this section in Customizer you can customize meta data displaying for single posts, archive and categories pages, and for search results pages. Notice that you can override some of these settings:

  • for archives pages using Custom meta options in Customizer (in Archive/categories tab);
  • for search results pages using Meta Author and Meta date options in Customizer (in Search pages tab).

Single post

In this section in Customizer you can customize single post appearance globally, for all posts you add to your blog. You can manage suh elements as: sidebar, navigation arrows, post featured media, post title, meta box, related post box and social media share box. Notice that some of these options can be override for particular single post in Post options.

Archives/Categories pages

In this section in Customizer you can customize Archive and Categories pages. You can decide to display posts as a classic or masonry list, enable or disable sidebar choose Archives page title, choose pagination, customize exerpts, social media and meta data.

Search result page

In tis section in Customizer you can customize Serach results pages. You can manage such elements as: sidebar, exerpt, pagination, page title, featured media, meta date and meta author.

PORTFOLIO

Settings

In this section you can set main page for portfolio, portfolio slug and navigation arrows. Read description below to find how to use this options or navigate to Customizer and read description in tooltips.

Main portfolio page option allows you to set link to the page which will be used as your main portfolio page. This link will be used for portfolio breadcrumbs and for portfolio list icon displayed in portfolio navigation bar. If you leave leave this option empty then portfolio list icon will not be displayed and portfolio slug in breadcrumbs will not be linked.

Portfolio slug option allows you to display substitutional word for main portfolio page which will be used in portfolio links. By default portfolio links structure looks like: home/portfolio/portfolio_item_name. If you enter as Portfolio slug word projectsthen your links get structure: home/projects/portfolio_item_name.

Social share

In this section you can enable social shares for portfolio items. Appropriate social icons will be availeble on every single portfolio page.

SOCIAL MEDIA

In this section you can add link to social media profiles. Linked social icons will be displayed in header.

LIGHTBOX

In this section you can customize Lightbox appearance. In Settings tab you can choose content alignment and choose one of predefined entry animations. In Coloring tab you can customize colors for lightbox background, title, text and accent elements.

ADVANCED

In Advanced section in Customizer you find some additional general options for your website. You can customize page loading, add and customize ‘Back to top’ button, choose 404 page, define scroll speed for One page anchors and enable social open graph.

Page loading

In this section you can customize page transition effects, you can choose one of predefined loaders and customize its colors and upload logo which will be displayed while first page loading.

Back to top button

Back to top button is displayed in the right-bottom corner of the screen and it allows to scroll back to the top of the page by single click. In this section in Customizer you can enable Back to top button, define it speed, set button radius and customize its colors.

Custom 404

In this section you can choose one of created pages to use it as 404 page. You can choose any page which you previously created in WordPress dashboard.

One page

In this section you can define how fast every 1000px of page height will be scrolled after click on anchor link. This option refers to Onepage navigation and any other element which is linked by anchor.

Open graph

In this section you can disable open graph function if you are going to use open graph plugins.

CUSTOM CSS

In this section in Customizer you can type in extra CSS code to customize any element, any way you want.

CUSTOM CSS

In this section in Customizer you can enter JS code to customize any element, any way you want. Expand JS section and enter code into textfields. Notice, that your JS will not be transfered to preview screen dynamically - to see JS changes on the preview you need to click Preview button.

IMPORT/EXPORT

In this section in Customizer you can export and import theme options settings from one project to another. To transfer Customizer’s settings simply expand Export section and copy all code from textfield. In target project expand Import section and paste copied code. To see changes on preview you need to click Save and publish button.

RESET TO DEFAULT

Reset to default option allows you to restore the default settings from Customizer. Be careful, when restore default settings all your previous changes will be lost.

PAGES

In this section you find all informations about pages management and customization. Read it carefuly and will learn how to add new page, how to create page content, how to set up Home page for your site, how to create One pages and of course you will know all page options which allow you to create amazing and unique designs.

Adding new page

You can create as many page as you want in WordPress admin panel. Follow below steps and find out how easy it is:

  1. Navigate to Pages and click Add new.

  2. Enter your page title.

  3. Select and customize any number of Page options. By default, all page settings are taken from Theme options (Customizer) but you can override them using our advanced Page options to create totally unique design for particular single pages (navigate to Page options section for more details).

  4. Build page content. Click Backend editor and add your first shortcode using + icon in Visual Composer.

    You can use text editor (Classic editor) but we recommend to use Visual Composer Page builder with our outstanding shortcodes. Using our adcanced page sections, columns and shortcodes you can build any content. Add your first shortcode backend editor or learn more about using and customizing THEMO shortcodes in Shortcodes section.

  5. Publish your page and it's done.

Setting Homepage

Themo includes several pre-designed homepages which you can import using One Click importer but you may want to build your own, unique homepage using our outstanding shortcodes and advanced page options. Once you create your ideal homepage you need to set it as the Main Home Page.

  1. In WordPress admin panel navigate to Settings/Reading section.

  2. Select Static page option.

  3. From Front page dropdown choose the page which you want to set as your Main Home Page.

  4. Click Save changesstrong> button and it's done.

Onepage

THEMO gives you ability to build amazing onepage sites with scrolling navigation. With our innovative Parallax Composer, Visual Composer sections and shortcodes, advanced page optons and menu based on anchors, you can build totally unique onepages, from very simple sites to creative, animated and very advanced one pages.

To create Onepage site you need to create single page with appropriate content structure and create one page menu based on anchors. Read descriptions below to learn how to do this.

Onepage content

  1. In WordPress admin panel navigate to Pages and click Add new (naturally, you can use one of existing pages).

  2. Add content to the page using Backend editor of Visual Composer. Remember, Page sections are the bases for onepage navigation so the content should be organized into sections.

    The best practice is to separate content into main Page sections with titles, e.g. About us, Services, Our team, Contact etc. so it will be legible for users as well as for search spiders, but it is not a rule.

  3. When the content structure is ready, you need to add anchor IDs to each Page section which you want to become menu item in onepage menu - edit each section and fill Anchor IDs fields, e.g. about_us, services, our_team, contact etc. Those Anchor IDs will be used as menu items. !!! Do not use empty spaces in Anchor IDs.

Onepage menu

  1. In WordPress admin panel navigate to Appearance/Menus.

  2. Click Create new menu link.

  3. Give your menu a name.

  4. Click Create Menu button.

  5. In Pages box find and select your onepage with anchors and add it to menu as many times as many anchored items you want to have in your onepage menu.

  6. Expand each menu item, enter Anchor (remember that you have to paste exact the same anchor IDs as you enter in each section) and change Navigation label.

  7. Assign the location to your onepage menu. If it is only one menu you are going to use then mark it as Main menu.

  8. Click Save Menu button and it's done.

Page options

THEMO is very powerful theme and part of its powers comes from Page options. You can create totally unique appearance for particular single pages - each single page can have its own unique style and design. For maximum convenience all options are logically organized into sections which correspond with most important elements on the page: Layout and Background, Header, Page title, Footer, Sidebar, Slider.

Page options are part of Multilevel management. It means that initial settings are taken from Theme options (from Customizer) and you can freely override those settings. However, your changes are not irreversible. Even if you make some changes in Page options you can simply restore initial settings - just choose Default values in dropdowns or leave empty textfields and you return to settings from Theme options.

Lay and background

In this tab you can override global layout, pick body font color (if you decide to use classic editor) and define top and bottom paddings for particular single pages. You can also override global background, separately for wide and boxed layouts. You can set Color or Image background and depending on which option you choose appropriate advanced options will be available for you.

Header

In this tab you can override global header for particular single pages. You can enable or disable header, change header type and choose different menus for main and mobile header. Depending on which header type you choose you can also use options in appropriate sub-sections to customize chosen header.

Full sets of headers options are available in Customizer. Besides global header, you can customize there all header types and all header styles separately, so here in Page options you can simply pick suitable header type and its style.

Page title

In this tab you can override global page title area. You can enable or disable page title and breadcrumbs area for particular pages, change texts, fonts sizes and fonts colors for title, subtitle and breadcrumbs and of course customize background totally freely using our advanced options. You can set Color, Image or Video background and depending on which background type you choose appropriate options will be available for you, so you can customize colors, patterns, image position, background motions and much more.

Slider

In this tab you can set slider on the top of the page. With THEMO you have two slider plugins available, so firtsly you should decide which of those plugins you are going to use on the page, and then you can choose one of sliders which you have created.

!!! If you want to display slider right below the header, you have to disable page title area.

Footer

In this tab you can override global footer for particular single pages. You can enable or disable footer and copyrights, choose footer type and if you decide to use Standard footer then you can freely customize footer layout, background, colors and copyrights area.

Sidebar

In this tab you can override global sidebar options for particular single pages. You can enable or disable sidebar, change sidebar position, choose different sidebar from dropdown and customize sidebar colors.

Scripts and styles

In this tab you can disable particular plugins which you do not use on this page. You have to notice, that for each activated plugin several scripts and styles are loaded while page loading. As a result, each plugin increase page loading time but you can disable unnecessary plugins on particular pages to reduce loading time.

PAGE BUILDER / SHORTCODES

Themo shortcodes based on Visual Composer page builder modified by IdeoThemes to provide endless design options and maximum convenience. Over 30 different, fully customizable shortcodes, advanced Page sections and columns are at hand. Stunning, fresh, modern design and deeply considered options make an advantage. THEMO shortcodes are multipurpose and suits to any kind of websites, from classic and clean corporate sites to totally creative and animated landing onepages.

First steps

Visual Composer is third party plugin, so before you start using it, you have to install and activate it first. VC is included to themo package which you dwnloaded from themeforest, so you install it in the same way as Themo native plugins - see Plugins installation section for details.

If you have inastalled Visual Composer already, you should enabled Visual Composer for pages and all types of posts. In WordPress admin navigate to Visual Composer/Role manager tab, from Post types dropdwon choose Custom option and pick all checkboxes.

Using Visual Composer

In this section you find everything you need to know about our modified version of Visual Composer - how to use our extended interface, how to add, edit, copy and delete elements and how to create presets. But we should start with the most important thing which are Page sections.

Page section (Row) is more than a normal shortcode - it is a main container which keep content in grid, so all shortcodes on your page will be placed inside Page sections.

  1. Add element - using the Plus icons you can quickly add any shortcode to the page but as you already know each new element on the page will be placed inside Page section, at the bottom of the page.

    Remember, that you can also add shortcode directly to the column inside existing section (9).

  2. Drag and drop - using the Arrows Icon you can manage the sections order. Simply drag one section and drop it above or below other section.

  3. Grid columns - Visual Composer grid system based on 12 columns, it means that you can divide your sections from 1 to 12 columns and freely add shortcodes to those columns. Our grid is responsive and fluid so you have guarantee that it will be always look good. Hover over the Column Icon and choose one of predefined layout or choose Custom to create your own layout.

  4. Section displaying - this icons inform you on which devices section will be displayed and on which it will not be. See Page section overview for details.

  5. Section options - using the Edit Icon you get inside our Page section which are the heart of the content. Themo sections are very advanced elements - see Page section overview to find out how huge design options it delivers.

  6. Clone the section - using the Copy Icon you can clone the section with all its settings and elements placed in it. It is very efficient way to build page content especially if you use advanced settings.

  7. Delete the section - using the Trash Icon you can easly delete the section with all its content.

  8. Column settings - using the Edit Icon you can manage layout, desing and appearance options for every column. Themo columns are very advanced so read Column overview for details.

  9. Add element - using the Plus Icon you can add any shortcode directly to the column.


You can add to pages as many sections as you wish and build content using our amazing shortcodes. Themo shortcodes are loaded with many design, styling and animation options, and for you convenience those options are organized into several tabs in accordance with functionalities:

  • General tab contains most important options so you can fulfil shortcodes with content and set its general appearance (types, sizes, margins, fonts etc.).

  • Button tab contains button options. This tab is available only for shortcodes which contain button.

  • Styling tab contains coloring options. At first, choose one of 4 predefined styles (which you have customized in Customizer) and then you can override colors for chosen style.

  • Animation tab contains animation options. You can choose one of predefined Viewport animation and decide if/how an element appear on the screen. But Themo gives you more, for each section and column you can choose Parallax Composer animation and animate the content totally freely. Form more details about our oustanding animation tool navigate to Parallax Composer section.

  • Design options tab is available for the most important elements like Page sections, columns and text block. It contains options which gives you full control over spacings (paddings and margins) and some additional options for borders.

  • Width and responsiveness is additional tab for Page section. Those options allows you to set column width and offset for default column size and also other devices by taking into account default value. In addition it is possible to Hide columns on specific devices in order not to display some specific block for example on mobile devices.

Performance

Visual Composer page builder is very advanced tool with dozens of functionalities and options. It may happened, that you will observe some problems with performance. In most cases, decrease of performance is caused by browser, so when the problem appears you should try to work on different browser and clean browser's cache regularly.

Updates

Visual Composer is a 3rd party plugin and it is included in themo package, so you are free to use it with Themo but you don't get an individual license for the plugin. It means that you cannot receive direct updates. And that's good because some updates may contain features or functions which will cause a conflict with the theme. Before every update, you have to make sure that the latest verion of Visual Composer is compatible with current Themo version. We will follow the Visual Composer updates, test new versions carefully and we are going to release theme updates with the latest versions of plugins as often as possible. At the moment, you can use safely the Visual Composer 4.4.2 version.

Smart coloring

We've designed smart and intuitive coloring system which allows to customize shortcodes quickly using default styles. 4 unique styles based on individual coloring palletes: 6 main colors for Colored styles and 4 main colors for Transparent styles. Each of those main colors affects on different element in shortcodes what is indicated by their names. In Customizer you can set only those colors and you have guarantee that every shortcode will be look great and all shortcodes will be kept in uniform style.


Tabs - Colored dark

Tabs - Transparent dark

Once you customize styling palletes you can apply for those styles in shortcodes editing. Customized styles makes your shortcodes good looking but Themo gives you more. Every single shortcode has plenty of styling options which you can use to achieve appearance perfectly suited to your needs.

Contact Form 7

Contact Form 7 is one of the most popular contact plugins for WordPress. You can manage multiple contact forms, customize forms and mail content with simple markups. Once you create contact form using plugin you can add this form to any page you wish using Contact Form 7 shortcode.

THEMO includes pre-built contact forms with already customized appearance. All THEMO's preset forms are displayed below. Next to each form you will see form-tag code which generate this form.

Follow below steps to use one of them:

  1. Navigate to Contact section in WordPress admin panel and click Add new.

  2. Name your contact form.

  3. From below THEMO's forms list choose one preset, click link above it, copy form-tag code and paste it into Form editing field.

  4. Click Save button and its done. Your contact form was automatically added to contact forms list in Contact Form 7 shortcode so you can add it to any page you wish.









Google Map API

According to Google requirements, to use Google maps you have to generate Google API Key and add it to your website. Even if you add Google Map shortcode the map won’t be displayed until you add that Key. Follow below steps to do this:

  1. Click this link and get an API key (find and click GET A KEY button, select or create new project and click ENABLE API button). After few seconds you will see the API key on the screen.

  2. Copy your API Key and navigate to Customizer/Generals/Settings section and paste it into Google API textfield.

  3. Save changes and its done.

HEADER AND MENU

Introduction

THEMO gives you 4 predefined header types and 4 predefined styles for each type. With a few clicks you can set amazing header for your website but you can also take your time and customize every single part of header to create totally unique design.


THEMO header use multilevel management. Generally, it means that you can use different headers on different pages over your site. For each header type and each header style you have plenty settings and coloring options in Customizer, so you can customize more than one header type and more than one style. If you are going to use only one header over your whole site then in Header section choose global header type, Upload logo and change settings and coloring options only for chosen type and its style. But if you are going to use different headers and menus on different pages then in Customizer you can customize separately as many headers types and styles as you need and apply for those headers in Page options to override global header for particular single pages.

Multilevel management:

THEMO header has 2 management level. Main header options are available in Customizer but some of those global options can be override for single page, blog post, portfolio post and member post. Thanks to that you can use global header over whole site or set different headers for particular pages and posts.

  • Customizer options for header (Theme options) are first management level. In Customizer you find main header options where you can set every single part of header (or headers). You can choose and customize one general header which will be set by default for all your pages and posts but you can also customize at one place all header types and all header styles to use different headers on different pages (once you customize different headers in Customizer you can apply for those headers in Page options).

  • Page options for header (Blog post options, Portfolio post options,Team member post options) are second management level. In page/post options you can simply choose one of customized header types and styles for particular single pages and posts. You can also override some other header settings in order to particular page design.

Header styling

THEMO gives you 4 different header styles for Standard and Sticky headers and 2 different styles for Side header and 2 different styles for Mobile headers. In order to this in Customizer you have 8 different styling sections referring to header types:

  • TOP/STICKY HEADER STYLING - COLORED LIGHT

  • TOP/STICKY HEADER STYLING - COLORED DARK

  • TOP/STICKY HEADER STYLING - TRANSPARENT LIGHT

  • TOP/STICKY HEADER STYLING - TRANSPARENT DARK

  • SIDE HEADER STYLING - LIGHT

  • SIDE HEADER STYLING - DARK

  • MOBILE HEADER STYLING - LIGHT

  • MOBILE HEADER STYLING - DARK


You get 8 different colors palettes ready to use. Together with multilevel header management you get endless combination of header design, so you can use different header types with different styles on different pages.

If you are going to use one header style over whole site you need to customize colors only for that one style but if you are going to use different headers and styles on different pages you can customize as many styles as you are gonna need.

Top Header

Top header is a standard header placed at the top of the page so it hides up after scroll. Follow below steps to set and customize Top header.

  1. In WordPress admin panel navigate to Customizer.

  2. In Customizer go to Header section, expand HEADER TYPE section and choose Top header.

  3. In LOGO section upload Normal logo (main logo). If you are going to use different header styles on different pages you can upload Light and Dark logo versions to match them to your styles. You can also enable and upload retina logo versions and upload Favicon if you want to use it.

  4. Now, you can customize Top header appearance using options in Top/Sticky setting and Top/Sticky styling sections. For your convenience most of options have descriptions (simply hover on question mark next to each option and info tooltip will appear).

  5. In Fonts section you can override global fonts for header, separately for main menu, submenus, mega menu and mobile menu, depending on your needs.

  6. Now you can set colors for Top header. As you see there are 4 different styling sections available for Top header. Firstly, you should set colors for style which you assigned as a main style in Styling section. But if you are going to use different styles on different pages you can set colors for other Top header styles. Once you set colors for different styles you can apply for those styles on different pages and posts in Page/Post options.

  7. When you customize header you can take care of mobile header using options in Mobile sections.

  8. Click Save and Publish button.

Sticky header

Sticky header gets fixed position in relation to the browser window, so it stays visible on the screen after scroll. Top header (initial header) stays at the top of the page (disappear after scroll) and Sticky header (final header) appears and stays sticked to the top of the browser (so it stays visible on the screen). Themo gives you two types of sticky header: Sticky header and Sticky header slide. The difference between them is an entry effect, first fade in after scroll, second scroll down from the top of the browser window.

Top and Sticky headers work together but they are independent headers with theirs own set of options. You can achieve amazing transition effects when you create different appearance for Top header and different appearance for Sticky header.


Follow below steps to set and customize Sticky header.

  1. In WordPress admin panel navigate to Customizer.

  2. In Customizer go to Header section, expand HEADER TYPE section and choose Sticky header or Sticky header slide.

  3. In LOGO section upload Normal logo (main logo). As you see you can upload different logo for Top and Sticky headers and two different color versions if you are going to use more than one header style over your site. You can also enable and upload retina logo versions and upload Favicon if you want to use it.

  4. Now, you can customize Top header appearance using options in Top/Sticky setting and Top/Sticky styling sections. For your convenience most of options have descriptions (simply hover on question mark next to each option and info tooltip will appear).

  5. In Fonts section you can override global fonts for header, separately for main menu, submenus, mega menu and mobile menu, depending on your needs.

  6. Now you can set colors for Top and Sticky header. As you see there are 4 different styling sections available for Top header. Firstly, you should set colors for style which you assigned as a main style for Top and for Sticky headers in Styling section. But if you are going to use different styles on different pages you can set colors for other styles. Once you set colors for different styles you can apply for those styles on different pages and posts in Page/Post options.

  7. When you customize header you can take care of mobile header using options in Mobile sections.

  8. Click Save and Publish button.

Side header

Side header is a header type which is displayed and sticked to the left or right side of the browser window. Follow below steps to set and customize Side header.


  1. In WordPress admin panel navigate to Customizer.

  2. In Customizer go to Header section, expand HEADER TYPE section and choose Side header.

  3. In LOGO section upload Normal logo (main logo). If you are going to use different header styles on different pages you can upload Light and Dark logo versions to match them to your styles. You can also enable and upload retina logo versions and upload Favicon if you want to use it.

  4. Now, you can customize Side header appearance using options in Setting and styling section. For your convenience most of options have descriptions (simply hover on question mark next to each option and info tooltip will appear).

  5. In Fonts section you can override global fonts for header, separately for main menu, submenus, mega menu and mobile menu, depending on your needs.

  6. Now you can set colors for Side header. As you see there are 2 different styling sections available for Side header. Firstly, you should set colors for style which you assigned as a main style in Settings and styling section. But if you are going to use different styles on different pages you can set colors for second style. Once you set colors for different styles you can apply for those styles on different pages and posts in Page/Post options.

  7. When you customize header you can take care of mobile header using options in Mobile sections.

  8. Click Save and Publish button.

Mobile header

Mobile header is a simplified version of header which will be displayed instead of main header when screen width will be smaller than 992px. Follow below steps to customize Mobile header.

  1. In WP admin panel navigate to Customizer.

  2. In Customizer go to Header section, expand Settings and styling: Mobile header section and customize mobile header appearance.

  3. In Fonts section scroll dwon to Mobile fonts subsection and customize typography for mobile header.

  4. Now you can set colors for Side header. As you see there are 2 different styling sections available for Mobile header. Firstly, you should set colors for style which you assigned as a main style in Settings and styling section. But if you are going to use different styles on different pages you can set colors for second style. Once you set colors for different styles you can apply for those styles on different pages and posts in Page/Post options.

  5. Click Save and Publish button.

Adding menu

THEMO menu based on WordPress custom menu. You can create more than one menu, each can includes different menu items and each can be use on different pages. Each menu you create can be assigned to different Locations: Main menu, Secondary menu, Third menu, Fourth menu or Fifth menu. Main location with menu assigned to it is used by default over your whole site but you can easily call out different locations (with menus assigned to them) on particular single pages.

Menu locations and extended functions allows you to create different menu types: simple menu, mega menu, one page menu and mobile menu. Each with individual customization, so you are able to suit menu structure and appearance to your specific needs. Menu appearance is related with advanced THEMO header. It gives you endless design possibilities. With THEMO header options you can freely set menu width, layout, transparency, fonts, colors, hovers and more, all with live preview in Customizer.

See sections below to find out how to build and customize menus for your site.


To create menu follow below steps:

  1. In WordPress admin panel navigate to Appearance/Menus.

  2. Click Create new menu link, name your menu and click Create menu button. Your menu will be created and you will be moved to the menu edit window.

  3. In menu edit window you can add items (pages, posts, links, categories) to your menu structure. From the left side sections choose one of pages or posts you have created, or choose link or category and click Add to Menu button. Add in the same way as many items as you need.

    You can manage menu structure. Using drag and drop function you can set items in appropriate order (drag item and drop it above or below another item) and you can determine Parent-Child relations to create dropdown menu (drag child item and drop it below and slightly to the right of parent item).

    Items added to menu have several additional settings which you can use (to see item settings click small arrow placed on the right side in item title bar):

    Navigation label, you can enter item label which will be displayed in menu on the site instead of page title you have set in page editing.

    Title attribute, you can enter text which will be displayed in tooltip on item hover.

    Don't link, check that box if you don't want to linked menu item.

    Anchor, enter anchor ID if you want the menu item link to the section which has assigned the same anchor ID (read more about anchor ID in Adding One Page Menu section)

    Icon, assign (or not) icon to menu item, icon will be displayed next to menu item.

    Enable Mega Menu, check that box for parent items if you want to use mega menu instead of standard dropdown (read more about Mega menu settings in Adding Mega Menu section).

    Mega menu background Image URL, enter URL of the image which you want to display as a background of Mega menu dropdown (background image override Mega menu background color set in Customizer)

    Remove, click Remove if you want to erase item from menu structure.

    Cancel, click cancel if you want to return to default settings and all item settings you have made will be cancelled.

  1. If you have added and organized items in your menu you should scroll down to the Menu Settings section and assign location to menu. Main menu location should be assigned to your main menu. Other locations allows you to change menu for individual single pages.

  2. Click Save menu button and it's done. Now you can take your time and customize Header and Menu appearance using options available in appropriate Header sections in Customizer.


Mega menu

To use Mega menu instead of simple dropdown menu you have to create standard menu (see section above) and then assign Mega menu function to First level items. To set Mega menu you have to create appropriate menu structure, so follow below steps to learn how to do this:

  1. In Menu structure expand First level item and check Enable Mega Menu option. If you want to use image background for mega menu dropdown paste image url in Mega menu background field or leave empty to use color background which you can customize in Customizer.

  2. Now, you have to add Second level items which will be used as titles for columns. We recommend to use Custom links items for Second level so expand Custom links bar on the left side, fill custom fields (both fields are required) and click Add to Menu button. Add to Menu structure as many Custom links as many columns you need (each Custom link is an individual column title). To make them Second Level menu items, drag menu items below and to the right of the First Level menu item.

  3. Add Third level menu items. From the left side choose pages, posts or custom links and add them to menu structure. To make them Third level items in mega menu, drag and drop items below and to the right of the Second Level menu item.

  4. In the end you need to scroll down to the Menu Settings section and assign location to the menu. Main menu location should be assigned to your main menu. Other locations allows you to change menu for individual single pages.

  5. Click Save Menu button and it's done.

  6. On the image below you can see correct menu structure:

    • First level is the parent item to which you have assigned Mega menu dropdown;

    • Second level subitems are several columns in Mega menu dropdown;

    • Third level subitems are individual child items (pages) assigned to columns.

One page menu setup

One page site allows to display all content on a single page and link to different sections using menu based on anchors. To create One page site you need to create single page first, build its content and create one page menu. With THEMO its very easy process.

  1. In WordPress admin panel navigate to Pages section, add new page and build its content with Visual Composer backend editor. The best practice is to separate content into main page sections with titles, e.g. Home, About, Our team, Offer, Contact etc. so it will be leagible for users as well as for search spiders.

  2. Add anchor IDs to every section which you want to become menu item in one page menu. Fill Anchor ID fields with any text, e.g. home, our_team etc. !!! Do not use empty spaces in Anchor IDs.

  3. Now, you need to create one page menu so navigate to Appearance/Menus in WordPress admin menu.

  4. Click Create new Menu link, name your menu and click Create Menu button.

  5. Now you need to add items to your One page menu. Use Custom links on the left side. In URL field enter # with Anchor ID the section, e.g. #home. In Link text field enter title which will be use as menu item in header.

  6. Repeat fifth step as many times as many menu items you want to display in menu.

  7. Remember that you have to assign location to your menu. Scroll down to Menu settings and set appropriate Theme location (Main menu in this case).

  8. Click Save Menu button and it's done.

PAGE TITLE

THEMO Page title is very advanced element - fully customizable, flexible and great designed. It is really advanced, loaded with options, so you can customize backgrounds, fonts, colors and displaying. As one of the main elements it can be manage in Customizer and in Page options as well. In Customizer you can can set and customize main Page title which will be used over your whole site but you can override this global page title for particular single pages and post.

Management levels:
  • Customizer options for Page title (theme options) - first management level. In Customizer you find all page title options where you can customize all page title settings globally. At one place you can set main page title elements like background, fonts and color. Those settings will be used as default on every page or post where page title will be enabled.

  • Page options for Page title (and Blog post options, Portfolio post options,Team member post options) are the second management level. In page/post options you can override most of Customizer's options. See Page title section in Page options to learn more.

FOOTER

THEMO Footer is very advanced element, fully customizable and easy in use. THEMO gives you two different footer types so you can use two different footer building methods:

  • Standard footer - it's a classic footer builder based on Word Press Widgets area (Appearance/Widgets) where you can build your content using available widgets. When you add content widgets you can customize footer appearance using options in Customizer (global settings) and in Page options (for particular single pages and posts).

  • Advanced footer - it's a footer builder based on Visual Composer. You can build footer content as easily as you build page content using sections and shortcodes. When you create Advanced footer you can set it as a globa footer in Customizer. But with Themo you can use different footers on different pages so create as many advanced footers as you need and then simply apply for those footers in Page options.

Standard footer based on WordPress footer builder (content builder) and on THEMO Customizer (appearance customization). You can build footer content by adding several widgets to footer columns. You can use 1, 2, 3 or 4 column grid, to each column you can add several content widgets.

To build Standard footer content follow below steps:

  1. In WordPress admin panel, navigate to Appearance/Widgets section.

  2. On the right side you find several widget areas, 4 of them named Footer 1-4 refer to Standard footer columns. On the left side you can find list of available widgets. Using drag and drop function simply placed widgets in appropriate footer column. If you want to use one column grid for footer add widgets only to Footer 1 area, if you want to use 3 column grid add widgets to Footer 1-3 areas etc.

    Notice, that here you only add the content to each column but column grid settings are available in Customizer (in Standard footer layout section).

  3. It's done. Now you can go to Customizer and customize Standard footer appearance.

THEMO Advanced footer based on Visual Composer page builder so it has no limits. You can freely choose any type of background, use column grid to customize layout and add our amazing shotcodes. Have fun!

  1. In WordPress admin panel navigate to Footer/Add new section.

  2. Name your footer and activate the Backend editor of Visual Composer.

  3. Build footer content using our outstanding sections and shortcodes as same as you build content for single pages.

  4. Save Publish button and it's done.

SIDEBAR

Sidebar content management based on WordPress widgets. You can build more than one sidebar to use them on different pages. Once you build sidebars content you can customize theirs appearance using options available in Customizer and in Page options.

THEMO use WordPress sidebar builder based on widgets. You can build sidebar content by adding several widgets to sidebar widget section. With THEMO you can build as many sidebars as you want. To build sidebar content use WordPress widgets panel.

  1. In WordPress admin panel navigate to Appearance/Widgets. On the right side of the screen you find Default sidebar section which is ready to use but with Themo you can create more sidebars to use them on different pages. To create new sidebar, in Add sidebar area tape sidebar name and click Add sidebar button. New widget section will be automatically added to the list. This way you can create as many sidebars as you need.

  2. Now you need to build sidebar content expand sidebar section which you have created using arrow on the right side.

  3. On the left side, in Available widget area you find all widgets you can add so simply drag and drop the widget you’d like to add into your chosen widget section on the right side.

  4. Each widget has its own custom fields so you can give them titles and customize some main useful options.

It's done. Now you need to assign sidebars to pages or posts.

Sidebars can be assigned globally or locally. Themo gives you ability to manage sidebar assignment in Customizer (you can set global sidebar, different sidebar for all blog single posts, different for Archive pages and different for Search pages) but you can also assign different sidebars for particular pages and posts using Page/Post options. Read descriptions below to learn how to assign sidebar for different pages and posts:

CUSTOMIZER. In appropriate sections in Customizer you can assign global sidebar for specific pages and posts:

  • in Sidebar section you can enable global sidebar, assign one of created sidebars and customize colors for global sidebar. Global sidebar will be set as default over your whole website.

  • in Blog/Single post section you can override global sidebar settings for all blog single posts. You can enable or disable sidebar displaying and assign one of created sidebar.

  • in Blog/Archives section you can override global sidebar settings for archives and categories pages. You can enable or disable sidebar displaying and assign one of created sidebar.

  • in Blog/Search page section you can override global sidebar settings for search results pages. You can enable or disable sidebar displaying and assign one of created sidebar.

PAGE/POST OPTIONS. For each single page, blog post, portfolio post and team member post you can override sidebar settings using Page options in Sidebar section. You can enable or disable sidebar for particular pages and posts, choose different sidebars and freely customize sidebar skin and colors.

THEMO includes many widgets, perfectly design for sidebar purposes. All widgets are listed below.

Archives, a monthly archive of your site Posts.

Calendar, a calendar of your site Posts.

Meta, Login, RSS, WordPress.org links.

Recent posts, your site most recent Posts.

Pages, a list of your site Pages.

Custom menu, add a custom menu to your sidebar.

Tags cloud, a cloud of your most used tags.

Categories, a list or dropdown of categories.

Recent comments, your site most recent comments.

Newest portfolios, display the most recent portfolio items.

Revolution slider, display one of created sliders as a widget.

RSS, entries from any RSS or Atom feed.

Text, arbitrary text or HTML.

Search, a search form for your site.

BLOG

Introduction

THEMO gives you advanced blog options divided into several levels. You can manage BLOG globally in Customizer (general settings, single post settings, archives and categories pages settings, search page settings), but you can also customize every single blog post individually. In addition THEMO gives you advanced Blog shortcode options which allows you to decide how to display blog posts list on any page you wish. In general Themo allows you to manage whole Blog on 3 different levels:

  • In Customizer you can set globally most important layout and appearance options for Single post pages, Archive and Categories pages, Search result pages.

  • In Post options you can override Customizer’s settings and create in detail unique design for for particular single post.

  • Using Blog shortcode you can display blog posts list on any page you wish and customize its appearance using advanced options.

Post formats

Post format is a function which is used to post presentation on blog list and on post page. By setting post format you decide what kind of media your post will include. THEMO gives you several Post formats: Standard, Video, Quote, Link, Gallery and Audio. Choose Post format for your post in Format box located on the right side of WP admin panel.

If you don't see Format box make sure that Format option is checked in the Screen options. Screen options tab is located at the right-top corner of WP admin panel.

As it is written above, each format includes different media which will be displayed on post list and on post page. Read description below to learn more about each format.

  • STANDARD - standard type of single post which can be also used for image post. Simply choose featured image using Featured image upload box located on the right side of WP admin panel. In this case featured image will be displayed on post list and at the top of single post page.

  • VIDEO - video type of single post. When you choose this format appropriate additional options will be available in Post options: Video (where you can upload video from media library), Fallback image (where you can upload image which will be displayed if device, software or browser block the video displaying). Video player will be displayed on post list and at the top of single post page.

  • QUOTE - quote type of single post. When you choose this format Quote text and Quote Author options will be available in Post options, so you can enter quotation text and author’s name. Quote text and Author text will be displayed on post list and at the top of single post page.

  • LINK - link type of single post. When you choose this format URL title and URL options will be available in Post options. Fill those fields to display URL and its title on post list and at the top of single post page.

  • GALLERY - galery type of single post. When you choose this format Image upload option will be available in Post options, so you can upload to your gallery as many images as you wish. Your gallery will be displayed as images slider on post list and at the top of single post page.

  • AUDIO - audio type of single post. When you choose this format Audio option will be available in Post options, so you can upload audio file from Media library. Audio player will be displayed on post list and at the top of single post page.

Creating blog post

No matter where and how you want to display your Blog posts list, you should create blog single posts first. Themo gives you several posts formats (types), allows you to build post content using our stunning shortcodes and gives you ability to create uniqe design for every single post using advanced Post options.

Follow below steps to create blog single post:

  1. Navigate to Posts section in WP admin panel and click Add new.

  2. Enter post title.

  3. Choose post format from Format box on the right side panel. Depending on which post format you choose additional media options will be available in Post options. See below Post formats section to learn more.

  4. From the right side assign categories to the post. In Categories box check as many categories as you wish. If you don't have any categories yet, you can create new: click Add New Category link, enter category label and click Add New Category button.

  5. Upload feature image for your post. Basically, featured image is use for Standard post format in case when you create posts with image. But featured image is also used for other formats as post media replacement in specific situations, e.g. if you use plugins to post displaying.

  6. Use Post options to upload post media and customize post appearance. Themo gives ability to ustomize your post totally freely, you can leave default settings (from Theme options) but you can take your time and create totally unique design for each post.

  7. Build post content. You can use Classic editor but you can also use Visual Composer page builder with all Themo shortcodes.

  8. If it is done, click Publish button to save the post.

Once you add and customize single blog post you can copy this post using Clone function available on the Blog posts list in WP admin panel. You get exactly the same blog post appearance and all you need to do is to change content, format, featured image and few general information like title and subtitle. You have guarantee that all your posts will have the same layout and appearance (header, sidebar, footer, page title etc.).

Blog post options

THEMO allows you to create totally different appearance for each blog post. You can upload post media, customize post layout and background, create unique header, sidebar, footer and more. For maximum convenience all options are logically organized into sections which correspond with most important elements on the page: Layout and Background, Header, Page title, Footer, Sidebar, Slider.

Post options are part of Multilevel management. It means that initial settings are taken from Theme options (from Customizer) and you can freely override those settings. However, your changes are not irreversible. Even if you make some changes in Post options you can simply restore initial settings - just choose Default values in dropdowns or leave empty textfields and you return to settings from Theme options.

Post options

In this tab you can upload media for your post and decide to display typical blog post elements like featured media, post title, meta informations and related post box.

Lay and background

In this tab you can override global layout, pick body font color (if you decide to use classic editor) and define top and bottom paddings for particular single posts. You can also override global background, separately for wide and boxed layouts. You can set Color or Image background and depending on which option you choose appropriate advanced options will be available for you.

Header

In this tab you can override global header for particular single posts. You can enable or disable header, change header type and choose different menus for main and mobile headers. Depending on which header type you choose you can also use options in appropriate sub-sections to customize chosen header.

Full sets of headers options are available in Customizer. Besides global header, you can customize there all header types and all header styles separately, so here in Post options you can simply pick suitable header type and its style.

Page title

In this tab you can override global title area for particular single posts. You can enable or disable title and breadcrumbs areas, change texts, fonts sizes and fonts colors for post title and subtitle, choose content alignment and of course customize background using our advanced background options. You can set Color, Image or Video background and depending on which background type you choose appropriate options will be available for you, so you can customize colors, patterns, image position, background motions and much more of background options.

Slider

In this section you can set slider on the top of blog post. With THEMO you have two slider plugins available, so firtsly you should decide which of those plugins you are going to use on the page, and then you can choose one of sliders which you have created.

If you want to display slider right below the header, you have to disable page title area.

Footer

In this tab you can override global footer for particular single posts. You can enable or disable footer and copyrights, choose footer type and if you decide to use Standard footer then you can freely customize footer layout, background, colors and copyrights area.

Sidebar

In this tab you can override global sidebar options for particular single posts. You can enable or disable sidebar, change sidebar position, choose different sidebar from dropdown and customize sidebar colors.

Scripts and styles

In this tab you can disable particular plugins which you do not use in this post. You have to notice, that for each activated plugin several scripts and styles are loaded while page loading. As a result, each plugin increase page loading time but you can disable unnecessary plugins in particular posts to reduce loading time.

Creating blog page

With Themo you don't need to use blog templates, you can create blog on any page you wish by adding Blog shortcode or The Grid shortcode. You can use blog shortcode for the blog page, as the news element or to display recent info from your company.

Follow below steps to create blog page:

  1. In WordPress admin navigate to Pages and click Add new.

  2. Enter page title for your blog page (e.g. Blog).

  3. In Page options you can customize blog page appearance to create totally unique design. By default, all page settings are taken from Theme options (Customizer) but you can override them using our advanced Page options to create totally unique design for your blog page.

  4. Use Visual Composer to add Blog shortcode (click + icon in Visual Composer backend editor and choose Blog shortcode from the list).

  5. Edit Blog shortcode and customize blog list appearance. THEMO gives you many displaying and styling options. You can use grid or masonry layout, customize excerpts and featured media sizes, choose text tag for post titles, define how many posts display on the list on load, choose pagination type, specify which categories and posts will be displayed, manage posts order and meta datas and of course you can freely customize colors.

    To display blog posts list you can also use The Grid shortcode instead of Themo Blog shortcode. Themo includes The Grid plugin which has many built-in grids with beautiful skins which are ready to use. You can see some grid demos on The grid demo site and if you decide to use it, go back to Step 4 and using Visual Composer choose The Grid plugin from shortcode list. If you don't have any grids yet you can import demo content. To import demo grids navigate The Grid/Import_Export section in WordPress admin panel, scroll to the bottom of the page and click Read demo content button and when the grids list appear select which grids you want to import and click Import selected grids button. After import your grids will be automatically added to The Grid shortcode, so you can choose any of them from the list.

  6. When you customize blog list click Publish button.

  7. The last thing you have to do is to mark created page as a main blog page. To do so, navigate to Settings/Reading section in WordPress admin panel, from Post page dropdown choose page with blog list which you have just created, click Save changes button and it's done.

Archive and Search pages

With THEMO you can customize appearance of Archive pages and Search result pages using theme options in Customizer. Navigate to Customizer/Blog section in this documentation for more details.

PORTFOLIO

THEMO allows you to present portfolio in many ways. You can build portfolio posts content totally freely using Visual Composer with Themo shortcodes. Using Portfolio post options you can create unique designs for each post and finally you can add portfolio list to any page using The Grid shortcode which gives you many predefined grids and skins. In addition Themo gives you 2 different ways to display your portfolio posts: as a classic single pages or as a modern ajax cards.

See options below to learn how to add portfolio items, how to customize its appearance and how to create portfolio list with The Grid plugin.

Creating portfolio post

To create Portfolio single post follow below steps:

  1. Navigate to Portfolio section in WP main menu and click Add new.

  2. Enter portfolio title.

  3. Choose Portfolio category from Categories box located in the right side panel. If you do not have any category yet simply enter category name and click Add new category link.

  4. Upload feature image for portfolio post. Featured image is required, it will be displayed on portfolio list.

  5. Use Post options to customize portfolio post appearance. With Themo you can display portfolio item as a classic page and/or as an ajax modern card. Depending on which way you choose you should customize options in appropriate setions. Portfolio info section refers to both, Ajax card section refers only to Ajax card, other sections refer only to classic portfolio page (see below Portfolio single post options for details).

  6. Build portfolio content. To do so use Visual Composer page builder with all THEMO shortcodes.

  7. At the end, click Publish button to save portfolio post.

Once you add and customize single portfolio post you can copy this post using Clone function available on the Portfolio posts list in WP admin panel. You get exactly the same portfolio post design and all you need to do is to change content, featured image and few general information like title and subtitle.

Portfolio post options

Portfolio post options are part of Multilevel management. It means that initial settings are taken from Theme options (from Customizer) and you can freely override those settings. However, your changes are not irreversible. Even if you make some changes in Portfolio options you can simply restore initial settings - just choose Default values in dropdowns or leave empty textfields and you return to settings from Theme options.

THEMO gives you dozens of options so you can create unique design for every single portfolio post. For maximum convenience all options are logically organized into sections which correspond with most important elements on the page: Layout and Background, Header, Page title, Footer, Sidebar, Slider.

With Themo you can display portfolio details in two ways: as a Standard post and as modern Ajax card. Using The Grid plugin you can choose linking method for particular grid to display portfolio posts as standard posts or as Ajax cards.

PORTFOLIO STANDARD , it is a standard single post, so you can customize main portfolio info and all page elements like layout, background, header, page title, footer, sidebar and slider using options in appropriate tabs.

AJAX CARD , it is an popup card with title area placed on the left side and content on the right side. Notice, that Ajax card doesn't have main page elements like header, footer, sidebar etc., so to customize its appearance use options available in Portfolio info tab and in Ajax card tab.

Portfolio info

In this tab you can set general information for single portfolio post: title, subtitle and parameters. All options available in this section affect both: Portfolio standard and Ajax card.

Ajax card

In this tab you can customize title area for portfolio ajax card. All options available in this section affect Ajax card only. You can customize title area background, choose content alignment, define font sizes and colors for portfolio title, subtitle and parameters, pick share icons color and customize navigation image.

Lay and background

In this tab you can override global layout, pick body font color (if you decide to use classic editor) and define top and bottom paddings for particular single posts. You can also override global background, separately for wide and boxed layouts. You can set Color or Image background and depending on which option you choose appropriate advanced options will be available for you.

Header

In this tab you can override global header for particular portfolio posts. You can enable or disable header, change header type and choose different menus for main and mobile headers. Depending on which header type you choose you can also use options in appropriate sub-sections to customize chosen header.

Full sets of headers options are available in Customizer. Besides global header, you can customize there all header types and all header styles separately, so here in Portfolio options you can simply pick suitable header type and its style.

Page title

In this tab you can override global title area for particular portfolio posts. You can enable or disable page title and breadcrumbs areas, choose content alignment, change fonts sizes and colors for portfolio title, subtitle and breadcrumbs, customize navigation and of course customize background using our advanced background options. You can set Color, Image or Video background and depending on which background type you choose appropriate options will be available for you, so you can customize colors, patterns, image position, background motions and much more of background options.

Slider

In this section you can set slider on the top of portfolio post. With THEMO you have two slider plugins available, so firtsly you should decide which of those plugins you are going to use on the page, and then you can choose one of sliders which you have created.

If you want to display slider right below the header, you have to disable page title area.

Footer

In this tab you can override global footer for particular portfolio posts. You can enable or disable footer and copyrights, choose footer type and if you decide to use Standard footer then you can freely customize footer layout, background, colors and copyrights area.

Sidebar

In this tab you can override global sidebar options for particular portfolio posts. You can enable or disable sidebar, change sidebar position, choose different sidebar from dropdown and customize sidebar colors.

Scripts and styles

In this tab you can disable particular plugins which you do not use on this portfolio page. You have to notice, that for each activated plugin several scripts and styles are loaded while page loading. As a result, each plugin increase page loading time but you can disable unnecessary plugins on particular pages to reduce loading time.

Portfolio list/showcase

THEMO includes The Grid plugin which is one of the best designed plugins for post displaying. The Grid allows you to display your work as portfolio list on any page you wish. It has many built-in, ready to use grids with beautiful skins. The Grid is easy to use and fully customizable.

Naturally, before you start to customize grids for portfolio you should create several Portfolio single posts and of course you have to activate The Grid plugin (see Plugins section in this documentation to learn how to install required plugins). If you already did that, follow below steps to learn how to customize and set portfolio grids.

  1. In WordPress admin, navigate to The Grid section and you will be moved to grids list.

  2. If it is your first visit in The Grid click Create a new Grid button or if you work with Themo main demo you should already have sample grids so you you can choose one of them.

    If you don't have any grids on the list and you do not want to create a new one from scratch then you can easily import grids from Themo main demo or grids built-in in The Grid plugin. To do so, in WP admin navigate to The Grid/Import_Export section. At the bottom of the page you can choose which demo grids you want to import:

    • To import The Grid demo data simply click Read demo content button and when the grids list appear select which grids you want to import and click Import selected grids button and grids will be imported, so you can return to grids overview and start customization.

      See plugin demo content on The grid demo site.

    • To import Themo demo grids you should firstly download package with our predefined grids from this directory: Demo grids. Extract zip folder, go to The Grid Import/Export tab and in Import section choose downloaded demogrids.json file and click Read file button. When the grids list appear select which grids you want to import, click Import selected grids button and grids will be imported. Now, you can go to grids overview and start customization.

      See demo grids on The grid demo site.

  3. From overview list choose grid which you want to use and click Edit button.

  4. The most important options for this presentation are in Source tab, so you should start with it. In Content source section choose Portfolio from dropdown and when you do this, you can filter your portfolio posts by categories, certain status, author and more.

  5. When you already defined source for the grid you can customize grid appearance. As you see each grid has a lot of options, you can customize almost everything. All options are well described so you handle it without a problem. You can always see The Grid documentation to learn more. At any time you can click Preview button to see how your grid looks.

  6. When you finish click Save button and your grid is ready to use.

  7. Now, you can add customized grid to any page you wish. In WordPress admin edit that page, add The grid shortcode and in shortcode editing window choose your grid from dropdown.

When you add The Grid shortcode to the page, you can set that page as main portfolio page. Navigate to Customizer, to Portfolio section, expand Settings sub-section and enter link to your main portfolio page.

Some skins contain categories informations which are linked to categories pages. THEMO does not support archive pages for portfolio, so you should make quick fix to block categories linking. Simply edit the grid, navigate to css/js Code tab and paste into custom css textarea this code:

.tg-cats-holder a {pointer-events: none;}

When you do this, categories labels will be used for filters and information purposes, they will not be linking to categories pages.

Ajax card

Modal window is an extra feature added to The Grid. It is available only in THEMO, so you do not find it in plugin documentation. Modal window allows you to display portfolio items in ajax card instead of standard portfolio card (single post/page).

Ajax card has unique design, title area with ganeral portfolio details is displayed on the left side and content displayed on the right side. Ajax card has also some extra options which spice up portfolio showcase, like next and previous items hover.

To set Ajax card functionality for particular portfolio grid follow below steps:

  1. In WordPress admin panel navigate to The Grid tab.

  2. From grids list choose and edit grid for which you want to enable ajax cards.

  3. Go to Ajax card tab and in General settings enable Ajax card using switcher.

  4. In Effects section you can choose entry and exit effects for ajax card and define theirs timing.

  5. Click the Save button and it's done.

TEAM

THEMO gives you advanced Team options which allows you to create single posts for as many company members as you wish. Using our advanced member post options you can create different, unique designs for each member post. You can present your team on any page using team shortcodes and decide to display each member details as a single page or as an ajax card.

See sections below to learn how to create member posts, customize posts appearance and how to add team members to the page.

Creating member post

To create Member single post follow below steps:

  1. Navigate to Team section in WordPress admin panel and click Add new.

  2. Enter member post title.

  3. Upload member feature image.

  4. Use Team options to customize member post appearance. With Themo you can display member details as a classic page and/or as an ajax modern card. Depending on which way you choose you should customize options in appropriate setions. Member info section refers to both, Ajax card section refers only to Ajax card, other sections refer only to classic member page (see below Member post options for details).

  5. Build member post content using Visual Composer page builder with all THEMO shortcodes.

  6. Click Publish button to save member post.

Once you add and customize member post you can copy this post using Clone function available on the team members list in WP admin panel. You get exactly the same member post design and all you need to do is to change content, featured image and few general information like name and position.

Member post options

Member post options are part of Multilevel management. It means that initial settings are taken from Theme options (from Customizer) and you can freely override those settings. However, your changes are not irreversible. Even if you make some changes in Team options you can simply restore initial settings - just choose Default values in dropdowns or leave empty textfields and you return to settings from Theme options.

THEMO gives you dozens of options so you can create unique design for every single member post. For maximum convenience all options are logically organized into sections which correspond with most important elements on the page: Layout and Background, Header, Page title, Footer, Sidebar, Slider.

With Themo you can display member details in two ways: as a Standard post and as modern Ajax card. Using team shortcodes you can choose linking method for particular member to display member details as standard post or as an Ajax cards.

TEAM STANDARD, it is a standard single post, so you can customize main member info and all page elements like layout, background, header, page title, footer, sidebar and slider using options in appropriate tabs.

AJAX CARD, it is an popup card with title area placed on the left side and content on the right side. Notice, that Ajax card doesn't have main page elements like header, footer, sidebar etc., so to customize its appearance use options available in Member info tab and in Ajax card tab.

Member info

In this tab you can set general information about member: Name, Position and social networks links. All options available in this setion affect both: Standard post and Ajax card.

Ajax card

In this tab you can customize title area for member ajax card. All options available in this section affect Ajax card only. You can customize title area background, choose content alignment, define font sizes and colors for member name and member position, pick share icons color and customize navigation colors.

Lay and background

In this tab you can override global layout, pick body font color (if you decide to use classic editor) and define top and bottom paddings for particular member posts. You can also override global background, separately for wide and boxed layouts. You can set Color or Image background and depending on which option you choose appropriate advanced options will be available for you.

Header

In this tab you can override global header for particular member posts. You can enable or disable header, change header type and choose different menus for main and mobile headers. Depending on which header type you choose you can also use options in appropriate sub-sections to customize chosen header.

Full sets of headers options are available in Customizer. Besides global header, you can customize there all header types and all header styles separately, so here in Team options you can simply pick suitable header type and its style.

Page title

In this tab you can override global title area for particular member posts. You can enable or disable title area, enable featured image, change font sizes and colors for member name and position, choose content alignment, customize navigation and of course customize background using our advanced background options. You can set Color, Image or Video background and depending on which background type you choose appropriate options will be available for you, so you can customize colors, patterns, image position, background motions and much more.

Slider

In this section you can set slider on the top of member post. With THEMO you have two slider plugins available, so firtsly you should decide which of those plugins you are going to use on the page, and then you can choose one of sliders which you have created.

If you want to display slider right below the header, you have to disable page title area.

Footer

In this tab you can override global footer for particular member posts. You can enable or disable footer and copyrights, choose footer type and if you decide to use Standard footer then you can freely customize footer layout, background, colors and copyrights area.

Sidebar

In this tab you can override global sidebar options for particular member posts. You can enable or disable sidebar, change sidebar position, choose different sidebar from dropdown and customize sidebar colors.

Scripts and styles

In this tab you can disable particular plugins which you do not use on this member page. You have to notice, that for each activated plugin several scripts and styles are loaded while page loading. As a result, each plugin increase page loading time but you can disable unnecessary plugins on particular pages to reduce loading time.

Team showcase/shortcode

With Themo you can present your team or particular members wherever you wish. Themo gives you two Team shortcodes: Team member and Team member advanced. Once you create and customize Member post you can add Team member shortcode to any page. To do so, in WordPress admin edit the page, using Visual Composer add Team member shortcode to the column, edit shortcode, choose one of created Member posts, decide if/how shortcode will be linking to Member post, customize other options and save changes.

Ajax card

Ajax card (Modal window) is an extra feature added to Team shortcodes which allows you to display team member details in ajax card instead of standard team member card (single post/page).

Ajax card has unique design, title area with ganeral member details is displayed on the left side and content is displayed on the right side. Ajax card has also some extra options which spice up team presentation, like next and previous items hover.

TIPS / EXTRAS

Work on localhost

If you work on local host you have to increase max_nesting_level in php.ini file, so follow below steps to learn how to do this:

  1. Find your php.ini file and open it.

  2. Find xdebug and add at the end this line: xdebug.max_nesting_level = 256

  3. Save changes, and reboot your server.

For developers

Less compilation

If you are going to modify less files, you may want to compile your changes on your site. There is an easy way to do this. Add this phrase: define('IDEOTHEMO_DEVELOP_MODE', true); to wp-config.php file. Once you do this, you will be able to force less compilation manually on any page by adding /?less/ phrase at the end of the page link and load the page.