Iconbox¶

Back-end

Front-end

General Tab

1. Number of icons: Set the number of icon boxes from 1 to 4 that will be show in single row
2. Style: Choose one of the avaliable styles of Icon Box

• Small Left Aligned Icon Style
• Small Right Aligned Icon Style
• With background left aligned Style
• With background right aligned Style

Icon 1 Tab

In the content tab, you can set the content of this item.

1. Title: Insert the title for your Icon Box.
2. Text: Insert text that will be shown in your Icon Box.
3. Icon: Here you have a list of the entire collection of Font Awesome icons.

Icon box Big Style¶

Back-end

Front-end

General Tab

1. Number of icons: Set the number of icon boxes from 1 to 4 that will be show in single row

Icon 1 Tab

In the content tab, you can set the content of this item.

1. Title: Insert the title for your Icon Box.
2. Text: Insert text that will be shown in your Icon Box.
3. Icon: Here you have a list of the entire collection of Font Awesome icons.
4. Include button: check Yes if you want to use button for this Icon box

Icon 1 Button

The button will be only visible if it will be included

1. Button title: Insert the title for your Icon Box.
2. Button size:

• Extra small
• Small
• Default
• Large

3. Button style: Lets you select your Icon Box style.

• Motive
• Motive dark hover
• Motive transparent
• Motive transparent, dark text
• Light
• Light dark hover
• Light transparent
• Light transparent, dark text

4. Button link: Insert a link.

Iconbox Counters¶

Back-end

Front-end

General Tab

1. Number of icons: Set the number of icon boxes from 1 to 4 that will be show in single row

Icon 1 Tab

In the content tab, you can set the content  and color used for this item.

1. Title: Insert the title for your Icon Box.
2. Counter number
3. Icon: Here you have a list of the entire collection of Font Awesome icons.
4. Enable counter: check Yes if you want to show the counter number
5. Counter duration
6. Select border color: Choose border color of the icon box
7. Select background color: Choose background color of the shortcode
8. Select title color: Choose the color of the icon box title
9. Select counter color: Choose the color of the counter number
10. Select icon color: Choose the color of the icon

Info Box¶

Back-end

Front-end

General Tab

1. Number of boxes: Set the number of boxes from 1 to 4 that will be show in single row

Table 1 Tab

In the content tab, you can set the content  and color used for this item.

1. Background image: Set the image that will be used in the Info Box.
2. Title: Insert the title for your Info Box.
3. Subtitle: Insert the subtitle that will be visible in the Info Box.
4. Include button: check Yes if you want to use button for the info box shortcode

Table 1 Button Tab

1. Button title: Insert title for the button.
2. Button size: Choose one of the avaliables button sizes.

• Extra Small
• Small
• Default
• Large

3. Button style: Choose one of the styles avaliable for the button.

• Motive
• Motive dark hover
• Motive transparent
• Motive transparent, dark text
• Light
• Light dark hover
• Light transparent
• Light transparent, dark text

4. Button link: Insert a link.

Visual Composer Icon Boxes¶

Icon boxes based on two shortcode’s from Visual Composer: Icon and Text block

Back-end

Front-end

Icon Setting’s General Tab

1. Icon library: Choose the library from which you will be avaliable to use icons for this element.

• Font Awesome
• Open Iconic
• Typicons
• Entypo
• Linecons
• Mono Social
• Material

2. Icon: Choose the icon from the list.
3. Icon color: Set icon’s color from one of the avaliable options.
4. Custom color: You can also set a custom color.
5. Background shape: Choose shape of the icon background.

• None
• Circle
• Square
• Rounded
• Outline Circle
• Outline Square
• Outline Rounded

6. Background color: Choose color of the icon background from one of the avaliables ones.
7. Custom background color: You can also set a custom color.
8. Size: Choose the size from avaliable options.

• Mini
• Small
• Normal
• Large
• Extra Large

9. Icon alignment: Set the align for the icon.

*Left *Right *Center

10. URL (Link): Insert a link, and choose if it will opens on a new window.
11. CSS Animation: Select type of animation for element to be animated when it “enters” the browsers viewport (Note: works only in modern browsers).
12. Element ID: Enter element ID (Note: make sure it is unique and valid according to w3c specification).
13. Extra class name: Style particular content element differently - add a class name and refer to it in custom CSS.

Text Block Setting’s General Tab

Block text will allow you to edit the text that will be visible on frontend.

Revolution Slider¶

Siver Chefs Slider Shortcode¶

Image Carousel Shortcode¶

Siver Trainers Slider Shortcode¶

Siver Testimonials Slider¶

Page contact¶

markup:

<div class="form-group text-right"><span class="inner"><label class="sr-only"> Your Name </label> [text* Name  placeholder "Name"]<label class="sr-only"> Your Email </label> [email* email  placeholder "Email"]<label class="sr-only"> Message </label> [textarea* Email  placeholder "Message"]<br><button type="submit" class="btn btn-motive--darkHover  btn-full">Send Message</button></span></div>

Footer – newsletter¶

markup:

<div class="form-group"><label> Please enter your email address and hit sign up button. We never spam.</label><span class="inner">[email* your-email  placeholder "Your e-mail here"]<button type="submit"><span class="fa fa-long-arrow-right" aria-hidden="true"> <span class="sr-only">Submit</span></span></button></span></div>

In our demo this form is added to the Footer second column in first row widgets via adding this contact form shortcode to text widget as you can see on the image below: