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 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 you want for your site layout using our sport wordpress theme. In old theme versions this area is called ‘Infinite Options’ however it works in the same way. This area work in the same way as the ‘Customizer’ area under ‘Appearance’ tab from your WordPress normally used on free WordPress themes but we much more tools and controls.
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.
Tracking Code Paste your Google Analytics (or other) tracking code here.
It will be inserted before the closing head tag of your theme.
HTML Code Paste your HTML codes in this area.
CSS Code Paste your HTML codes in this area.
JS Code Paste your HTML codes in this area.
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 knowledge-base posts template, change page slug, url and enable/disable comments template on this post type. To see a knowledge-base posts type working please take a look on this page that we have created using this post type to show you our themes tutorials https://visualmodo.com/help/ – The knowledge-base custom post type is good for show tutorials and display it in an organized way.
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 blog posts layouts, place a sidebar, center content and choose a blog style, the ‘URL Blog Index’ It doesn’t need to be settled if you follow the Doc Step 3 (Front page and Posts page). Once your set an specific page to be your posts page on your WordPress > Settings > Reading < area. This page will load the WordPress Posts Page template, the Theme Options, Blog Options field is for edit this page. Note – Once this page loads a WordPress Template you will not be able to edit this page onto your ‘pages editor’ area like you do it normal pages so the ‘Blog Options’ is an important area.
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 spark 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 SPARK 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/
In this area of your theme options you can disable / enable some parts of your theme that you don’t want to use. You also can enable and disable your Infinite Builder here if you want to use the Visual Composer, We recommend you use the Visual Composer so the ‘Infinite Builder’ Option came normally disabled so you can upload and use the Visual Composer. You also can disable other custom post types of your theme framework to make reduce your theme size; Portfolio, Team and Knowledge-Base can be disabled.
5. New Page Builder
After WordPress 4.5 all the visualmodo themes came with a drag and drop Visual Composer 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.
5.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
6. Infinite Page Builder
After WordPress 4.5 we apply 2 different page builders on our theme so our can decide which one you want to use, you can use our own page builder called ‘Infinite Builder’ or ‘Visual Composer’ plugin. To start we will show guides for Infinite Builder; To 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 ‘Infinite Builder’ 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 7. part of the doc.
In the case you want to change your Page Builder for Visual Composer Plugin all you need to do is go on your WP Dashboard > Theme options > Optimizations > and set as OFF the Infinite Builder field, Save your changes. A Message at the top of your WordPress dashboard will appear to you click and install the Visual Composer plugin.
6.1 Row (Section / Container)
This element of our pagebuilder is a section to you add other elements, when you click on the on a ‘Row’ element it will place a fully editable area on your page with 5 important buttons on it:
The + Button is to you open again the pagebuilder and add other element inside this row.
The Edit Column Button if for you call some custom css code only in this section of your page.
The Edit This Row Button will open a big toolbar window to you change the layout of your section, background colors, images, video, padding and more things, to close this window you just need to click on the ‘Save’ Button.
The Clone This Row Button is for you create a copy of this actual row with the same content.
The Delete Row Button is for delete this entire section with all the content on it.
The Drag Row To Button is for you click on this row and move it to other area of your page.
This Pagebuilder element is for you add columns on your page, to use it you need to open your pagebuilder, and select the ‘columns’ element, after this you will see a Icon for hover to see the section columns layout.
To select a layout you need to click on it and you will see the layout on your section with some + Icons to you add more elements on it. With this system you are free to create any page layout you want, sidebar sizes, page style, portfolio page and much more.
You also can take a look on this tutorials:
6.3 Text Block
This is the text element of page builder, to use it you need to click on ‘add element’ button and choose the ‘text block’ element, when you click on it a window will open on your screen with the classic WordPress editor, you will be able to type all you want and also use the theme short codes on this text block element.
To close the window you need to click on the ‘save’ button and you will see this element on your row / section with the same button / options as in 5.1 part of the Doc.
6.4 Custom Heading
With this pagebuilder element you will be able to completely edit your heading text, size, color, place and more things like this, the way to use is the same as ‘text block’ when you click on it a window will be showed to you choose the style you want.
This option allow you to place some space between your pagebuilder element with a normal or a short line, when you click on this element a window will be showed to you select the space in px.
6.6 Embed Divider
This pagebuilder element works in the same way as the 5.5 Divider element however this element don’t place a line on it, it only place space.
6.7 Alert Box
This pagebuilder element will apply a colored text box on your page to you explain or warning something, when you click on this element a window will open to you type you text and choose what style of alert you want.
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.
6.12 Single Image
With this pagebuilder element you will able to show up an image in a way you want, when you click on this element it will open a window to you select the image and if you want this image be responsive or not, in the case you try to upload the media via ‘Add Media’ wordpress native button the image may not to be responsive, you also have a shortcode with the same name to use it while building posts.
6.13 Lightbox Image
With this pagebuilder element you will able to show up an image in a way you want, when you click on this element it will open a window to you select the image and the title, the different between the lightbox the the single image is be clickable and showed big on a screen, in the case you try to upload the media via ‘Add Media’ wordpress native button the image may not to be responsive, you also have a shortcode with the same name to use it while building posts.
6.14 Lightbox Video
With this pagebuilder element you will able to show up an image in a way you want, when you click on this element it will open a window to you select the image to be showed without click and the title and you also will be able to place urls or upload a video, you have this as shortcode also to use while building posts for your blog.
6.15 Lightbox Gallery
With this pagebuilder element you will able to show up an images in a way you want, when you click on this element it will open a window to you select the images and the title, the different between the lightbox image and the gallery is allow you to create a clickable gallery however to it work nicely make sure you add Thumbnail Title and gallery names in the edit window that open once you click on the element.
6.16 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.
6.17 Google Maps
With this pagebuilder element you will be able to add a google map on your page, when you click on this element a window will be showed to you apply all the info you need; title, zoom, latitude and longitude, image and a description text. In the case you don’t know what is your lat / long please follow this link and found out http://www.latlong.net/convert-address-to-lat-long.html
6.18 Pie Chart (Circular Progress Bar)
This pagebuilder element works in the same way as progress bar however it have a circular layout.
6.19 Count Number
With this page builder element you will be able to add a count number From some number To some number on your page, to use it you need to click on this element, a window will open with all you need; fields text area, initial number, final number, icon, speed and animation.
6.20 Pricing Table
With this page builder element you will be able to add a pricing area on your site or create a membership page, when you click on it you will open a page with all the info you need to type about you pricing plans, you can place 3 elements like this in 1/3 + 1/3 + 1/3 columns layout to create a membership page.
This pagebuilder element give you 3000+ .svg icons to you place on a page or posts and control the size.
6.22 Icon Boxes
This pagebuilder element short you 3000+ icon to you place on a page and control the size and also place it on a lot of boxes styles, type texts on it with title, body and icon.
This page builder element allows you to add a sidebar an any way you want however to use it you need to first create a sidebar with widget, to do it please go to, Appearance, Widgets, and place some of them on your sidebar tabs, after you will click on the ‘sidebar’ pagebuilder element and a window will open to you select the sidebar you want however you need to organize this on your page after save your element, we suggest you place it in a 1/4 + 3/4 columns layout.
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:
6.25 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.
6.26 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/
6.27 Recent Posts
This element is for you show a previous of your latest posts on other pages, this pagebuilder element has been developed to show only 1 line of your latest posts, it’s not a blog element so try to show 4 or less posts using this element and in the case you want to show more please use the 5.28 element. When you click on this element you will open a window to type a title and select the filter and number for your posts.
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”.
6.29 Video Player
This pagebuilder element add a video player on your page, when you click on it you will open a text block element and will need to select 1 of 2 Infinite shortcodes, video embed or video self hosted shortcode to apply a video by using url or upload a video.
6.30 Audio Player
This element works in the same way as video player however you need to have this audio on your wordpress medias area, when you click on it you will open the text block element and need to select the audio Infinite Shortcode to upload your audio.
6.31 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 appear, click 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
6.32 Social Networks
With this pagebuilder element you will be able to show your social networks in your page, when you click on this element will open a window with the name of networks to you add your url, this is much useful on team member pages.
6.33 Revolution Slider
This element add on anywhere in your page a slider created using rev-slider plugin, for more info please take a look on this tutorial https://visualmodo.com/knowledgebase/using-rev-slider-wordpress-plugin/
7. 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.
8. 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 content 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’. Please see this WordPress.org tutorial to see how to build a post on your blog https://codex.wordpress.org/New_To_WordPress_-_Where_to_Start
9. 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.
10. 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 You can apply widgets on your sub menu items, on your sidebars, on your footer and on your side-menu area.
11. 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/
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/
12. 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/stream/
13. 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 site menu option you will be able to show more menu and widgets in the right site of your site, this menu will be showed when your users click on a header menu icon.
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.