1GETTING STARTED
1.1 Introduction
First of all, I would like to thank you for purchasing this theme. We’ve put in lots of love in developing this wordpress theme and are excited that you’ve chosen this theme for your website. We hope you find it easy to use our theme. This documentation guides you through the main features of the theme and guides you how to use and customize the theme.
1.2 System Requirements
At the basic level, this theme will require the following conditions:
- Apache 2.x or Microsoft IIS 7
- PHP 5.3.x
- MySQL 5.0.4 or higher
- WordPress 3.9+, 4.0+
Recommended PHP Configuration Limits: Many issues you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can contact with your web host and ask them to increase those limits to a minimum or You can do this on your own by finding php.ini file in your root directory as follows:
- max_execution_time 360
- memory_limit 128M
- post_max_size 32M
- upload_max_filesize 32M
1.3 Key Features
- Boxed and Wide layouts
- Fully responsive layout
- Easy to customize
- Unlimited colors and fonts
- Advanced Widgets included
- WooCommerce Integration
- Custom Options & Shortcode
- Less & Bootstrap
- RTL Language Supported
and much more…
1.4 WordPress Information
To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes. Below are all the useful links for WordPress information.
- WordPress Codex – General info about WordPress and how to install on your server.
- Instructional Video – Awesome How-To video created by Woo Themes.
- First Steps With WordPress – General info about multiple topics about WordPress.
- FAQ New To WordPress – The most popular FAQai??i??s regarding WordPress.
- WordPress 101 Tutorial videos – Some great videos from WordPress 101 Tutorial Series.
2INSTALLATION
2.1 Files Structure
At first, you need to download the package about my computer and then unzip the package. The Main Files Gives You All The Content Listed Below
- Theme folder – Contains the sw_lovefashion_theme.zip file and sw_lovefashion-child-theme.zip WordPress Theme. The child theme is only for users who make code changes.
- Data folder – Contains the sample_data.xml file, media.xml and widget.wie file.
- revslider folder – Contains the homeblog.zip file, slider-homeboxded.zip , home-slide-v2.zip and slidehome.zip file.
2.2 Theme Installation
You can install the theme in two ways: through WordPress, or via FTP.
Note: If the theme file size is larger than 8M, please upload to FTP (File Transfer Protocol).
2.2.1 Theme Via FTP Installation
- Extract themename_version.zip.
- Load your FTP client, such as FileZilla.
- Upload the themename_version folder to the /wp-content/themes directory.
- In the left menu sidebar, go to Appearance >> Themes.
- Click Activate underneath the themeai??i??s named section.
2.2.2 Theme Via WordPress Admin Panel Installation
Step 1 – Open the wp-admin panel (navigate through web browser to the folder where you have installed the WordPress e.g (www.your_domain.com/wp-admin/).
Step 2 – Login to your WordPress Dashboard and navigate to Appearance >> Themes. At the top of the page click the Add New button.
Step 3 – Click the Upload Theme button >> Choose File in Import from your computer section. Navigate to previously zipped theme package and open theme installator folder: Select your ai???sw_lovefashion_theme.zipai??? file and click Install Now.
Step 4 – The uploading process will be started. You will see the message that Theme installed successfully.
Step 5 – After the installation you will be able to activate the theme to do this click the “blue” activation link.
Once theme is installed, you need to install Required Plugins to get full features working.
2.3 Required Plugins Installation
After installing and activating the theme you will see a yellow popup at the top of the page. Saying: “This theme requires the following plugins…” please click the ‘Begin Installing plugins’ link.
You will be redirected to ‘Install Required Plugins’ page, here you will find all of the theme required plugins. To install them just check all of them and from the drop down select install once installed do the same to activate them.
2.4 Change Media Image Sizes
In Admin Panel, navigate to “Settings > Media” section, after resize the image as you want.
2.5 Change Media Product Image Sizes
You can change the image size in “Woocommerce > Settings > Products > Display” section.
After change the images sizes, you should regenerate all the thumbnails. For this, you should install and activate “Regenerate Thumbnails” plugin.
2.6 Sample Data Installation
Step 1 – In the Administrator page, please navigate to Tools >> Import.
Step 2 – Please choose “WordPress” to import.
Step 3 – In Import WordPress page, click “choose file” button to select file “sample_data.xml” and “media.xml” to upload, one after another.
2.7 Widget Installation
Step 1 – In the Administrator page, please navigate to Tools >> Widget Importer & Exporter.
Step 2 – After that choose “widget_data.wie” file >> press Import Widgets button.
2.8 Revolution Slider Installation
Step 1 – In the Administrator page, please navigate to Revolution Slider >> Click “Import Slider” button .
Step 2 – The “Import Slider” pop-up window, please choose file “homeblog.zip” , “slider-homeboxded.zip” , “home-slide-v2.zip” and “slidehome.zip”, one after another to import slider.
3THEME OPTIONS
3.1 General
3.3 Layout
3.4 Typography
3.6 Advanced
4PAGES
Pages are the backbone of your website, and most likely you will setup several of them. Pages are a blank canvas that allow you to add content with our shortcode elements. There are different page templates to choose from, each serving a purpose to help you build a finished site.
The following sections will cover these different topics that are listed below.
4.1 How To Create A New Page
Here is a screenshot that shows you the various areas and descriptions of the page settings described above.
4.2 Setting Up Home Page
Setting up your home page is the same as setting up any other regular pages, except that you need to specify in the settings which page will be your Main Home Page.
How To Set Your Home Page
4.3 Setting Up About Us Page
The Front-end of About Us Page:
How To Create The About Us Page in Admin
Step 1 – Create a new page by clicking “Add New” button, and give it any name you wish.
Step 2 – Insert your content into the editor field, such as a heading and text.
Step 3 – In the Page Attributes box on the right hand side, set the Template option from the dropdown menu.
Copy & Paste the content code into the text editor
<div class="page-aboutus"> <div class="about-us-content"> <div class="about-us-image"><img src="http://wp.smartaddons.com/themes/sw_lovefashion/wp-content/uploads/2014/06/aboutuscontent.png" alt="About Us" /></div> Mante lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor idunt lorem dolor tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor idunt. Lorem ipsum dolor sit amet, consetur. </div> <div class="about-us-social"><a href="http://www.facebook.com/SmartAddons.page"></a><a href="http://twitter.com/smartaddons"></a><a href="http://vn.linkedin.com/in/youtech"></a><a href="http://feeds.feedburner.com/smartaddons/news-announcements"></a><a href="https://plus.google.com/u/0/+Smartaddons"></a></div> </div>
4.4 Setting Up Contact Us Page
The Front-end of Contact Us Page
How To Create The Contact Us Page in Admin
Step 1 – Create a new page by clicking “Add New” button, and give it any name you wish.
Step 2 – Insert your content into the editor field, such as a heading and text.
Step 3 – In the Page Attributes box on the right hand side, set the Template option from the dropdown menu.
The Back-end of Contact Us Page
Copy & Paste the content code into the text editor
<div class="box-contact-us row"> <div class="contact-map col-lg-6 col-md-6 col-sm-6"> <div class="border-map"><iframe width="100%" height="300px" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d211642.2952567641!2d-118.41173249999999!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA!5e0!3m2!1sen!2s!4v1402372564534"></iframe></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornatre lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero </div> <div class="contact-form-submit col-lg-6 col-md-6 col-sm-6">[contact-form-7 id="139" title="Contact Us"]</div> <div class="wrap-contact-address"> <div class="contact-address col-lg-4 col-md-4 col-sm-4"> <p class="ct-street">Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</p> <a class="ct-email" href="#">Email : support@lovefashion.com <span>support2@lovefashion.com</span></a> <p class="ct-hotline">Hotline : 0123-4567-8910 <span class="hotline">0123-4567-8910</span></p> </div> <div class="contact-address col-lg-4 col-md-4 col-sm-4"> <p class="ct-street">Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</p> <a class="ct-email" href="#">Email : support@lovefashion.com <span>support2@lovefashion.com</span></a> <p class="ct-hotline">Hotline : 0123-4567-8910 <span class="hotline">0123-4567-8910</span></p> </div> <div class="contact-address col-lg-4 col-md-4 col-sm-4"> <p class="ct-street">Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</p> <a class="ct-email" href="#">Email : support@lovefashion.com <span>support2@lovefashion.com</span></a> <p class="ct-hotline">Hotline : 0123-4567-8910 <span class="hotline">0123-4567-8910</span></p> </div> </div> </div>
5MENU SETUP
You must define a menu before you can add items to it.
1. Login to the WordPress Dashboard.
2. From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus’ option to bring up the Menu Editor.
3. Select Create a new menu at the top of the page
4. Enter a name for your new menu in the Menu Name box or select a menu.
5.2 Add Items to a Menu
The Screen Options allow you to choose which items you can use to add to a menu. Click on the Screen Options tab to expand the options available for a particular Screen, check (or unchecked) the desired options, then click the Screen Options hanging tab to collapse the Screen Options.
1. For example, Locate the pane entitled Pages.
2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
5. Click the Save Menu button once you’ve added all the menu items you want. Your custom menu has now been saved.
For more info about the menu creation please go to http://en.support.wordpress.com/menus
5.3 Custom Menu Items
The Navigation Label This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog. The Title Attribute This field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.
1. Click on the arrow in the top right-hand corner of the menu item to expand it.
2. Enter the values for the Navigation Label and Title Attribute that you want to assign to the item.
3. Click the Save Menu button to save your changes.
Click on “Show/Hide Advanced Menu Config” button to configure Mega Menu
It will show as the image below:
1. Advanced Mega menu – With Level 1:
- Active mega menu: Allow to activate/inactivate Mega Menu
- Icon: Using icon-* class to display Icon for any menu item with Font Awesome intergrated. Refercence Font Awesome for details
- Dropdown Size: Set the width of dropdown menu. (ex: min = 1 (= 150px); max = 6 (= 900px)).
- Dropdown Align
– Only for menu items level 1 – If you want dropdown (if have) align by right direction, config it to ai???Rightai??i?? instead of ai???Leftai??i?? or ai???Defaultai??i?? – ai???Defaultai??i??: no class be add to dropdown, everything are nature by default css. – ai???Leftai??i?? / ai???Rightai??i??: add to dropdown an utility class for float it left/ right. Make it align as you want.
- Show Description as Subtitle
– Mean as the name. – Description is core attribute of menu item. You may need check to show it in the metabox screen.
- Hide Title
– Sometime you need hide the title of menu, select ai???Yesai??i?? value please. In this case, Icon or Subtitle or Advanced Content are need to show as replacer.
- Disable Link: Allow to disable link.
- Advanced:
– Some advanced functions are placed here. – ai???Defaultai??i??: NOOP, do nothing. Sure, it is not advanced – ai???Use as Dividerai??i??: Show any icon, title, subtitle, content. Divider style only. – ai???Append Advanced Contentai??i??: Append content after menu title block (icon+title+subtitle) – ai???Append Advanced Content with Shortcodeai??i??: as above, but ai???do_shortcodeai??i?? with this before append.
- Advanced content: Insert content follow Advanced ( input HTML, image… not included js & css)
- Menu Thumbnail: Allow to upload thumbnail for menu
2. Advanced Mega menu – With Level 2:
- Dropdown sub size: Set the width of dropdown submenu. (ex: default/ min = 1 (= 150px)/ max = 6 (= 900px)).
6WOOCOMMERCE
SW Love Fashion Theme is fully compatible with WooCommerce plugin. WooCommerce is external plugin and all info about this awesome plugin you can find plugin’s author page. Below you have all friendly links that will be useful:
6.1 How to install WooCommerce
At first please go to Plugins > Add new section and type “WooCommerce” into search field. Then press “enter””.
After that you will results and what you need to do is click on “Install now” button next to “WooCommerce – excelling eCommerce” plugin.
After that plugin will be installed and please click “Activate plugin” link.
6.2 How to add new product
Go to Products >> Add product section. After that you will see page wich looks like below and all you need to do is fill those fields with own values.
All info about adding new product you can read on http://docs.woothemes.com/document/managing-products/
6.3 Registration Options
You need to show registration form on My Account page, you should check “Enable registration on the “My Account” page” in “Woocommerce > Settings > Products > Accounts” section.
7POST
7.1 Creating/Editing Posts
Step 1 – Navigate to Posts in your WordPress admin sidebar.
Step 2 – Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field. You can use visual composer or Ya shortcodes elements inside the post.
Step 3 – Select Post Format from the right side.
Step 4 – Add Categories from the right side. To assign it to the post, check the box next to the Category name.
Step 5 – Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.
Step 6 – For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.
Step 7 – Once you are finished, click Publish or Update to save the post.
Here Is A Screenshot That Shows The Various Areas Of The Post Page Described Above.
8WIDGETS
8.1 To Add Widgets, Follow The Steps Below.
Step 1 – Navigate to Appearance > Widgets to access the list of widgets and widget sections that they can be added to. The left hand side shows all the widgets you can use. The right hand side shows all the different sections you can add widgets to.
Step 2 – Simply drag and drop the widget you want into the widget section you want on the right hand side.
Step 3 – When finished, make sure to click Save in the widget editing box to save the widgets added to your sidebar.
Here Is A Screenshot That Shows The Various Areas Of The Widget Section Described Above.
8.2 Custom Widgets in SW Love Fashion Style 1 Layout
Below is the position image of SW Love Fashion Default Layout.
Below is the description of widgets parameter:
- Title – Title of widget
- Template – Select template that you want
- Category Name – Select category name
- Order by – Allow to order by following field:
- ID
- Name
- Author
- Date
- Title
- Modified
- Parent
- Rand
- Comment Count
- Order – Allow to order Ascending/Descending
- Number of Posts – Number of post will be shown
- Include Posts ID – Include ID of Posts
- Exclude Posts ID – Exclude ID of Posts
- Excerpt Length (in words) – Input the character limitation in words
- Advanced Options – Support 3 options for your advance
- Widget Style – Style of widget ( container is selection )
- col-2 > col-12– Set the number of column that the widget will be used.
- Container– Add a class container into the widget, use for sidebar without container.
- Widget Display – Option select widget display. There are 3 option:
- All – Widget will display all in theme in the sidebar that’s selected.
- Except on selected – Allow to choose pages that don’t want to show widget
- Only on selected – Allow to choose pages that want to show widget
- Users – Allow to be shown for user pages (login/ not login)
- General – Check into the checkbox that you want to show the sidebar( blog, archive…)
- Taxonomy Slugs – Input Taxonomy Slugs of pages that you want to display widget, if have many taxonomies then separate them by “,” mark.
- Posts type – Input Posts type of pages that you want to display widget, if have many posts type then separate them by “,” mark.
- Categories ID & Posts ID – ID of Categories or Posts, if have many IDs then separate them by “,” mark.
- Menu – Allow to choose menu that you want to display widget.
- Widget Style – Style of widget ( container is selection )
8.2.1 YA Top Widget – Top position
Let’s look at the parameters in detail:
8.2.2 YA Top Header Widget – Top Header postion
8.2.3 Language Selector – Top Menu position
8.2.4 WooCommerce Currency Converter – Top Menu position
8.2.5 Text – Banner position
Code Custom HTML of Text:
<div class="box-topadv"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 border-right"> <div class="item-image"> <img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/home-adv1.png" /> </div> <div class="item-content"> <p>Free Shipping Item</p> <div>Lorem ipsum dolor amet consectetur </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 border-right"> <div class="item-image"> <img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/home-30.png" /> </div> <div class="item-content"> <p>30 days free return</p> <div>Lorem ipsum dolor amet consectetur </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 border-right"> <div class="item-image"> <img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/home-dolor.png" /> </div> <div class="item-content"> <p>CASH ON DELIVERY </p> <div>Lorem ipsum dolor amet consectetur </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <div class="item-image"> <img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/home-phone.png" /> </div> <div class="item-content"> <p>Call Us : + 0123.4567.89 </p> <div>Lorem ipsum dolor amet consectetur </div> </div> </div> </div> </div>
8.2.6 Revolution Slider – Banner position
Please click HERE to view Video Guide for Revolution Slider Plugin.
8.2.7 Text – Banner position
Code Custom HTML of Text :
<div class="box-collection-adv">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ad-banner">
<a href="#">
<img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/advtop.png" />
<div> </div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ad-banner">
<a href="#">
<img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/advarmani.png"/>
<div> </div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 ad-banner">
<a href="#">
<img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/adv2013.png"/>
<div> </div>
</a>
</div>
</div>
</div>
8.2.8 SW Woo Tab Slider widget – Above Main position
8.2.9 Text – Above Content position
Code Custom HTML of Text :
8.2.10 SW Woo Tab Slider widget – Above Main position
8.2.11 Text – Above Content position
Code Custom HTML of Text :
<div class="banner-bottom"> <a href="#"><img src="wp-content/themes/sw_lovefashion/assets/img/banner-bottom.png" alt=""/></a> </div>
8.2.12 YA Featured Products – Above Content position
8.2.13 YA Our Blog – Above Content position
8.2.14 SW Testimonial Slider Widget – Above Content position
8.2.15 SW Partner Slider Widget – Above Content position
8.2.16 Text – Above Footer
Code Custom HTML of Text :
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12115.383347876632!2d-74.15808441541529!3d40.611224869164325!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1412591637859" width="100%" height="310" frameborder="0" style="border:0"></iframe> <div class="bottom-map"> <div class="container"> <div class="bottom-contact"> <div class="bottom-contact-content contact-location clearfix"> <div class="contact-left"> <span></span> </div> <div class="contact-right"> Address : No 40 Baria Sreet 133/2 NewYork City, NY, United States </div> </div> <div class="bottom-contact-content contact-email clearfix"> <div class="contact-left"> <span></span> </div> <div class="contact-right"> Email : <a href="mailto:support@lovefashion.com">support@lovefashion.com</a> </div> </div> <div class="bottom-contact-content contact-phone clearfix"> <div class="contact-left"> <span></span> </div> <div class="contact-right"> <p>Phone 1 : 0123456789</p> <p>Phone 2 : 0123456789</p> </div> </div> </div> </div> </div>
8.2.17 Text – Above Footer
Code Custom HTML of Text :
<div class="box-left-contacus">
<div class="contact-us-footer">
<img alt="The Framewodk" src="http://documentation.magentech.com/wp-content/themes/sw_lovefashion/assets/img/[colorset]/contaclogo.png" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
8.2.18 Customer Service – Footer position
8.2.19 Information – Footer position
8.2.20 My Account – Footer position
8.2.21 Newsletter – Footer position
Code Custom HTML of Text :
<div class="box-newsletter-footer"> <p>Sign up for style tips news and an exclusive offer</p> [contact-form-7 id="497" title="newsletter"] <div class="social"> <span class="social-title">Follow Us: </span> <a href="http://www.facebook.com/SmartAddons.page"></a> <a href="https://twitter.com/smartaddons"></a> <a href="http://www.linkedin.com/in/smartaddons"></a> <a href="http://feeds.feedburner.com/smartaddons/news-announcements"></a> </div> </div>
8.2.22 Text – Footer Copyright position
Code Custom HTML of Text :
<div class="list-method"> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-wepay.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-martercart.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-alink.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-paypal.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-visa.png" alt="The Framewodk"> </a> </div>
8.2.23 Text – Floating position
Code Custom HTML of Text :
<div class="social-fixed"> <div class="list-social"> <div class="item-social item-facebook"> <ul class="table-item"> <li class="ic-social"><a target="_blank" href="http://www.facebook.com/SmartAddons.page" title="Facebook"></a></li> <li class="text-social"><a target="_blank" href="http://www.facebook.com/SmartAddons.page" title="Facebook">Facebook</a></li> </ul> </div> <div class="item-social item-rss"> <ul class="table-item"> <li class="ic-social"><a target="_blank" href="http://feeds.feedburner.com/smartaddons/news-announcements" title="RSS Feed"></a></li> <li class="text-social"><a target="_blank" href="http://feeds.feedburner.com/smartaddons/news-announcements" title="RSS Feed">RSS Feed</a></li> </ul> </div> <div class="item-social item-twiter"> <ul class="table-item"> <li class="ic-social"><a target="_blank" href="https://twitter.com/smartaddons" title="Twitter"></a></li> <li class="text-social"><a target="_blank" href="https://twitter.com/smartaddons" title="Twitter">Twitter</a></li> </ul> </div> <div class="item-social item-tumblr"> <ul class="table-item"> <li class="ic-social"><a target="_blank" href="#" title="Tumblr"></a></li> <li class="text-social"><a target="_blank" href="#" title="Tumblr">Tumblr</a></li> </ul> </div> <div class="item-social item-google"> <ul class="table-item"> <li class="ic-social"><a target="_blank" href="https://plus.google.com/u/0/+Smartaddons/posts" title="Google Plus"></a></li> <li class="text-social"><a target="_blank" href="https://plus.google.com/u/0/+Smartaddons/posts" title="Google Plus">Google Plus</a></li> </ul> </div> </div> </div>
8.3 Configure One-Page
Below is the position image of One-Page Layout.
8.3.1 Position Top
1. Custom Menu Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Custom Menu” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
2. SW Top Widget: Login
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “sw top widget” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
3. WooCommerce Currency Converter
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “WooCommerce Currency Converter” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
4. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “text” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
Copy & Paste the code into text editor:
<div id="lang_sel"> <ul class="nav"> <li> <a class="lang_sel_sel icl-en" href="#"> <img class="iclflag" title="English" alt="en" src="wp-content/themes/sw_lovefashion/assets/img/en.png"> </a> <ul> <li class="icl-en"> <a href="http://documentation.magentech.com?page_id=96&direction=ltr"> <img class="iclflag" title="English" alt="en" src="wp-content/themes/sw_lovefashion/assets/img/en.png"> English </a> </li> <li class="icl-ar"> <a href="http://documentation.magentech.com?page_id=96&direction=rtl"> <img class="iclflag" title="Arabic" alt="ar" src="wp-content/themes/sw_lovefashion/assets/img/ar.png"> Arabic </a> </li> </ul> </li> </ul> </div>
5. SW Top Widget: Search
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Top Widget” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
6. SW Top Widget: Minicart
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Top Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.3.2 Position Menu Header
1. SW Vertical Mega Menu: Menu
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Vertical Mega Menu” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.3.3 Position Top Banner
1. Revolution Slider
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Revolution Slider” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.3.4 Position Above Main
1. Sw Woo Tab Slider Widget: New Arrivals
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Sw Woo Tab Slider Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.3.5 Position Below Content Full
1. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Text Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
Copy & Paste the code into text editor:
<div class="our-services row">
<h2>Our Services</h2>
<p>Lorem ipsum dolor slo onsec nelioro tueraliquet Morbi nec In Curabitur lorem in design Morbi nec In Curabitur lreaoreet nisl lorem design desirus gamin nelliru dotacitus gojus. Vurabi. lreaoreet nisl lorem in design Morbi nec In. </p>
<div class="ship col-lg-6 col-md-6 col-sm-6">
<div class="item">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/home-adv1.png" />
</div>
<div class="item-content">
<h2>Free Shipping Item(s)</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/promotion.png" />
</div>
<div class="item-content">
<h2>30 days free return</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/cash.png" />
</div>
<div class="item-content">
<h2>Cash on delivery</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p></div>
</div>
</div>
<div class="phone-contact col-lg-6 col-md-6 col-sm-6">
<div class="item">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/home-phone.png" />
</div>
<div class="item-content">
<h2>Call us : +0123.456.789</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/payment.png" />
</div>
<div class="item-content">
<h2>Secure payment</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/gift.png" />
</div>
<div class="item-content">
<h2>Bonus Gift</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
</div>
</div>
8.3.6 Position The Blog
1. SW Posts: LATEST FROM THE BLOG
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Posts” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.3.7 Position Below Main Full
1. SW List Category: hot category
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW List Category” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
2. SW Partner Slider Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Partner Slider Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.3.8 Position Above Footer
1. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Text Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
Copy & Paste the code into text editor:
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12115.383347876632!2d-74.15808441541529!3d40.611224869164325!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1412591637859" width="100%" height="310" frameborder="0" style="border:0"></iframe> <div class="bottom-map"> <div class="container"> <div class="bottom-contact"> <div class="bottom-contact-content contact-location clearfix"> <div class="contact-left"> <span></span> </div> <div class="contact-right"> Address : No 40 Baria Sreet 133/2 NewYork City, NY, United States </div> </div> <div class="bottom-contact-content contact-email clearfix"> <div class="contact-left"> <span></span> </div> <div class="contact-right"> Email : <a href="mailto:support@lovefashion.com">support@lovefashion.com</a> </div> </div> <div class="bottom-contact-content contact-phone clearfix"> <div class="contact-left"> <span></span> </div> <div class="contact-right"> <p>Phone 1 : 0123456789</p> <p>Phone 2 : 0123456789</p> </div> </div> </div> </div> </div>
8.3.9 Position Footer
1. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Text Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
Copy & Paste the code into text editor:
<div class="social"> <ul> <li><a href="https://www.facebook.com/SmartAddons.page" class="icon-facebook"></a></li> <li><a href="https://www.pinterest.com/smartaddons/" class="icon-rss"></a></li> <li><a href="https://twitter.com/smartaddons" class="icon-twitter"></a></li> <li><a href="https://plus.google.com/u/0/+Smartaddons/posts" class="icon-google-plus"></a></li> <li><a href="https://www.pinterest.com/smartaddons/" class="icon-tumblr"></a></li> </ul> </div>
2. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Text Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
Copy & Paste the code into text editor:
<div class="list-method"> <a href="#"> <img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/maestro.png" alt="The Framewodk"> </a> <a href="#"> <img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/paypal.png" alt="The Framewodk"> </a> <a href="#"> <img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/cirrus.png" alt="The Framewodk"> </a> <a href="#"> <img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/visa-copy.png" alt="The Framewodk"> </a> </div>
8.3.10 Position Footer Copyright
1. Custom Menu
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Custom Menu Widget” in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.4 Configure Home Parallax
Below is the position image of Home Parallax Layout.
8.4.1 Position Top
1. Custom Menu Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Custom Menu” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.4.2 Position Menu Header
1. SW Vertical Mega Menu: Menu Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Vertical Mega Menu” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.4.3 Position Top Banner
1. Revolution Slider
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Revolution Slider” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.4.4 Position Below Content Full
1. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Text” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
Copy & Paste the content code into the text editor:
<div class="our-services">
<h2>Why choose us?</h2>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibdum auctor, nisi </p>
<div class="shipping">
<div class="count products">
<div class="count-in">
<img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/box-open.png" alt="box" title="box" />
[counters number="54000"] </div>
<h3>Products</h3>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis</p>
</div>
<div class="count agents">
<div class="count-in">
<img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/sitemap.png" alt="box" title="box" />
[counters number="30"]
</div>
<h3>Agents</h3>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis </p>
</div>
<div class="count clients">
<div class="count-in">
<img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/group.png" alt="box" title="box" />
[counters number="400"]
</div>
<h3>LOYAL CLIENTS</h3>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis</p>
</div>
<div class="count member">
<div class="count-in">
<img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/v-card.png" alt="box" title="box" />
[counters number="250"]
</div>
<h3>MEmber</h3>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis</p>
</div>
<div class="count tweets">
<div class="count-in">
<img src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/twitter.png" alt="box" title="box" />
[counters number="5400"]
</div>
<h3>Twitter Followers</h3>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis</p>
</div>
</div>
</div>
8.4.5 Position The Blog
1. SW Posts Widget: LATEST FROM THE BLOG
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Posts” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.4.6 Position Below Main Full
1. SW Woo Slider Widget: OUR COLLECTION
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “SW Woo Slider” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.4.7 Position Above Footer
1. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “text” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
Copy & Paste the content code into the text editor
<div class="container">
<div class="row">
<div class="our-services">
<h2>Our Services</h2>
<p>Lorem ipsum dolor slo onsec nelioro tueraliquet Morbi nec In Curabitur lorem in design Morbi nec In Curabitur lreaoreet</p>
<div class="item col-lg-4 col-md-4 col-sm-6">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/car-hover.png" />
</div>
<div class="item-content">
<h2>Free Shipping Item(s)</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item col-lg-4 col-md-4 col-sm-6">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/promotion-hover.png" />
</div>
<div class="item-content">
<h2>30 days free return</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item col-lg-4 col-md-4 col-sm-6">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/cash-hover.png" />
</div>
<div class="item-content">
<h2>Cash on delivery</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p></div>
</div>
<div class="item col-lg-4 col-md-4 col-sm-6">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/contact-hover.png" />
</div>
<div class="item-content">
<h2>Call us : +0123.456.789</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item col-lg-4 col-md-4 col-sm-6">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/payment-hover.png" />
</div>
<div class="item-content">
<h2>Secure payment</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
<div class="item col-lg-4 col-md-4 col-sm-6">
<div class="item-image">
<img alt="The Framewodk" src="http://dev.ytcvn.com/ytc_templates/wordpress/sw_lovefashion/wp-content/uploads/2015/03/gift-hover.png" />
</div>
<div class="item-content">
<h2>Bonus Gift</h2>
<p>Gurabitur lreaoreet nisl lorem design Nullam adipiscing sapien ut mi elementum sit amet dictum magna luctus.</p>
</div>
</div>
</div>
</div>
</div>
8.4.8 Position Footer
1. Text Widget
Frontend Appearance
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “text” widget in the sidebar.
- You should configure the fields and save.
1.1 Backend Settings of Contact Us
Copy & Paste the content code into the text editor
<div class="contact-us">
<div class="contact-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla.</p>
<div class="contact-address">
<p class="ct ct-street"><a href="#">BRANCH 01</a>
Sed ut perspiciatis unde omnis 123456 Street Name, Los Angeles</p>
<a class="ct ct-email" href="#">Email <span>support@lovefashion.com</span>
<span>support2@lovefashion.com</span></a>
<p class="ct-hotline">Phone
<span>0123-4567-8910</span>
<span>0123-4567-8910</span></p>
</div>
</div>
</div>
1.2 Backend Settings of Newsletter
Copy & Paste the content code into the text editor:
<div class="box-newsletter-footer"> <p>Sign up for style tips news and an exclusive offer</p> [contact-form-7 id="497" title="newsletter"] <div class="social"> <span class="social-title">Follow Us: </span> <a href="http://www.facebook.com/SmartAddons.page"></a> <a href="https://twitter.com/smartaddons"></a> <a href="http://www.linkedin.com/in/smartaddons"></a> <a href="http://feeds.feedburner.com/smartaddons/news-announcements"></a> </div> </div>
1.3 Backend Settings of Map
Copy & Paste the content code into the text editor:
<div class="contact-map"> <div class="border-map"><iframe width="100%" height="300px" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d211642.2952567641!2d-118.41173249999999!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA!5e0!3m2!1sen!2s!4v1402372564534"></iframe></div> </div>
8.4.9 Position Footer Copyright
Frontend Appearance
1. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “text” widget in the sidebar.
- You should configure the fields and save.
Backend Settings
Copy & Paste the content code into the text editor:
<div class="social"> <ul> <li><a href="https://www.facebook.com/SmartAddons.page" class="icon-facebook"></a></li> <li><a href="https://www.pinterest.com/smartaddons/" class="icon-rss"></a></li> <li><a href="https://twitter.com/smartaddons" class="icon-twitter"></a></li> <li><a href="https://plus.google.com/u/0/+Smartaddons/posts" class="icon-google-plus"></a></li> <li><a href="https://www.pinterest.com/smartaddons/" class="icon-tumblr"></a></li> </ul> </div>
2. Text Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “text” widget in the sidebar.
- You should configure the fields and save.
Backend Settings
Copy & Paste the content code into the text editor:
<div class="list-method"> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-wepay.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-martercart.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-alink.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-paypal.png" alt="The Framewodk"> </a> <a href="#"> <img src="wp-content/themes/sw_lovefashion/assets/img/pm-visa.png" alt="The Framewodk"> </a> </div>
3. Custom Menu Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “custom menu” widget in the sidebar.
- You should configure the fields and save.
Backend Settings
8.5 Configure Home Intro
Below is the position image of Home Intro Layout.
8.5.1 Position Top
Note: At position top configure the same with position top (at home parallax layout) above.
8.5.2 Position Top Banner
1. Revolution Slider Widget
- Please go in “Appearance > Widgets” on admin sidebar.
- You should add “Revolution Slider” widget in the sidebar.
- You should configure the fields and save.
Frontend Appearance
Backend Settings
8.5.3 Position Footer
Note: At position Footer configure the same with position footer (at home parallax layout) above. But please note to select widget display on “Home Intro” page.
8.5.4 Position Footer Copyright
Note: At position Footer Copyright configure the same with position Copyright (at home parallax layout) above. But please note to select widget display on “Home Intro” page.
9WPML
WPML is the most popular plugin for multi language support, our theme is fully compatible with WPML. Below you will find documentation their team created for using WPML plugin with this theme. If you’ve purchased WPML and have any questions or issues, please check the links below.
- WPML Plugin– The highly recommended plugin to manage multi-lingual sites.
- WPML Forum Support – If you bought WPML then you get free support from their amazing team.
- Translating Widgets – Tutorial recommended by wpml team for translating widgets
Please Click Here To Purchase WPML Plugin!
10Configure The Portfolio Page
fitRows Style
Frontend Appearance
Backend Settings
1. In your administrator, navigate to Pages >> Add News
2. Input data as the image below >> click on “Publish” button
Masonry Style
Frontend Appearance
Backend Settings
1. In your administrator, navigate to Pages >> Add News
2. Input data as the image below >> click on “Publish” button
- categories: Allow to input id of categories, each id is separated by comma.
- m_col: Allow to set number of column for masonry style.
- orderby: Allow to sort order by: author , date, title, modified, ID, rand, comment_count.
- order: Allow to select ordering direction: DESC or ASC.
- loadmore: Set “yes” to display loadmore button or else.
- number: Allow to display number of posts.
- col_large: Allow to set number of column on large Desktop devices (> 1200px).
- col_medium: Allow to set number of column on small Desktop devices (992 < col_medium < 1199).
- col_small: Allow to set number of column on tablet devices ( <768 < col_small < 991) .
- col_xsmall: Allow to set number of column on smartphone devices ( col_xsmall < 767).
- style: There are 2 styles for your selection ( fitRows and masonry).
11OTHER
- SUPPORT – If you have any questions that are beyond the scope of this help file, please send us via: Support Tickets System
- FAQs – Go to Here to view more the Frequently Asked Questions.
3.5 Social share