General Information

We would like to thank you for purchasing Medio!

This documentation file helps you to understand the whole theme concept and how it works. You should read all sections of the file before start your work. Here have multiple detailed explain of elements, theme sections and included video tutorials.

If you have any questions that are beyond the scope of this help file, please check out and search for Forum page.

After that you still can't find the solution yet, please leave a ticket on Support system then support agents help your issue.

WordPress Information

Surely you have already installed WordPress on your server. If you don't installed it yet and you are new to WP and have problems installing it, you might want to check out following tips.

About WordPress
Detailed instruction about WordPress
Installing Tutorials
Installation tutorial by WordPress
Instructional Video
Video lessons by Woo Themes
Getting Started
WordPress Tips for Beginners
WP101 Basix Training
Some great videos from WPTuts on WordPress

What’s Included In Package

You need to download theme files after you've purchased the it. Following image describes downloads section of the item and you have 2 download choices.

Visit Downloads menu from your profile dropdown.

Download Package

 

Please click on Download (green) button and choose your options.

Download Package

 

Downloading All Files gives you a all-files.zip file with all the content listed below

Download Package
Documentation
This is costumer's handbook. Obviously, If you can reading this file, you're open this file :)
DummyData
You have an One Click option for import demo data. But if you need detailed xml files please pick up those here. You should read about how to use it from Demo Data part of this document.
Medio.zip
You can use this file for install function of built in WordPress.
Medio-Child.zip
Child theme. Please make your file changes in it. And this child theme helps you to keep your changes in it even updated main theme continually. You should read more details about child theme here.
Changelog.txt
Contains changes history, change descriptions, date and modified files list.

Installation

You can either choose to upload the theme via WordPress upload function or via ftp to your site.

1. Via WordPress theme uploader (recommended)

