Suarez, theme documentation

First, thank you for purchasing our theme!

This guide provides instructions for installation, help on getting started and extensive documentation of features. It is recommended you read it thoroughly to fully leverage the Suarez theme's capabilities. Please also make sure to check out our Video Tutorials as they explain everything covered in here in greater depth. We hope you enjoy building with Suarez as much as we enjoyed developing it and continue to develop with new features!

Before beginning the installation and configuring of your new theme, you must first have WordPress already installed on a server.

If you are struggling, here is a very detailed guide at Wordpress Codex that will walk you through every step.

If you prefer something more visual, you can watch this video tutorial on how to install Wordpress by us

(Please note the video shown is from our NUVO Restaurant theme, but the same process applies)

Once you have setup a copy of WordPress, there are two ways you can go about installing the theme:

• 1. FTP Upload
  

  Unzip the download and upload the theme directory /Suarez/ into your WordPress themes directory /wp-content/themes/.

• 2. WordPress Upload
  

  This is definitely the easier route for most. Simply navigate to Appearance > Themes > Add New > Upload Theme. Click the 'browse' button and locate the still zipped theme folder. The theme will be uploaded and installed in a matter of seconds.

  Here is our video tutorial to help you through the process

  (Please note the video shown is from our NUVO Restaurant theme, but the same process applies)

After you have installed the theme successfully, you can optionally import the supplied dummy data in order to get a feel for things. If you're interested in importing the data, please check the Demo Data section below

Once you have installed and activated our theme you will be prompted to install required and recommended plugins. Just click the link to Begin installing plugins.

Next, check boxes to select all the plugins you want to install, select the bulk action of install from the dropdown box and then click the button to apply.

Next, just click the link to Return to Required Plugins Installer.

Select the plugins you had installed, and then apply the bulk action to activate them.

Finally, you will got a confirmation notice that your plugins were activeded.

To help you set up website with the least efforts, we include in the theme package dummy content file. After installing it, all content seen on the live demo will be imported except for images/videos.

There are two methods you can use, one is using our One-click Importer, the other is Importing manually. To go with the former option, please follow the steps below:

1. 1. Go to Install Demo on the Tools menu.
   

   

2. 2. The Import/Export menu tab will show.
3. 3. Just click install and wait for the process to complete.

   

4. 4. After the importation is finished, Save Changes and you are done.

To be more perfect site you should install more photos .

1. 1. Go to Regen. Thumbnails on the Tools menu.

   

2. 2. Click button Regenerate All Thumbnails.

   

3. 3. Result:

   

Now you have a website just like our demo.

• Step-1 : Import XML

  To imprort demo content by yourself, please follow some steps below:

  Step 1 : Install Widget Importer & Exporter plugin .

  Step 2 : Import XML you need deactivate plugin EF3 Import And Export.

  You need to extra theme package file. And then:

  • 1. Go to Tools > Import.

  • 

  • 

  • 

  2. You need upload two files on the path below:

  • - wp_suarez > inc > demo-data > suarez > content > attachment-data.xml
  • - wp_suarez > inc > demo-data > suarez > content > content-data.xml
  • 

  • 

• Step-2 : Import Options

  1. On WP Suarez tab, click Import/Export

  

  2. Click Import from File

  

  3. Open file options.json on the the path: wp_suarez > inc > demo-data > suarez > options.json .

4. Copy all content of options.json file and then paste it into text area.



Step-3 : Import Slider

• Step 1 . Go to Slider Revolution.
• 
• Step 2 . Import slider.
• 
• Step 3 . You shoud be able to find it following the path wp_suarez > inc > demo-data > suarez > revslider > corporate1.zip.
• 

• Step-4 : Import Widgets

  1. Go to Widget Importer & Exporter on the Tools menu

  

  2. Click Browse.. button and upload file widget.wie on the path wp_suarez > inc > demo-data > suarez > widgets.wie .






To have a perfect site, you need to make sure all of photos shown.

1. 1. Go to Regen. Thumbnails on the Tools menu.

   

2. 2. Click button Regenerate All Thumbnails.

   

3. 3. Result:

   

   You need to wait until the updating completed.

   You will have the perfect website like our demo.

After installation, you will be suggested to install additional plugins. To install them and activate, please navigate to Plugins, you will see a list of required and optional plugins. We recommend that you install the following to get the best of our theme:

Visual Composer is the most popular drag and drop editor for wordpress.

If you need dedicated support for this component, please visit: WPBakery Visual Composer

