Mobilia DocumentationThank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
| Author: | RoadThemes |
| Contact: | roadthemez@gmail.com |
| Item: | View Demos |
| Current Version: | 1.0.0 |
| Documentation Version | 1.0.0 |
| Created: | 2016-7-12 |
For a new installation of WordPress, you can use the quickstart installation to get started quickly.
We have the backup file in the "quickstart" folder. Please upload all files inside that folder to your website root folder.
Watch this video to know how to install on your server. https://youtu.be/xaYgxsK0-S0?t=1m45s
Full video:
What this intro video before you start with this theme, it provides basic steps to make everything easier.
Once you've downloaded the installation file on ThemeForest, extract it and locate a file called mobilia.zip. You can install the theme by using one of two installation methods:
Once installation is complete, your Theme theme will be ready to use. You should now see "Mobilia" appears in the WordPress themes manager panel.
We need to install some plugins from WordPress plugins repository
Install 3 premium plugins: Visual Composer, Mega Main Menu, Revolution Slider.
For premium plugins, please open the "plugins" folder in the theme package to see plugins file. Extract the zip file for each plugin to get the installable file. Go to Plugins=>Add New to upload & install plugins.
Watch the intro video above to see in details.
We can import content for pages, posts, menu, projects, contact form, testimonials...
Login to your WordPress dashboard, navigate to Tools - Import. Click on WordPress link on the table then click "Install Now" button on popup window to install WordPress Importer.
Click on "Activate Plugin & Run Importer" link to begin
Click "Browse..." button and select XML file in "sample-data/exported_files" folder:
- all-content.xml: This is exported of many content, includes posts, pages, products, contact form, testimonials, menus. You can ignore this file if you website has already content.
- tempalara.xml: This is exported of Templara plugins. Includes all header & footer templates for the theme. You cam import in Dashboard=>Visual Composer=>Templara
Click on "Upload file and import" button
On the next interface, select existing user on dropdown, check on "Download and import file attachments" to download sample images.
Click on "Submit" button to import.
To create widgets for this theme quickly, we use a tool to import all widgets from exported files in "sample-data/exported_files" folder.
Login to your WordPress dashboard, navigate to Tools - Widget Importer & Exporter
Click on "Browse..." or "Choose File" button then select "mobilia-widgets.wie", click on "Import Widgets" to finish.
After importing widgets, if you need to update some widgets like menu, posts... go to Apperances - Widgets
Import sample theme options will help you to configure options for the theme quickly. After that, you change colors, text, menu, images, background...for the theme to make it unique.
Open the wp_Mobilia_package_1.0/sample-data/exported_files/theme-options.json with Notepad (or Text Edit on Mac). Copy all file content.
Login to your WordPress dashboard, navigate to Theme Options - Import/Export.
Click on "Import from File", paste content into the text box. Click Import button.
You can now enable the Auto-Updating feature for Theme. To do this, please first make sure that you have the Envato WordPress Toolkit plugin installed.
After you have installed and activated the Envato WordPress Toolkit, please go to Envato Toolkit from your dashboard and enter your Marketplace Username and API Key. You can find your API Key by logging into your profile on Themeforest and navigating to Profile > Settings > API Keys.
When you have entered your Marketplace Username and API Key and clicked Save Settings, a new tab will appear at the top of the screen named "Themes". Click on this tab to see all the themes you have purchased. If there is an update available for a theme, you will be notified here. To update your theme, just click on the "Update Automatically" link.
Please note that each time you use the Auto-Update feature to update the theme, a backup file of the old version of the theme will be stored on your server in ".../wp-content/envato-backups".
You can update your theme manually by performing the following steps:
Once you've installed Theme, you can start building your site.
This theme include the Templara plugins. We use this plugin to create template for Header, Footer. Once you selected header, footer layout from Theme Options panel. Go to Dashboard=>Visual Composer=>Templates to edit header, footer template
The editing is very simple. You can add or remove elements, change background, margin, padding. But remember, if you add new elements, you may need to write css for it
One of the first things you might want to do is to set up the header area. This section contains the header layout, welcome message, top bar, mobile menu, vertical menu, sticky header and other options.
To set it up, go to Theme Options - Header from the admin panel. The settings you define here will be the default settings for all pages on your site. If you need help with any of the options, please refer to Theme Options in this user guide.
Now let's add a logo. Go to Theme Options - General from the admin panel and click the upload button next to the "Logo" field. You should now have a visible logo in your header area.
To create a menu, go to Appearance - Menus from the admin panel. Click on "Create a new menu." Enter a name for your menu, and then click on "Create Menu".
Every page that you've created up until now will be listed in the section on the left called Pages. Simply check the ones that you want added to the menu, and then click on the "Add to Menu" button. Once added, you can click and drag the menu items to rearrange them, or nest them one under the other.
Now let's set up the footer by going to Theme Options - Footer from the admin panel. We can add link for social icons, select menus for footer, enter contact us, about us information.
The settings you define here will be the default settings for all pages on your site. If you need help with any of the options here, please refer to Theme Options in this user guide.
To create a new page, go to Pages - Add New from the admin panel. Enter a title for your page in the text field near the top of your screen. Then choose the "Full Width" template for your page in the section on the right called Page Attributes. This will allow you to have sections on your page that go across full width of the screen.
Now let's start adding elements to your page. Make sure that you're in the backend editor. If the blue button on the top left says BACKEND EDITOR, click it to enable the Visual Composer. Once you're in backend, the button will say CLASSIC MODE. You can now click on "Add Element" and start building your page.
Finally, click the "Publish" button in the upper right section of the page. (If you made some changes on already published page, "Update" button will appear.
Please note that Theme comes with font icon pack: Font Awesome. You can see an overview of all the available icons in this icon packs at the following link:
You can access Theme Options from the WordPress admin panel. The settings found here are applied globally and will affect all pages of the site.
This section allows you to set up general settings for your site. We can upload Logo for the header, upload favicon for your website, change body background, content background and show/hide the back to top button.
For the logo image, we recommend the PNG format and small size. Use .ico file format for the Favicon and size is 16x16 pixels.
This is where you can change colors for your website. We can change the primary color, sale label color, link color, text selected color and background. Some elements in special area has different color from this panel, we can use custom css to change colors.
This section allows you to set up the header area. The first choice to change the header layout. You can upload an image for the header background or simply, select a background color. Change the header text color and welcome message.
We can turn on or off the sticky header. Change background for the sticky header, it supports transparent background color.
In this area, we can change background, text color for top bar. We also have a text editor to add code for the email and phone.
Here is the sample code for the Blog Header:
<ul>
<li class="free-shipping"><i class="fa fa-truck"></i>Free Shipping on all Orders $100</li>
<li class="phone"><i class="fa fa-phone"></i>+1 866-550-3669</li>
</ul>
We can change mobile menu label. The submenu background and submenu color is applied for the main menu (horizontal menu) in desktop view.
This is option for the vertical menu on header. Some header layouts have the vertical menu, often for the product categories list. We can change background, label of the toggler, number of level items to show, more & less label. We also can show or hide the item list on home page, inner pages.
This area allow you to change the footer layout, footer background with image or color. Change footer text, link color, copyright information and payment icons.
We can show email, address and phone for footer in this area. Of course, you can write anything here.
This is the sample code:
<ul>
<li class="address">
<i class="fa fa-map-marker"></i>Address : No 40 Baria Sreet 133/2</br>
NewYork City, NY, United States.
</li>
<li class="phone">
<i class="fa fa-phone"></i>0(1234)567 890
</li>
<li class="fax">
<i class="fa fa-fax"></i>0(1234)567 890
</li>
<li class="email">
<i class="fa fa-envelope-o"></i>Infor@mobilia.com
</li>
</ul>
In this area, you can show social icons. Enter link into the text boxes to show icon, leave empty to hide.
The icons ordering is: facebook, twitter, instagram, tumblr, pinterest, google-plus, linkedin, behance, dribbble, youtube, vimeo, rss.
We used icon by FontAwesome http://fortawesome.github.io/Font-Awesome/cheatsheet/
If you need to add more icons, go to the website above, copy the icon name. Go to Appearance=>Editor then click to edit the "theme-config.php", search for "social_icons" then add icon in "options" array like this:
Enter Mailpoet form ID here.
Enter Mailpoet form ID here.
Sample content for Portfolio1 About Us:
<p>Duis autem vel eum iriure dolor in hendrerit in</p> <div class="contact"> <ul> <li class="address"> <i class="fa fa-map-marker"></i>Address : No 40 Baria Sreet 133/2</br> NewYork City, NY, United States. </li> <li class="phone"> <i class="fa fa-phone"></i>0(1234)567 890
</li> <li class="email"> <i class="fa fa-envelope-o"></i>Infor@mobilia.com </li> </ul> </div>
In this area, we can change font for text, heading, menu, price. There are some options to select for each font like font family, back up font family, font weight and style, font size, line height, color. We can use default options or change any font like you need.
If we want to restore default options, click on "Reset Section" button. Watch the video below, we change some options then restore default.
In this tab, we can select page layout is full width or box, select theme preset and turn off the style switcher.
Preset: There are 2 presets to select, if we select a presets (example: preset 2) the theme uses pre-defined fonts and colors in that preset. If we select "Use Options" then the theme uses fonts and colors from "Colors" and "Fonts" tab.
This section allows you to upload brands log and configure the options for the brands slider. Click on "Add Slider" to add more logos.
This section allows you to change position of sidebars to left or right side
This theme uses the Essential Grid plugin for the portfolio feature, please read the documentation of plugin.
This section allows you to change the layout for the shop page. We can change how the products appear in grid view or list view. We have products per page, product columns and secondary image. We can change cross-sells title.
This area allows you to change options for the product page. We can change the related title, number of related products, up-sells title and sharing icons.
For social sharing code, go to http://www.sharethis.com or http://www.addthis.com/ then follow guide on website to create sharing button and get code. Remember to select "website", not "WordPress".
This area allows you to change the text link on the quick view window.
This section allows you to change the text on header of blog page "Blog", select blog layout, change read more text and the excerpt length.
This area allows you to change options for the latest posts carousel on home page.
This area allows you to change options for the testimonials carousel on home page.
This section allows you to upload image, background for the error 404 page.
This section allows you to add custom css code for website. You can change font size, color, background...for elements. It requires the CSS knowledge.
This section allows you to turn on/off the less compiler. In the theme, I used .less files in the "less" folder to generate .css files. Turn off the compiler after you finished changing colors, fonts to save server resources.
To create a new blog post, go to Posts - Add New from the admin panel.
Let's go over the possible options:
Now that you've set up your blog post, let's go over the custom fields.
Note that most of them are the same custom fields you'll find when creating standard pages.
When creating a new page, one of the first things you might want to do is to assign an appropriate template for it. To do this, go inside the page backend and locate the section on the right called Page Attributes. Theme comes with a variety of templates to choose from:
The default home page is blog, to create a home page with layouts of this theme, we have to create a new page and set it as front page.
Go to Pages - Add New, enter page title and select template is "Front Page Template"
For the page content, open "sample-date/pages" folder in this package, open a "home-[page name].txt" and copy content.
Click on "CLASSIC MODE" and click on "Text" tab to switch to HTML mode, paste content there and click Publish to save page.
Go to Settings - Reading, select "A static page" in "Front page displays" then select your page in dropdown.
Go to Pages - Add New to create an empty page, enter page title is "Blog".
Go to Settings - Reading, select "A static page" in "Front page displays" then select your blog page in "Posts page" dropdown.
Go to Pages - Add New to create a new page, use the sample content from the "contact.txt" file. Select page template is "Full Width".
Go to Pages - Add New to create an empty page, enter page title is "Portfolio".
Go to Projects - Settings, select portfolio page in "Projects Page" dropdown.
To create pages for WooCommerce, click on "Run the Setup Wizard" button in the back-end. Follow all steps to setup WooCommerce.
Go to Pages - Add New to create a new page, use the sample content from the "about-us.txt" file. Select page template is "About page".
Go to Pages - Add New to create a new page, use Visual Composer to add elements for the pages, change page template to get full width or sidebar page.
Theme comes with WooCommerce integration, which allows you to build an online shop. For more information on installing and configuring WooCommerce, please visit this page:
http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/
In order to setup WooCommerce with our theme, please perform the following steps:
To create a products carousel slider on home page, add new row in Visual Composer, insert a Text Block then add a heading 3 for the title, example "Best Seller".
Add shortcode of WooCommerce under the Text Block, click on the pencil icon of the row then add extra class: products-carousel
To create a products tabs slider on home page, add new row in Visual Composer, insert a Text Blocks with a heading 3 text for the tab title. Add shortcodes of WooCommerce to show products.
Click on the pencil icon of the row then add extra class: home-tabs layout1
When you want to show 2 tabs, you have to change the extra class of secondary tab to: home-tabs layout2
When editing a product, we can upload a cover image and over images.
Go to YIT Plugins=>Zoom magnifier to select options for the zoom feature on the product page.
Go to YIT Plugins=>Wishlist to change settings for the wishlist, we don't require any settings there but we recommend to change text, select social networks.
Go to YITH Plugins=>Compare then select settings like this
To start creating your menu, go to Appearance - Menus from the admin panel.
At the upper left corner you'll see 2 tabs: Edit Menus and Manage Locations.
In Manage Locations, you can assign menus to different locations: Primary Menu, Categories Menu, Top Menu, Mobile Menu
Now let's go to Edit Menus. At the bottom of the page, in the section Menu Settings, you're also able to assign the current menu to a location.
When creating a menu, you can click on the little triangle on each menu item in order to open up a list of editable settings.
In this settings panel, you can change sub menu type to multi columns, number of columns and make the sub menu in full width.
Go to Mega Main Menu then check on both checkboxes for the primary. Don't check on topmenu and mobile menu.
Click on Layout Options: primary then uncheck on logo, search box, minimized on handheld devices, sticky. Select dropdown animation.
Please read the documentation on Revolution Slider first http://www.themepunch.com/revslider-doc/slider-revolution-documentation/
You can import sample sliders, we have some sample slider in the "slider-sample" folder.
To change widgets, go to Appearance - Widgets. Read the Getting Started - Import Widgets in this documentation to know how to import widgets.
Use this plugin to make the newsletter sign up form on footer. Navigate to MailPoet. Click on "Thanks! Now take me to MailPoet." to start using this plugin. Click on "settings"link
On "Basics" tab, enter your email in "Email notifications" and choose other options.
Click on "Forms" tab, there is a form named "Subscribe to our Newsletter", move mouse over it and click on "Edit" link to edit this newsletter sign up form
Move mouse over "Email *" and click on "Edit display" button
Select "Yes" on "Display label within input" then click on "Done" button
Please read documentation of the Essential Grid plugin
Go to Testimonials - Add New to create a new testimonial. Enter title, description and upload images.
We hope this manual was useful for you and helped you to install, to edit the template and to resolve your issues.
In this theme, it uses the less compiler function to generate css files from .less file. If your server has small PHP memory, it may show the error. Please try to increase the PHP memory like this:
1. Edit your wp-config.php file and enter something like:
ROADTHEMES.comdefine('WP_MEMORY_LIMIT', '256M');
http://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP
2. If you have access to your PHP.ini file, change the line in PHP.ini
If your line shows 32M try 256M:
memory_limit = 256M ; Maximum amount of memory a script may consume (256MB)
3. If you don’t have access to PHP.ini try adding this to an .htaccess file:
php_value memory_limit 256M
4. If none of the above works then talk to your host.
Cause of this problem is small value of the "max_input_vars" option in the configuration of your server (host). You must increase value of the "max_input_vars". You must to set a value that is twice as large of the current value.
php_value max_input_vars 3000
php_value suhosin.post.max_vars 3000
php_value suhosin.request.max_vars 3000
max_input_vars = 3000
In some cases, you uses large images on your page, server run slowly because it's a VPS. Try these methods:
- Reduce images size
- Install cache plugin like W3 Total Cache
- Turn off less compiler in Theme Options=>Less compiler after finished changing colors & fonts.
- Test website with GTMetrix and see its suggestions https://gtmetrix.com/
Read this guide to know how to translate theme http://code.tutsplus.com/tutorials/translating-your-theme--wp-25014
Read this guide to know how to translate WooCommerce https://docs.woothemes.com/document/woocommerce-localization/
If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 300 seconds. Possible ways of achieving this are:
Ask your hosting provider to take care of this for you.
In this theme, we use Shortcodes Ultimate plugin to make shortcodes. You can go to this page http://gndev.info/kb/ and read the documentation to create your own shortcodes.
I have included these sources with this theme:
jQuery: http://jquery.com/
FlexSlider: http://flexslider.woothemes.com/
Slick: http://plugins.jquery.com/slick/
jQuery Gmap: http://labs.mario.ec/jquery-gmap/
FancyBox: http://fancyapps.com/fancybox/
jQuery Parallax:http://www.ianlunn.co.uk/plugins/jquery-parallax/
jQuery Shuffle: http://vestride.github.io/Shuffle/
Font Awesome: http://fortawesome.github.io/Font-Awesome/
lessphp: http://leafo.net/lessphp
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.