Exist MultiPurpose WooCommerce Theme Guide
- created: 09/23/2014
- latest update: 09/26/2014
- by: OpalTheme
- Support email: [email protected]
- Information: [email protected]
HELLO ! FIRST OF ALL WE WOULD LIKE TO THANK YOU SO MUCH FOR CHOOSING OUR THEME!
Here are some basics on installing, configuring and customizing the Opal Template If you have any questions that are beyond the scope of this help file, please feel free to contact us via email : [email protected]
We truly appreciate and really hope that you'll enjoy our theme!
If you like this theme, Please support us by rating us 5 stars (How to rate?)
Purchase another our best themes
Best Regards,
Opal WordPress Team
Installation
To install this theme you must have a working version of WordPress already installed. Make sure your installed Wordpress version is 3.8 or higher. You also need to have PHP 5.2.4 or higher versions (recommended is php 5.3+) and MySQL 5.0 in order for OpalTheme to function correctly. If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes.
1. Download
Purchase Exist template from Themeforest then you can download our template package on there.
Extract package that include all files and folders of theme.
2. Installing Theme From the WordPress Dashboard
Installing a WordPress theme is super easy, you’ll see our video guide:
- Navigate to Appearance → Themes in your WordPress admin dashboard.
- Click the Add New button at the top of the page and go for the Upload option.
- For the file upload, pick Theme Package/xxxx-theme.zip in the theme package downloaded from ThemeForest and click Install Now.
3. Installing By FTP
Many users are on shared hosting with low upload limits, and in such situations the Striking theme is often too large to install through Wordpress. We suggest you should upload it via FTP.
If you don't know how to use FTP visit this link for information: http://codex.wordpress.org/FTP_Clients . You will need to first uncompress the PACKAGE-theme.zip file you have found in the master zip downloaded from Themeforest. This zip uncompresses into a normal folder. This unzipped folder is all you need to transfer via ftp and if you open it, you will see all sorts of folders and css and php files which together contain all the theme coding.
Using the FTP program transfer this folder which contains the above files to the Wordpress installation theme root directory: /wp-content/themes.
Do not upload any of the other files or folders such as licensing or resource or documentation. Uploading any of the other folders may cause problems resulting in the theme not working properly. Learn from Wordpress Official Documentation about installing theme with FTP client or with cPanel: http://codex.wordpress.org/Using_Themes
4. Activate TheTheme As Default Theme
After completing the upload, activate the theme as per activating any other theme.
Goto your Dashboard >> Appearance >> Themes >> Activate Exist template
Follow that images:
5. Known problems when installing the theme
However that doesn’t necessarily mean that the theme was actually broken or the so important part is missing. It would rather mean that the theme was just uploaded to the server incorrectly and missing stylesheets are not missing but got to the wrong folder when downloading and unzipping.
Here are some tips how to fix that:
- After downloading and unzipping open the final theme folder. Inside there will be the actual theme folder. The actual theme folder is where the “ style.css” file is.
- You must upload only the actual theme folder to your WordPress host. Our advice is to double check.
- Enter your WordPress admin panel and activate your new theme.
Summing up, the destination /wp-content/themes/themename/themename/style.css is incorrect and is the reason of “ Broken theme and/or stylesheets missing” error message.
It must look like /wp-content/themes/themename/style.css
You may check your file upload limit on Your Media Uploader page in WordPress. Depending upon the web hosting company and the conditions of the service they provide it may vary. The most common is about 8 MB which is more or less enough. But uploading some media files like audio and video may become a problem with for example 2 MB upload limit.
We decided to share some tips about how to extend your maximum file upload size in WordPress:
1. Through functions.php file:
You may add the below mentioned code in the functions.php file of your theme
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );
2. Through PHP.INI file:
If you cannot see the php.ini file in your directory create the new one with below mentioned code and upload it to your root folder on your web server.
If you can see the php.ini file then change parameters or add :
post_max_size = 64M
max_execution_time = 300
In case that tip does not work with 64MB, try it with 10MB.
3. Through .htaccess method
You may try modifying the existing .htaccess file in the root directory or creating a new one.
Add the following code in the existing or new htacess file:
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300
You can reset all of the setting for the each page on our custom panel by clicking “Reset” button on the bottom.
Install Plugins
Right after the theme was activated, a notification at the top of the screen will suggest to continue with the installation of the plugins recommended for getting the best our of your theme.
Follow steps to install:
Step 1. Click ‘Begin installing plugins‘ and select the plugins you need to install from the list.
Step 2: Select all plugins then choose Install , Click Apply to install all plugins
- Plugins Using in Exist theme
- Contact Form 7: Allow you create contact forms.
- MailChimp : to use newsletter function
- Option Framework: more configures theme.
- Revolution Slider: premium responsive slider.
- WPBakery Visual Composer: powerful visual composer to create page layout.
- WooCommerce: The Shop engine for your WordPress site.
- YITH WooCommerce Wishlist: enable wishlist in your site.
- YITH WooCommerce Zoom Magnifier: to zoom product and make carousel thumbnail
- YITH WooCommerce Compare: to use compare options.
Step 3: After Installing all Plugins, select Activate then click Apply to active all plugins.
Follow our video guide to know more :
Install Data Demo
Before installing data demo, you need setting up image sizes.
1. How to setting up the Image Sizes
These settings affect the actual dimensions of your product images in the shop pages. You can skip this step in case you’re starting a new website and your WordPress installation is fresh, but if you’re switching from another theme and you already have products in your store, you need to make sure the WooCommerce image sizes are the correct ones for your newly installed theme.
a. Navigate to WooCommerce → Settings → Products and find the “Product Image Sizes ” section at the bottom of the page.
Update those values with the following this image for Exist theme.
b. If your site has image with another size. To see the changes after you update the image sizes, you need to re-generate the images by using Regen.Thumbnails Plugin
- Go to Plugins Tab then search and install Regen.Thumbnails plugin
- Navigating to Tools → Regen.Thumbnails then re-generate your images
2 :Install Data Demo
Opal Team very happy to provide for customer a new function to import data more quickly. It is "One click import"
With "One click import", customer do not import step by step data as import usual. It import all data like : Content, Widget, Revolution slider, Menu, Customize...
One click import data
To use it make sure file of your theme have to "import" folder in "inc" folder like this:
Go to Dashboard -> Appearance -> WpOpal Import . You can see " Get demo from live server", please click in "Exist sample" :
1. Demo Soure : Choose name of demo to import .
2.Import Type : Choose name of type to import ( choose All or chose one of types to import)
- All - suggested option: the option will import all demo content (products, menus, theme options, ect) to replicate Exist demo on your server without any other step.
- Content - import site content: posts, products.
- Widgets - import widgets used in Exist demo site.
- Theme + Page options - import theme and page settings.
- Menu - import all menus.
- Revolutions Slider - import sliders built with with revolutions slider plugin.
- VC Template - import pages built with king composer plugin.
File to import all data is : content.xml
Specially, You can go to Wpopal Import to import config of menu, widget, page and theme options.
Click "Import" and popup is displayed, click "OK" to continue import data
When import has been imported it will display popup : "Import is successful"
Follow our video guide to know more :
Or You can import data by tool of wordpress.
Importing The Demo Data - XML File
The Pharmacy theme comes with importable demo data, such as pages, products blog posts, portfolio items, etc, to help you get started in case you’re running on a fresh WordPress installation.
Step 1: From the WordPress admin area go to Tools >> Import and click on the WordPress link.
Step 2: You can import all of our demo by one step
Step 3: Assign Authors
Step 4 :Set a page as Home Page
After import Dummy Data you need to set default Home page for your site, from your WordPress dashboard, navigate to Settings → Reading.
Select “A static page” and choose “Dummy Homepage” as the Front Page.
Save change then Homepage data sample will be set.
Follow our video guide to know more :
3. Import Revolution Slider
From the WordPress admin area go to Revolution Slider >> Import Slider and select Slider file on our package.
Install Widgets
Go to Admin Panel -> Appearance -> Widgets.
You can see all our widgets, easy to configure by drag and drop Widgets to sidebar.
Then you can use sidebars to position you want. Even you can use sidebar for MegaMenu.
Morever you can search and add more plugins for your purpose by searching on the internet.
Follow our video guide to know more :
Setting Menu
The following steps will guide you in defining your menus using the WordPress menu editor and Opal Megamenu.
Opal MegaMenu is a user-friendly, highly customizable responsive MegaMenu WordPress plugin to create Menu.
In each menu, you can add as many items you need: links, pages, posts, custom links, shop categories, direct links to products, internal or external link even sidebars
1. Use WordPress menu editor
a. Main Menu
- Navigate to Appearance → Menus and click the “create a new menu” link.
- Enter a name for it the “Menu Name” box and click the Create Menu button.
You can add as many items you need. Drag and drop to set sub menu or position of them.
b. Top Header menu.
Front-end look like :
Setting like image :
c. Manage Locations
- That tab to allow you setting menu location you want.
2. Using Opal Megamenu tools.
Front-end look like:
- Navigate to Appearance → Theme Options
- Go to Megamenu Tab → select Menu you want to edit then click Megamenu Editor
Create powerful and unlimited menu with tool.
Follow our video guide to know more :
3. Setting Vertical MegaMenu
- Navigate to Appearance → Menus and click the “create a new menu” link.
- Enter a name for it the “Menu Name” box and drag each item into menu :
- After creating Vertical menu, you need set position to display
Option 1: Using Visual Composer to set possiton on page
Option 2: Using Sidebar
Drag it to any sidebars you want.
Set Menu to Vertical Menu Sidebar position like image :
Setting like image :
Follow our video guide to know more :
Setting Home Page
You can quickly build a home page using Visual Composer for WordPress that is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required
From your Dashboard admin Navigate to Pages
- Select All Pages to see all page then click edit one page you want
- Select Add New to create new page
A. How to use Visual Composer
1. Classic Mode.
You can insert code on table then Home page will be created automatically.
2. Backend Editor Mode
Drag and drop elements you need to build your page layout.
Moreover Opal team provide to you more elements to create your shop page easier. They are Wpo Elements and Opal Elements
Using Visual Composer -> Click Add element -> Select WPO Elements -> Choose Elements you want
For example : using WPO Product Category
- Choose category to display
- Set number of products to show
- Set products count per pages ( set 3 mean 3 products per one carousel)
- Set icon you want by using code ( go to there to find more icons)
- Extra class name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Watch video about Visual Composer
B. How to set page like our page
1. Home Shop 1.
a. Front-end Appearance : Link
b. Back-end setting
- Classic mode :
Using source text :
<p class="text-muted">summer spring 2014</p>
<p class="text-lead"><strong>online sale</strong></p>
<p class="white"><strong>50% off a selection of style from the summer spring 2014 collection</strong></p>
[/vc_column_text][/vc_column][/vc_row]
- Backend mode :
2. Home Shop 2.
a. Front-end Appearance : Link
b.Back-end setting
- Classic Mode
Select Classic Mode -> Text then copy and paste.
<div class="media wpo-thumb-list">
<p class="pull-left"><a href="#"><img class="alignnone size-full wp-image-2005" src="http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/06/free-shipping.png" alt="free-shipping" width="48" height="48" /> </a></p>
<div class="media-body">
<h6 class="media-heading red">Free shipping</h6>
on every order over $100.00</div>
</div>
[/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text]
<div class="media wpo-thumb-list">
<p class="pull-left"><a href="#"> <img class="media-object alignnone size-full wp-image-2007" src="http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/06/secure-payment.png" alt="secure-payment" width="41" height="49" /> </a></p>
<div class="media-body">
<h6 class="media-heading orange">secure payment</h6>
Proin gravida nibh vel velit</div>
</div>
[/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text]
<div class="media wpo-thumb-list">
<p class="pull-left"><a href="#"> <img class="alignnone size-full wp-image-2006" src="http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/06/member-discount.png" alt="member-discount" width="48" height="38" /> </a></p>
<div class="media-body">
<h6 class="media-heading blue">member discount</h6>
Aenean sollicitudin, lorem quis bibendum</div>
</div>
[/vc_column_text][/vc_column][/vc_row]
- Backend Mode
3. Home Corporation 1 .
a. Front-End Appearance : Link
b. Back-end setting :
- Classic Mode.
Source Text :
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-6 col-lg-6">
<a href="http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/06/about-us.png"><img class="alignnone wp-image-2065 size-full" src="http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/06/about-us.png" alt="about-us" width="550" height="340" /></a></div>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
<p class="lead margin-top-50 margin-bottom-30 text-primary">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulate cursus a sit amet mauris.</p>
<p class="margin-bottom-40">Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc.</p>
<a class="btn btn-outline" href="#">Read more</a></div>
</div>
[/vc_column_text][/vc_column][/vc_row][vc_row isfullwidth="1" css=".vc_custom_1411100991340{margin-bottom: 150px !important;}" el_class="hidden-xs hidden-sm"][vc_column width="1/2" offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12" css=".vc_custom_1411099554180{margin-bottom: 30px !important;}"][wpo_team title="John Doe" photo="1773" job="CEO" information="Class aptent taciti sociosqu ad litora torquent per conubiaostra, per inctos himenaeos" phone="0123456789" google="https://plus.google.com/+themeforest/posts" facebook="https://www.facebook.com/BrainOs.LTD?fref=ts" twitter="https://plus.google.com/+themeforest/posts" style="circle" pinterest="https://pinterest.com/"][/vc_column][vc_column width="1/2" offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12" css=".vc_custom_1411099562659{margin-bottom: 30px !important;}"][wpo_team title="Christine Doe" photo="1774" job="web design" information="Class aptent taciti sociosqu ad litora torquent per conubiaostra, per inctos himenaeos" phone="0123456789" google="https://plus.google.com/" facebook="https://www.facebook.com" twitter="https://plus.google.com/" style="circle" pinterest="https://www.pinterest.com/" linkedin="https://www.linkedin.com/"][/vc_column][vc_column width="1/2" offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12" css=".vc_custom_1411099572850{margin-bottom: 30px !important;}"][wpo_team title="Christine Doe" photo="1775" job="CEO" information="Class aptent taciti sociosqu ad litora torquent per conubiaostra, per inctos himenaeos" phone="0123456789" google="https://plus.google.com/" facebook="https://www.facebook.com" twitter="https://plus.google.com/" style="circle" pinterest="https://www.pinterest.com/" linkedin="https://www.linkedin.com/"][/vc_column][vc_column width="1/2" offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12" css=".vc_custom_1411099581739{margin-bottom: 30px !important;}"][wpo_team title="Christine Doe" photo="1776" job="CEO" information="Class aptent taciti sociosqu ad litora torquent per conubiaostra, per inctos himenaeos" phone="0123456789" google="https://plus.google.com/" facebook="https://www.facebook.com" twitter="https://plus.google.com/" style="circle" pinterest="https://www.pinterest.com/" linkedin="https://www.linkedin.com/"][/vc_column][/vc_row][vc_row css=".vc_custom_1410064198688{margin-bottom: 90px !important;padding-top: 90px !important;padding-bottom: 130px !important;}" isfullwidth="1" el_class="block-pie-chart-ourskills"][vc_column width="1/1"][vc_row_inner el_class="bg-transparent"][vc_column_inner width="1/1"][wpo_title_heading title="our skill" size="font-size-lg" title_align="separator_align_center" descript="we are good at web design and web development" font_color="#ffffff"][/vc_column_inner][/vc_row_inner][vc_row_inner el_class="bg-transparent"][vc_column_inner width="1/4"][vc_pie value="80" label_value="80" color="btn-primary" title="Photoshop" units="%" descript="Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inctos himenaeos. Mauris in erat justo"][/vc_column_inner][vc_column_inner width="1/4"][vc_pie value="75" label_value="75" color="btn-warning" title="Illustrator" units="%" descript="Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunctiam pharetra"][/vc_column_inner][vc_column_inner width="1/4"][vc_pie value="60" label_value="60" color="btn-success" title="Dreamweaver" units="%" descript="Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam"][/vc_column_inner][vc_column_inner width="1/4"][vc_pie value="90" label_value="90" color="btn-info" title="After Effect" units="%" descript="Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quamut aliquam massa nisl quis neque"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row css=".vc_custom_1411178892124{margin-bottom: 110px !important;}" el_class="block-recent-projects hidden-xs"][vc_column width="1/1"][wpo_portfolio size="font-size-lg" alignment="separator_align_center" number="8" grid_columns_count="4" columns_count="4" descript="see our award winning work" title="Recent projects" el_class="portfolio-front-page"][/vc_column][/vc_row][vc_row el_class="wpb-highlighted wpb-counter hidden-xs" css=".vc_custom_1411179161683{margin-bottom: 90px !important;}" isfullwidth="1"][vc_column width="1/1"][vc_row_inner][vc_column_inner width="1/4"][wpo_counter title="completed projects" style="circle" number="35" icon="fa-check-square-o"][/vc_column_inner][vc_column_inner width="1/4"][wpo_counter title="Happy clients" number="117" icon="fa-meh-o" style="circle"][/vc_column_inner][vc_column_inner width="1/4"][wpo_counter title="Winning awards" number="13" icon="fa-trophy" style="circle"][/vc_column_inner][vc_column_inner width="1/4"][wpo_counter title="Working hours" number="2125" icon="fa-clock-o" style="circle"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row css=".vc_custom_1411178646751{margin-bottom: 0px !important;padding-bottom: 0px !important;}" el_class="hidden-xs"][vc_column width="1/1"][wpo_title_heading title="our pricing" size="font-size-lg" title_align="separator_align_center" descript="choose your package and get started"][/vc_column][/vc_row][vc_row isfullwidth="1" css=".vc_custom_1411178595220{margin-bottom: 150px !important;}" el_class="hidden-xs"][vc_column width="1/3"][wpo_pricing title="basic package" price="50" currency="$" period="1 month" featured="0" style="Boxed" linktitle="sign up" link="#" information="dfdsfsdfsd"]
<ul>
<li>Free setup</li>
<li>10Gb Storage</li>
<li>Unlimited users</li>
<li>Enhanced Security</li>
<li>100 Email Addresses</li>
</ul>
[/wpo_pricing][/vc_column][vc_column width="1/3"][wpo_pricing title="standard package" price="80" currency="$" period="1 month" featured="1" style="Boxed" linktitle="sign up" link="#"]
<ul>
<li>Free setup</li>
<li>10Gb Storage</li>
<li>Unlimited users</li>
<li>Enhanced Security</li>
<li>100 Email Addresses</li>
</ul>
[/wpo_pricing][/vc_column][vc_column width="1/3"][wpo_pricing title="professinal package" price="110" currency="$" period="1 month" featured="0" style="Boxed" linktitle="sign up" link="#"]
<ul>
<li>Free setup</li>
<li>10Gb Storage</li>
<li>Unlimited users</li>
<li>Enhanced Security</li>
<li>100 Email Addresses</li>
</ul>
[/wpo_pricing][/vc_column][/vc_row][vc_row css=".vc_custom_1411179281914{margin-bottom: 135px !important;background-image: url(assets/images/image_2.jpg?id=3402) !important;}" parallax="1" el_class="hidden-xs"][vc_column width="1/1"][wpo_testimonials skin="skin-3" size="font-size-lg" alignment="separator_align_left"][/vc_column][/vc_row][vc_row isfullwidth="1" css=".vc_custom_1411179597886{margin-bottom: 150px !important;}" el_class="hidden-xs"][vc_column width="1/1"][wpo_brands title="Our customer" number="12" size="font-size-lg" alignment="separator_align_center" descript="some clients all around the world" el_class="brand-customer"][/vc_column][/vc_row][vc_row css=".vc_custom_1411180082444{margin-bottom: 90px !important;}" el_class="hidden-xs"][vc_column width="1/1"][vc_separator color="grey"][/vc_column][/vc_row][vc_row isfullwidth="1" css=".vc_custom_1410332649433{margin-bottom: 150px !important;}"][vc_column width="1/1"][wpo_megablogs loop="size:3|order_by:date|post_type:post|categories:269" layout="style2" grid_columns="3" title="recent updates" alignment="separator_align_center" size="font-size-lg" grid_thumb_size="full" descript="Class aptent taciti sosqu ad litora torquent"][/vc_column][/vc_row][vc_row css=".vc_custom_1411099834759{background-image: url(http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/06/bg-term.png?id=2794) !important;}" isfullwidth="1" el_class="block-callout hidden-xs hidden-sm"][vc_column width="1/1" offset="vc_hidden-xs"][vc_column_text el_class="callout"]
<div class="pull-left">
<h2>start your bussiness now</h2>
<p class="text-uppercase">Mauris in erat justo ullam ac urna eu felis dapibus conum</p>
</div>
<div class="pull-right"><button class="btn btn-default btn-lg" type="button">purchase theme</button></div>
[/vc_column_text][/vc_column][/vc_row]
- Backend Mode
4. Home Coporation 2
a. Front-end Appearance : Link
b. Back-end Setting :
- Classic Mode
Source Text :
<div class="row">
<div class="col-md-7 col-lg-7">
<p class="text-hightlight">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit conuat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</p>
<div class="block-about-content row">
<div class="col-sm-6">
<h5>our mission</h5>
Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat conuat auctor eu in elit
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu</div>
<div class="col-sm-6">
<h5>our value</h5>
Sed non mauris vitae erat conuat auctor eu in elitClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit</div>
</div>
</div>
<div class="col-md-5 col-lg-5 block-about-image"><a href="http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/09/banner-corporate-3.png"><img class="alignnone wp-image-3454 size-full" src="http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/09/banner-corporate-3.png" alt="banner-corporate-3" width="300" height="399" /></a></div>
</div>
[/vc_column_text][/vc_column][/vc_row][vc_row css=".vc_custom_1410950783483{margin-right: -40px !important;margin-bottom: 0px !important;margin-left: -40px !important;padding-bottom: 0px !important;background-image: url(assets/images/image_3.jpg?id=3511) !important;}" parallax="1" el_class="no-bg"][vc_column width="1/4" el_class="block-left"][wpo_inforbox size="font-size-lg" title_align="separator_align_right" information="These are the services we provide, check it out for yourself" title="Services" el_class="dark"][/vc_column][vc_column width="3/4" el_class="block-services"][vc_row_inner css=".vc_custom_1409665885336{margin-bottom: 0px !important;}"][vc_column_inner width="1/2"][wpo_service title="Web Design" size="font-size-sm" title_align="separator_align_left" information="Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio." style="horizontal" icon="fa-pencil"][wpo_service title="seo solutions" size="font-size-sm" title_align="separator_align_left" information="Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra" style="horizontal" icon="fa-cogs"][/vc_column_inner][vc_column_inner width="1/2"][wpo_service title="Web development" size="font-size-sm" title_align="separator_align_left" information="Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.
" style="horizontal" icon="fa-laptop"][wpo_service title="marketing online" size="font-size-sm" title_align="separator_align_left" information="Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo" style="horizontal" icon="fa-money"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row css=".vc_custom_1411181600280{margin-right: -40px !important;margin-bottom: 0px !important;margin-left: -40px !important;padding-left: 40px !important;}" el_class="hidden-xs"][vc_column width="5/12" el_class="block-skills-content"][vc_accordion active_tab="2" collapsible="yes"][vc_accordion_tab title="solutions"][vc_column_text]Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat conuat auctor eu in elit
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eufelis dapibus condimentum sit amet a augue[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title="technology"][vc_column_text]Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat conuat auctor eu in elit
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eufelis dapibus condimentum sit amet a augue[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title="people"][vc_column_text]Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat conuat auctor eu in elit
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eufelis dapibus condimentum sit amet a augue[/vc_column_text][/vc_accordion_tab][/vc_accordion][/vc_column][vc_column width="1/3" el_class="block-skills-progress-bar"][vc_progress_bar values="80|photoshop" bgcolor="bar_red" units="%"][vc_progress_bar values="70|illustrator" bgcolor="bar_orange" units="%"][vc_progress_bar values="85|Dreamweaver" bgcolor="bar_green" units="%"][vc_progress_bar values="90|firework" bgcolor="bar_blue" units="%"][vc_progress_bar values="75|after effect" bgcolor="bar_turquoise" units="%"][/vc_column][vc_column width="1/4" el_class="block-skills-info-box"][wpo_inforbox size="font-size-lg" title_align="separator_align_left" information="Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat " title="Capacity"][/vc_column][/vc_row][vc_row css=".vc_custom_1411034218116{margin-right: -40px !important;margin-bottom: 0px !important;margin-left: -40px !important;background-image: url(assets/images/image_4.jpg?id=3517) !important;}" parallax="1" el_class="no-bg"][vc_column width="1/4"][wpo_inforbox size="font-size-lg" title_align="separator_align_right" information="Duis sed odio sit amet nibh vulptate cursus a sit amet mauris" title="Projects" el_class="dark inforbox-latest-project"][/vc_column][vc_column width="3/4" el_class="block-latest-project"][wpo_portfolio size="font-size-md" alignment="separator_align_left" number="6" columns_count="3" el_class="portfolio-latest-project"][/vc_column][/vc_row][vc_row css=".vc_custom_1411181521862{margin-right: -40px !important;margin-bottom: 0px !important;margin-left: -40px !important;background: #222222 url(http://pavodemo.com/wpopal/exist/demo_1/wp-content/uploads/2014/06/bg-hight-light.png?id=2874) !important;}" parallax="1" el_class="counter-style-2 hidden-xs"][vc_column width="1/4"][wpo_counter title="Projects" number="35" icon="fa-check-square-o" style="circle"][/vc_column][vc_column width="1/4"][wpo_counter title="happy clients" number="117" icon="fa-meh-o" style="circle"][/vc_column][vc_column width="1/4"][wpo_counter title="winning awards" number="13" icon="fa-trophy" style="vertical"][/vc_column][vc_column width="1/4"][wpo_counter title="working hours" number="2125" icon="fa-clock-o" style="horizontal"][/vc_column][/vc_row][vc_row css=".vc_custom_1411181566818{margin-right: -40px !important;margin-bottom: 0px !important;margin-left: -40px !important;}" el_class="hidden-xs"][vc_column width="1/4"][wpo_inforbox size="font-size-lg" title_align="separator_align_right" information="Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor" title="Customer"][/vc_column][vc_column width="3/4" el_class="block-client-say"][wpo_testimonials size="font-size-lg" alignment="separator_align_center" skin="skin-4"][wpo_brands size="font-size-lg" alignment="separator_align_center" number="6" el_class="margin-bottom-70 hidden-xs hidden-sm"][/vc_column][/vc_row][vc_row css=".vc_custom_1411101485309{margin-right: -40px !important;margin-bottom: 0px !important;margin-left: -40px !important;background-color: #f1f5f9 !important;}" el_class="hidden-xs hidden-sm"][vc_column width="1/4"][wpo_inforbox size="font-size-lg" title_align="separator_align_right" information="Sed non mauris vitae erat consquat auctor eu in elit" title="Latest news"][/vc_column][vc_column width="3/4" el_class="block-latest-update"][wpo_megablogs alignment="separator_align_left" size="font-size-lg" loop="size:3|order_by:date|post_type:post|categories:32" layout="blog" grid_columns="3" grid_thumb_size="full" el_class="margin-bottom-40"][/vc_column][/vc_row][vc_row css=".vc_custom_1411181550639{margin-right: -40px !important;margin-bottom: 0px !important;margin-left: -40px !important;}" el_class="inline-onefield hidden-xs hidden-sm"][vc_column width="1/1"][vc_column_text el_class="callout"]
<div class="pull-left">
<h2>start your bussiness now</h2>
<p class="text-uppercase">Mauris in erat justo ullam ac urna eu felis dapibus conum</p>
</div>
<div class="pull-right"><button class="btn btn-default btn-lg" type="button">purchase theme</button></div>
[/vc_column_text][/vc_column][/vc_row]
- Backend Mode
5. Home News Magazine
a. Front-end Appearance : Link
b. Back-end Setting :
- Classic Mode
Source Text.
- Backend Mode
C . Set a page as Home Page
To set one of the pages you already have created as the Home page for your site, from your WordPress dashboard, navigate to Settings → Reading.
Select “A static page” and choose “Your Homepage” as the Front Page.
Setting Blog Page
1. Create the blog post
Navigate to Posts → Add New, then fill your information
- Start filling in the blanks: enter your post title, write your actual body content in the main post editing box below it.
- As needed, select a category, add tags, and make other selections from the sections below the post.
- You can create blog post with a lot of Formats like link, gallery, image ..... Select format you want to create on Format from in right sidebar.
- Moreover you can embed video, audio, link on title blog when you set it in "Embed Options" section
+ Embed Post format : you can fill the link of youtube and vimeo to embed video
+ Link Post format : fill the link to embed link in title of blog post.
- Use SEO Fields to create SEO for you blog post
- When your post is ready, click Publish.
2. Manager current all blogs
Navigate to Posts → All Posts
You can see all informations of you blog post, add new, edit or delete them.
3. Edit Blog Page Layout
From Admin Panel -> Appearance -> Theme Option -> Blog Post Tab
Setting Contact Page
1. Front-end Contact page Appearace : Link
2. Back-end setting :
From your Dashboard admin Navigate to Pages
- Select All Pages to see all page then click edit one page you want
- Select Add New to create new page.
Use Visual Composer to drag and drop element you want . For Contact Page, need Google Maps, Text Block and Contact Form 7
a. Google Maps
Enter your location then find it.
b. Text Block
Source :
<div class="media">
<div class="pull-left rounded"><i class="fa fa-home"> </i></div>
<div class="media-body">Bigshop Store
123 Main st. Los Angeles, CA, 90012, U.S.A</div>
</div>
<div class="media">
<div class="pull-left rounded"><i class="fa fa-phone"> </i></div>
<div class="media-body">(+386) 40 123 456
(+386) 40 123 456</div>
</div>
<div class="media">
<div class="pull-left rounded"><i class="fa fa-flag-o"> </i></div>
<div class="media-body"><a href="mailto:one@address.com">one@address.com</a>
<a href="mailto:two@address.com">two@address.com</a></div>
</div>
<div class="media">
<div class="pull-left rounded"><i class="fa fa-check"> </i></div>
<div class="media-body">From Monday to Friday
9:00 a.m. to 5:00 p.m.</div>
</div>
</div>
<div class="contact-form-content">
<small>This is a CMS block edited from admin panel.
You can insert any content here.</small>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quasi culpa delectus nostrum perferendis necessitatibus quibusdam quisquam cum doloremque facere sint officiis velit repudiandae nesciunt fuga illo at soluta itaque.
<small>Customer Servie:</small>
<a href="mailto:info@yourstore.com">info@yourstore.com</a>
<small>Returns and Refunds:</small>
<a href="mailto:returns@yourstore.com">returns@yourstore.com</a>
</div>
c. Contact Form
- From Dashboard -> Navigate to Contact and create new Contact like this. Then select that form to Contact Form 7 element on Contact Page
Source :
<label for="your_name">Your Name (required)</label>
[text* text-799 class:form-control id:your_name akismet:author]
</div>
<div class="form-group">
<label for="your_email">Your Email (required)</label>
[email* email-257 class:form-control id:your_email akismet:author]
</div>
<div class="form-group">
<label for="contact_subject">Subject</label>
[text text-144 class:form-control id:contact_subject]
</div>
<div class="form-group">
<label for="your_message">Your Message</label>
[textarea textarea-552 class:form-control id:your_message]
</div>
<div class="form-group">
[submit class:btn class:btn-outline]
</div>
Setting Paralax
With Visual Composer you can create Parallax Sections
Front-end Parallax look like :
Back-end setting :
Step 1: Goto Home Page then click edit row you want to make it become Parallax Sections.
Step 2: In General Tab, select option Parallax and tick"is FullWidth" if you want it displayed full width
Step 3: In Design options tab, Import your media file to display.
Step 4: Drag elements you want to display on Parallax ( example : Text Block )
Source Text :
<p class="text-lead"><strong>online sale</strong></p>
<p class="white"><strong>50% off a selection of style from the summer spring 2014 collection</strong></p>
Setting Footer
1. Using Widget Sidebar
a. Create Custom Link
- Navigate to Appearance >> Widgets
- Select Sidebar Footer 1, 2 and 3
Import Custom Menu to display menu link ( remember you need to create menu first)
b. Create Information
- Navigate to Appearance >> Widgets
- Select Sidebar Footer 4
Import Text widgets to there as HTML Code below
Source:
Text : Contact Info
<dt><i class="fa fa-map-marker"></i></dt>
<dd>No 1104 Sky Tower, Las Vegas, USA</dd>
<dt><i class="fa fa-phone-square"></i></dt>
<dd>(084) 123 456 78 / (084) 978 654 32 </dd>
<dt><i class="fa fa-envelope"></i></dt>
<dd><a href="mailto:support@exist.com">support@exist.com</a></dd>
</dl>
Text : About the theme
Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra
Text : Join our newsletter
<div class="form-group">
<label class="control-label">Aenean sollicitudin, lorem quis endum auctor, nisi elit consequat ipsum, nec sagittis sem nibh </label>
<div class="input-group input-group-form">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control form-control-reversed">
</div>
<button class="btn btn-outline-inverse btn-block" type="button">subcribse</button>
</div>
</form>
2. Using Visual Composer
Using Visual Composer to create Footer style you can create unlimited Footer.
Do not forget to check on box Footer to use Visual Composer on Visual Composer Setting
Setting Testimonials
Front-end Opal Testimonials look like :
Back-end setting :
Step 1: Go to Opal Testimonial from Dashboard then create content of Testimonials
Step 2: Drag WPO Testimonial elements by using Visual Composer on page you want to display testimonials.
You can choose some setting like title, skin ....
Step 3: Make it like Parralax by edit Row setting.
Select image to display
Setting Brands
Front-end Opal Brands look like :
Back-end setting :
Step 1: Goto Opal Brands from Dashboard then create Brands
Step 2: Drag WPO Brands elements by using Visual Composer on page you want to display testimonials.
You can choose some setting like title, number of brands ....
Setting Newsletter
We using MailChimp for WP plugin for Newsletter subscribe. You can read more about MailChimp from here
Front-end look like :
Back-end setting :
Navigate to Appearance >> MailChimp for WP from your admin Dashboard
Import HTML Code below on section Form mark-up Source
Source :
<div class="input-group input-group-form">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" id="mc4wp_email" name="EMAIL" required placeholder="" class="form-control form-control-reversed" />
<span class="input-group-btn">
<input type="submit" value="Subcribe" class="btn btn-outline-inverse" />
</span>
</div>
After creating from of your plugin. You must set position to display.
Going Appearance -> Widgets then drag mailchimp to Sidebar you want or using Visual Composer to drag and drop.
Setting Theme Options
Opal Theme use powerful theme options that helps you easily take control over the appearance of your site, by allowing you to upload your logo, style the theme with your custom unlimited colors, turn features on and off, without having to write any code.
To access go to your admin Dashboard Navigate to Appearance >> Theme Options
1. General Tab : Manage general setting like your logo, copyright, footer ....
2. Blog Post Tab : Manage setting of blog post
3. SEO Optione Tab : Manage SEO and custom word meta
4. Social Setting Tab :Manage Social Networks icons and links
5. Customization Tab : Customize the colors, backgrounds and fully theme appearance
Live Theme Editor is great and powerly module to customize your theme by Opal themes . Opal themes developed the back-end control tools that allow to customize your theme. You can change unlimited colour item, colour text, colour background, and almost item in your theme... Powerful option panel which allows you to change not only elements colours, but also change theme's backgrounds, upload your own full size image background or your own pattern!
- Navigate to Appearance → Theme Options in your WordPress admin dashboard.
- Click on Customization Tab, select Live Theme Editor
- After you create one customization theme, go back there and Select customization theme .
- Click Save Options to make front-end site look like customization theme.
Follow our video guide to know how to use Live Theme Editor:
Follow our video guide to know how to customize Live Theme Editor for developer:
6. Megamenu Tab: setting your megamenu.
You can enable sticky by check that box
7. Woocommerce Tab : manager some setting for products like image bellow.
You can setting layout of single products page and category page too.
Enable quick view, and a lot of setting.
How to translate the theme
The easiest way to translate theme to the language of your choice is to use "WPML" plugin.
- To begin, be sure you have the WPML Plugin installed and activated, along with the WPML String Translation plugin.
- To set up WPML the first time, follow their Getting Started Guide.To begin translating, select WPML (in the Dashboard menu) -> String Translation. You should see a list of the strings in the theme (there should be only four), with blue translation links to the right. Click these links to reveal the list of languages you use on your blog and the associated translations.
- How to set and translate main features of the theme
- Using translation management http://wpml.org/documentation/translating-your-contents/using-the-translation-editor/
- Translation Management & Features – http://wpml.org/documentation/translating-your-contents/using-the-translation-editor/translation-management-features/
- Translating URL slugs – http://wpml.org/documentation/getting-started-guide/translating-page-slugs/
- How to scan strings coming from the theme
- http://wpml.org/documentation/getting-started-guide/theme-localization/
- How to translate strings using String Translation
- http://wpml.org/documentation/getting-started-guide/string-translation/
- If adjustment is needed for WPML language switcher please also add this
- http://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/
- If you need more help with WPML plugin. Please go WPML Forum
FAQs
1. How To Enable the Registration Form on the ‘Login/My Account’ page?
In case you cannot see the Registration Form on the My Account page or checkout page, it means you need to enable it.
You can find this setting by navigating to WooCommerce >> Settings.
Open Account Tab In the Registration section, make sure the" Enable registration on the "Checkout" page" and “Enable registration on the “My Account” page” options is checked.
This is what you should be seeing on your screen:
2. How To Add Color/Size selection box on the product page?
In WooCommerce, you can define product attributes, such as size or color, to use be used as product options.
Start by navigating to Products → Attributes.
For example an attribute could be “Size“. Then you need to Configure its terms. Those would be “Small, Medium, Large“.
Once defined, these global attributes can be assigned to your variable products.
Finally
Thank you for reading!
We hope you can create the best website with our themes.
One again, thank you so much for using our 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.
Do not hesitant to contact us via email : [email protected] or if you want more information,please send to: [email protected] or submit ticket via Opal Forum
Please take a screenshot photo with descriptions about your problem. More details about your problems help us more easier to figure out and respond you sooner.
*******************Note*********************************************************************************************************
SCOPE OF SUPPORT
Our support covers getting setup, trouble using any features and any bug fixes that may arise. Unfortunately we cannot provide support for customizations or 3rd party plugins. If you need help with customizations of your theme, please contact with us with your requirement. Our technical team will help you with some fees.
SUPPORT SCHEDULE
Our working time is 8:30am - 5:30pm from Monday to Friday (GMT+7). So if you email us or submit ticket besides this working time, we are really sorry that we are not able to respond you soon. We will try to reply you as fast as we can. Especially if you email or submit ticket at weekend, please be patient and we will respond to you right when we are back on Monday.