Sept. 19, 2016
WordPress 4.7 +
1. Install Your WordPress Theme
When you purchase any of our themes you will receive an e-mail with a link for download, once you made the download you will have a big folder in .ZIP format (This in the case you have purchased our themes on the following marketplaces; Mojo-Themes / Creative-Market / Visualmodo Store) with something like 9 MB of size on the marketplaces with all the theme content called ‘ThemeMaster.zip’, on this folder you will see the following files; Demo content, Theme files, License and Documentation. Please don’t try to install this ThemeMaster.zip file on your WordPress, if you try you will see an error message because it’s the row-folder.
To install your theme you need to open this big folder ThemeMaster.zip with 9mb of size, found and open a file called ‘Theme-Files” and in this file you will see 2 files, theme.zip with something like 7.4.mb of size in .zip format and theme-child .zip, you need to extract / remove / unzip the theme.zip with 7.4. All you need to do is click on this file and drag it and drop this file on your desktop area, it will unzip the theme and you will get the ready-to-install file.
After this you need to login on your WordPress admin area and go to ‘Appearance’ Themes, Add new, Upload Theme, Select file, select the theme.zip file that you have unzipped before and have something like 7.4 mb of size, click on the upload theme and active the theme. Other way to install your theme is using the FTP for it.
In the case your purchase our theme on Mojo-Marketplace you will receive different files. The 4 following files (Demo Data / Main Files / Help File / Child Theme) already separated and unzipped (You will not receive the ThemeMaster.zip with all content together on mojo-marketplace) and all you will need to do is download the ‘Main Files’ This is the ready to upload on WordPress file and all you need to do after download this ‘Main Files’ folder is go to your WordPress Dashboard > Appearance > Themes > Add New > Upload Theme > Select the ‘ThemeName.zip’ downloaded folder and upload it on your site and active your theme.
In the case you don’t want to install your theme and have any difficulty You are FREE to contact our support on https://visualmodo.com/account/login/ or e-mail us on email@example.com and ask one of our support crew to enter on your site and install your Rare WordPress theme for you, it’s easy, fast and free for all the Visualmodo clients. Just make sure you send us on this contact the right info, we will need your login information / site url and a print-screen / screenshot from your theme purchase with date.
2. Install Your WordPress Plugins
All the Visualmodo clients gain third-party plugins on the theme. As soon as you active your theme on your WordPress site you will see a message in the top of your back-end screen asking to you start to install your plugins, To install if all you need to do is click on the button for it, In the case you don’t want to use some plugin you just can disable the message because all our theme work without any plugin however you are free to use it in the case you want to.
Again, in the case you don’t want to install your plugins and have any difficulty You area FREE to contact our support on https://visualmodo.com/account/login/ or e-mail us on firstname.lastname@example.org and ask one of our support crew to enter on your site and install if for you, it’s easy, fast and free For all the Visualmodo clients. Just make sure you send us on this contact the right info, we will need your login information / site url and a print-screen / screenshot from your theme purchase with date.
3. Theme Options
In this area of your wordpress you will be able to add your logos, change the fonts, place some custom codes, change your site global layout and change your footer text header options and all your site layout using our mastergen wordpress theme. This area works in the same way as ‘Customize’ under ‘Appearance’ tab normally used on free wordpress themes however the theme options have much more tools.
3.1 Header Options
In this area of your theme option you will completely edit your header. In this are you will be able to upload your company logo place icons on your menu like cart icon for login info and size / layout options settings.
3.1.1 Top Header
In this area of your theme option you will be able to enable another area that will b showed over of your header menu area and choose columns, in this columns you will be able to apply widgets, a top menu widget, texts or social icons for example. To do it set the option as ON and choose your columns layout, after that save your changes and go to your wp Appearance > Widgets > and apply widgets in the tabs called ‘Top Header’.
3.2 Footer Options
In this area of your site you will be able to select your footer text, columns, add a background image or color and layouts. In the case you want to remove the Visualmodo default text form your footer ‘Powered by WordPress’ simply set/type your own signature text on ‘Footer Copyright Section Text’ following the attachment image.
3.3 Post Types
In this area of your theme options you can disable / enable some parts of your theme that you don’t want to use. On your theme you have some custom posts styles as; Portfolio – Team – Knowledge Base, if you will not use this posts you can disable this part of your theme framework and low your theme size.
3.4 Typography Options
In this theme options area you will be able to change all the fonts on your site using the 600+ google fonts and changing the size and the layout of it, to start this edition you need to select ‘ON’ in the Use Custom Fonts?’ question. In the case you do not set ON in the very first option of this pinel the other changes will not have effect so please follow the attachment image. You also will be able to set your font line spacing, weight, line height and font size.
3.5 Color Options
In This area of your theme options you will be able to edit / change colors of your site, the site main color is called as ‘Global Color’ and you also can change the footer color and header color for light or dark colors.
3.6 Custom Codes
In this area of your theme options you can apply custom codes to customize your website in the way you want, you can apply a google tracking codes, a CSS code, Js codes and HTML codes. Make sure you have some knowledge base on this codes before apply something.
3.7 Portfolio Options
In this area of your theme options you will be able to choose some options about your Portfolio posts template, change main page slug, url.
3.8 Layout Option
In this are of your theme option you will be able to enable or not this theme feature (boxed layout), in the case you want to use a boxed site style you need to select ‘On’ in the first tab question, and you will be able to choose image, colors and layout. In the case you don’t want to use it just stay this options in the ‘Off’.
4. Using Theme Shortcodes
The best way to create amazing pages with the theme is using the theme shortcodes, in this area we will show you how to use it. you will be able to use this shortcodes to build pages, posts or galleries. We build this shortcodes to add more features over the theme page builder.
You can use this shortcode to add columns on your content, to use is all you need to do is select the layout you want, delete the text between the columns open code and columns close code. Here is and exmaple to columns code: 1/3 + 1/3 + 1/3
Weight loss fast and easy.
Strength gain and definition.
Gain speed and endurance.
Living longer and healthier.
David Will – 3 Years Experience
Lindsey Lary – 5 Years Experience
Jennifer Ada – 4 Years Experience
[mastergen_graph_container][mastergen_graph Title=”Difficult Level” Percent=”65″][/mastergen_graph_container]
4.2 Sliding Graph
With this shortcode you can add a graph on your page, to use it you need to add a graph container shortcode, delete the text between the open and close codes and place a sliding graph iten between it. Here is and example of sliding graph codes
[mastergen_graph_container][mastergen_graph Title=”Difficult Level” Percent=”65″][/mastergen_graph_container]
4.3 Social Icons list
With this shortcode you can add social networks icons on your pages, do use it yo uneed to click on this shortcode and type the name of the network a “,” and a url and a “/” to add other network on the list. Here is a example code:
This shortcode can add a map on your page, to do it you need to open the shortcodes list and select the map one, a window will open to to you type a location and the zoom in map and after is just to click on ‘ok’. and theme will add a shortcode like this one your page [mastergen_google_map]
With this shortcode you can add a divider space on your page, to do is just click on the ‘divider’ shortcode, a window will open to you type the space in px and the theme will apply it on a page when you click on ‘ok’ [mastergen_divider height=”80″]
4.6 Border Divider
The same way to use this shortcode however this one apply a line with space in your page. [mastergen_border_divider]
4.7 Toggle And Accordion
With this shortcode you can add a toggle or an accordion areas on your site, to see better how to do it pleace take a look on this video. Here is an example of this theme shortcodes:
[mastergen_toggle collapsable=”no” caption=”Trainer”]Dummy text[/mastergen_toggle]
[mastergen_toggle collapsable=”no” caption=”Design”]Dummy text[/mastergen_toggle]
[mastergen_toggle collapsable=”no” caption=”Developer”]Dummy text[/mastergen_toggle]
[mastergen_toggle collapsable=”yes” caption=”Trainer”]Dummy text[/mastergen_toggle]
[mastergen_toggle collapsable=”yes” caption=”Design”]Dummy text[/mastergen_toggle]
[mastergen_toggle collapsable=”yes” caption=”Developer”]Dummy text[/mastergen_toggle]
With this shortcode you can add buttons on your site, do do it oyu just need to open the shortcodes list, click on buttons, a window will open to you type your text, url and select the button layoout. Here is some buttons examples:
[mastergen_button text=”Button Example” url=”https://visualmodo.com” target=”_self” size=”btn-small” style=”” color=”grey”]
[mastergen_button text=”Button Example” url=”https://visualmodo.com” target=”_self” size=”btn-medium” style=”” color=”grey”]
[mastergen_button text=”Button Example” url=”https://visualmodo.com” target=”_self” size=”btn-large” style=”” color=”grey”]
4.9 Icon Box
With this shortcode you can add a big clcickable icon on your page, to do it oyu need to open the shortcodes list, select the icon box one and add a icon box container, delete the text between the open and closer codes and add a icon box iten. Also you can add new icon boxes, to do it oyu need to open your theme file on your host and found a shortcodes to place more one. Here is an example of a icon boxes codes:
[mastergen_icon_boxes_container] [mastergen_icon_box icon=”wp-content/themes/mastergen/images/icon-boxes/bench-press.png” url=”https://visualmodo.com/themes/mastergen” target=”_self” caption=”Bench Press”] The bench press is an exercise of the upper body. [/mastergen_icon_box] [mastergen_icon_box icon=”wp-content/themes/mastergen/images/icon-boxes/halter.png” url=”https://visualmodo.com/themes/mastergen” target=”_self” caption=”Workout”] Enhances physical mastergen and overall health and wellness. [/mastergen_icon_box] [mastergen_icon_box icon=”wp-content/themes/mastergen/images/icon-boxes/pilates.png” url=”https://visualmodo.com/themes/mastergen” target=”_self” caption=”Pilates”] Help build flexibility, muscle strength, and endurance. [/mastergen_icon_box] [mastergen_icon_box icon=”wp-content/themes/mastergen/images/icon-boxes/water-botle.png” url=”https://visualmodo.com/themes/mastergen” target=”_self” caption=”Water”] Water is also important to mastergen and fat loss for several reasons. [/mastergen_icon_box] [/mastergen_icon_boxes_container]
For More info please see our Knowlmastergenbase.
The same way to use the icons boxes however you don’t need to add a container. Here is some icon code. [mastergen_icons icons=”wp-content/themes/mastergen/images/icons/glyphicons_009_magic.png”]
4.11 Team Member
To use this great shortcode you need to open the list and select the team shortcode, a window will open to you type a name, position, image by url, type something about it and the social networks. Here is an example for a team.
[mastergen_team_member member_name=”Lisa Rock” member_position=”Workout Trainer” member_img_src=”http://theme.visualmodo.com/mastergen/wp-content/uploads/sites/3/2013/03/trainer-woman.png” member_social_list=”Twitter, , Facebook, , Google+, ,YouTube, , Vimeo” member_columns=”2″]
With 6 years experience Lisa Rock is a great professional in the mastergen area with specialization classes in pilates, yoga and jump. She graduated from one of the most respected colleges in the country and will be at your disposal so that you come into our mastergen. and she will do the best for you.
[mastergen_team_member member_name=”Arnold King” member_position=”Workout Trainer” member_img_src=”http://theme.visualmodo.com/mastergen/wp-content/uploads/sites/3/2013/03/trainer-man.png” member_social_list=”Twitter, , Facebook, , Google+, , YouTube, , Vimeo” member_columns=”2″]
With 9 years experience Arnold King is one of the most respected names in the mastergen area. with specialization focused on training mastergen, and he is waiting for you in our mastergen to help him and teach him everything he knows. and he will do the best for you and your body and your health.
This shortcode works in the same way as team member one however with other fields to you type content, here an example of it.
[mastergen_pricing pricing_name=”Standard” pricing_value=”30″ pricing_local_currency=”$” pricing_text=”Billed monthly or $5 day-to-day.” pricing_columns=”2″ pricing_advantages=”You have permission to go to the mastergen 6 times a week,You will have an entire tracking your physical development,You can go to 2 classes per day”][/mastergen_pricing]
[mastergen_pricing pricing_name=”Stronger” pricing_value=”58″ pricing_local_currency=”$” pricing_text=”Billed monthly or $8 day-to-day.” pricing_columns=”2″ pricing_advantages=”You have permission to go to the mastergen all week,You will have an entire tracking your physical development,You can go to as many classes as you want per day,You have everything monitored diet”][/mastergen_pricing]
4.13 Gallery (Portfolio)
This shortcode have a complete tutorial with video to show you how to use it, please take a look on our Knowlmastergenbase. The gallery shortcode [mastergen_gallery title=”mastergen Theme Gallery – 4 Columns” cat_id=”34″ no=”-1″ show_filters=”yes” columns=”4″] Before you try to apply this shortcode on your page you need to add some post on the gallery / portfolio area of your wordpress dashboard, and place this portfolio posts in a sub-category of a main category to get the portfolio ID, for more info please see this Knowlmastergenbase.
This shortcode let you create a Partners area with logos and columns, Here is an example of grid code:
[mastergen_grid grid_columns=”1″]Your Content[/mastergen_grid]
NOTE: Case you want to copy this please post this code on the ‘text’ tab of your wordpress toolbar, don’t post it on the visual one. For more info please see this tutorial on Knowlmastergenbase.
4.15 Fullwidth Container
To see how to create pages with background images and background color please take a look on this tutorials https://visualmodo.com/knowledgebase/fullwidth-container/. To use this shortcode you need to select ‘Yes’ on the option called ‘Full Width Page’ in the custom fields area of your wordpress back-end page editor and after this option selected you will need to use a full width shortcode, please see this tutorial. Here an example of full width shortcode:
[mastergen_fullwidth_container fullwidth_container_img_src=”http://theme.visualmodo.com/gym/wp-content/uploads/sites/4/2013/04/outlets.png” fullwidth_container_img_position=”repeat” fullwidth_container_img_local=”center” fullwidth_container_color_overlay=”” fullwidth_container_color_scheme=”light” fullwidth_container_padding=”60px” fullwidth_container_border=””]
[mastergen_title_subtitle title=”GALLERY” subtitle=”Check out or gallery and click to see them” align=”left” color=”light”]
[mastergen_gallery title=”” cat_id=”32″ no=”8″ show_filters=”no” columns=”4″]
To build a footer you need to place information in three areas of your wordpress: 1 – Theme Options, Footer Options to apply text, 2 – Appearance, Menus, create a menu with pages and save it as ‘footer menu’ and 3 – Appearance, Widgets and apply widget on three tabs, footer 01, footer 02 and footer 03. Please take a look on this tutorials to see how to build a footer with widgets, menus and text.
This tutorial will show you to add and place widget on a sidebar, to do it you need to go on the page editor, Custom Fields page area and select a sidebar, after this you need to go on Appearence, widget, and place widgets on the sidebar tabs. In the case you want more widgets on your sidebar our theme works great with plugins for it and wordpress have a lot of free plugin to apply more widgets.
9. WordPress Plugins
You have third-party amazing plugins on the theme pack that you gain for free while using your Visualmodo themes however the way you use the plugins is not about our responsibility because we are theme developers, so we suggest you take a look on the plugins devs sites and search for plugins docs and video tutorials. You are free to use or not any plugin, your theme will work normally without it.
Revolution Slider WordPress Plugin http://revolution.themepunch.com/documentation/ Video tutorials playlist at https://www.youtube.com/watch?v=iyuxFo-WBiU&index=7&list=PLSCdqDWVMJPPDcH_57CNZvLckoB8cimJF
Timetable Responsive Schedule For WordPress: http://codecanyon.net/item/timetable-responsive-schedule-for-wordpress/7010836 NOTE: This is not a tutorial page, it’s a sale page but you don’t need to buy it because you already have it on the theme pack and in this page the plugins devs show urls and place tutorials to this plugin way to use. oAuth Twitter Feed for Developers
Contact Form 7 WordPress Plugin http://contactform7.com/docs/
VisualComposer WordPress Plugin https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress Video tutorials list at https://vc.wpbakery.com/video-tutorials/
WooCommerce WordPress Plugin http://docs.woothemes.com/documentation/plugins/woocommerce/
oAuth Twitter Feed for Developers WordPress Plugin https://wordpress.org/plugins/oauth-twitter-feed-for-developers/
10. Front-Page (Home) and Posts-Page (Blog)
After you have your theme and your plugins installed and activated you will need to create 2 simple pages, without content, we suggest you called if as ‘Home’ and Blog’ for you will need to go on ‘Pages’ Add new, Name it as ‘Home’ and click on the button called ‘Publish’ The same for your blog page however you can name this pages in the way you want. Go to the WordPress admin area, click on ‘Settings’ Reading. In this area you will click on the ‘Front Page Displays’ and select ‘A Static Page’. For front page you select ‘Home’ and for posts page you select ‘Blog’. After you set it up you need to click on ‘Save Changes’ button.
11. Page Builder
All the visualmodo themes came with a drag and drop smart page builder, to start use it you need to go on your ‘Pages’ Add new, when you see the WordPress normal editor you need to click on a button called ‘Visual Composer’ and you will see a button called ‘Add Element” click on it to see all the pagebuilder elements. The pagebuilder needs to be used while building pages, portfolios, teams and knowledge bases however we don’t suggest you to use it while build blog posts because blog posts uses a wordpress native template, so while doing blog posts please use the Infinite Shortcodes, for more info about the infinite shortcodes just take a look on the 6. part of the doc. To see all the elements on the page builder and how to use it please go to the plugin documentation on https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress and video tutorial guides on https://vc.wpbakery.com/video-tutorials/ Please take a look in some video tutorials of this great WordPress Page Builder plugin to make your page layouts in a simple way
11.1 Video Tutorials
We will apply some great start guide video tutorials for Visual Composer WordPress Plugin and page creation. To see all the official videos please go to the plugin developers site on https://vc.wpbakery.com/video-tutorials/
Visual Composer Plugin Navigation Interface
Add and Edit Images in Visual Composer Plugin
Start Building Page or Use Default Templates
Drag and Drop in Visual Composer Explained
Clone Elements in Visual Composer Plugin
Add Visual Composer Plugin Row and Column
Add and Edit Text in Visual Composer Plugin
Add and Edit Image Gallery in Visual Composer
12. How to Update my Theme?
We never stop our work on any of our WordPress Themes so we use to add continuous upgrades on our themes for fixes, add new features and much more to make our work better! So is important to keep your theme up-to-date. To have your theme updated all you need to do is go on your WordPress Dashboard > Updates < area, select your theme update and simply click on ‘update new’ button, you will download the latest theme files on your WordPress. To see if you have an update available for your theme you can login on your WordPress dashboard > Appearance > Themes > Click on your Visualmodo theme, in the case you have an available update you will notice a message.
In the case you can’t upgrade your theme or need some upgrade information just login on your Visualmodo account page and open a ticket with our support crew, do not forget to attach a screenshot from your theme purchase with a date please.
13. Using Widgets
To use widgets you need to go on Appearance, Widgets and all you need to do is drag and drop your widget on the sidebars, the theme came with a lot of widget however you can add more widgets on your wordpress by downloading free plugins for it. To see how to use wordpress originals widgets and edit it please go to this page on wp.org http://codex.wordpress.org/WordPress_Widgets