Step 1
Login to your website
Step 2
Go to Appearance -> Themes
Step 3
Click on Install Themes tab
Step 4
Click on Upload link and Browse to the Medio.zip file (it is located in the folder you've downloaded from ThemeForest).
Step 5
Click Install Now button
Step 6
Then you see Medio settings page right side on Dashboard menu section.
Step 7
Now you are ready to go. Create your new site and control it.

Note

Following tutorial videos are recorded on an another theme but all the steps and instructions are identical.

2. Via FTP client

Step 1
Login to your hosting via FTP client application (such as FileZilla and CuteFTP)
Step 2
Go to wp-content -> themes directory
Step 3
Upload Medio folder (uncompressed) into this directory
Step 4
Refresh Appearance -> Themes of your dashboard and Activate the theme.

Initial Settings

After the activation you see this notice at top of your dashboard. This theme requires those three additional plugins and you need to install those.

Please click on Begin insalling plugins.

Envato Toolkit
The Envato WordPress Toolkit enables you to access your Envato WordPress purchases from within your WordPress Dashboard. It allows you to not only install themes, but also to receive update notifications and update automatically, just like regular WordPress themes.
Visual Composer
The most advanced PageBuilder Plugin that is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required
Themeton Addon
This plugin an optional plugin but highly recommended for your theme. It includes multipe shortcode on your Visual composer layout. Post Types, VC elements and Multiple blog layouts

Note

Following tutorial videos are recorded on an another theme but all the steps and instructions are identical.

Configure Envato Toolkit Plugin

Envato Toolkit plugin requires MarketPlace username and API Key. You can get API key from your Settings tab of ThemeForest account. Lets provide those infomation and get theme update anytime and easily.

Step 4

Demo Data

One Click: Demo Data Import

You should click on Appearance => Import Demo Data of your dashboard. The action will set a few important tasks including selection of Home page, Main navigation setting and Sidebar widgets when you click on Import Demo Data button.

Please make sure your have installed the One Click Import plugin that we are recommended with the theme.

Demo data

Please wait for a while until imports all the content.

 

Manual: Full content Demo site setup

Previous option helps you to include minimized demo content on your site reason for quick include. But you can have full demo data with regular XML data imports.

  1. Go to Tools → Import
  2. Choose WordPress from the list.
  3. Upload the demo content.xml using the form provided on download.
  4. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
  5. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.
  6. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus are imported. You will need assign the menu a theme location & you’ll need to configure widgets. This is a limitation of WordPress’ import system.
Medio demo data folder structure

Do you have a problem with import slider?

Please watch this short screen record and import sliders manually. You can find slider archives in dummy-data folder from your downloads.

Update Instructions

Note

Please make sure you backup your existing theme folder before updating. Additionally we recommend performing the update on a development site before making it on your live site.

Via Envato Toolkit Plugin (recommended)

Hope you have provided your account information in Envato Toolkit plugin. If you go to the plugin page, you'll see similar to following image. Let's click on Update automatically link at right bottom. This is a most efficienat and easy way to integrate latest verion on your site.

After clicking to auto-update, you’ll see the confirmation that everything worked correctly.

Via WordPress theme uploader

Go to the Appearance => Themes and activate another theme than Medio such as TwentyTwelve, TwentyThirteen or Medio child theme. Delete the old version of the theme because folder name existing error comes up when we try to install it without deletion. Then install the theme again as you see early in this documentation.

Via FTP client application

Usually updating a theme means replacing the old files with the new ones. You can see changelog.txt file from the new download archive and you can get updated files list as modified/added and deleted. Upload and overwrite those files on your theme directory.

If theme changed lots of files and you really hard to collect changed files, there is a better way to do it when it comes to WordPress themes.

WordPress treats two version of the same theme as different themes. That is, if you have Medio v1.2 and v1.3 in your wp-content/themes folder they are treated as two different themes independent of each other.

That means you can have multiple version of the same theme installed on your blog. So whenever there is a new version of your theme available, instead of replacing or deleting the files of the older version follow this procedure.

  1. Try to upload new theme archive to the site
  2. If the folder name of the new version clashes with the old version, rename the folder of new version.
  3. Upload the new version to your wp-content/themes folder via FTP or through the interface provided by your web host or by using the upload feature in WordPress.
  4. Activate the new version from your dashboard.

The main advantage of following the above procedure is you can quickly switch back to the old version of the theme if you find any problems with the new version or if it clashes with any plugins you are using.

Theme Options

Note

Following tutorial videos are recorded on an another theme but all the steps and instructions are identical.

The theme has many options those help you to control & customize your site. You have to know only where your desired options exist and how they are capable of. Please take some time to navigate through each tab and read options' description.

Group Class Description
General Brand Primary Color The color that styles active menu, links & hover, pagination and much. But if the color doesn't fit for your area, you can set correct one at specific areas. Those customizations won't be overwritten by this.
Font: Titels and Metas Please select your Titles, and meta texts font from 600+ google fonts.
Font: Content TextContent text and small titles. 
Logo ImageChoose you logo image and see live result. If you think your logo image bigger at top, you can edit directly the image from media library popup.
Logo WidthDon't you remember? Just click on your logo image and see the image details from media library.
Favicon16x16, PNG/ICO/JPG
Login Page Logoup to 274x95px
Header
Header style Here is the 2 section of header style. Default and Background color you can choose your header style.
Header Height (px)It increases header padding by difference between logo height and this value. But it doesn't show any result if you set lower value than logo height.
Header Background Color You can change your color of header background.
Menu color You can change your menu color here.
Meni active color When you click on menu it will show active color.
Page Title Area 
Title Top Space Here is the you can insert your title top space.
Title Bottom SpaceHere is the you can insert your title bottom space.
Title colorHere is the you can select color here.
Background ColorHere is the you can select of background color.
Content
Text color This setting is you can select text color here.
Background colorThis setting is you can select background color here
Heading ColorThis setting is you can select header color here
Footer
Enable FooterOn/Off
Footer StyleHeres is you can select footer column here.
Footer logoHere is you can upload your footer logo.
Footer Content Here is the type your content of footer
Footer Background color You can select your color and change footer background color.
Sub Footer Text color Here is you can change your sub footer text color.
Sub Footer Background color Here is you can change sub footer background color.
Post TypesPost Options 
Post CommentsOn/Off
Next/Prev linksOn/Off
Page Options 
Author BoxOn/Off
Page CommentOn/Off
Portfolio Options 
Portfolio LabelUse this field to rename your portfolio custom post type.
Portfolio SlugChanges the default slug for this post type.
Related PostsOn/Off
CommentOn/Off
Next/Prev linksOn/Off
Portfolio Main PagePlease select here main portfolio page. It's important for your breadcrumb.
Portfolio SidebarYou can set here default portfolio sidebar area.
ExtrasExport/Import 
Custom CSS
General CSS
Tablet CSSScreen width between 768px and 991px
Wide Phone CSSScreen width between 481px and 767px. Ex: iPhone landscape.
Phone CSSScreen width up to 480px. Ex: iPhone portrait.
Widgets You can add your widgets here to sidebars and footer columns.

Page Builder : Visual Composer

WPBakery Page Builder is easy to use drag and drop page builder that will help you to create any layout you can imagine fast and easy. No coding skills required!

Access Frontend editor (Inline editor) or Backend editor at any time. Yes, WPBakery Page Builder comes bundled with 2 types of editors allowing you to choose your preferred view. Create your WordPress website with backend schematic editor or move your page building process to frontend and see your results live.

Not only that, WPBakery Page Builder gives you full control over responsiveness. Create responsive websites automatically or adjust preferences you need to ensure your WordPress website looks perfect on mobile or tablet. WPBakery Page Builder has everything it takes to create a responsive website. Save your money on purchasing different devices with WPBakery Page Builder Responsive Preview available out of the box.

Note

Following tutorial videos are recorded on an another theme but all the steps and instructions are identical.

Visual Composer: Visibility configuration

After the installation, you can configure something on following place for Visual Composer. You might want to allow VC for your custom post types initially.

Visual Composer Role changes

Additional VC elements

Visual composer has tons of elements that presents content view. But our theme has more advanced elements that enriches this beautiful theme. Please hit on the tab and find elements and use them for your need. Every element has a purpose and detailed options. You can see their live result on the demo pages. Enjoy :)

Visual Composer Role changes

Predefined blocks

We are offering 400+ predefined blocks those used on all our demos which will save your time a lot. Please follow image instruction and use them often. I really hope this feature will like you definitely.

Visual Composer Role changes

Page Options

You'll find Page options at bottom of your main editor. Please read the option name and description and use them for customize your every single page.

General Page Options

Header Builder Instruction

Note

Please make sure you're enabled Visual Composer page builder on your builder post types including Header post type.

Visual Composer Role changes
Step 1:
You can find Header post type at left of your dashboard. A header post deletates one header area and you can have multiple header layouts for your site.
Step 2:
Build your header layout as you want. All the Visual Composer elements and features will work fine on your header including Custom CSS feature.
Step 3:
Here you can set section option including behaviour and background.
Step 4:
Here on next tab you can set Menu and Dropdown menu styling for your taste.
Step 5:
After you've configured up your Header layout, please go to the Header tab of the Theme Options. On this area, you can set Default Header for your whole site.
Step 6 (optional):
Luckily you have an option to set your pages with different headers. Edit your selected page or post and set different header option on Page options section as described in the figure. Hope you like it :)
Header Options Header Options Header Options Header Options Header Options

Revolution Slider

Hope you are familiar with this powerful slider plugin. If you are not, please read some of important usages of the slider documentation.

Please import demo sliders one by one. You can find slider archives in dummy-data folder from your downloads.

One Page Setup

Step 1:
Open your desired page and declare your page sections as a part of your one page on Visual Composer rows.
Step 2:
Add unique slug name on your Row ID field.
Step 3:
Go to the Appearance=>Menu options and add same number of custom links to your menu.
Step 4:
Add slug name that prefixed hash (#) char on the URL field and set label name.
Step 5:
Add smoothscroll class name on everysingle element that you added. This class allows smooth scrolling to your desired section when click on menu item.
Step 6:
Use the menu on your header layout and show on your one page top.
One Page Options One Page Options One Page Options One Page Options

Contact Form

Our theme is compatible with Contact form 7 and we've built every contact forms on this beautiful plugin. So please install the plugin and put selected markup (check dummy-data/contact-forms folder) format on the Form field of your form. And place your contact form shortcode whatever you want.

Subscribe form

All of our subscribe forms come with MailChimp for WordPress plugin. Install the plugin and prepare markup structure as we described (check dummy-data/subscribe-forms folder) . Then add a widget instance on footer, sidebar area or whatever you wish.

CSS helper classes

Sometimes hard to implement small css features by predefined options. Then we've prepared some helpful classes those can used on any custom places and style your content. Most of page builder elements have Extra class field and you can allow following classes on them.

Class name Description
.color-brandStyles text color by current brand color
.color-brand-bgBrand color background
.text-whiteSets text color as white
.text-graySets text color as gray (#ffe8e4)
.text-lightSets text color as white
.text-darkSets text color as black
.text-thin, .text-100Sets text font weight 100
.text-light, .text-300Sets text font weight 300
.text-regular, .text-400Sets text font weight 400
.text-medium,.text-500Sets text font weight 500
.text-semibold, .text-600Sets text font weight 600
.text-strong, .text-700Sets text font weight 700
.text-heavy, .text-800Sets text font weight 800
.text-black, .text-900Sets text font weight 900
.uk-text-centerText center
.uk-text-rightText right
.uk-text-leftText left
.float-leftFloat left
.float-rightFloat right
.m0, .m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10Disables element margin. .m3 presents 30px margin.
.mt0, .mt1, .mt2, .mt3, .mt4, .mt5, .mt6, .mt7, .mt8, .mt9, .mt10Disables element margin. .mt3 presents 30px margin top.
.mb0, .mb1, .mb2, .mb3, .mb4, .mb5, .mb6, .mb7, .mb8, .mb9, .mb10Disables element margin. .mb3 presents 30px margin bottom.
.p0, .p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9, .p10Disables element padding. .p3 presents 30px padding.
.pt0, .pt1, .pt2, .pt3, .pt4, .pt5, .pt6, .pt7, .pt8, .pt9, .pt10Disables element padding. .pt3 presents 30px padding top.
.pb0, .pb1, .pb2, .pb3, .pb4, .pb5, .pb6, .pb7, .pb8, .pb9, .pb10Disables element padding. .pb3 presents 30px padding bottom.

Note

Please check less/helpers.less file and get more class names.

Sources and Credits

Thank you to all who developed following projects/products. We really appreciate your support and time. We definitely couldn't do this template without you. We wish you all the best.

Special thanks to:

Images

Open Source Projects

Premium Projects