Copyright La-StudioWeb.com 2018

Draven - Multipurpose Creative Theme

WordPress Version

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free create topic on my help desk. Thanks so much!

WordPress General

First of all, to install our theme and run it you need the content management system which is called WordPress.

  1. Installing WordPress WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Fantastico) to automatically install WordPress for you. However, if you wish to install WordPress yourself, the following guide will help.
  2. First Steps With WordPress Let’s take a step-by-step tour through your WordPress site and see how the different functions work and how to make your new site your own. During the first part of this tutorial, please don’t change anything within the program unless it is part of the tutorial. After following these steps, you’ll soon be changing everything.
  3. New To WordPress - Where to StartIf you are new to WordPress, here is a step-by-step plan for getting started. If you need help along the way, plenty of options for assistance are listed in this article. Welcome to the exciting world of WordPress!

Theme General

Front End Builder & Options: Very powerful features of our theme are front-end page builders, theme options are built on the live customizer of WordPress and the elements are built with the most powerful front-end page builder Elementor.

Customizer: With the very powerful innovative WordPress Live Customizer you will be able to preview the changes made to your WordPress website in real time before pushing them live. Lots of options will make it a breeze for you to modify the structure and the visuals of your theme, including color scheme, typography, portfolio, blog, shop layout, and much more.

Elementor: Elementor is the ultimate WordPress page builder, the key difference is that you can reach a high level of design while designing live and on the front end of your site. Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS and doesn't require code knowledge.

Inherit Option: Most of the options in the elements have the option to inherit the values from the theme options. With this option, you can create multiple pages or have multiple elements with the same settings inherited from the theme options. No worries, inherit is not the only option from the select, the inherit option usually stands at the top which is followed by the normal options.

Support: To have someone cover your back 24/7 is really something when it comes to the questions that are related to the product. The satisfaction of the client is what motivates us to work more and more. Currently, our author rating from our clients stands at 4.98 from 5 with more than 240 reviews with 5 stars. Start by creating a ticket at our support system at https://support.la-studioweb.com/

Files Included

  • The theme zip file draven.zip
  • Child theme for easier customize in draven-child.zip
  • Document in Documentation

Struct look like:

dashboard

System Requires

To use Draven, you must be running WordPress 4.4 or higher, PHP5.6 or higher, and MySQL 5 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

PHP Extension Require

XMLReader

Requirement PHP Configuration Limits

Many issues that 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 do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

If you don’t have access to the php.ini file, you can add the following values in your .htaccess file:

Download Draven Theme

Get the Draven Theme installation package from your account(after login on Themeforest.net) at downloads page and save it to your computer.

dashboard

Install Draven Theme

Installation via Wordpress

Step 1 - Login to your Wordpress Dashboard

Step 2 - Go to Appearance > Themes. Click the Add New button or Add new theme link. (check screenshot below)

Step 3 - Click on the Upload Theme button. Locate "draven.zip" and click Install Now.

Step 4 - Click on the Activate button to activate Draven. Congratulations, you have now activated Draven! You can now proceed with Draven's Plugin Installation.

dashboard

install

install

install

install

Installation via FTP

Step 1 - Log into your Hosting server using an FTP client (like FileZilla or WinSCP).

Step 2 - Locate "draven.zip" that you found in your ThemeForest Package and unzip it somewhere on your hard drive. Once it is unzipped it will look like a folder named Draven with all theme files in it.

Step 3 - Locate your Wordpress installation and upload the theme directory Draven (you unzipped in the previous step) into ../wp-content/themes/ in your Wordpress installation.

Step 4 - Click on the Activate button to activate Draven. Congratulations, you have now activated Draven! You can now proceed with Draven's Plugin Installation.

Install Draven Required Plugins

All plugins required have been zipped/already into your download package, so you only need to do is click on the "Begin installing plugins".

You should be navigated to the Install Required Plugin page, which shows a plugin list similar to this(list plugins on images below only an example, not for Draven):

install plugins

Next, Click on the checkbox beside "Plugin" label to select all plugins in the list.

install check list

Then choose "Install" from the drop-down list at the top and then click "Apply".

install action

The installing process status will be shown in your browser. It may takes a few minutes, so please be patient. After sucessfull, your screen like that

install plugins

When the notice "All installations have been completed" appears, click on the "Return to Required Plugins Installer" link to turn back to the plugin list.

install plugins

Next, click on the box beside the Plugin label again to select all plugins and choose Activate this time as image below.

active all required plugins

How do I update my ThemeForest theme?

There are a couple of different ways to update our WordPress themes to the latest version:

Method 1: Install the WordPress Envato Market plugin

Once installed, activated, and setup, the Envato Market plugin will display a notice in your WordPress dashboard when an update is available. To setup:

  1. Download the Envato Market plugin and install it through the WordPress Dashboard at: Appearance > Widgets
  2. Activate the plugin.
  3. Navigate to the Envato Market menu, follow the instructions to generate a Global OAuth Personal Token, and enter the Token in your WordPress Dashboard:

Method 2: Manually Install the Update

To manually install a new version of the theme:
  1. Backup the current version of the theme.
  2. Delete the old version and reinstall the latest version. You will not be able to install the new version while the old version is still installed.
NOTICE: If direct customizations have been made to the parent theme, they will be overwritten when the theme is updated. The recommended way to apply theme file customizations is to use a  child theme

Demo Importer

With Draven, you can build a functioning website just by clicking a button and install our demo data or click 4.2.1 Create A New Page to step by step. Your Draven installation will be set up with what we have on our demo website, and you can use it as a template to develop your own website.

Go to Tools > Demo Importer

Import Demo Content in One Click

Then select the demo which you want import and click to button "Import Demo"

Import Demo Content in One Click02

The progressing would be displayed on import status bars so you will know when it is finished and your data is ready.

waitting

This process will take about some minutes

sucess

DONE. Now, you can visit your website to view demo.

Creat a new page

You can create any number of pages with content. Our theme includes several page templates to choose from, and you will need to choose the page template that suits your needs. All of this is done in the pages section of your WordPress admin.

If you DID NOT One Click Install Demo Data, you will need to MANUALLY CREATE your Home and other pages. Here’s how to build it:

Step 1 – Navigate to Pages in your admin sidebar and click Add New option.

Step 2 – Input a new name for your page.

Step 3 – Set your Parent page. It’s usually set to No Parent.

Step 4 – Set your page template from the Template dropdown list.

Step 5 – Content for your page goes in the editing field, use the Visual or Text editor.

Next, you can publish this page and set it as your frontpage(5.2.9. Settings a static page as Home) in the Wordpress Settings panel.

Import Demo Content

If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

  • Go to menu Tools > Import
  • Select WordPress from the list
  • If you haven't installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to next step.
  • Click Browse and select data-sample.xml file from the download package
    (Example: cleaning demo on path: Draven_Theme/Assets/Dummy Data/Content/data-sample.xml, so the same for others)
  • Click Upload file and import
  • When you are asked to import author, you can create new author or import to existing author. You also should check the Download checkbox and import file attachments.

demo

Select WordPress from the list

demo

Continue with steps in image

demo

select file

Display asked to import author, selected and continue

demo

After completing all above steps, you must re-check somethings compare wih my demo, because have some settings/data maybe not include.

If you don't want to use the demo content pack, you can read the instructions on how to work with our theme built-in page to make your own pages.

Contact Form

You can do step by step as image below to build contact form

Add New Contact Form

You can visit Contact Form 7 Plugin to further details.

Or copy and paste content below to Form field(see image above)

Value Content "Contact Form 01"

General Options

You can adjust WordPress settings as follow:

Step 1 – You can set Site Title, Tagline in Settings > General

 

Step 2 – You can set Blog pages show at most in Settings > Reading

 

Step 3 – You can select Front Page displays in Settings > Reading

 

Step 4 – You can set Discussion settings in Settings > Discussion

 

Step 5 – You can change Image sizes in Settings > Media

To add more image sizes - you can use 3rd plugin https://wordpress.org/plugins/simple-image-sizes/

We used the following sizes on our demo sites:
Thumbnail size: 370 x 250
Medium size: 570 x 380
Large size: 770 x 390

Step 6 – You should ensure that a non-default permalink setting is selected, e.g. Month and name in Settings > Permalinks

Header Builder

Header Builder is a drag-and-drop editor to help you build and customize your own headers.

To user this feature - please go to Appearance -> Header Builder

To better understand how it works you can see more video tutorials https://www.youtube.com/channel/UCESTyTYhnWI_HlIjFnQY5cQ

Elements Avaiables

Admin Mode

Front-End Mode

Them Customizer/Draven Options

 

Global Layout

"Global Layout" tab is divided into a few sections. Asides from the Install Demo Data section mentioned above, there are a few important sections for you to customize your layout.

1. General

Attribute Description
Layout Select main content and sidebar alignment. Choose between 1, 2 or 3 column layout.
Enable Main FullWidth layout website full screen
Enable Google Rich Snippets Show Google Rich Snippets In the Breadcrumbs
Show Button "Back To Top" Turn on this option if you want to enable "back to top" button on your site
Enable Page Loader Icon Turn on Overlay & Icon loader when visit page

Blog Page

Blog page

Attribute Description
Layout Select main content and sidebar alignment. Choose between 1, 2 or 3 column layout.
Blog Type Post item will be display (Ex: Grid, List ..)
Post columns Number post will be displaying in per row
Enable Masonry Mode If value is "ON" the masonry mode is enable
Excerpt Length Type Number ( Number characters of excerpt will be displayed
Post Image Size Enter image size (Example: "thumbnail", "medium", "large", "full" or other sizes defined by theme). Alternatively enter size in pixels (Example: 200x100 (Width x Height)).
Show Continue Reading If value is "ON" the link "Continue reading" will be display
Enable Pagination ajax loader
Enable Infinite Scroll

Single post

In this section you can control all single blog settings of your site

Attribute Description
Custom Page Layout Select main content and sidebar alignment. Choose between 1, 2 or 3 column layout.
Show Breadcrumbs Turn Off this option if you want to hide breadcrumbs info area on single blog
Show Posts Navigation Turn Off this option if you want to hide navigation on single blog
Show Author Info Turn Off this option if you want to hide author info area on single blog
Show social share link Turn Off this option if you want to hide social share link area on single blog
Show comment Turn Off this option if you want to hide comment form area on single blog
Related Post Turn Off this option if you want to hide related post area on single blog
Related Post By
Related Post Columns Number columns rel pos display

Typography

In this section you can control all typography settings of your site

Attribute Description
Body Font Inlcuded: Font Family(name of font), Font Size, Font Weight.
Primary Font Inlcuded: Font Family(name of font)
Secondary Font Inlcuded: Font Family(name of font)

Social Share

In this section you can control all social settings of your site

Attribute Description
Social Share Use for share on each post, inlcuded: facebook, twitter, linkedin, google, tumblr, pinterest.
Social Profiles Define link social profiles, inlcuded: Dribbble, Vimeo, Github, Xing, Behance, Deviantart, SoundClound, Yelp, Rss, VK, Email, Instagram, Foursquare, Skype, Flickr, facebook, twitter, linkedin, google, tumblr, pinterest

Custom Code

In this section you can custom css & javascript of your site

Attribute Description
Custom CSS Add some CSS to your theme by adding it to this text-area. Please do not include any style tags.
Custom Javascript Add some Javascript to your theme by adding it to this text-area. Please do not include any style tags.

Widgets

In this section you can do all things about widgets on your site(create, delete, update). Have 7 widget areas, included: Main Sidebar, Shop Filter Sidebar, Custom Block Top, Custom Block Inner Top, Custom Block Inner Bottom, Custom Block Bottom, Custom Block After Add To Cart

Name Area Description
Main Sidebar Add widgets here to appear in your sidebar
Shop Filter Sidebar Appears at the top of the product on shop page
Custom Block Top Appears at the before of main content
Custom Block Inner Top Appears at the top content of main content
Custom Block Inner Bottom Appears at the bottom content of main content
Custom Block Bottom Appears at the after of main content
Custom Block After Add To Cart Appears at the after Add To Cart button

Setting a static page as Home

If you installed the Demo Content, you don’t need to choose a Home Page because my theme do it. In case you creat page manual then following these steps to set a new Page to FrontPage:

  • Go to Settings > Reading
  • For Front page displays, select A static page (select below)
  • Choose either Home 1, Home 2...ect(example) from the dropdown for Front page
  • Click Save Changes

Save all your changes!

Page Builder

Elementor is the ultimate WordPress page builder, the key difference is that you can reach a high level of design while designing live and on the front end of your site. Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS and doesn't require code knowledge.

Heading

A very simple element called heading but very powerful, has many use cases and its options make it very powerful and easy to use.

Content Tab:
  • Title: Enter the heading text, you can enter on the front end too, it's writable there too.
  • Link: Make the heading clickable with a link that you'll enter it on this field. If you click the cogs icon on the right two new options will appear, Open in a new window and Add no-follow.
  • Size: Change the size of the Heading element, the default size is the default size of the HTML tag.
  • HTML Tag: Change the element tag of heading, it's very useful for SEO reasons.
  • Alignment: Change the alignment of the heading, you can expand these options by clicking on the monitor, the same options will be available on tablet screens and mobile screen.
Style Tab:
  • Text Color: Simply change the color of heading with a simple picker, by moving the right bar you will be able to change the alpha of the color.
  • Typography: Advanced typography is included to change the typography properties, you can reset anytime the options of the typography.
  • Text Shadow: Add easily text shadow to the element, when you press on the pencil, an option for color, blur and horizontal, vertical will be displayed.
  • Blend Mode: The blend mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.

Typed Heading

Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

Content Tab:
  • Content: Add the words inside the double curly brackets, separate the words with commas. {{First Word, Second Word, Third Word}}
  • Loop: Make the text repeat after it's finished once.
  • Cursor Character: Change the cursor characted on typing the default one is _.
  • Type Speed: Enter the typing speed.
  • Start Delay: Enter the time that delays the start of words.
  • Back Delay: Enter the time that delays when it's start removing of words.
  • Back Speed: Enter the time that delays the remove of words.
  • HTML Tag: Choose any html tag, it's very handy for seo purposes.
  • Alignment: Select the alignment of the heading.
Style Tab:
  • Content Color: Enter the color of the heading.
  • Typed Color: Enter the color of the typed strings.
  • Typed Background Color: Enter the background color of the typed strings.
  • Content Typography: Change the typography of the heading.
  • Typed Typography: Change the typography of the typed strings.

Social Media

Present your social media with style, plenty of options offer unlimited possibilities for the style or layout.

Content Tab:
  • Social Icons: Add the social icons inside the repeater, in the first field you have to select the icon and in the second link you have to enter the URL of the social media, you can press on the cogs icon and two new options will appear for opening in a new window and adding a no-follow attribute to the link.
  • Shape: Various shapes can be selected for the social media elements for example rounded, square, circle.
  • Alignment: Easily align the social media on each side you want to be left, center, right or just.
Icon:
  • Color: The first option makes each social media color to be represented by its official color, so you don't need to add any custom color, the first option in the color is custom, so two new fields of color pickers will appear where you can select the primary and the secondary color of the social media.
  • Size: Adjust the size of the icon with a great looking spinner.
  • Padding: Add padding between the social media and its holder, it can be changed to different em size.
  • Border Type: The border type of social media can be changed to solid, double, dotted, dashed or groove.
  • Border Radius: Set border-radius to each corner, you can unlink the properties by clicking the icon on the right.
Icon Hover:
  • Primary Color: Change the primary color of the social media on hover.
  • Secondary Color: Change the secondary color of the social media on hover.
  • Hover Animation: Add a different animation to the social media on hover.

Counter

Set counters to a specific end number in a creative way, multiple settings will allow the element to be used attractively.

Content Tab:
  • Starting Number: Enter the starting number of the counter.
  • Ending Number: Enter the ending number of the counter.
  • Number Prefix: Add a number prefix, so the actual starting and ending number will have a prefix number.
  • Number Suffix: Add a number suffix, it will be displayed after the number and can be used for different symbols.
  • Animation Duration: Select the animation duration, the number is represented by milliseconds.
  • Thousand Separator: Add a separator between thousands.
  • Separator: Select the separator between thousand, the default is a comma, you can choose between dot and space.
  • Title: Add the title which usually is displayed below the counting number.
Style Tab:
  • Number
    • Text Color: Change the color of the number in the counter element.
    • Typography: Advanced typography is included to change the typography properties, you can reset anytime the options of the typography.
  • Text
    • Text Color: Change the color of the title in the counter element.
    • Typography: Advanced typography is included to change the typography properties, you can reset anytime the options of the typography.

Progress Bar

There are two progress bars, one default which comes from Elementor and the custom one that we have created, both are great for use, we'll explain the one that is located in Neuron Elements.

Functionality:
  • Title: Add the title above the progress bar.
  • Percentage: Select the percentage of the progress bar between 1 and 100.
  • Height: Enter the height of the progress bar, the default height is 6 pixels.
Style:
  • Color: Change the color of the bar.
  • Background Color: Change the background color of the bar.
  • Title Color: Change the color of the title which is placed above the bar.
  • Percentage Color: Change the color of the percentage unit.

Accordion

Using the Accordion element lets you save space while still presenting an abundance of content. Add the accordions with a great repeater where you can add the title and the content.

With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.

When a page is loaded, the first item of the Accordion element is expanded, while all other items remain collapsed. With the Toggle element, however, all items are collapsed when a page is first loaded.

Only one item of an Accordion can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion. With the Toggle element, however, as many items as desired can be expanded at the same time.

Content:
  • Accordion Items Title & Content: Enter the title and description for each item.
  • Icon: Select the icon to represent the action of expanding an item.
  • Active Icon: Select the icon to represent the action of collapsing the active item.
  • Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV.
  • Add Item: Use the 'Add Item' button to add more accordion items to the list.
Style:
  • Accordion
    • Border Width: Set the thickness of the border around the accordion and between each item.
    • Border Color: Choose the color of the border around the accordion and between each item.
  • Title
    • Background: Choose the color of the title’s background.
    • Color: Choose the color of the non-active titles’ text.
    • Active Color: Choose the color of the active title’s text.
    • Typography: Set the typography options for the titles.
    • Padding: Set the padding for the titles.
  • Icon
    • Alignment: Align the icon to the left or right of the title.
    • Color: Choose the color of the icons.
    • Active Color: Choose the color of the active icon.
    • Spacing: Control the spacing between the icon and the title.
  • Content
    • Background: Choose the background color of the content.
    • Color: Choose the text color of the content.
    • Typography: Set the typography options for the content.
    • Padding: Set the padding for the content.

Toggle

The toggle element lets you create text boxes that are collapsed, so the visitor only sees the titles of each text box item. This lets you show your content in a condensed form, so visitors don't have to scroll through a long page and can sift through the titles easily.

A similar element is the Accordion element, but there are two main differences between the Toggle element and the Accordion element.

  1. When a page is loaded, all toggle element items are collapsed. With the accordion element, however, the first item is expanded, while all other items remain collapsed.
  2. With the Toggle element, as many items as desired can be expanded at the same time. With the Accordion element, however, only one item can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion.
Toggle
  • Toggle Items: Enter the title and description for each item.
  • Icon: Select the icon to represent the action of expanding an item.
  • Active Icon: Select the icon to represent the action of collapsing the active item.
  • Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV.
  • Add Item: Use the 'Add Item' button to add more toggle items to the list.
Style
  • Border Width: Set the thickness of the border around the toggle element and between each item.
  • Border Color: Choose the color of the border around the toggle element and between each item.
  • Space Between: Set the amount of space between each item.
  • Box Shadow: Set the box shadow around the toggle element, or around each item if there is space between each. You can adjust the box shadow’s Color, Horizontal position, Vertical position, Blur, and Spread as well as the shadow’s - Position, which can be either Inset or Outline.
Title
  • Background: Choose the color of the title’s background.
  • Color: Choose the color of the non-active titles’ text.
  • Active Color: Choose the color of the active title’s text.
  • Typography: Set the typography options for the titles.
  • Padding: Set the padding for the titles.
Icon
  • Alignment: Align the icon to the left or right of the title.
  • Color: Choose the color of the icons.
  • Active Color: Choose the color of the active icon.
  • Spacing: Control the spacing between the icon and the title.
Content
  • Background: Choose the background color of the content.
  • Color: Choose the text color of the content.
  • Typography: Set the typography options for the content.
  • Padding: Set the padding for the content.

Icon List

The Icon List element creates an easy-to-manage list of items, with each item highlighted by its own icon.

Content Tab
  • Layout: Choose Default or Inline. Default displays items in a vertical list, while Inline displays items horizontally.
  • Items
    • Text: Enter the list item’s text
    • Icon: Select the icon for the item
    • Link: Enter the URL for the item’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.
  • Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon
Style
  • List
    • Space Between: Control the space between list items
    • Alignment: Align the list left, right, or center
    • Divider: Turn the item divider lines on or off, if the Divider option is turned on, the following style options become available:
      • Style: Choose from Solid, Double, Dotted or Dashed
      • Weight: Set the thickness of the divider
      • Width: Control the width of the divider relative to the container
      • Color: Choose the divider’s color
  • Icon
    • Color: Choose the icon’s color.
    • Hover: Choose the color of the icon’s hover state.
    • Size: Set the exact size of the icon.
  • Text
    • Text Color: Choose the color of the text.
    • Hover: Choose the color of the text’s hover state.
    • Text Indent: Set the distance between the icon and the text.
    • Typography: Set the typography options for the text.

Contact Forms

Make sure to install and activate the plugin Contact Form 7, without the plugin you won't be able to create contact forms.

The contact forms are created on the WordPress dashboard menu item called Contact, you can configure them and use them later via the Elementor element shortcode. An example of use.

[contact-form-7 id="5430" title="Classic Style"]

The created form in the contact section:

- https://pastebin.com/raw/EkFF433y

Button

The Button element helps you easily design and customize buttons without the need for any other plugins or shortcodes.

Content
  • Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or Danger
  • Text: Enter the button’s text
  • Link: Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link
  • Alignment: Align the button to the left, center, right, or justified in relation to its column.
  • Size: Select the preset button sizes, from Extra Small to Extra Large
  • Icon: Select a FontAwesome icon to display on the button
  • Icon Position: Set the icon to appear before or after the button text
  • Icon Spacing: Adjust the amount of space between the icon and the button text
  • Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events
Style
  • Typography: Change the default typography options for the button’s text.
  • Text Color: Select the color of the button’s text.
  • Background Color: Select the button’s background color for both Normal and Hover states.
  • Hover Animation: Click on the Hover tab to set a Hover Animation.
  • Border Type: Select the type of border to use around the button.
  • Width: Control the thickness of the border around the button.
  • Color: Choose the border’s color.
  • Border Radius: Set the border radius to control corner roundness.
  • Box Shadow: Set options to apply a box shadow on the button.
  • Padding: Change the padding settings of the button.

How to Track "Button onClick" Event (for Facebook Pixel, Google Analytics or Google Tag Manager)

Follow these steps to track button onClick events:
  1. Edit Button > Advanced > set CSS ID = My_Button
  2. Add to the page HTML widget (after the button will be fine)
  3. Paste the following code into the HTML Code field:
<script type="text/javascript"> 
    document.addEventListener("DOMContentLoaded", function (event) {
        jQuery('#My_Button a').click(function () {
            // tracking code here
            // for example Facebook Pixel: 
            fbq('track', 'AddToCart');
        });
    }); 
</script>

Icon Box

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. It has various options you get to customize every element of this widget: the icon, the headline, and the description. The icons are derived from the Font Awesome Icons, and you are able to search through them and pick the right one.

Content Tab
  • View: Set the view of the icon as 'Default', 'Stacked' or 'Framed'. Stacked is with a background and frame is with a frame surrounding the icon.
  • Choose Icon: Here you have a list of the entire collection of Font Awesome icons.
  • Title & Description: Insert the title and description of your Icon Box widget.
  • Link to: Insert a link, and choose if it will open on a new window.
  • Icon Position: Set the position of the icon on the left, top or right side of the box.
  • Title HTML Tag: Choose the title tag, from H1..H6, Div, Span or P.
Style Tab
  • Icon
    • Primary Color: note that if you choose stacked or framed icon box, you will also have a secondary color.
    • Icon spacing: The space between the icon and the heading.
    • Icon size: Scale up and down the size of the icon.
    • Icon Rotate: Rotate the icon.
  • Icon Hover
    • Color: Choose the primary and secondary color for the icon hover.
    • Animation: Choose from a long list of animations for the hover.
  • Content
    • Title
      • Alignment: Left, centers, right or justified.
      • Vertical Align: Top, middle and button.
      • Title Spacing: Set the spacing between the title and the description.
      • Title color: Change the color of the title.
      • Typography: Here I can customize the typography of the title.
    • Description
      • Description Color: Change the color of the description.
      • Typography: Choose custom to change the typography, just like with the title.

Image Box

The Image Box element lets you add an image box that combines an image with a headline and text, which is often used in features sections, as an alternative to using the Icon Box element.

Content
  • Choose Image: Select an image from the media library, or upload a new image
  • Image Size: Select the size of the image, from thumbnail to full, or enter a custom size
  • Title & Description: Add the title and description that will appear in the image box
  • Link to: Enter the URL for the item’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.
  • Image Position: Set the position of the image to the left, top or right, relative to the title and description
  • Title HTML Tag: Set the HTML tag of the title as H1...H6, div, span or paragraph
Style
  • Image
    • Spacing: Set the exact space between the image and the title
    • Width: Scale the image width from 0 to 100%
    • Hover Animation: Add Hover Animation to the image
    • CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings in Normal and Hover states
    • Opacity: Control the opacity of the image in Normal and Hover states
    • Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second
  • Content
    • Alignment: Align the content to the left, right, center or justified
    • Vertical Alignment: Align the content to the top, middle or bottom of the box
    • Title Spacing: Set the space between the title and description
    • Title Color: Set the color of the title
    • Title Typography: Set the typography options for the title
  • Description
    • Color: Set the color of the description text
    • Typography: Set the typography options for the description

Divider

The Divider element allows you to add style, horizontal lines that divide your content. This is a basic element, but it can help you create nice effects as separators of various sections, or for highlighting your headings.

  • Style: Choose between solid, double, dotted or dashed styles.
  • Weight: Control the thickness of the divider.
  • Color: Choose the color of the divider.
  • Width: Control the width of the divider as a percentage from 0 to 100 percent.
  • Alignment: Align the divider to the left, center or right of the page.
  • Gap: Control the space above and below the divider

Shape Divider

Shape dividers are graphic shapes that separate the sections of a page.

How to Add Shape Dividers
  1. Add a new Section
  2. Go to Section > Style > Shape Divider
  3. Choose to display at the Top or Bottom of your section
  4. Type: Click the drop-down to choose your Shape Divider style
  5. Color: Pick a color
  6. Width: Set the width of your Shape Divider
  7. Height: Set the height of your Shape Divider
  8. Flip: Flip the direction of your Shape Divider
  9. Bring to front: Force your Shape Divider to be in front of other objects

Meta Views

WooCommerce Settings

How to config product image like demo

Step 1

Step 2

Step 3
Step 4

Attributes Swatches Settings

1. Go to: Products > Attributes.

2. Create a new attribute, or skip this step if you already have one.

3. Select the gear icon on the right next to the attribute. When you hover over this icon, you’ll see “Configure terms”.

4. Add New Color or whatever your attribute is called (or choose to edit an existing term).

5. Select either “Color” or “Image” in the Swatch Type dropdown.

  • If you’ve chosen color, you’ll be able to click on the color icon and select the color you want to use in the color picker. Alternatively, you can type in the HEX value for the color. 
  • If you’ve chosen image, you’ll be able to upload an image.

8. Select Add New Color.

For more information about setting up and managing Global Product Attributes, see:  Managing Attributes.

Warning: If you change the attribute name and/or slug you permanently lose the swatches configuration.

Add color and image swatches to variable products

Color and photo swatches can only be used for variable products.

1. Create a variable product. Make sure that you select a global attribute or create a custom one in the “Attributes” tab. Also set up the “Variations” tab. More information about that can be found here:

2. Publish your product.

3. Go to the Swatches tab.

4. Select a “Type” for each of the attributes used for the variations.

  • None. The options will be offered in a dropdown.
  • Taxonomy Colors and Images. The options of the global attribute will be offered. (Only available for global attributes.)
  • Custom Colors and Images. You will be able to add colors and image swatches.
  • Radio Buttons. The available options will be displayed as radio buttons.

5. Choose whether to add a label or not and where to add it, if you’ve selected “Taxonomy Colors and Images” or “Custom Colors and Images”. This label will display the name of the selected term.

6. Select the size of the swatches if you’ve selected “Custom Colors and Images”. This will determine how large the swatches will be on the product page.

7. Configure the attribute terms. This is similar to how global attribute terms are configured (see above).

  • Select the term.
  • Choose Attribute Color or Image.
  • If you’ve chosen color, select a color.
  • If you’ve chosen image, upload an image.

8. Update the product.

General

Product Page

Cart Page

Catalog Mode

Maintaince Mode

Contact Forms Settings

Settings For Send Mail

You can visit WP Mail SMTP Plugin to further details.

Mail Chimp Settings

Please go to Appearance> -> Theme Options -> Extensions -> Mailing List Manager

And then you can see the widget on the elements

Thank you for purchasing our theme

If you have any questions that are beyond the scope of this documentation

Please feel free to us via HelpDesk https://support.la-studioweb.com/.

Thanks so much!