Aug. 10, 2016
WordPress 4.6 +
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 firstname.lastname@example.org 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 some 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 email@example.com 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. 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.
4. 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 Rare wordpress theme. This area works in the same way as ‘Customize’ under ‘Appearance’ tab normally used on free wordpress theme however the theme options have much more tools.
4.1 General Settings
Favicon Upload: Upload a 16px x 16px Png/Gif image that will represent your website’s favicon.
WP-login Logo Upload: Upload a 80px x 80px Png/Gif image that will represent your WP-LOGIN website’s logo.
Do you want Customize your Login?Enable/Disable customizations on WP-LOGIN.
Do you want Animation Effects on mobile devices? Enable/Disable animation effects on mobile devices for items.
Back to Top? Enable/Disable Back to Top Button Feature At the footer area of your website.
Do you want extra menus? Enable this options to build extra menus to use as footer menus or one page menus.
Social Media Sharing Buttons Activate this to enable social sharing buttons on your blog posts / single portfolio / single knowledgebase.
4.2 Color Options
In This area of your theme options you will be able to edit / change every colors of your site, body, text, header, footer, caption, global color and much more however we suggest you only change the Accent Color (Change this color to alter the accent color globally for your site. Try one of the six pre-picked colors that are guaranteed to look awesome!) and after you had you site done with some content you came back here and change other ones to see the real-time result.
4.3 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.
4.4 Boxed Layout Option
In this are of your theme option you will be able to enable or not this theme feature, 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.5 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 logos (2 logos, dark and white color) place icons on your menu like cart icon for login info and a lot of size / layout options settings. For more info about header option please take a look on this tutorials and place see the videos:
4.6 Footer Options
In this area of your site you will be able to select your footer text, columns and layouts. For more Info about the footer on the theme please see this tutorial https://visualmodo.com/knowledgebase/footer-custom/ In the case you want to remove the Visualmodo default text form your footer ‘Powered by WordPress’ simply set as ‘OFF’ the field called ‘Footer Visualmodo Signature Text’ and type your own signature text on ‘Footer Copyright Section Text’ following the attachment image.
4.7 Knowledgebase Options
In this area of your theme options you will be able to choose some options about your knowledgebase posts template, change page slug, url and enable/disable comments template on this post type.
4.8 Portfolio Options
In this area of your theme options you will be able to choose some options about your Portfolio posts template, change page slug, url and enable/disable comments template on this post type.
4.9 Team Options
In this area of your theme options you will be able to choose some options about your Team posts template, change page slug, url and enable/disable comments template on this post type.
4.10 Blog Options
In this area of your theme options you will edit / change your main blog and posts layouts, place sidebar, center content and choose a blog style, the ‘URL Blog Index’ don’t need to be settled if you follow the Doc Step 3 (Front page and Posts page).
4.11 Page 404 Options
In this theme options area you will set up what your users will see when they go to a 404 page on your site (Page Not Found) you will be able to place a text, a button and add an image for it also.
4.12 Contact Map Options
In this theme options area you will set your contact template up, you will enter with a location info in Lat / Lon of your global place. to more info about it please read this tutorial https://visualmodo.com/knowledgebase/creating-a-contact-map-page/
4.13 Social Options
In this area of your Beyond wordpress theme you will be able to add on the theme social networks icons, you will see all the popular networks on this list.
4.14 WooCommerce Options
In This area of your RARE theme options you will be able to change your woocommerce plugin template layout, sidebar, slider, header style and more, for more info please read this tutorial and see the video https://visualmodo.com/knowledgebase/create-and-custom-a-store/ NOTE = This area will only be visible if you have your WooCommerce plugin installed and active on your WordPress, this is a free plugin for WordPress and to see how to use the plugin we recommend you read the plugin developers documentation https://docs.woothemes.com/documentation/plugins/woocommerce/
4.15 Custom 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.
4.16 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.
4.17 Page Transition
In this area of your theme options you can apply a page transition, a page transition is a loading animation that you will see while loading pages, you can apply a loading position and color or disable this.
5. 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.
This elements will place and accordion on your site however when you click on it you will open a text block pagebuilder element and will need to click on the blue button called ‘Infinite Shortcodes’ and select the ‘Accordion Section’ and using this shortcode you will save your text block element, for more info please read this tutorial and see the video https://visualmodo.com/knowledgebase/toggle-and-accordion/.
This elements will place and accordion on your site however when you click on it you will open a text block pagebuilder element and will need to click on the blue button called ‘Infinite Shortcodes’ and select the ‘Toggle Section’ and using this shortcode you will save your text block element, for more info please read this tutorial and see the video https://visualmodo.com/knowledgebase/toggle-and-accordion/.
This pagebuilder element works in the same way as toggle and accordion, when you click on it you will open the text block element, in the text block toolbar you will need to click on the ‘Infinite Shortcodes’ and choose the ‘Tabs’ place your content and add the shortcode on your text block, after you just need to click on ‘save’ button on the text block.
This pagebuilder element works in the same way as toggle and accordion, when you click on it you will open the text block element, in the text block toolbar you will need to click on the ‘Infinite Shortcodes’ and choose the ‘Testimonial’ place your content and add the shortcode on your text block, after you just need to click on ‘save’ button on the text block.
5.5 Progress Bar
With this pagebuilder element you will be able to add progress bars on your page, when you click on this element you will open a window to edit all you need, field, % number, place or not in icon and more.
This part of pagebuilder need to be created before use in other area of the theme called ‘Portfolio’ and after you have some portfolio posts you need to came back here and use this element to show this posts up on your page, please see this tutorials for more info:
5.7 Team Member
The same way to use as portfolio element, please take a look on this tutorial to see more info about it https://visualmodo.com/knowledgebase/creating-a-portfolio-team-knowledgebase-pages/ you will need to create a post on your ‘Team’ wordpress dashboard area before apply it on your page using this pagebuilder element.
5.8 Knowledge Base
The same way to use as portfolio and team member however this post type is more focused in show tutorials content, please take a look on https://visualmodo.com/knowledgebase/creating-a-portfolio-team-knowledgebase-pages/ one example of page that can be created using this element is this one https://visualmodo.com/help/
This element has been developed to you show your blog up in a fully editable page (because the posts page settled on wordpress on doc step 3 it’s not editable) so you can apply you blog in any page you want and still editing this page using the other builder elements like slider shows and columns. In the case you don’t see a sidebar showed with this element we suggest you go to ‘appearance, widgets, and place some widgets in a area called ‘Page Sidebar”.
5.10 Twitter (Latest Twitter Slider)
This shortcode will apply your latest twits in a slider however to use it you need to do some things: First of all to put their latest tweets on your website you need to create an access key, twitter requires that each has its own key. Login first twitter usually (on twitter what you want appears on your site. Then click this url https://dev.twitter.com/
Now you are in the area for developers twitter. Look at the top right of your screen, hover the picture and a menu will aprir, clik on ‘My applications’.
Then click on ‘Create a new application’ now register your application by following the steps indicated by twitter. Now after you have created your application you back in ‘my application’ click on your application and down the screen to where it is written ‘create my access token after that you go on the third tab. ‘OAuth tool’ and there you will find the necessary urls for you to add fields in the widget to get your twitter on your website.
You put the codes that you got on twitter on your, wp settings, twitter feed. Also you will need to have installed and actives the plugin oAuth Twitter Feed for Developers This video will help you more https://www.youtube.com/watch?v=NYPSPenAqwY
5.11 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
6. Visualmodo Shortcodes
The Visualmodo Shortcodes is the best way to build a post on your blog or add a button on any post type that you want, you can use any shortcode in a simple and easy way, all you need to do is open the text block element (while building pages, portfolio, team or KB) or just clicking on the Infinite Shortcode button without text block (while doing blog posts) and it will open a list with all the shortcodes. When you apply the short code on your content you will see the codes on it.
7. Build Posts (Read More Tag)
The way to build posts with all our themes is the normal way to build posts with wordpress however you need to add a ‘Read More Tag’ in the case you don’t add this tag on your post your blog readers will see the entire post on the main blog page without click on post, to add a read more button you need to go on your post and after some lines of content add a wordpress tool called ‘Insert Read More Tag’.
8. Set Up A Menu
To set up a menu you need to go on your wp admin area, Appearance, Menus, in this area you will set up a menu, and also will be able to add icons on this menu and other things like widgets, for it please take a look on this tutorial https://visualmodo.com/knowledgebase/header-menu-icons/ and make sure you select the ‘primary menu’ option after save your menu.
9. 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
10. 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/
Ultimate Addons for Visual Composer WordPress Plugin http://docs.brainstormforce.com/category/ultimate-addons/ Video tutorials list at https://www.youtube.com/watch?v=pJtN81Qdwbk&list=PL1kzJGWGPrW9CDWwdAWrd_9YQsh1z7u6O
WooCommerce WordPress Plugin http://docs.woothemes.com/documentation/plugins/woocommerce/
WP Awesome Support WordPress Plugin https://wordpress.org/plugins/awesome-support/
oAuth Twitter Feed for Developers WordPress Plugin https://wordpress.org/plugins/oauth-twitter-feed-for-developers/
11. One Page Site (Landing Page)
To create a great one page site please take a look on this tutorial https://visualmodo.com/knowledgebase/one-page-site/ To see an one-page site example that can be created using this system please go to this page http://theme.visualmodo.com/beyond2
12. SideMenu (Icon to show menu on right side of your site header)
To create a side menu and add things like widgets and pages on it please take a look on this tutorial https://visualmodo.com/knowledgebase/side-menu/ with your side menu option you will be able to show more on your menu, pages and widgets in the right side of your site, this menu will be showed when your users click on a header menu icon.
13. Page Options
This area is located at the bottom of your page, posts, portfolio and team editor area. In this area of your page you can edit your page Menus, Colors, Header, Icons and Footer, all the settings on this area will affect only one this page, in the case you want to edit all the page please see the 4. documentation part about Theme Options. To see this area please go to your pages or other post-type and click on ‘Add New’ and scroll you page down until you see and area called ‘Options’.
13.1 Menu Settings
This part of your Page Options allows you to set up your menu style for this page, to start to change it select ‘on’ in ‘Menu Settings’, if you want to show your menu or not on ‘Menu Active?’ field, you need to set as ‘on’ in ‘Menu Overlay’ in the case you want to edit your logos and menu color set, you can use the ‘Change Menu’ option to add other menu for your page or an one-page (landing-page) menu. In this pinel you will see another 4 options for logo settings, if you change this settings in a wrong way you will add 2 logos on your header because this pinel is for apply another logo versions (that you apply on your theme options > header options > logo settings < dark/while logo upload), to change it just play with the following fields on your page editor – Logo Color Style – Logo Color Style On Sticky Menu With Transparency – Logo Color Style On Sticky Menu With Transparency on Mobile – Color Style On Transparent Menu –. Recommended for normal header is; black, none, black, none. There’s no right setting for this, you will need to found the one that fit’s on your design according to your logo or header colors set.
13.1.1 Transparent Menu (Overlay)
Transparent menu is a menu style setting that makes your header image or slider-show overlay your menu items, you can see an example of page with this setting enabled at this page http://theme.visualmodo.com/rare/blog-masonry/ and you can see an example of the page with this setting disabled at this page http://theme.visualmodo.com/rare/blog/ To enable or disable this feature you need to go on your Page Editor > Options Field > Menu Settings > Set as ‘On/Off’ an option called ‘Menu Overlay’.
13.2 Header Settings
This part of your Page Options allows you to set up your header style for this page, in the case you do not want this header area on your page simply set as ‘OFF’ in all the settings in this field (header area = an area between your header menu and your page body content that you can apply page title, images or an slider-show) to start to change it select ‘on’ in ‘Menu Settings’ and start to add your customization like title, caption, background image, padding and alignment.
13.2.1 Header Slider
To add an slider show build using revolution slider plugin in a normal way in top header please follow; Go to your WP dashboard > Pages > Select the page editor area > Scroll the page down until you see an area called ‘Options’ > Click on ‘Header Settings’ tab > Found a field called ‘Revolution Slider’ and set it a ON > Select your Slider show you want on ‘Revolution Slider Alias’ and save your page, take a look on the attached image.
14. 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.