Create a responsive (mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page!

Customize this slider with our convenient drag & drop backend to your very needs. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

For premium support with this plugin please visit: Revolution Slider on Code Canyon

Force Regenerate Thumbnails allows you to regenerate the thumbnails for your image attachments.

For detailed inforamtion and support on this plugin, please go to: Regenerate Thumbnails

Woo Commerce is one of the most popular shopping cart plugins for wordpress.

For detailed inforamtion and support on this plugin, please go to: WooCommerce

Newsletter is a real newsletter system for your WordPress blog: perfect for list building, you can easily create, send and track e-mails, headache-free.

It just works out of box!

For detailed inforamtion and support on this plugin, please go to: Newsletter

Contact Form 7 is one of the most popular form builders for wordpress.

We have created styles ready for you to use within your Suarez theme.

For detailed inforamtion and support on this plugin, please go to: Contact Form 7

I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it.

For detailed inforamtion and support on this plugin, please go to: WP-PostRatings

Widget Importer & Exporter is useful for moving widgets from one WordPress site to another, backing up widgets and for theme developers to provide users with sample widgets.

Importing is a matter of uploading an export file created by the plugin.

For detailed inforamtion and support on this plugin, please go to: Widget Importer & Exporter

1. 1. From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.



2. 2. Select create a new menu at the top of the page



3. 3. Enter a name for your new menu in the Menu Name box.
4. 4. Click the Create Menu button. 



5. 5. Click Select to select menu created.

Your new custom menu has been defined.

You can add different link types into your menu, these are split between panes left of the menu you're currently editing.

1. 1. Locate the pane entitled Pages.
2. 2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
3. 3. Select the Pages that you want to add by clicking the checkbox next to each Page's title.
4. 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. 5. Click the Save Menu button once you've added all the menu items you want.

Your custom menu has now been saved.

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple 'drag and drop' interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the 'child' underneath its 'parent' and then drag it slightly to the right.

1. 1. Position the mouse over the 'child' menu item.
2. 2. Whilst holding the left mouse button, drag it to the right.
3. 3. Release the mouse button.
4. 4. Repeat these steps for each sub-menu item.



5. 5. Click the Save Menu  button in the Menu Editor to save your changes.

1. 1. Scroll to the bottom of the menu editor window.
2. 2. In the section titled Theme locations, click the check box for the location where you want your menu to appear.



3. 3. Click Save menu once you've made your selection.

Congratulations! Your menu has now been added to your site.

You can set any menu as Primary menu here.

Result:

With the Page Options specially built for our themes, you can easily customize General, Body, Header, Menu, Page Title, Footer, Template of every page.

General

• Full Width : Enable/Disable full width for content.
• Layout : Select a layout to show.
• Sidebar Left/Right : Set sidebar for content.
• One Page : You can enable one page.



Result Full Width:

Body

• Color: Select background color for page body.
• Image: Select background image for page body.
• Repeat: For background image, you can set it to be repeated, in X or Y dimension.
• Size: Set the size of image.
• Attachment: Set the attachment of image.
• Position: Set the position of background image.
• Custom Class: Add custom class.



Result:

Header

• Select Header: Select a preset custom header.
• Sticky Header: Choose 'Show' to show sticky header.
• Sticky Header Full Width: Enable/Disable sticky header fullwidth.
• Header Fullwidth: Enable/Disable Header fullwidth.
• Header Top: Enable/Disable top header.
• Show/Hide Sidebar: Choose to show/hide sidebar.
• Enable Header Fixed: Enable/Disable fixed header.
• Header Left/Right Position: Select header position as left, right or top.
• Logo: Add logo image from libraries.
• Logo Alignment: Set position for logo.
• Logo Padding/Margin: Enter padding/margin for logo.





• Color: You can set color for: Menu font, menu font hover & menu font active.
• Menu First Level Text Style: Set text style for first menu.
• Show/Hide arrow parent menu item (header v4): Select 'Show' or 'Hide' arrow parent for menu.
• Enable Border bettwen menu items: Enable/Disable border bettwen the menus.
• Menu Left position heaer 3: Set position for menu left.
• Menu Right position header 3: Set position for menu right.
• Header Border Bottom: Disable/Enable border bottom.
• Border Bottom Style: Select style for border bottom.
• Border Bottom Width: Set width for border bottom.
• Border Bottom Color: Select color for border bottom.





• Color: Select background color for header.
• Image: Select background image for header.
• Repeat: For background image, you can set it to be repeated, in X or Y dimension.
• Size: Set the size of image.
• Attachment: Set the attachment of image.
• Position: Set the position of background image.
• Parallax Background: Select parallax background here.
• Header Top 2: Select 'Show' or 'Hide' to show header top 2.
• Border Bottom Color: Set color for border bottom.
• Show/Hide Header Content Widgets: Select 'Show' or 'Hide' to show header.
• Show/Hide Header Fixed Content Widgets: Select 'Show' or 'Hide' to show header fixed.



Result:

Menu

• Main Nav Height: Set height for main nav bar.
• Menu Position: Select menu position as left or right.
• Manage Locations: Select locations for main navigation, top navigation, left/right navigation, menu for 404 page and sticky header navigation.



Result main menu:

Page Title

Page Title

Title Align: Set position for page title.

Color: Set color for title & sub header .

Size: Enter font-size for Custom & Sub header .

Custom Text: Enter text for page title.

Subheader Text: Enter sub header for page title.




Background

Background: Select background color/image for page title.

You can set for these sections as you like: Repeat, Size, Attachment, Position, Parallax Background.

Padding: Enter padding top/bottom/left/right for page title.

Margin: Enter margin top/bottom/left/right for page title.

Custom Class: Set position for page title.




Breadcrumbs

Breadcrumbs: Select hide or show breadcrumbs.

Text Align: Select position to show breadcrumbs.

Text Color: Set color for breadcrumbs.

Custom Text: Enter text for breadcrumbs.




Result:

Footer

Footer top widgets: Set 'Yes' or 'No' to show widgets.

Background: Set background color & image for footer.

• Repeat: For background image, you can set it to be repeated, in X or Y dimension.
• Size: Set the size of image.
• Attachment: Set the attachment of image.
• Position: Set the position of background image.
• Parallax: Select parallax background here.
• Enable: Enable/Disable custom style mode.

Result :

Template

• Select Categories: Select blog post categories to display.
• Select Portfolio Categories: Select portfolio categories to display.
• Post Per Page: Select number of post per page.
• Select Columns: Select number of column.
• Show Loadmore: Show/Hide button loadmore.
• Show Filter: Show/hide filter for Blog Masonry template.





• Template: Select 'Blog Masonry' to show result.



Result :

To set a page as Home page, go to Settings > Reading in your WordPress Dashboard panel.

1. 1. Set "Front page displays" as "A Static Page"
2. 2. In the drop down menu for "Front Page" choose a page which will be your home page.



3. 3. Save changes.

• 1. To display testimonial in a page, first you need to create testimonial items. Go to Testimonials > Add new.
• 
• 
• 2. Enter the testimonial's name in Title field. Enter Testimonal Content in the content section.
• 3. Choose categories option on section Testimonal Categories.
• 4. Set testimonial's profile picture by choosing a Set featured image.
• 5. Finally, Publish.
• Result:

• 

• 1. To display a team profile, first you need to create member profile items. Go to Team > Add new.
• 
• 
• 
• 2. Enter the member name in Title field. Add some Description in the content section if you want.
• 3. Choose categories option on section Team Categories.
• 4. You can enter Position and Url on section Options.
• 5. Set member's profile picture by choosing a Set featured image.
• 6. Finally, Publish.
• Result:

• 

• 1. To display a portfolio profile, first you need to create portfolio items. Go to Portfolio > Add new.
• 
• 
• 
• 
• 2. Enter the portfolio name in Title field. Add some Description in the content section if you want.
• 3. Choose categories option on section Portfolio Categories.
• 4. Set portfolio's profile picture by choosing a Set featured image.
• 5. You can set General & Gallery on section Portfolio Setting.
• 6. Finally, Publish.
• Result:

• 

• 1. To display a client profile, first you need to create client items. Go to Clients > Add new client.
• 
• 
• 2. Enter the client name in Title field.
• 3. You can enter link URL for client.
• 4. Set client's profile picture by choosing a Set featured image.
• 5. Finally, Publish.
• Result:

• 

To Add Widget on Sidebar, please following these steps:

1. 1. Navigate to Appearance > Widgets to access the list of widgets and widget section that they can be added. The left hand side show all widgets you can use. The right hand side shows all different section you can add widgets to.
2. 2. Simply drag and drop the widget you want into the widgets section you want to the right hand side.
3. 3. When you finished, you can visit the site to see results.

The options panel is home to all of the theme's extensive configuration options. To view the panel, click on WP Suarez in the left-hand menu. Here you have the ability to alter many core aspects that make up how your theme looks and behaves. Any of the options that have some ambiguity to them conviently have descriptions to explain their purpose.

Container max width: Set max width for container.

You can Enable Page Loading, Smooth Scroll and Dev Mode to show these sections.

Favicon: Select favicon icon for your website.

Space before Head/Body: Add code before the head/body tag.

Result Favicon Icon:

Result Page Loading:

Select a Header Layout: Select a layout to show for header.

Header Full Width/Fixed/Content Widgets: You can choose "On" or "Off" to show header full width, fixed & content widget.

Color: Set color for these sections: Font, Link & Link Hover.

Background: Set background color & image for header.

Transparent Header: Select header transparent.

Parallax Background Image: Enable parallax background image when scrolling.

Header Border Style: Select style to show border.

Header Border Height: Enter border height: top-left-botton-right.

Header Border Color: Set color for border.

Margin/Padding: Enter margin & padding for header.

Result :

Color: Set color for these sections: Top Background, Top Headings, Top Font, Top Link & Top Link Hover.

Number of Header Top Columns: Select the number of columns to display in the header top.

Class Header Top Widget : Enter class follow the Bootstrap 3.

Padding: Enter padding for header top/search menu icon/hidden sidebar icon.

Header Top 2 Border Bottom Color: Enter the border bottom color of the top header 2.

Result:

Sticky Height: Enter height for sticky menu.

Sticky Border Bottom Image : Enable Sticky Border Image.

Select Image: Select an image file for your border bottom.

Border Height: Enter height for border bottom.

Enable Sticky Header on Tablets/Mobiles: Enable/Disable sticky header on these screens.

Result:

Result Sticky Header on Mobiles/Tablets:

Header Fixed Width: Header width will be up on the site with the header left or header right.

Header Fixed Position: Select Position for header left & header right.

Menu Appear style: Select Sub menu appear style.

Result:

You can select image for : Default Logo

Logo Max Height: Enter number value for logo default.

Logo Alignment: Set position to show for logo .

Margin/Padding: Enter value margin/padding: top right bottom left.

Result of Default Logo:

Result of Sticky Logo:

You can select image for : Logo Sticky.

Sticky Header Logo Max Height: Set max height for logo sticky.

Margin/Padding: Enter value margin/padding: top right bottom left.

Result of Sticky Logo:

Main Nav Height: Enter height for main menu.

Menu Position: Select Position for main menu.

Dropdown Menu Width: Enter width for dropdown menu.

Menu First Level Text Style: Set menu first level text uppercase.

Main Menu border Color - First Level: Controls the border color of first level menu items.

Result:

Main Menu Background Color: Set background color for menu.

Menu Font Size - First Level: Enter font-size for the menu.

First Level: Set color for these sections: Font, Font Hover, Font Active, Background Hover, Actived Background.

Padding: Enter padding left/top/right/bottom for menu.

Margin: Enter margin left/top/right/bottom for menu.

Sub Levels: Controls the color of the menu Background/Font/Background Hover & Active/Font Hover/Font Active/Border Separator sublevels.

Menu Font Size Sublevel: Enter font-size for sub level.

Result:

Main Menu Background Color: Set background color for sticky menu.

Menu Font Size - First Level: Enter font-size for the sticky menu.

First Level: Set color for these sections: Font, Font Hover, Font Active, Background Hover, Actived Background.

Padding: Enter padding left/top/right/bottom for sticky menu.

Margin: Enter margin left/top/right/bottom for sticky menu.

Sub Levels: Controls the color of the menu Background/Font/Background Hover & Active/Font Hover/Font Active/Border Separator sublevels.

Menu Font Size Sublevel: Enter font-size for sub level.

Result:

Background Color: Set background color for mobile menu.

First Level: Controls the font color/font hover of first level menu items.

Sub Levels: Controls the color of the menu font/font hover/separator sublevels.

Result:

Enable Hidden Sidebar: Enable/Disable to show hidden sidebar.

Position: Select position display hidden sidebar.

Width: Enter width for hidden sidebar.

Result:

Bacgkround: Set background color/image for bottom.

Background Parallax: Enable parallax background image when scrolling.

Bottom Padding/Margin: Enter padding & margin for bottom.

Number of Bottom Columns: Set columns number for bottom.

Class Bottom Widget: Enter class follow the Bootstrap 3.

Result:

Color: Set color for: Bottom Headings, Bottom Font, Bottom Link & Bottom Link Hover.

Result:

Layout: Select layout to show.

Full Width: Enable/Disable footer full width.

Back To Top: You can enable/ disable button back to top.

Result:

Number of Footer Top Columns: Set columns number for footer top.

Class Footer Widget: Enter class follow the Bootstrap 3.

Footer Top Headings Color: Set color for top heading.

Footer Top Headings Font Size: Enter font-size for heading.

Footer Top Headings Uppercase: Display footer top headings uppercase.

Footer Top Headings Style: Select style for heading.

You can set color for these section: Top Font, Top Link, Top Link Hover, Top Social and Top Social Hover.

Border Style: Select border style here.

Border Color: Set color for border.

Footer Top Border Width: Enter width for border.

Bacgkround: Set background color/image for footer.

Background Parallax: Enable parallax background image when scrolling.

Footer Top Padding/Margin: Enter padding & margin for footer top.

Result:

Number of Footer Bottom Columns: Select the number of columns to display in the footer bottom.

Class Footer Widget: Enter class follow the Bootstrap 3.

Text Align For Footer Bottom Widget: Set position for footer bottom widget.

You can set color for these section: Background, Headings, Font, Link and Link Hover.

Footer Bottom Border Style: Select border style here.

Footer Bottom Border Color: Set color for border.

Footer Bottom Border Width: Enter width for border.

Footer Bottom Padding/Margin: Enter padding & margin for footer bottom.

Result:

Button Text Uppercase: Make the text in button is uppercase or not.

Font Size: Set font-size for button.

Text Style: Select font weight for button.

Letter Spacing: Enter letter spacing for button.

Button Padding/Margin: Enter padding & margin for button.

Result:

Border Style : Select border style here.

Border Width : Enter width for border.

Border Color : Set color for border & border hover.

Border Radius : Enter value border radius.

Color : Set color for these sections: Text, Text Hover, Background, Background Hover.

Result button default:

Result button hover:

Border Style : Select border style here.

Border Width : Enter width for border.

Border Color : Set color for border & border hover.

Border Radius : Enter value border radius.

Color : Set color for these sections: Text, Text Hover, Background, Background Hover.

Result border button:

Result button hover:

Font Size : Enter font-size for button.

Border Style : Select border style here.

Border Color : Set color for border & border hover.

Border Width : Enter width for border.

Border Radius : Enter value border radius.

Color : Set color for these sections: Text, Text Hover, Background, Background Hover.

Result button primary:

Result button hover:

Title Align: Set position for title bar.

Title Bar Length: Insert the number of words you want to show in the page title bar.

Title Size: Enter font-size for title bar.

Color: Set color for these sections: Title Font & Title Bar Borders.

Page Title Bar Borders Top/Bottom: Enable/Disable border top & bottom.

Background: You can set background color & image for page title.

Parallax Background Image: Enable parallax background image when scrolling.

Page Title Bar Padding/Margin: Enter padding & margin for page title.

Result:

Show Breadcrumb: Display breadcrumbs on screen & mobile devices.

Breadcrumb Title Align: Set position for breadcrumb.

Breadcrumb Home Prefix: The text before the breadcrumb home.

Breadcrumbs Text Color: Set color for text color.

Breadcrumbs item space: Controls the space between each breadcrumbs item.

Breadcrumbs separator: Controls the separator style between each item.

Result:

You can set color for these sections: Background , Link Color and Link Color Hover.

Result:

You can set color for these sections: Form Background/Form Text/Form Fields background/Form Fields background hover/Form Fields Border/Form Fields Border Hover.

Form Fields Border style: Choose the border style of form fields.

Form Fields Border Width: Enter the border width of form fields.

Form Fields Shadow style & hover: Enter the shadow of form fields normal & form fields in hover, active, focus state..

Form Fields Border Radius Style: Enter the border radius style for form fields.

Result:

Not just color, all text elements are also within your control. You can define the style of Body text for your self.

Result:

Not just color, all text elements are also within your control.

Result:

On this section, Suarez theme had some available fonts for you. If you want to set a special font for a special class, you only need to insert your class into Selector section, and choose the font that you want on the Font dropdown box. Finally, you click Save changes and see your result, all completed.

Example:

1. Copy class that you want to change.

2. Select Font Family, Font Weight & Style and paste class on Selector section.

Result:

Blog Layout: Select position of sidebar.

Title Heading: Select heading of title.

Read More: Show read more in posts.

Limit Words: Enter introtext length for post.

Result:

You can show / hide the sections below to display the desired results.

Result:

Show Heading/Page Title/Title Animation/Breadcrumbs/Posts Title: You can show / hide the sections below to display the desired results.

Blog Date Format: Enter date time for blog.

Archive Style: Select Style for Archive list post.

Result:

You can show / hide the sections below to display the desired results.

Post Layout: Select position of sidebar.

Post Style: Select Style for Post Items.

Featured Image On Archive Post: Display featured images on archive port.

Blog Date Format: Enter date time for blog.

Result:

Result for Comment:

You can show / hide the sections below to display the desired results.

Page Layout: Select position for sidebar.

Result:

Result for Comment:

Title Heading: Select heading of title.

You can show / hide the sections below to display the desired results.

Result:

Show Rating: Click 'On' or 'Off' to show this section.

Page Layout: Choose categories you want use rating.

Result:

Single Portfolio layout: Select Style for portfolio Items.

Portfolio Gallery Style: Select Style for image gallery. If Grid, you can control the columns in gallery config.

Result:

Scroll Speed: Enter speed when scroll.

Scroll Offset: Enter number offset when scroll.

Easing Plugin: Select animation when scroll.

About title: Please enter about title of post team detail.

Show Description/Socials: Click 'On' or 'Off' to show these sections.

Result:

About title: Please enter about title of post portfolio detail.

Show Description: Show or hide description of post portfolio detail.

Show Client/Date/Category/Shares: Show or hide client/date/category/shares of post portfolio detail.

Client/Date/Category/Shares Icon: Please enter the class icon from http://fortawesome.github.io/Font-Awesome/icons/. Ex: fa fa-bookmark-o.

Client/Date/Category/Shares Title: Please enter the title client/date/category/shares of post portfolio detail.

Result:

Use Font Awesome/Use Font Ionicons: Click 'On' or 'Off' to show these sections.

Show Heading/Show Page Title/Page Title Animation/Show Breadcrumbs: You can Enable/Disable these options.

404 Page: Select layout to show for 404 page.

404 Image: Select an image file for your 404.

Page ID: Insert page 404 id.

Result:

Woo Layout: Select layout to show.

Show Breadcrumbs: You can Enable/Disable this section.

Number Products Per Page: Enter number product will show per page.

Result:

Quickly add some CSS to your theme by adding it to this block.

This section is especially for all those who want to move settings from theme options panel between themes or when you move your website from test server to live. Please always remember to click "Save Changes" button. Without that you will lose all your changes.

Visual Composer is a powerful Wordpress page builder that allows you to create complex page layouts without touching a single line of code. To switch to Visual Composer's Backend Editor, click on this button:

When Visual Composer's editing pane comes up, click on either of these buttons to Add Element.

A shortcode selecting panel will show up, you can see all the shortcode available in the theme. Select the one you would like to use.

You will then encounter a setting panel for the shortcode (each shortcode has it own setting options), after a bit of configuration, it will show up nicely on your page.

• Title: Enter title for fancy icon.
• Title Size: Select your heading size for title.
• Title Color: Select color for title.
• Title Color Hover: Select title color when hover over.
• Title Transform: Select title form as lowercase, uppercase or capitalize.
• Title Margin: Set margin for title.
• Content Align: Set alignment for content as left, right or center.
• Icon Layout: There are 5 icon layouts for you to choose.
• Icon Hover Style: There are 3 icon hover style for you to choose.
• Icon Animate Style: Select animate style for your icon.
• Show Icon Link: Check the box to show link of icon.
• Custom Class: Add custom class if any to refer it to your own css file.

• Icon Type: Select style for icon.
• Icon: Select icon item from list.
• Icon Size: Set icon size here.
• Icon Color: Select color for icon.
• Icon Color Hover: Select icon color when hover over.
• Icon Width/Height: Set width and height for the icon.
• Icon Background color: Set background color of icon.
• Icon Background hover color: Set background color of icon when hover in.

• Border Color: Select border color.
• Border Color Hover: Select border color when hover in.
• Border Width: Set border width for fancy box.
• Border Style: Set border style as solid, dotted, dashed or double.
• Border Radius: Set border radius for fancy box.

• Image: Select image from libraries.
• Crop image: Crop or not crop image on your Post.
• Width/Height image: Enter the width/height of image.

• Content: Enter main content into editor field.
• Content Color: Select color of text.
• Content Color Hover: Select color of content when hover in.
• Read More Link: Fill URL if you want to show read more link.
• Read More Text: Set border radius.
• Read Margin: Set margin for read more link.
• Read Button: Enable to show read mote button.
• Button Type: Select button type.
• Button Size: Set button size.
• Custom Class Read More Button: Add custom class for read more button to access your custom css file.

• Box Background/Box Background Hover: Set background-color for fancy box.
• Box Border/Box Border Hover: Set color for border.
• Box Padding/Margin: Enter padding/margin for: Top Right Bottom Left.

• Result:

• 

• Categories: Tick on option to show category.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout: Select layout to show for menu.
• Number Colunm: Select columns would you like to display.

• Enable Parallax: Make category parallax background style.
• Category Heading: Select your heading size for category title.
• Category Color: Set color for category.
• Category Padding: Enter the padding for categories.
• Number posts: Enter the number posts in categories.

• Post Heading: Select your heading size for post title.
• Excerpt Length: The length of the excerpt, number of words to display.
• Show Price/Image: Select 'Yes' or 'No' to show price & image.

• Result:

• 

• Title: Enter title for count down.
• Description: Enter description for count down.
• Categories: Tick on option to show categories.
• Show image: Select show or hide image.
• Image: Select image from libraries.
• Crop Image: Tick on option to crop image.

• Width/Height Image: Set width/height for image.
• Style: Select style for Next Event.
• Numbers Position: Set position to show for numbers.
• Show Title: Select 'Yes' or 'No' to show this section.
• Length Description: Enter length for description.

• Result:

• 

• 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.
• Logo Height: Set height for logo.
• Logo: Default get logo from admin.

• Result:

• 

• Layout: Select layout to show.
• Title Heading Size: Select heading size for title.
• Title Color: Select color of title.
• Title Margin: Enter margin (top-left-bottom-right) for process.

• Icon background Color: Set background color for icon & icon hover.
• Icon Color: Set color for icon & icon hover.
• Icon font size: Enter fot size for icon.
• Icon width/height: Enter width/height for icon.
• Icon Border Width: Enter width for border.
• Border Style: Select your style of border.
• Icon Border Color: Set color for border icon.
• Icon Border Radius: Enter icon border radius .

• Icon: You can insert icon class.
• Title: You can enter title for process.
• Description: Enter description for process.

• Process Column: Select column process.
• Result:

• 

• Title: Enter title of banner.
• Heading Size: Select heading size for title.
• Add link title: Add link to title.
• Title Color: Select color of title.
• Icon: You can find icon class here.
• Add link icon: Add link to icon.
• Icon Color: Set color for icon.
• Icon background Color: Set background color for icon.
• Icons size: You can fill icon size.

• Short Description: Enter short description for banner.
• Short Description Color: Set color for short description.
• Full Description: Enter full description for banner.
• Full Description Color: Set color for full description.
• Image: Select image from libraries.
• Background: Set color for Background Overlay & Background Overlay Hover.
• Crop Image: Crop or not crop image on your Post.

• Width/Height Image: Enter the width/height of image.
• Readmore Text: Enter text for button read more.
• Link: Fill URL if you want to show read more link.
• Style: Select your style of interactive banner.
• Animate Type: Select your animate type of icon.
• Custom Class: Add custom class here.

• Result:

• 

• Title: You can enter title for full boxes.
• Heading size: Select your heading size for title.
• Title Color: Set color for title.

• Image: Select image from libraries.
• Crop image: Crop or not crop image on your boxes.
• Width image: Enter the width of image. Default: 300.
• Height image: Enter the height of image. Default: 200.
• Content Text: Enter content for full boxes.
• Excerpt length: Enter value for excerpt length.
• Content Font Color: Set color for content.

• Layout: Select your layout to show.

• Read more link: Enter url for full boxes.
• Custom Class: Add class here.

• Result:

• 

• Result when hover:

• 

• Title: Enter title of pie chart.
• Heading Size: Select heading size for title.
• Title Color: Select color of title.
• Description: Enter description for pie chart.
• Type: Select type for pie chart.
• Inner Cutout: The percentage of the chart that we cut out of the middle.
• Layout: Select layout to show for pie chart.
• Width/Height: Enter value width/height for pie chart.

• Values for (Doughnut, Pie, Area Chart): Enter value & infomation for these section.
• Values for (Line Chart, Bar Chart, Radar Chart): Enter value & infomation for these section.

• Result:

• 

• Title: Enter title for progress bar.
• Show Title: Choose 'Yes' or 'No' to show title.
• Title Color: Set title color for progress bar.
• Title size: Select your heading size for title.
• Title Font format: Choose title font format.
• Title Text Style: Choose title font style.
• Title Margin: Enter margin: top right bottom left for title.
• Title Icon: Enter title for icon.
• Icon Size: Enter size for icon.
• Icon Color: Set color for icon.
• Description: Enter description for progress bar.
• Description Color: Set color for description.

• Show Value: Tick on option to show value.
• Value: Enter the value of progress bar.
• Label value: Enter value suffix here. Example: %.
• Color value: Set color for value.
• Background Color Bar/Background color for value: Set background-color for progress bar.
• You can tick on option the remaining fields as you like.
• Width/Height: Enter width/height for progress bar.
• Border Style: You can choose your style of border.
• Border Color: Select a color for border.
• Border Width/Radius: Enter value number for border width and border radius.

• Layout: Select layout style.
• 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.

• Result:

• 

• Title: You can enter title for pricing.
• Heading size: Select your heading size for title.
• Title Color: Set color for title.
• Sub Title: Enter sub title for pricing.
• Sub Heading Size: Select size for sub heading.
• Sub Title Color: Set color for sub title.
• Description: Enter description for pricing.
• Description Color: Set color for description.
• Extra Class: Enter extra class for pricing style.

• Category: Tick on option to show category.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout: Select layout to show for pricing.
• Columns: Select columns would you like to display on the Pricing page.

• Content Align: Set alignment for content as left, right or center.
• Show Image/Video: Show or hide featured image/video on your Pricing.
• Color: Set color for: Title, Feature Badge, Background , Feature Background, Feature Button Background, Feature Button Font.
• Button Type: Select type to show for pricing.

• Result:

• 

• Title: Enter title for your cover box.
• Title Size: Choose with heading tag to display for title.
• Title Align: Set position for title.
• Title Color: Choose title color.
• Item Active Default: Choose item default is actived.
• Item Title size: Choose with heading tag to display for item title.
• Description:Enter description for boxes.
• Item Title/Description Color: Set color for title & description.
• Item Link Label: Add link label for all items.
• Item Link Target: Add link target for all items.
• Image Size: Select image size for item.

Item Config

• Item Image: Select image thumbnail from libraries.
• Item Title: Enter title for an item.
• Item sub title: Enter sub title for an item.
• Item Description: Enter description for an item.
• Item Link : Add url for an item.

• Read More Button Style: Select style for button.
• Button Type: Select type for button.
• Button Size: Set size for button.
• Extra Class: Add class here.

• Result:

• 

• Heading: You can enter title for portfolio.
• Heading size: Select your heading size for title.
• Heading Icon: Enter the class name of Awesome icon for get icon.
• Heading Align: Select align for title.
• Heading Color: Set color for heading.
• Heading Text Style: Select heading style for portfolio.
• Sub Heading: Enter sub heading for portfolio.
• Sub Heading Size: Select size for sub heading.
• Description: Enter description for portfolio.

• Category: Tick on option to show category.
• Number of posts to show per page: The number of posts to display on each page.
• Limit Items: The number of posts to display on each page.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout Type: Select type 'Grid' or ' Carousel'.
• Layout Styles: Select style to show.
• Columns: Select columns to show.
• Filter: Select 'Yes' or 'No' to show this section.
• Filter Align: Set align for Filter.
• Filter Button Type: Choose filter button style.
• Filter Button Size: Choose filter button size.
• Filter Margin: Set margin Top/Right/Bottom/Left for Filter.
• Show Pagination: Hide or Show pagination.

• Item Space: Enter the space between each item.
• Item Content Align: Choose content align style for each item.
• Color: Set color for these sections: Background & Title.
• Show Title/Crop Image: Select 'Yes' or 'No' to show these sections.
• Width/Height image: Enter value width/height for image.

• Show Category/Description/Read More: Select 'Yes' or 'No' to show these sections.
• Category Color: Set color for category.
• Excerpt length: Enter value for excerpt length.
• Description Color: Set color for description.
• Link Type: Choose link type for Read more and Popup link.
• Color: Set color for these sections: Item Link & Item Link Hover.

• Show Link/Read More/Popup: Select 'Yes' or 'No' to show these section.
• Icon: Enter the class of AweSome or IonIcon font for the sections: Link, Read More & Popup.

• View All Link: Enter url for view.
• View All Text: Enter text for link.
• View all button type: Select button style to show.
• 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.

• Result:

• 

• Title: You can enter title for portfolio.
• Heading size: Select your heading size for title.
• Heading Icon: Enter the class name of Awesome icon for get icon.
• Heading Align: Select align for Title.
• Heading Color: Set color for heading.
• Heading Text Style: Select heading style for portfolio.
• Sub Heading: Enter sub heading for portfolio.
• Sub Heading Size: Select size for sub heading.
• Description: Enter description for portfolio.

• Category: Tick on option to show category.
• Number of posts to show per page: The number of posts to display on each page.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout: Select layout to show.
• Rows: Select number row to show per page.
• Width item: Enter the width of item.
• Item Space: Enter the space between each item.
• Min Item: Enter the minimum number item you want to show.
• Max Item: Enter the maximum number item you want to show.

• Number of item to move: Enter the number of item you want to move on each slider.
• Auto scroll: Select 'Yes' or "No' to show auto scroll.
• Navigation/Page: Show or hide navigation/page on your carousel portfolio.

• Overlay Background Color: Set background overlay for each items.
• Overlay appear style: How to overlay style appear.
• Content Padding: Set padding (Top-Right-Bottom-Left) for content of each item.
• Item Content Align: Choose content align style for each item.
• Color: Set color for these sections: Item Content, Item Background, Item Title.
• Show Crop Image/Porfolio Title: Select 'Yes' or 'No' to show these sections.
• Width/Height image: Enter the width/height of image.
• Portfolio Heading size: Select heading size for portfolio title.
• Show Category/Description/Launch Project/Read More/Popup Image: Select 'Yes' or 'No' to show these sections.
• Popup Text: Enter desired text for the popup button.

• View More Link: Enter url for view.
• View More Text: Enter text for link.
• 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.

• Result:

• 

• Heading: You can enter title for shop.
• Heading size: Select your heading size for title.
• Heading Align: Select align for title.
• Heading Color: Set color for heading.
• Sub Heading: Enter sub heading for shop.
• Sub Heading Size: Select size for sub heading.
• Description: Enter description for shop.

• Categories: Tick on option to show category.
• Number of posts to show per page: The number of posts to display on each page.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Width item: Enter the width of item.
• Margin Item: Enter the margin for item.
• Min Slide: Enter the minimum number item you want to show.
• Max Slide: Enter the maximum number item you want to show.
• Auto scroll: Select 'Yes' or "No' to show auto scroll.
• Navigation/Page: Show or hide navigation/page on your carousel shop.

• Layout: Select layout to show.
• Rows: Select number row to show per page.
• Content Align: Choose content align style for each item.
• Color: Set color for these sections: Content, Content Hover, Content Background, Content Background Hover.
• Overlay Background Color: Set background overlay for each items.
• Overlay appear style: How to overlay style appear.
• Content Padding: Set padding (Top-Right-Bottom-Left) for content of each item.
• Show Item Border/Item Title/Image/Crop Image: Select 'Yes' or 'No' to show these sections.
• Item Heading Color: Set color for heading & heading hover.
• Item Heading Size: Set size for heading.
• Item Heading Margin: Set margin for heading.
• Width/Height image: Enter value width/height for image.

• Image border radius: Enter style border radius for image.
• Show Category/Description: Select 'Yes' or 'No' to show these sections.
• Category Color: Set Category color for each items.
• Excerpt length: Enter value for excerpt length.
• Show Price/Rate/Add To Cart/View Details Button/Athor/Date: Select 'Yes' or 'No' to show these sections.
• View detail button text: he text on the details button.
• Button Type: Choose type for button.

• View More Link: Enter url for view.
• View More Text: Enter text for link.
• View all button type: Select button style to show.
• 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.

• Result:

• 

• Heading: You can enter title for post.
• Heading size: Select your heading size for title.
• Heading Icon: Enter the class name of Awesome icon for get icon.
• Heading Align: Select align for title.
• Heading Color: Set color for heading.
• Heading Text Style: Select heading style for post.
• Sub Heading: Enter sub heading for post.
• Sub Heading Size: Select size for sub heading.
• Description: Enter description for post.

• Categories: Tick on option to show category.
• Number of posts to show per page: The number of posts to display on each page.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout Styles: Select layout to show.
• Carousel Mode: Vertical & Fade mode just show one item on each slide.
• Rows: Select number row to show per page.
• Width item: Enter the width of item.
• Item Space: Enter the space between each item.
• Min Item: Enter the minimum number item you want to show.
• Max Item: Enter the maximum number item you want to show.

• Number of item to move: Enter the number of item you want to move on each slider.
• Auto scroll: Select 'Yes' or "No' to show auto scroll.
• Navigation/Page: Show or hide navigation/page on your carousel post.

• Content Align: Choose content align style for each item.
• Color: Set color for these sections: Content, Content Hover, Content Background, Content Background Hover.
• Overlay Background Color: Set background overlay for each items.
• Overlay appear style: How to overlay style appear.
• Content Padding: Set padding (Top-Right-Bottom-Left) for content of each item.
• Show Post Type/Item Title/Image/Crop Image: Select 'Yes' or 'No' to show these sections.
• Item Heading Color: Set color for heading & heading hover.
• Item Heading Size: Set size for heading.
• Item Heading Margin: Set margin for heading.
• Width/Height image: Enter value width/height for image.

• Image border radius: Enter style border radius for image.
• Show Category/Description: Select 'Yes' or 'No' to show these sections.
• Excerpt length: Enter value for excerpt length.
• Show Date/Comment/Author/Read More/Popup Image: Select 'Yes' or 'No' to show these sections.
• Date format: Choose date format.
• Date font color: Set color for date.
• Date Font format: Choose date font format.
• Date Text Style: Choose date font style.
• Read more text: Enter the text you want for link to detail post item.
• Read more icon: Enter the class of AweSome or IonIcon font.
• Popup Text: Enter the text you want for open Larger image in popup.
• Popup Icon: Enter the class of AweSome or IonIcon font.
• Link Type: Choose link type for Read more and Popup link.
• Item Link/Item Link Hover Color: Set color for list items.

• View More Link: Enter url for view.
• View More Text: Enter text for link.
• 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.

• Result:

• 

• Heading: You can enter heading for client.
• Heading size: Select your heading size for title.
• Heading Icon: Enter the class name of Awesome icon for get icon.
• Heading Align: Set position to show for heading.
• Heading Color: Set color for heading.
• Heading Text Style: Select heading style here.
• Sub Heading: Enter sub heading for client.
• Sub Heading Size: Select size for sub heading.
• Description: Enter description for client.

• Category: Tick on option to show category.
• Number of posts to show per page: The number of posts to display on each page.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout: Select a layout to show.
• Rows: Select number row to show per page.

• Carousel Mode: Vertical & Fade mode just show one item on each slide.
• Min Item: Enter the minimum number item you want to show.
• Max Item: Enter the maximum number item you want to show.
• Item Slide: Enter the number of item slide.
• Width item: Enter the width of item.
• Margin item: Enter the margin of item.
• Auto scroll: Select 'Yes' or "No' to show auto scroll.
• Speed: Enter the speed of carousel.

• Navigation/Pager: Show or hide navigation/page on your carousel post.
• Navigation Align: Select align for navigation.
• Pager Align: Select align for page.

• Show Crop Image/Client Title: Select 'Yes' or 'No' to show these sections.
• Width/Height image: Enter value width/height for image.
• Client title size: Select your heading size for client title.
• Client title Align: Select align for Client Title.
• Client title Color: Set color for client.
• Client title text Style: Choose client title style.
• Show link to client: Show or hide link client.

• View All Link: Enter url for view.
• View All Text: Enter text for link.
• 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.

• Result:

• 

• Title: You can enter heading for team.
• Heading size: Select your heading size for title.
• Heading Icon: Enter the class name of Awesome icon for get icon.
• Heading Align: Set position to show for heading.
• Heading Color: Set color for heading.
• Heading Text Style: Select heading style here.
• Sub Heading: Enter sub heading for team.
• Sub Heading Size: Select size for sub heading.
• Description: Enter description for team.

• Category: Tick on option to show category.
• Number of posts to show per page: The number of posts to display on each page.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout: Select layout to show.
• Rows: Select number row to show per page.
• Width item: Enter the width of item. Default: 360.
• Item Space: Enter the space between each item. Default: 30.
• Min Item: Enter the minimum number item you want to show. Default: 1.
• Max Item: Enter the maximum number item you want to show. Default: 3.
• Number of item to move: Enter the number of item you want to move on each slide.
• Auto scroll: Select 'Yes' or "No' to show auto scroll.
• Navigation/Pager: Show or hide navigation/page on your carousel team.

• Content Align: Choose content align style for each item.
• Color: Set color for these sections: Background & Background Hover.
• Content Padding: Set padding (Top-Right-Bottom-Left) for content of each item.
• Overlay background color: Background color for overlay area.
• Overlay appear style: How to overlay style appear.
• Show Image/Crop Image/Team Title: Select 'Yes' or 'No' to show these sections.
• Border radius Main images: Enter the border radius of Main images.
• Team Title Color: Set color for title team.
• Team Heading size: Set heading size for title.
• Team Title margin: Set margin for title.
• Show Category/Description/Read More : Select 'Yes' or 'No' to show these sections.
• Team Info: Show or hide Team Info on your Team.
• Team Info Color: Set color for infor.
• Description Color: Set color for description.
• Excerpt length: Enter value for excerpt length.

• Show Socials: Show or hide socials on your Team.
• Social Font Size: Enter social font size.
• Social Border Style: Select your style of border.
• Color: Set color for these sections: Social, Social Hover, Social Border, Social Border Hover, Social Background, Social Background Hover.
• Social Width/Height: Enter width/height for social.
• Social Border Width: Enter border width: Top Right Bottom Left.
• Social Border radius: Enter the Border radius of Social.

• View More Link: Enter url for view.
• View More Text: Enter text for link.
• 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.

• Result:

• 

• Title: You can enter title for testimonial.
• Heading size: Select your heading size for title.
• Heading Icon: Enter the class name of Awesome icon for get icon.
• Heading Align: Select align for Title.
• Heading Color: Set color for heading.
• Heading Text Style: Select heading style for testimonial.
• Sub Heading: Enter sub heading for testimonial.
• Sub Heading Size: Select size for sub heading.
• Description: Enter description for testimonial.

• Category: Tick on option to show category.
• Number of posts to show per page: The number of posts to display on each page.
• Order by: Order by ("none", "title", "date", "ID").
• Order: Order ("None", "Asc", "Desc").

• Layout: Select a layout to show.
• Layout Mode: Choose a layout mode for testimonial.
• Carousel Mode: Vertical & Fade mode just show one item on each slide.
• Width item: Enter the width of item.
• Item Space: Enter the space between each item.
• Min Item: Enter the minimum number item you want to show.
• Max Item: Enter the maximum number item you want to show.
• Number of item to move: Enter the number of item you want to move on each slide.
• Auto scroll: Select 'Yes' or "No' to show auto scroll.
• Navigation/Page: Show or hide navigation/page on your carousel testimonial.
• Pager Align: Select position to show for testimonial.
• Pager Style: Select style to show for testimonial.

• Content Align: Select align for each item content.
• Color: Set color for these sections: Content & Content Background.
• Padding: Set padding for content of each item.
• Content Border Radius: Enter border radius for each item.
• Show Item Image/Crop Image: Select 'Yes' or 'No' to show these sections.
• Quotation Type: Select type to show for quotations.
• Item Title Size: Select Heading for Title.
• Item Title Color: Set color for title.
• Show Title/Category/Description/Read More : Select 'Yes' or 'No' to show these sections.
• Excerpt length: Enter value for excerpt length.
• Description font size: Set font size of the excerpt.
• Description line height: Set line height of the excerpt.

• View All Link: Enter url for view.
• View All Text: Enter text for link.
• Custom Class: Enter class here.

• Result:

• 

• Icon: Enter icon for dropcap.
• Layout: Select style to show for dropcap.
• Color: Set color for first text, background & border.
• Border Radius: Enter value border radius here.
• Content Color: Set color for content here.
• Content: You can enter content here.
• 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.

• Result:

• 

• Text: Enter your content.
• Element tag: Select element tag.
• Text align: Select text alignment.
• Font size: Enter font size for text.
• Line height: Enter line height for heading.
• Text color: Select color for your element.
• Font format: Choose font format.

• Style: Select style to show.
• Title Top Line width: Enter width for title top line.
• Title Top Line, dotted top height: Enter height for dotted top.
• Title Top Line, dotted top color: Set color for dotted top.
• Title Top Line, dotted top margin: Enter margin for dotted top.
• Title Bottom Line width: Enter width for title bottom line.
• Title Bottom Line, dotted bottom height: You can enter height for dotted bottom.

• Title Bottom Line, dotted bottom color: Set color for dotted bottom.
• Title Bottom Line, dotted bottom margin: Enter margin for dotted bottom.
• Title Icon: Enter title for icon.
• 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.

• You can setting the remaining fields as you like.

• Result:

• 

• Title: Enter title for magazine posts.
• Title size: Select your heading size for title.
• Title color: Set color for title.
• Title Transform: Make title Uppercase or Lowercase or Capitalize.
• Custom Class: If you wish to style particular Extra element differently, then use this field to add a class name and then refer to it in your css file.

• Categories: Tick on option to show category.
• Order By: Select order list post.
• Limit Items: Number posts on display.

• List layout: Select layout of Posts list.
• Show Categories Filter: Select show or hide categories filter.

• Show Title/Date/Rating: You can select 'Yes' or 'No' to show these sections.

• Show Feature/Image: You can select 'Yes' or 'No' to show these sections.
• Align Image: Select position to show image.
• Crop Feature Image: Choose crop or not crop image on your Portfolio.

• Show Image: You can select Show or Hide list image of post.
• Align Image: Select position to show image.
• Crop List Image: Choose crop or not crop image on your Portfolio.
• Width/Height list image: Enter the width/height of image.

• Result:

• 

• Title: Enter title for magazine posts.
• Title size: Select your heading size for title.
• Title color: Set color for title.
• Title Transform: Make title Uppercase or Lowercase or Capitalize.

• Categories: Tick on option to show category.
• Limit Items: Number posts on display.
• Date format: Choose date format for post.

• Show Feature/Type of Posts/Image/Crop Image/Date/Description: You can select 'Yes' or 'No' to show these sections.
• Width/Height feature image: Enter the width/height of image.

• Show Image/Date/Description: You can select 'Yes' or 'No' to show these sections.

• List layout: Select layout of Posts list.
• Custom Class: If you wish to style particular Extra element differently, then use this field to add a class name and then refer to it in your css file.

• Result:

• 

• Title: Enter title for instagram.
• Username: Enter username of instagram.
• Client ID: Enter id for client.
• Columns: Enter column to show.
• Limit Items: Enter value limit for instagram.
• Size: Select size to show for instagram.
• Target: Select target for instagram.
• Link Text: Enter link text for instagram.
• Class: Add class here.

• Show Cart/Show Cart: Choose 'Yes' to show icon cart & search.

• Result:

• 

• Category: Tick on option to show category.
• 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.

• Layout: Select style to show for woo.
• Overlay background color: Set background color/background hover color for overlay area.
• Title Categories size: Select your heading size for title.
• Title Categories Color: Set color for title categories.
• Number Items: Tick on option to show number items.
• Crop image: Crop or not crop image on your Post..
• Width/Height image: Enter the width/height of image.

• Result:

• 

• Layout: Select layout to show.
• Custom Class: If you wish to style particular Extra element differently, then use this field to add a class name and then refer to it in your css file.

• Video poster: Select image from libraries.
• Crop image: Select crop or not crop image on your Post.
• Width/Height image: Enter the width of image.

• Overlay Background color on the video: Set color for overlay background.
• Options:You can tick on option to show these sections.
• Icon Button: Enter icon for button.
• Text Button: Enter text for button.
• Type Button: Select type for button.
• Size Button: Set size for button.
• Video background (mp4)/(ogv)/(webm): Enter url to set background for video.

• Content: Enter content for video.

• Result:

• 

• Heading: You can enter title for social.
• Heading Size: Select your heading size for title.
• Heading Color: Set color for heading.
• Heading Align: Select align for title.
• Heading Style: Select heading style for social.
• Description: Enter description for social.
• Layout: Select layout to show.
• 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.

• Icon size: Enter size for icon social.
• Color: Set color for Icon, Icon Hover, Icon Background, Icon Background Hover.
• Icon Height/Width: Enter value width/height for icon.
• Social item margin: Enter margin (top-left-bottom-right) for social.

• Border Color: Set color for border & border hover.
• Border Width: Enter width for border.
• Border Style: Select style for border.
• Border Radius: Enter border radius for border.

• Icon: Enter icon to show on page.
• Icon Link: Add url for icon.

• Result:

• 

CMS Google Map allows embedding a google map in Suarez style.

• Title: Enter title for Map.
• Heading Size: Select your heading size for title.
• Title Color: Enter address of Map.
• API Key: Enter you api key of map, get key from (https://console.developers.google.com).
• Address: Enter address of Map.
• Coordinate: Enter coordinate of Map .

• Map Type: Select the map type.
• Zoom: Enter zoom level of map.
• Width: Enter width for Map.
• Height: Enter height for Map.

• Click Show Info window: Click a marker and show info window .
• Marker Coordinate: To pin the marker on your location, enter Latitude, Longtitude in Marker Coordinate field.
• Marker Title: Enter title of Marker .
• Marker Description: Enter the description for Marker .
• Marker Icon: Select icon for Marker.
• Info Window Max Width: Set width for info window.

• Marker List: Enter description for marker.

• Style Template: Select your heading size for title.
• Custom Template: Enter custom template here.

• You can select properties display for the values.

• Result:

• 

• Heading: You can enter title for counter.
• Heading size: Select your heading size for title.
• Heading Color: Set color for heading.
• Heading Align: Select align for title.
• Heading Text Style: Select heading style for counter.

• Counter Type: You can choose the starting number of the counter between Zero and Random.
• Digit: Enter the number value of your counter.
• Digit Prefix: Enter the characters of your counter.Example: $.
• Digit Suffix: Enter the characters of your counter. Example: %.
• Digit Heading Type: Select your heading size for title.
• Digit Font Size: Enter font-size for digit.
• Digit Font Color: Set font color for digit.
• Digit Margin: Enter margin top-left-bottom-right for digit.
• Text: Enter text for counter.
• Text Size: Select size for text.
• Text color: Set color for text.
• Text Style: Select text style to show.

• Icon: Select icon from library.
• Icon Size: Enter size for icon.
• Icon Color: Set color for icon.

• Content Align: Set position for content.
• Content Border Box: Select 'Yes' or 'No' to show border box.
• Border Width: Enter width for border.
• Border Style: Select style for border.
• Border Radius: Enter border radius for box.
• Color: Set color for these sections: Border, Border Hover, Background, Background Hover.
• Padding Box: Enter padding for box.
• Box Width/Height: Enter width/height for box.
• Layout: Select layout to show.

• 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.

• Result:

• 

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide. You can also use POEdit plugin for translation.

• 1. Located the .po and .mo files in folder /languages.
• 
• 2. Select language in admin options.
• 
• 3. Find language prefix (save option and reload front-end view html).
• 
• 4. Copy two file .po & .mo and rename to eg( en_CA.mo & en_CA.po ... ) same for other languages .
• 
• 5. Open the file .po with POEdit and translate the texts into your preferred language.
• 
• 6. When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
• 7. When that’s done, simply upload the files to your theme folder.

Our themes are optimized by with H1, H2, H3, H4, H5 tags, clean code, HTML5 but if you want to get higher ranking on search engines, you must need some help from SEO plugins and Google Pagespeed Service:

• Yoast SEO plugin
• Google Pagespeed Service
• Smush.it ( Optimizing Images )
• SEO Friendly Images ( SEO Images )

NOTICE: YOU MUST BE BACKUP YOUR DATA BEFORE UPDATE THE THEME.

You can update our theme using some ways bellow:

1. Update theme using Envato WordPress Toolkit.
or
2. You can update manual theme:

- If you have any troubles while using auto update ( such as permissions issue ) , and you want to update manually the theme via FTP or Cpanel.

- You download latest version of the theme on ThemeForest download page, and you rename the folder contain the old theme, then create a new folder and insert the latest theme into it.

The team at RedExp are always happy to help you with any questions or recommendations you have about the Suarez theme. If you need any help or support please contact us through the TF Messaging system or
Support Email: support@cmssuperheroes.com
Forum Support: RedExp Forumn