Welcome To GOSOLAR

Eco & Nature / Environment WordPress Theme

Theme Documentation - Shortcodes

Shortcode Generator

GOSOLAR includes the Shortcode Generator. The generator has a user interface that allows you to quickly and easily use shortcodes and all the options that go with them. All shortcodes are accessed the Visual Editor in your WordPress Admin. Each shortcode has its own unique options.

  • Navigate to Pages > Add New in your admin sidebar or click Add New option from the page option.
  • Open a page and click on the Visual tab.
  • In the editing toolbar, click the shortcode icon to initiate the generator.
  • The Popup window is open and select the shortcode to use from the dropdown list.
  • You can customize your settings on the shortcode options.
  • Then click the Insert Shortcode button and it will be inserted on the page.

Shortcode list

Below showing a complete list of all the shortcodes included in our theme and having customization options for each one. The following list of shortcodes arranged same list you see in the visual editor, under the Shortcode Generator.

Accordion

  • Accordion Style - Select the accordion style such as Default and Classic.
  • Title - This option allow you to Enter title to show the Accordion title.
  • Open By Default - Choose to have the accordion open by default.
  • Parent Accordion ID - You have to give different ID for each accordion.
  • Accordion Content - Enter content to show the Accordion content.
Accordion Shortcode Example
							[zozo_accordions style="default"]
								[zozo_accordion title="Accordion Title1" open="yes"]Sample Content[/zozo_accordion]
								[zozo_accordion title="Accordion Title2" open="no"]Sample Content[/zozo_accordion]
								[zozo_accordion title="Accordion Title3" open="no"]Sample Content[/zozo_accordion]
							[/zozo_accordions]
Accordion Output

Alert

  • Type - Sets the type of alert such as Success, Info, Warning, Danger for your Alert Message.
  • Content - This option allows you to add the content for your Alert Message.
  • Dismissable - Select to show close button in alert.
  • Animation Type - Select the animation type such as bounce, fade, flash, rubberBand, shake, slide, or zoom etc for shortcode.
  • Animation Delay - Set the animation delay for shortcode.
Alert Shortcode Example
							[zozo_alert type="success" close="yes" animation_type="bounceIn" animation_delay="500"]Your Alert Content![/zozo_alert]
							[zozo_alert type="info" close="yes" animation_type="none" animation_delay="500"]Your Alert Content![/zozo_alert]
Alert Output

Blockquotes

  • Cite Text - You can Insert the footer text such as Author or source name.
  • Align - This option allows you to align the blockquote as left or right combination.
  • Content - This option allows you to add the content for your Blockquote.
  • Animation Type - Select the animation type such as bounce, fade, flash, rubberBand, shake, slide, or zoom etc for shortcode.
  • Animation Delay - Set the animation delay for shortcode.
Blockquotes Shortcode Example
							[zozo_blockquote footer_text="Sample" position="left" animation_type="none" animation_delay="500"]Your Blockquote content ![/zozo_blockquote]
Blockquotes Output

Bootstrap Carousel

  • Link Type - You can choose image link type such as Lightbox or Link.
  • Image Link - This option allows you add image url for only image link type.
  • Link Target - You can choose one of these option such as _self [Open in same window], _blank [Open in new window]
  • Image - Select an image for carousel and click Upload button.
  • Image Alt Text - The alt attribute text will be shown, if the image is not display.
  • Caption - You can add Caption to your Carousel Slider.
Bootstrap Shortcode Example
							[zozo_carousel]
							[zozo_image linktype="none" link="" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/2.png" alt="" caption="Your Caption"]
							[zozo_image linktype="none" link="" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/1.png" alt="" caption="Your Caption"]
							[zozo_image linktype="none" link="" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/3.png" alt="" caption="Your Caption"]
							[/zozo_carousel]
Bootstrap Output

Button

  • URL - The link you want the button to direct to, including http://. For example, http://www.example.com/.
  • Style - This option allows you choose the color of your button: Default, Blue, Custom, Light Blue, Green, Orange, Red.
  • Size - This option allows you choose the size of your button: Default, Wide, Extra Small, Small, Large.
  • Target - You can choose one of these option such as _self [Open in same window], _blank [Open in new window]
  • Text - Add the Text for your button.
  • Background Color - Button Background Color only works if choosed "Custom" style for button.
  • Background Hover Color - Button Background Hover Color. It only works if choosed "Custom" style for button.
  • Text Color - You can choose button Text Color. Leave blank for default.
  • Text Hover Color - You can choose button Text Hover Color. Leave blank for default.
  • Width - You can Enter border width for button. Ex: 2 or 3.
  • Border Color - You can add Button Border Color. Leave blank for default.
  • Border Hover Color - You can add Button Border Hover Color. Leave blank for default.
  • Select Icon - You can add a font awesome icon value. For example, Select Icon fa-times. Click an icon to select, click again to deselect.
  • Icon Position - You can select the position of icon such as left or right..
  • Extra Class - You can add Add the extra class to customize the button.
Button Shortcode Example
							[zozo_button url="" style="default" size="large" color="#333333" hover_color="" bg_color="#ffc400" bg_hover_color="" border_width="" border_color="" border_hover_color="" icon="fa fa-clock-o" icon_pos="left" extra_class="" animation_type="none" animation_delay="500" target="_blank"]Sample Button[/zozo_button]
Button Output

Circle Counters

  • Show as Slider - This option allows you to choose slider to show counters in it.
  • Items to Display - This option allows you enter number of items to Display.
  • Items to Scrollby - This option allows you enter number of items to Scrollby.
  • Items To Display in Tablet - Enter Number of items to Display in Tablet.
  • Items To Display In Mobile Landscape - Enter Number of items to Display in Mobile Landscape.
  • Items To Display In Mobile Portrait - Enter Number of items to Display in Mobile Portrait.
  • Enable Navigation - You can enable navigation for slider.
  • Enable Pagination - You can enable pagination for slider.
  • Auto Play - Select to enable autoplay for slider.
  • Timeout Duration - You can select Timeout Duration for slider.
  • Margin ( Items Spacing ) - You can add spacing between items.
  • Column Size - You can add the width of the counter.
  • Circle Size - Enter Circle Size. Ex: 220 or 150 ( Only Numbers ).
  • Circle Line Width - You can enter Circle Line Width. Ex: 15 ( Only Numbers ).
  • Circle Text Color - Choose Counter Text Color.
  • Counter Description Color - Choose Counter Description Color.
  • Counter Value - You can enter the counter value from 1 to 100.
  • Counter Bar Color - You can select counter bar color.
  • Enter Title - You can add title for your counter.
  • Description - You can enter the description for your counter.
  • Extra Class - You can add extra class for your counter.
Circle Counters Shortcode Example
							[zozo_circle_counter show_in_slider="no" items="4" itemsscroll="1" itemsdesktopsmall="2" itemstablet="1" itemsmobile="1" navigation="true" pagination="true" autoplay="true" duration="5000" margin="0" column="4" circle_size="220" circle_line_size="8" text_color="#ffc400" desc_color="#333333"]
							[zozo_circle_counter_item value="65" bar_color="#ffc400" title="Counter1" description="Sample Description" extra_class="" animation_type="none" animation_delay="500"]
							[zozo_circle_counter_item value="75" bar_color="#ffc400" title="Counter2" description="Sample Description" extra_class="" animation_type="none" animation_delay="500"]
							[zozo_circle_counter_item value="85" bar_color="#ffc400" title="Counter3" description="Counter Description" extra_class="" animation_type="none" animation_delay="500"]
							[zozo_circle_counter_item value="95" bar_color="#ffc400" title="Counter4" description="Sample Description" extra_class="" animation_type="none" animation_delay="500"]
							[/zozo_circle_counter]
Circle Counters Output

Columns

  • Container - This option allows you to Choose to append container div to the columns.
  • Container Extra Class - This option allows you add extra class for container.
  • Column Size - This option allows you to Select the width of the column.
  • Column Content - Add the column content.
  • Column Extra Class - Enter extra class for column.
Columns Shortcode Example
							
							[zozo_columns container="yes" container_class=""]
							[zozo_column size="4" column_class="" animation_type="none" animation_delay="500"]1st Column 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. [/zozo_column]
							[zozo_column size="4" column_class="" animation_type="none" animation_delay="500"]2nd Column 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat.[/zozo_column]
							[zozo_column size="4" column_class="" animation_type="none" animation_delay="500"]3rd Column 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat.[/zozo_column]
							[/zozo_columns]
Columns Output

Contact Form

  • Show Contact Form - This option allows you to Show Contact Form. You can just click the check box to show the contact form.
Contact Form Shortcode Example
							[zozo_contact_form form="on"]
Contact Form Output

Dropcap

  • Dropcap Letter - Enter the letter to be used as dropcap
  • Dropcap Color - Select Dropcap Color or Leave blank for default.
Dropcap Shortcode Example
							[zozo_dropcap color="#ffc400"]Z[/zozo_dropcap]adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat.
Dropcap Output

Client/Brands

  • Items to Display - This option allows you enter number of items to Display.
  • Items to Scrollby - This option allows you enter number of items to Scrollby.
  • Items To Display in Tablet - Enter Number of items to Display in Tablet.
  • Items To Display In Mobile Landscape - Enter Number of items to Display in Mobile Landscape.
  • Items To Display In Mobile Portrait - Enter Number of items to Display in Mobile Portrait.
  • Enable Navigation - You can enable navigation for slider.
  • Enable Pagination - You can enable pagination for slider.
  • Auto Play - Select to enable autoplay for slider.
  • Timeout Duration - You can select Timeout Duration for slider.
  • Margin ( Items Spacing ) - You can add spacing between items.
  • Infinite Loop ( Items Spacing ) - Select to enable Infinite Loop for slider.
  • Client/Brand Link - Add the client's/brand's website url. Ex: http://example.com.
  • Link Target - You can choose one of these option such as _self [Open in same window], _blank [Open in new window].
  • Image Alt Text - If an image cannot be viewed the alt attribute text will be shown.
Client/Brands Shortcode Example
							[zozo_client_slider items="5" itemsscroll="1" itemsdesktopsmall="4" itemstablet="2" itemsmobile="1" navigation="true" pagination="true" autoplay="true" duration="5000" margin="0" loop="false"]
							[zozo_client link="#" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/5.png" alt="Image"]
							[zozo_client link="#" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/4.png" alt="Image"]
							[zozo_client link="#" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/31.png" alt="Image"]
							[zozo_client link="#" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/21.png" alt="Image"]
							[zozo_client link="" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/11.png" alt="Image"]
							[zozo_client link="" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/4.png" alt="Image"]
							[zozo_client link="" target="_self" image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/4.png" alt="Image"]
							[/zozo_client_slider]
Client/Brands Output

Counters

  • Title - Enter the title for counter item.
  • Column Size - Select the width of the column.
  • Counter Value - This option allow you to Enter counter value.
  • Select Icon - Click an icon to select, click again to deselect from the icon showing lists.
  • Icon Size - Enter Icon size for the icon choosed in counters. Ex: 30px.
  • Icon Color - You can choose the icon color from this option and leave blank for default icon color.
  • Icon Background Color - You can choose the icon background color from this option and leave blank for default icon color.
  • Title Color - You can choose the Title Color from this option and leave blank for default icon color.
Counters Shortcode Example
							[zozo_counters]
								[zozo_counter title="Programs" value="150" icon="fa fa-clipboard" iconsize="" iconcolor="" iconbgcolor="" titlecolor="" animation_type="none" animation_delay="500"]
							[zozo_counters]
Counters Output

Day Counter

  • Counter Type - Choose how to display the counter such as Counter Up, Counter Down.
  • Year - This option allow you to Enter Counter Year. Ex: 2015.
  • Month - This option allow you to Enter Counter Month. Ex: 6.
  • Date - This option allow you to Enter Counter Date. Ex: 20.
  • Show Button - Choose to show button for Counter.
  • Button Text - You can Enter button text.
  • Button Link - You can Enter button link.
  • Extra Class - You can Enter extra class for Day Counter.
Day Counter Shortcode Example
							[zozo_day_counter counter="down" year="2015" month="12" date="25" button="no" button_text="show " button_link="#" extra_class="" animation_type="none" animation_delay="500"]
Day Counter Output

Font Awesome

  • Select Icon - This option allows you to choose the icon. GOSOLAR includes the font awesome icons and in option, click an icon to select, click again to deselect.
  • Type - Choose to display of icon such as none, circle, square. If "none" background and border icon wont displayed.
  • Style - Choose icon style such as light, dark, bordered, transparent.
  • Size - Select the size of the icon Small, Medium, Large, Extra Large.
  • Color - You can choose color for your icon and leave blank for default color.
  • Background Color - You can choose background color for your icon and leave blank for default color.
  • Border Color - You can choose border color for your icon and leave blank for default color.
  • Border Width - You can add border width for icon. Ex: 2 or 3.
Font Awesome Shortcode Example
							[zozo_fontawesome icon="fa fa-rebel" icontype="circle" iconstyle="light" size="exlarge" iconcolor="#ffc400" iconbgcolor="" bordercolor="" borderwidth="" animation_type="none" animation_delay="500"]
							[zozo_fontawesome icon="fa fa-music" icontype="circle" iconstyle="light" size="exlarge" iconcolor="#ffc400" iconbgcolor="" bordercolor="" borderwidth="" animation_type="none" animation_delay="500"]
							[zozo_fontawesome icon="fa fa-glass" icontype="circle" iconstyle="light" size="exlarge" iconcolor="#ffc400" iconbgcolor="" bordercolor="" borderwidth="" animation_type="none" animation_delay="500"]
Font Awesome Output

Fullwidth Box

  • Class for Fullwidth Box - This option allows you to Enter class for Fullwidth Box.
  • Fullwidth Box Background Image - Upload an image to use background for Fullwidth Box.
  • Background Repeat - Choose background repeat options for Fullwidth Box.
  • Background Attachment - Choose background attachment options for Fullwidth Box.
  • Fullwidth Box Background Color - You can choose Choose Fullwidth Box Background Color.
  • Overlay - You can Choose Overlay color.
  • Overlay Opacity - You can Enter Overlay Opacity. Values from 0.1 to 1. Ex: 0.1 or 0.3 or 1.
  • Background Overlay Color - You can Choose Fullwidth Background Overlay Color.
  • Padding Top - You can add Padding Top for Section. Ex: 20px.
  • Padding Bottom - You can add Padding Bottom for Section. Ex: 20px.
  • Content - You can add content for the Fullwidth Box.
Fullwidth Shortcode Example
							[zozo_fullwidth_box class="" bg_image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/3.png" bg_repeat="no-repeat" bg_attachment="fixed" bg_color="#eeee22" overlay="yes" overlay_color="#878787" overlay_opacity="0.2" padding_top="70px" padding_bottom="70px"]We are currently working on a new website and won't take long. Please don't forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/zozo_fullwidth_box]
Fullwidth Output

Google Map

  • Type - Select the type of google map such as RoadMap, Satellite, Hybrid, Terrain.
  • Width - You can set the Map Width in Percentage or Pixels. Ex: 300px or 100%.
  • Height - You can set Map Height in Pixels. Ex: 350px.
  • Zoom Level - This allows you to set zoom option and set Higher number will be more zoomed in.
  • Show Map Address on Click - Display map address tooltip by clicking marker in the map.
  • Enable Map Scrollwheel - You can enable zooming using a mouse's scroll wheel.
  • Show Map Scale Control - This option allows you to set scale for the map.
  • Show Pan Control - Displays pan control on Map.
  • Marker Image - You can add upload an marker image to display marker on your locations.
  • Address - Add address to show marker on map. To show multiple marker locations on map, to separate addresses by using | symbol. Ex: Address 1 | Address 2.
Google Map Shortcode Example
							[zozo_map address="Address" type="roadmap" width="100%" height="150px" zoom="5" onclick="yes" scrollwheel="yes" scale="yes" zoom_pancontrol="yes" marker=""]
Google Map Output

Highlight

  • Highlight Background Color - Choose a highlight background color.
  • Highlight Text Color - Choose a highlight text color.
  • Content to Hightlight - Your Content ! Enter the content to be highlighted.
Highlight Shortcode Example
							[zozo_highlight color="#333333" bg_color="#ffc400"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/zozo_highlight]
Highlight Output

HTML Block

  • HTML Tag - Choose HTML tag to insert such as div, section, p , span.
  • Class - Enter class name for HTML tag.
  • Content - Enter the content for your Html block.
HTML Block Shortcode Example
							[zozo_html_block tag="div" class="html"]We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/zozo_html_block]
HTML Block Output

Icons

  • Select Icon - This option allows you to choose the icon. GOSOLAR includes different icon lists, click an icon to select, click again to deselect.
  • Type - Choose to display of icon such as none, circle, square. If "none" background and border icon wont displayed.
  • Style - Choose icon style such as light, dark, bordered, transparent.
  • Size - Select the size of the icon Small, Medium, Large, Extra Large.
  • Color - You can choose color for your icon and leave blank for default color.
  • Background Color - You can choose background color for your icon and leave blank for default color.
  • Border Color - You can choose border color for your icon and leave blank for default color.
  • Border Width - You can add border width for icon. Ex: 2 or 3.
Icons Shortcode Example
							[zozo_icons icon="fa fa-glass" icontype="circle" iconstyle="light" size="large" iconcolor="#333333" iconbgcolor="" bordercolor="" borderwidth="" animation_type="none" animation_delay="500"][zozo_icons icon="fa fa-music" icontype="square" iconstyle="light" size="large" iconcolor="#ffc400" iconbgcolor="" bordercolor="" borderwidth="" animation_type="none" animation_delay="500"][zozo_icons icon="fa fa-heart-o" icontype="circle" iconstyle="light" size="large" iconcolor="#ffc400" iconbgcolor="" bordercolor="#ffc400" borderwidth="1" animation_type="none" animation_delay="500"]
Icons Output

Image Frame

  • Image Shape - Choose image shape such as Angle Shape, Rounded Corners, Circle, Border. For circle shape image need to be equal in width and height.
  • Image Frame Shadow - This option allow you to Select shadow will show on Image Frame. Shadows such as Drop Shadow, Bottom Curved Shadow, Rounded Drop Shadow.
  • Border Color - This option allow you choose color for border.
  • Border Width - This option allow you to enter border width for image. Ex: 2 or 3.
  • Lightbox Image - You can choose to Show image in Lightbox.
  • Upload Image - Upload an image to display in the frame.
  • Image Alt Text - If an image cannot be viewed the alt attribute text will be shown.
Image Frame Shortcode Example
							[zozo_imageframe shape="angle" shadow="dropshade" bordercolor="" borderwidth="" lightbox="yes" src="45" alt="Image" animation_type="none" animation_delay="500"]
Image Frame Output

Jumbotron

  • Title - Enter title to show in Jumbotron.
  • Content - Enter content to show in Jumbotron.
  • Container Background Image - Upload an image to use background for container. Leave blank for default.
  • Background Repeat - Choose background repeat for container such as Repeat, Repeat -X, Repeat -Y, No Repeat..
  • Container Background Color - You can choose Container Background Color.
  • Container Text Color - You can choose Container Text Color.
  • Border Radius - Enter border radius. Ex: 2px or 50%.
  • Show Button - You can choose to show button with custom link.
  • Button Text - This options allows you to enter the text for your button.
  • Button Link - This options allows you to add link for your button.
  • Link Target - You can choose one of these option such as _self [Open in same window], _blank [Open in new window].
  • Button Size - You can select button size such as Default, Extra Small, Small, Large.
  • Button Background Color - Add Background Color for your button.
  • Button Background Hover Color - Add Background Hover Color for your button.
  • Button Text Color - Add Button Text Color. Leave blank for default.
  • Button Text Hover Color - Add Button Text Hover Color.
  • Select Icon - This option allows you to choose the icon for the button. click an icon to select, click again to deselect.
  • Icon Position - You can align the button such as Left or Right.
Jumbotron Shortcode Example
							[zozo_jumbotron title="Page Title" show_button="yes" bg_image="http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/07/2.png" bg_repeat="repeat" bg_color="" content_color="#f0f0f0" borderradius="4px" button_text="sample button" button_link="#" target="_self" size="large" button_bg_color="" button_bg_hover_color="" color="" hovercolor="" icon="" icon_pos="left" animation_type="none" animation_delay="500"]We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/zozo_jumbotron]
Jumbotron Output

Lead Paragraph

  • Paragraph Alignment - Choose paragraph alignment such as left, Right, Center, Justify.
  • Content - You can insert the paragraph content.
Lead Paragraph Shortcode Example
							[zozo_leadpara align="center"]We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/zozo_leadpara]
Lead Paragraph Output

List Item

  • Select Icon - This option allows you to choose the icon. GOSOLAR includes different icon lists, click an icon to select, click again to deselect.
  • Icon Color - You can choose color for your icon and leave blank for default color.
  • Icon Background Color - You can choose Background color for your icon and leave blank for default color.
  • Icon Type - Choose to display of icon such as none, circle, square. If "none" background and border icon wont displayed.
  • Inline List Type - You can choose to display of list items inline.
  • List Item Content - Enter the list item content.
List Item Shortcode Example
							[zozo_listitem icon="fa-th-list" iconcolor="#ffc400" iconbgcolor="" icontype="none" listinline="yes" animation_type="none" animation_delay="500"]
								We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
								We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
							[/zozo_listitem]
List Item Output

Modals

  • Modal Title - Enter title to show in Modal header.
  • Content - Enter content to show in Modal
  • Modal Size - Choose modal size such as Default, Small, Large.
  • Button Size - You can select button size such as Default, Extra Small, Small, Large.
  • Button Text - Enter button text to open modal window by clicking it.
  • Button Background Color - Add button Background Color.
  • Button Background Hover Color - Add button Background Hover Color.
  • Button Text Color - Button Text Color. Leave blank for default.
  • Button Text Hover Color - Button Text Hover Color. Leave blank for default.
  • Select Icon - This option allows you to choose the icon, click an icon to select, click again to deselect.
  • Icon Position - You can select the position of icon such as left or right.
Modals Shortcode Example
							[zozo_modals title="Modal Title" modal_size="default" button_size="default" button_text="Modal" button_bg_color="#ffc400" button_bg_hover_color="" color="#333333" hovercolor="" icon="fa fa-tint" icon_pos="left" animation_type="none" animation_delay="500"]1st Column Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. [/zozo_modals]
Modals Output

Page Header

  • Title - Enter title to show in Page header.
  • Section Slogan - Enter the Section Slogan to show after Page header.
  • Text Alignment - Choose Text Alignment such as Left, Right, Center..
  • Title Color - Choose title color. Leave blank for default.
  • Slogan Color - Choose page slogan color. Leave blank for default
Page Header Shortcode Example
							[zozo_page_header title="Page Header" slogan="Slogan" textalign="center" titlecolor="#ffc400" slogancolor="#c6c6c6" animation_type="none" animation_delay="500"]
Page Header Output

Popover

  • Popover Title - Enter title to show in Popover.
  • Popover Content - Insert the content to show in Popover.
  • Popover Position - Choose the position to popover appear as Left, Right, Top, Bottom..
  • Popover Link Type - Choose type of text to active popover,
  • Popover Show - Choose when popover needs to activate. By "Click" on popover show wont work with Link type.
  • Link or Button Text - Option allow you to insert the link or button text.
  • Link or Button URL - Option allow you to insert the link for text.
  • Link or Button Target - You can choose one of these option such as _self [Open in same window], _blank [Open in new window].
  • Button Size - You can select button size such as Default, Extra Small, Small, Large.
  • Button Background Color - Add Background Color for your button.
  • Button Background Hover Color - Add Background Hover Color for your button.
  • Button Text Color - Add Button Text Color. Leave blank for default.
  • Button Text Hover Color - Add Button Text Hover Color.
  • Select Icon - This option allows you to choose the icon for the button. click an icon to select, click again to deselect.
  • Icon Position - You can align the button such as Left or Right.
Popover Shortcode Example
							[zozo_popover title="Popover Title" popover_pos="right" link_type="button" show_on="hover" link_text="Center Popup" link_url="#" target="_self" size="default" button_bg_color="#ffc400" button_bg_hover_color="" color="#333333" hovercolor="" icon="fa fa-expand" icon_pos="left"]We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified!Your content ![/zozo_popover]
Popover Output

Progress Bar

  • Progress Bar Title - Enter title to show in Progress Bar.
  • Filled Area Percentage - Enter number from 1 to 100 for area percentage.
  • Filled Color - This options allows you to add Background Color for filled in area.
  • Unfilled Color - This options allows you to add Background Color for unfilled area
  • Enable Striped Animation - Choose to enable striped animation on Progress Bars.
  • Progress Bar Text - Enter the text to show in progress bar.
Progress Bar Shortcode Example
							[zozo_progress_bar title="Progress1" percentage="75" filledcolor="#ffc400" unfilledcolor="#6b6b6b" animation="yes"]Html[/zozo_progress_bar][zozo_progress_bar title="Progress2" percentage="85" filledcolor="#ffc400" unfilledcolor="#6b6b6b" animation="yes"]CSS[/zozo_progress_bar][zozo_progress_bar title="Progress3" percentage="95" filledcolor="#ffc400" unfilledcolor="#6b6b6b" animation="yes"]Wordpress[/zozo_progress_bar]
Progress Bar Output

SoundCloud

  • SoundCloud Url - Enter SoundCloud url, For Ex: http://api.soundcloud.com/tracks/59051244.
  • Show Comments - This option allow you to enable/disable display comments.
  • Autoplay - You can select to enable/Disable autoplay the track.
  • Show Buy& Like Buttons - This option allow you to select to show/hide buy & like buttons.
  • Show Artwork - Select to show/hide artwork from this option.
  • Color - You can select the color for play button and other controls.
  • Width - Enter player width in pixels or percentage. Ex: 100% or 500px.
  • Height - Enter player height in pixels. Ex: 110.
SoundCloud Shortcode Example
							[zozo_soundcloud url="http://api.soundcloud.com/tracks/18163056" comments="yes" autoplay="no" buy_like="yes" show_artwork="yes" color="#FF5500" width="100%" height="110"]
SoundCloud Output

Tabs

  • Layout - Choose the layout of tabs such as Horizontal, Vertical Left, Vertical Right.
  • Active Background Color - Choose active tab background color. Leave blank for default.
  • Inactive Background Color - Choose inactive tab background color. Leave blank for default.
  • Tab Title - This option allow you add Title for the tab.
  • Select Icon - Select icon to show before tab title. Click an icon to select, click again to deselect.
  • Icon & Title Color. - Choose icon and tab title color. Leave blank for default.
  • Tab Content - This option allow you to add the tabs content.
Tabs Shortcode Example
							[zozo_tabs layout="horizontal" activecolor="#ffc400" inactivecolor="#f0f0f0"]
							[zozo_tab title="Tab1" icon="fa fa-puzzle-piece" color="#333333"]We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/zozo_tab]
							[zozo_tab title="Tab2" icon="fa fa-user" color="#333333"]We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/zozo_tab]
							[zozo_tab title="Tab3" icon="fa fa-bookmark" color="#333333"]We are currently working on a new website and won’t take long. Please don’t forget to check out our tweets and to subscribe to be notified! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [/zozo_tab]
							[/zozo_tabs]
Tabs Output

Table

  • Style Type - Choose the table style such as Striped, Bordered, Condensed.
  • Number of Rows - Select number of rows for table. You can choose upto 1-5 rows.
  • Number of Columns - Select number of columns for table. You can choose upto 1-5 columns.
Table Output

Tooltip

  • Tooltip Text - Insert the text that displays in the tooltip.
  • Button Style - Select the button's color such as Default, Blue, Custom, Light Blue, Green, Orange, Red.
  • Tooltip Position - This option allows you to Choose the position to tooltip appear
  • Content - Insert the text that will activate the tooltip hover.
Tooltip Shortcode Example
							[zozo_tooltip title="We are currently working on a new website" style="default" position="left"]Tooltip1[/zozo_tooltip][zozo_tooltip title="We are currently working on a new website" style="default" position="top"]Tooltip2[/zozo_tooltip][zozo_tooltip title="We are currently working on a new website" style="default" position="right"]Tooltip3[/zozo_tooltip][zozo_tooltip title="We are currently working on a new website" style="default" position="bottom"]Tooltip4[/zozo_tooltip]
Tooltip Output

Vimeo

  • Video ID - For example the Video ID for https://vimeo.com/19940853 is 19940853.
  • Player Width - Enter only pixel value for the Player Width. Ex: 700.
  • Player Height - Enter only pixel value for the Player Height. Ex: 350.
  • Color - You can select the color for video controls.
  • Show Title - Select to show title in video.
  • Show Byline - Select to show user byline in video.
Vimeo Shortcode Example
							[zozo_vimeo id="19940853" width="700" height="350" autoplay="yes" color="#00adef" show_title="yes" show_byline="yes"]
Vimeo Output

Youtube

  • Video ID - For example the Video ID for http://www.youtube.com/R4-YdC5N6Lo is R4-YdC5N6Lo.
  • Player Width - Enter only pixel value for the Player Width. Ex: 700.
  • Player Height - Enter only pixel value for the Player Height. Ex: 350.
  • Related Videos - You have the option that select to show related videos.
Youtube Shortcode Example
							[zozo_youtube id="R4-YdC5N6Lo" width="700" height="350" autoplay="no" rel_video="no"]
Youtube Output

Shortcode Customization

You want to change something in this theme that requires some custom CSS to a specific element. You will need to give that element a unique class or ID. The following steps shows that how to add custom CSS.

Appy Custom CSS

  • To apply custom CSS to a specific element, Navigate to Theme Options > General > Custom CSS. You can Paste your custom CSS in the window [refer screenshot].
  • After you set the custom class or ID, we can then control the styling of that element by adding custom css that targets the class name. This CSS should be added to the the Custom CSS field in our Theme Options.

Visual Composer Shortcodes

GOSOLAR use an visual composer additional blocks or shortcodes that organized into tabbed sections and each option has a description of what it will do. Following steps gives the brief descriptions of each visual composer shortcode options.

Navigate to Pages > Add New. Click BACKEND EDITOR button.

A Visual Composer tab for backend is open. Click on Plus icon(+).

Add element pop will open and Navigate to Theme Addons. You can see the visual composer options.

Visual Composer Shortcode list

Below showing a complete list of all the shortcodes included in Visual Composer and having customization options for each one. The list of Visual Composer shortcodes are following.

Row Settings

  • General - The General setting for Latest Product Slider are following.
  • Row stretch - Select stretching options for row and content such as Strech Row, Strech Row and Content, Strech Row and Content(No Paddings).
  • Full height row? - Checked row will be set to full height.
  • Use video background? - Checked video will be used as row background.
  • Parallax - Add parallax type background for row.
  • Row ID - You can Enter row ID for one page template.
  • Extra class name - Style particular content element differently.
  • Background Style - You can choose various background style such as light bg, dark bg, theme color bg, Image Left Content on Right, Image Right Content On Left.
  • Image Left Content on Right - This options allows you to add the Image on the left side and content on right side. In row settings choose image left, content on right option from the background style options. Choose the image want to show on left side. The image will shows 50% on the left part and you can set the content inside the row shows remaining 50% on right part of the section.
  • Column Match Height - Use this option to make all column in equal heights.
  • Center Row Content - Use this option to add container and center the inner content. Useful when using full-width pages.
  • Enable Background Image Overlay? - Check this box to enable the overlay for background image.
  • Typography Style - Choose the text color for required background style.
  • CSS Animation - Select type of animation for element to be animated when it "enters" the browsers viewport.
  • Minimum Height - You can enter a minimum height for this row.
  • Design Options - The design option includes the border styles, margin, padding, background options.
  • Video - You can check this box to enable the options for video background.
  • Background - Select the kind of background would you like to set for this row.
  • Default - This is default background style.
  • Single Color - This option allows you choose the single color for background.
  • Gradient Color - This option allows you choose the gradient color.
  • Image/Parallax - You can choose image with normal or parallax for background options.
  • Youtube Video - You can set youtube video for background.
  • Hosted Video - You can set hosted video for background style.
  • Effect - This option allows you to choose effect for the background styles.
  • Easy Parallax - If enabled, the elements inside row - will move slowly as user scrolls.
  • Fade Effect on Scroll - If enabled, the the content inside row will fade out slowly as user scrolls down.
  • Enable Overlay - This option allows you to set the overlay color for background style. Select RGBA values or opacity will be set to 20% by default and You can select Fancy Multi Color Overlay also.
  • Seperator - You can enable/disable seperator using different shapes with different positions.
  • Hide Row - You can hide this row for all screens from Large Desktop to Small Mobile.
Row Settings Example
							[vc_row full_width="stretch_row" match_height="yes" typo_style="light" css=".vc_custom_1446445658050{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #a5a5a5 !important;}"][vc_column width="1/3" css_animation="left-to-right" css=".vc_custom_1440673988982{padding-right: 4% !important;padding-left: 4% !important;}" el_class="padding-tb-75 padding-xs-bottom-0"][zozo_vc_feature_box box_style="title-top-icon" text_align="right" type="lineicons" icon_lineicons="simple-icon icon-user-following" icon_size="medium" icon_shape="icon-rounded" icon_style="icon-border-bg" icon_hover_style="icon-hv-all" title="USER FRIENDLY" title_type="h5" title_url="url:%23||"][/zozo_vc_feature_box][/vc_column][vc_column width="1/3" css_animation="left-to-right" css=".vc_custom_1440674012174{padding-right: 4% !important;padding-left: 4% !important;}" el_class="padding-tb-75 padding-xs-top-0"][zozo_vc_feature_box box_style="title-top-icon" text_align="right" type="lineicons" icon_lineicons="simple-icon icon-equalizer" icon_size="medium" icon_shape="icon-rounded" icon_style="icon-border-bg" icon_hover_style="icon-hv-all" title="STUNNING FLEXIBILITY" title_type="h5" title_url="url:%23||"][/zozo_vc_feature_box][/vc_column][vc_column width="1/3" css=".vc_custom_1446445677216{background-image: url(http://localhost/Wordpress/wp-GOSOLAR/wp-content/uploads/2015/08/saloon1.jpg?id=9900) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="bg-position-left"][vc_column_text]
[/vc_column_text][/vc_column][/vc_row]
Output

Section Title

  • Generel - You can add Extra Classes, Animation and Alignment from this options.
  • Heading - This option allows you to add Heading and includes the following options.
  • Heading Type - This option allows you to add heading type such as h2, h3, h4, h5, div.
  • Heading Text Transform - The text transform option such as Default, None, Capitalize, Uppercase, Lowercase.
  • Heading Font Size - This option allows you to add font size for heading.
  • Heading Color - You can choose color for the heading.
  • Heading Margin - You can set the margin for the header.
  • Content - You can add Content for this section title option.
Secion Title Shortcode Example
							[vc_row][vc_column][zozo_vc_section_title title="Section Title" title_color="#333333"]I am text block. Please change this dummy text in your page editor for this section. I am text block. Please change this dummy text in your page editor for this section. I am text block. Please change this dummy text in your page editor for this section.[/zozo_vc_section_title][/vc_column][/vc_row]
Section Title Output

List Item

  • Generel - You can add Extra Classes, Animation and Alignment from this options.
  • Icon - This option allows you to add Icon and includes the following options.
  • Alignment - You can choose alignment for the icon such as Default, Center, Left, Right.
  • Choose from Icon library - This option allows you to select icon library such as Font Awesome, Lineicons, Flaticons, Icomoon.
  • Icon - This option allows you to select icon from libraries.
  • Icon Color - You can choose color for Icon.
  • Icon size - You can set size of the icon.
List Item Shortcode Example
							[vc_row][vc_column][zozo_vc_list_item type="flaticons" icon_flaticons="flaticon flaticon-insurance2" icon_color="#ffc400"]I am text block. Please change this dummy text in your page editor for this list item section. I am text block. Please change this dummy text in your page editor for this list item section. I am text block. Please change this dummy text in your page editor for this list item section.[/zozo_vc_list_item][zozo_vc_list_item type="flaticons" icon_flaticons="flaticon flaticon-insurance2" icon_color="#ffc400"]I am text block. Please change this dummy text in your page editor for this list item section. I am text block. Please change this dummy text in your page editor for this list item section. I am text block. Please change this dummy text in your page editor for this list item section.[/zozo_vc_list_item][/vc_column][/vc_row]
List Item Output

Feature Box Settings

  • Generel - The General setting for the feature box are following.
  • ID - This option allows you to set ID.
  • Extra Classes - You can add extra classes for the feature box.
  • CSS Animation - You can select animation for the feature box such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Style - You can select the feature box style such as default box, box with background, outline box, overlay style.
  • Alignment - Choose alignment options such as Default, Center, Right, Left.
  • Image - The Image includes the following options.
  • Image - This option allows you to set Image for feature box.
  • Image Shapes - You can set shapes for the images such as Rounded, Circle, Angled.
  • Image Filters - Choose filter option such as default, Grayscale.
  • Image Hover Effects - You can set hover effects such as Fade Out, Fade In, Grow.
  • Icon - This option allows you to add Icon and includes the following options.
  • Choose from Icon library - You can choose icon from the library such as Font Awesome, Lineicons, Flaticons, Icomoon.
  • Icon Size - Choose icon size such as Small, Medium, Large, Extra Large.
  • Icon Shape - You can select icon with different shapes such as Circle, Rounded, Square, Angle.
  • Icon Background Style - The background style contains Default Background, Light Background, Dark Background, Transparent, Pattern Background, Bordered, Bordered Without Background.
  • Icon Hover Style - Color, Background Color, Border Color, All colors.
  • Heading - The following options include the Heading settings.
  • Heading Type - This option allows you to add heading type such as h2, h3, h4, h5, div.
  • Heading URL - Enter the destination URL and link text.
  • Heading Font Size - This option allows you to add font size for heading.
  • Heading Alignment - You can choose heading alignment such as Default, Center, Left, Right.
  • Content - This option allows you to add content for the feature box.
  • Styling - This option allows you to add color for Heading, Content, Icon, Icon Background Color.
Feature Box Icon Shortcode Example 1
							[vc_row][vc_column][zozo_vc_feature_box text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="exlarge" icon_shape="icon-circle" icon_hover_style="icon-hv-all" title="Awesome Photography"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 2
							[vc_row][vc_column][zozo_vc_feature_box text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-dark" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 3
							[vc_row][vc_column][zozo_vc_feature_box text_align="center" title_style="title-bottom" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="medium" icon_shape="icon-square" icon_style="icon-pattern" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h4" title_align="center"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 4
							[vc_row][vc_column][zozo_vc_feature_box text_align="center" title_style="title-above" type="fontawesome" icon_fontawesome="fa fa-camera" icon_shape="icon-circle" icon_style="icon-border-bg" icon_hover_style="icon-hv-br-icon" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 5
							[vc_row][vc_column][zozo_vc_feature_box text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="small" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 6
							[vc_row][vc_column][zozo_vc_feature_box text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-light" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 7
							[vc_row][vc_column][zozo_vc_feature_box text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_style="icon-transparent" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 8
							[vc_row][vc_column][zozo_vc_feature_box text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-bordered" icon_hover_style="icon-hv-br-icon" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 9
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="exlarge" icon_shape="icon-circle" icon_hover_style="icon-hv-bg-icon" title="Awesome Photography"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 10
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-dark" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 11
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="medium" icon_shape="icon-square" icon_style="icon-pattern" icon_hover_style="icon-hv-bg-icon" title="Awesome Photography" title_type="h4" title_align="center"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 12
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="center" title_style="title-above" type="fontawesome" icon_fontawesome="fa fa-camera" icon_shape="icon-circle" icon_style="icon-border-bg" icon_hover_style="icon-hv-bg-icon" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 13
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="small" icon_hover_style="icon-hv-bg-icon" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 14
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-light" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 15
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_style="icon-transparent" icon_hover_style="icon-hv-bg-icon" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 16
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-bordered" icon_hover_style="icon-hv-bg-icon" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 17
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="exlarge" icon_shape="icon-circle" icon_hover_style="icon-hv-all" title="Awesome Photograph" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 18
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-dark" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 19
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="medium" icon_shape="icon-square" icon_style="icon-pattern" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5" title_align="center"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 20
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="center" type="fontawesome" icon_fontawesome="fa fa-camera" icon_shape="icon-circle" icon_style="icon-border-bg" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 21
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="small" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 22
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-light" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 23
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_style="icon-transparent" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 24
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-bordered" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 25
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="exlarge" icon_shape="icon-circle" icon_hover_style="icon-hv-all" title="Awesome Photography"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 26
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-dark" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 27
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" title_style="title-above" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="medium" icon_shape="icon-square" icon_style="icon-pattern" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h4"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 28
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="center" type="fontawesome" icon_fontawesome="fa fa-camera" icon_shape="icon-circle" icon_style="icon-border-bg" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 29
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="small" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 30
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-light" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 31
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_style="icon-transparent" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 32
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-bordered" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 33
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="exlarge" icon_shape="icon-circle" icon_hover_style="icon-hv-all" title="Awesome Photography" bg_color="#ffc400" box_br_color="#2e2e2e"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 34
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-dark" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 35
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="medium" icon_shape="icon-square" icon_style="icon-pattern" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h4"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 36
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="center" type="fontawesome" icon_fontawesome="fa fa-camera" icon_shape="icon-circle" icon_style="icon-border-bg" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 37
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="left" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="small" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 38
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-light" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 39
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_style="icon-transparent" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Icon Shortcode Example 40
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="right" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="large" icon_shape="icon-rounded" icon_style="icon-bordered" icon_hover_style="icon-hv-all" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 41
							[vc_row][vc_column][zozo_vc_feature_box feature_image="22" image_filters="grayscale" image_hover_style="sepia" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 42
							[vc_row][vc_column][zozo_vc_feature_box text_align="center" feature_image="22" image_shape="rounded" image_hover_style="sepia" icon_size="large" icon_shape="icon-circle" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 43
							[vc_row][vc_column][zozo_vc_feature_box feature_image="22" image_shape="circle" image_hover_style="fade-in" icon_size="medium" icon_shape="icon-circle" title="Awesome Photography" title_type="h4"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 44
							[vc_row][vc_column][zozo_vc_feature_box text_align="left" feature_image="22" image_hover_style="grow" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 45
							[vc_row][vc_column][zozo_vc_feature_box text_align="right" feature_image="22" image_hover_style="grow-rotate" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 46
							[vc_row][vc_column][zozo_vc_feature_box text_align="center" feature_image="22" image_hover_style="blurr" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 47
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" feature_image="22" image_filters="grayscale" icon_size="exlarge" icon_shape="icon-circle" title="Awesome Photography"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 48
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="center" feature_image="22" image_shape="rounded" image_hover_style="sepia" icon_size="large" icon_shape="icon-circle" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 49
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" title_style="title-above" feature_image="22" image_shape="circle" image_hover_style="fade-in" icon_size="medium" icon_shape="icon-circle" title="Awesome Photography" title_type="h4"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 50
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="left" feature_image="22" image_hover_style="grow" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 51
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="right" feature_image="22" image_hover_style="grow-rotate" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 52
							[vc_row][vc_column][zozo_vc_feature_box box_style="box-with-bg" text_align="center" feature_image="22" image_hover_style="blurr-invert" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 53
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" feature_image="22" image_filters="grayscale" image_hover_style="sepia" icon_size="exlarge" icon_shape="icon-circle" title="Awesome Photography"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 54
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="center" feature_image="22" image_shape="rounded" image_hover_style="sepia" icon_size="large" icon_shape="icon-circle" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 55
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" feature_image="22" image_shape="circle" image_hover_style="fade-in" icon_size="medium" icon_shape="icon-circle" title="Awesome Photography" title_type="h4"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 56
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="left" feature_image="22" image_hover_style="grow" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 57
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="right" feature_image="22" image_hover_style="grow-rotate" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 58
							[vc_row][vc_column][zozo_vc_feature_box box_style="outline-box" text_align="center" feature_image="22" image_hover_style="blurr" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 59
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" feature_image="22" image_filters="grayscale" image_hover_style="sepia" icon_size="exlarge" icon_shape="icon-circle" title="Awesome Photography"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 60
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="center" feature_image="22" image_shape="rounded" image_hover_style="sepia" icon_size="large" icon_shape="icon-circle" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 61
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" feature_image="22" image_shape="circle" image_hover_style="fade-in" icon_size="medium" icon_shape="icon-circle" title="Awesome Photography" title_type="h4"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 62
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="left" feature_image="22" image_hover_style="grow" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 63
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="right" feature_image="22" image_hover_style="grow-rotate" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 64
							[vc_row][vc_column][zozo_vc_feature_box box_style="overlay-box" text_align="center" feature_image="22" image_hover_style="blurr" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 65
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" feature_image="22" image_filters="grayscale" image_hover_style="sepia" icon_size="exlarge" icon_shape="icon-circle" title="Awesome Photography"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 66
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="left" feature_image="22" image_shape="rounded" image_hover_style="sepia" icon_size="large" icon_shape="icon-circle" title="Awesome Photography" title_type="h3"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 67
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="right" feature_image="22" image_shape="circle" image_hover_style="fade-in" icon_size="medium" icon_shape="icon-circle" title="Awesome Photography" title_type="h4"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 68
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="left" feature_image="22" image_hover_style="grow" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 69
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="right" feature_image="22" image_hover_style="grow-rotate" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output
Feature Box Image Shortcode Example 70
							[vc_row][vc_column][zozo_vc_feature_box box_style="title-top-icon" text_align="center" feature_image="22" image_hover_style="blurr" type="fontawesome" icon_fontawesome="fa fa-camera" icon_size="small" icon_shape="icon-circle" title="Awesome Photography" title_type="h5"]I am text block. Please change this dummy text in your page editor for this feature box.[/zozo_vc_feature_box][/vc_column][/vc_row]
Output

Icon Settings

  • Generel - Icon setting have the general options which are listed below.
  • Extra Classes - You can add extra classes for the feature box.
  • CSS Animation - You can select animation for the feature box such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Alignment - Choose alignment options such as Default, Center, Right, Left.
  • Icon Type - You can select the feature box style such as Circle, Rounded, Square.
  • Icon Style - You can select the feature box style such as Light, Dark, Bordered, Transparent.
  • Icon - This option allows you to add Icon and includes the following options.
  • Icon size - You can set size of the icon.
  • Choose from Icon library - This option allows you to select icon library such as Font Awesome, Lineicons, Flaticons, Icomoon.
  • Icon - This option allows you to select icon from libraries.
  • Styling - This option allows you to add color for Heading, Content, Icon, Icon Background Color.
Icon Settings Shortcode Example 70
							[vc_row][vc_column][zozo_vc_icons icon_size="exlarge" type="icomoonpack1" icon_icomoonpack1="icomoon1 icomoon-stopwatch" icon_color="#ffc400"][/vc_column][/vc_row]
Output

Service Box Settings

  • Generel - The General setting for the Service box are following.
  • Extra Classes - You can add extra classes for the Service box.
  • CSS Animation - You can select animation for the Service box such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Alignment - Choose alignment options such as Default, Center, Right, Left.
  • Style - You can select the Service box style such as default box, box with background, outline box, overlay style.
  • Icon - This option allows you to add Icon and includes the following options.
  • Choose from Icon library - You can choose icon from the library such as Font Awesome, Lineicons, Flaticons, Icomoon.
  • Content - The following options include the Heading settings.
  • Ribbon Text - This option allows you to add heading type such as h2, h3, h4, h5, div.
  • Heading - Enter the sample heading.
  • Heading URL - Enter the destination URL and link text.
  • Content - This option allows you to add content for the Service box.
  • Styling - This option allows you to add color for Heading, Content, Icon, Icon Background Color.
Service Box Shortcode Example 1
							[vc_row][vc_column][zozo_vc_service_box ribbon_text="01" title="Service Box1" icon_color="#ffc400" title_color="#333333" ribbon_font_color="#333333" content_color="#333333"]I am text block. Please change this dummy text in your page editor for this service box.[/zozo_vc_service_box][vc_column][/vc_row]
Output
Service Box Shortcode Example 2
							[vc_row][vc_column][zozo_vc_service_box box_style="square" ribbon_text="02" title="Service Box2"]I am text block. Please change this dummy text in your page editor for this service box.[/zozo_vc_service_box][/vc_column][/vc_row]
Output
Service Box Shortcode Example 3
							[vc_row][vc_column][zozo_vc_service_box box_style="rounded" type="fontawesome" icon_fontawesome="fa fa-briefcase" ribbon_text="03" title="Service Box 3"]I am text block. Please change this dummy text in your page editor for this service box.[/zozo_vc_service_box][/vc_column][/vc_row]
Output

Google Map Settings

  • Generel - The General setting for the Google Map are following.
  • Extra Classes - You can add extra classes for the Google Map.
  • CSS Animation - You can select animation for the Google Map such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Map Type - Choose Map Type such as Roadmap, Satellite, Hybrid, Terrain.
  • Map Width - This option allows you to set the width of the map.
  • Map Height - This option allows you to set the height of the map.
  • Zoom Level - You can set the zoom level for the map.
  • Map Scrollwheel - You can enable/disable the Scrollwheel option.
  • Map Zoom Control - You can enable/disable the Zoom Control option.
  • Map Overlay - You can enable/disable the overlay option.
  • Map Overlay Color - This option allow you to select the color for overlay option.
  • Marker Image - You can select image for Marker.
  • Latitude / Longtitude - Add latitude/longtitude to show marker on map. To show multiple marker locations on map, to separate latitude/longtitude by using | symbol. Ex: -33.867139, 151.207114|-4.325, 15.322222.
  • Content - The following options include the Content settings.
  • Title - Enter title for each marker position here. Divide titles with linebreaks (Enter).
  • Content - Enter content for each marker position here. Divide content with | and divide new line with, .
Google Map Shortcode Example
							[vc_row][vc_column][zozo_vc_google_map address="-4.325, 15.322222"][/vc_column][/vc_row]
Output
Google Map with Multiple Markers
							[vc_row center_row="yes"][vc_column][zozo_vc_section_title title="Map With Multiple Markers"]
[/zozo_vc_section_title][vc_row_inner][vc_column_inner][zozo_vc_google_map zoom="5" map_overlay="false" address="-4.325, 15.322222|0.3833, 9.4500|0.3136, 32.5811" title="Kinshasa City,Libreville City,Kampala City" info_content="Lorem ipsum dolor sit amet|Lorem ipsum dolor sit amet|consectetur adipisicing elit,"][/vc_column_inner][/vc_row_inner]
Output

Content Carousel Settings

  • Generel - The General setting for the Content Carousel are following.
  • Extra Classes - You can add extra classes for the Content Carousel.
  • CSS Animation - You can select animation for the Content Carousel such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Slider - The following options include the Slider settings.
  • Items to Display - This option allows you enter number of items to Display.
  • Items to Scrollby - This option allows you enter number of items to Scrollby.
  • Auto Play - This option allows you enable/disable autoplay option.
  • Timeout Duration - You can select Timeout Duration for slider.
  • Infinite Loop - You can set loop for slider.
  • Margin ( Items Spacing ) - You can add spacing between items.
  • Items To Display in Tablet - Enter Number of items to Display in Tablet.
  • Items To Display In Mobile Landscape - Enter Number of items to Display in Mobile Landscape.
  • Items To Display In Mobile Portrait - Enter Number of items to Display in Mobile Portrait.
  • Enable Navigation - You can enable/disable navigation for slider.
  • Enable Pagination - You can enable/disable pagination for slider.
Content Carousel Shortcode Example
							[vc_row][vc_column][zozo_vc_content_carousel items="1" items_scroll="3" items_tablet="1" items_mobile_landscape="1" items_mobile_portrait="1"][vc_row_inner][vc_column_inner][vc_column_text]
I am text block. Please change this dummy text in your page editor for this Content Carousel.
[/vc_column_text][vc_btn title="Read More" color="chino" size="sm" align="center"][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
I am text block. Please change this dummy text in your page editor for this Content Carousel.
[/vc_column_text][vc_btn title="Read More" color="chino" size="sm" align="center"][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]
I am text block. Please change this dummy text in your page editor for this Content Carousel.
[/vc_column_text][vc_btn title="Read More" color="chino" size="sm" align="center"][/vc_column_inner][/vc_row_inner][/zozo_vc_content_carousel][/vc_column][/vc_row]
Output

Pie Chart Settings

  • Generel - The General setting for the Pie Chart are following.
  • Columns - You can choose column for the Pie Chart such as 3 Columns, 4 Columns, 5 Columns.
  • Circle Size - Choose the column size from this option.
  • Circle Line Width - You can add line width for the circle.
  • Extra Class - You can add extra classes for the Pie Chart.
  • CSS Animation - You can select animation for the Pie Chart such as Top to bottom, Bottom to top, Left to right, Right to left, Appear from center.
  • Pie Chart - The following options include the Pie Chart settings.
  • Graphic Values - Input graph values, titles, description and bar color, track color here. Divide values with linebreaks (Enter). Example: 90|Development|Your Description|#FFC400|#ffffff
  • Heading Color - This option allows you choose color for your heading.
  • Description Color - This option allows you choose color for description.
  • Slider - The following options include the Slider settings.
  • Show as Slider? - This option allows you enable the slider option for Pie Chart.
  • Items to Display - This option allows you enter number of items to Display.
  • Items to Scrollby - This option allows you enter number of items to Scrollby.
  • Auto Play - This option allows you enable/disable autoplay option.
  • Timeout Duration - You can select Timeout Duration for slider.
  • Infinite Loop - You can set loop for slider.
  • Margin ( Items Spacing ) - You can add spacing between items.
  • Items To Display in Tablet - Enter Number of items to Display in Tablet.
  • Items To Display In Mobile Landscape - Enter Number of items to Display in Mobile Landscape.
  • Items To Display In Mobile Portrait - Enter Number of items to Display in Mobile Portrait.
  • Enable Navigation - You can enable/disable navigation for slider.
  • Enable Pagination - You can enable/disable pagination for slider.
Piechart Shortcode Example
							[vc_row][vc_column][zozo_vc_circle_counter columns="4" circle_size="150" circle_line="10" counter_value="90|Development,80|Design,70|Marketing,85|Distribution"][/vc_column][/vc_row]
Piechart Output

Counter Settings

  • Generel - The General setting for the Content Carousel are following.
  • Extra Classes - You can add extra classes for the Counter.
  • CSS Animation - You can select animation for the Counter such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Counter Value - You can enter the Counter value.
  • Counter Title - You can add Title for the Counter.
  • Counter Text Color - Select color for Counter Text.
  • Title Text Color - This option allow you to select color for Title Text.
  • Icon Position - This option allow you to select the position for Icon such as Top or Bottom.
  • Icon - The following options include the Icon settings.
  • Choose from Icon library - Select icon library such as Font Awesome, Lineicons, Flaticons, Icomoon.
  • Icon Color - This option allows you select color for the Icon.
Counter Shortcode Example
							[vc_row][vc_column][zozo_vc_counters type="fontawesome" icon_fontawesome="fa fa-shield" counter_value="150" counter_title="Counter 1"][/vc_column][/vc_row]
Counter Output

Day Counter Settings

  • Extra Classes - You can add extra classes for the Day Counter.
  • CSS Animation - You can select animation for the Day Counter such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Counter Type - You can choose type such as Counter Down, Counter Up.
  • Year - This option allow you to set the Year.
  • Month - This option allow you to set the Month.
  • Date - This option allow you to set the Date.
  • Show Button - You can enable/disable the button in counters.
  • Button Text - You can enter the text for your enabled Button.
  • Button Link - This option allow you to add link for for your Button.
  • Button Link - This option allow you to add link for for your Button.
Day Counter Shortcode Example
							[vc_row][vc_column][zozo_vc_day_counter year="2015" month="12" date="12"][/vc_column][/vc_row]
Day Counter Output

Event Lists

  • General - The General setting for Event Lists are following.
  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Woo Latest such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Style - This option allow you to show the Event as List Style or Grid Style.
  • Skin - This option allow you to select the layout style such as Deafult or Transparent.
  • Posts Per Page - You can set the number of posts per page.
  • List Events - This option allow you to choose the List Events such as Category or List of ID's.
  • Include Categories - Enter the slugs of a categories (comma seperated) to pull posts from or enter "all" to pull recent posts from all categories. Example: category-1, category-2.
  • Exclude Categories - Enter the slugs of a categories (comma seperated) to exclude. Example: category-1, category-2.
  • Order By - This options allows you to choose the Events to show in Ascending order or Descending Order.
  • Order by Key - This option allows you to show the Events by Start Date or End Date.
  • Event Title Type - You can select the Event title from h2 to h6 heading styles.
  • Event Title Text Transform - You can select the Text Transform styles for Event title.
  • Event Title Font Size - Enter the font size for the Event Title.
  • Show Event Details ? - You can Enable/Disable the Event Details.
  • Show Event Venue ? - You can Enable/Disable the Event Venue Details.
  • Show Excerpt ? - You can Enable/Disable the Excerpt?.
  • Excerpt Length - Enter the Length for Excerpt.
  • Show Thumbnail Image ? - Enable/Disable the Thumbnail image option.
  • Thumbnail Width - Enter the Thumbnail image width.
  • Thumbnail Height - Enter the Thumbnail image Height.
  • Message - Enter the Message to show when there are no events.
  • View All Events - Choose to show "View all events" or not.
  • Content Order - Enter the content to Manage the order of content with commas.
  • Events from Specific Month - Type "current" for displaying current month only. Ex: 2015-06 or current
  • Show Outdated Events - You can Enable/Disable Outdated Events.
  • Design - The following options include the Design settings.
  • Background Color - This option allows choose background color for Events.
  • Border Width - This option allows you enter border width. Ex: 1px or 2px.
  • Border Color - This option allows you choose border color.
  • Event Title Color - You can choose Event Title color.
  • Content Color - Select the Content color.
Events Lists Shortcode Example
							[vc_row][vc_column][zozo_vc_events_list events_style="grid" columns="4" events_skin="transparent" orderkey="enddate" title_type="h6" title_transform="uppercase" viewall="no" posts="4" include_categories="university"][/vc_column][/vc_row]
Output

Pricing Table

  • Generel - The General setting for Pricing Plan are following.
  • Extra Classes - You can add extra classes for the Pricing Table.
  • CSS Animation - You can select animation for the Pricing Table such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Plan - The following options include the Plan settings for Pricing.
  • Featured - You can select the plan should be featured or not.
  • Featured Text - This option allow you to add Featured Text.
  • Pricing Plan - You can enter the Pricing Plan such as basic, standard, etc.
  • Plan Font Color - This option allow you to select color for Plan.
  • Cost - The following options include the Cost settings for Pricing.
  • Cost Before Text - Enter the Text to show before Cost.
  • Cost - Enter the Cost for Plans.
  • Per Text - Enter the Text which is shown after Cost.
  • Cost Font Color - Chose the color for Cost.
  • Cost Position - This option allow you to select position for cost such as Default, Before Button.
  • Features - The following options include the Cost settings for Pricing.
  • Features - Enter your pricing content.
  • Features Active Font Color - This option allow you to select color for Active Features.
  • Features InActive Font Color - This option allow you to select color for Inactive Features.
  • Features Divider Color - This option allow you to select color for divider.
  • Image/Video - The following options includes to add Image/Video.
  • Image - This option allow you choose the image if you need it in pricing table.
  • Enable Video? - This option allow you to enable the Video option by click the checkbox.
  • Icon - You can click the Show Icon Checkbox to enable the icon in Pricing Table.
  • Button - This option allow you to add link for your Button.
  • Button URL - This option allow you to add URL for your button.
  • Button Text - This option allow you to add Text for your button.
Pricing Table Shortcode Example
							[vc_row][vc_column][zozo_vc_pricing_table featured="yes" plan="Standard" button_url="url:%23||" cost_per="Month" button_text="Purchase" cost_before="Starting at"]
							
    
								
  • Wordpress
    • 
								
  • HTML5 & CSS 3
    • 
								
  • PSD Files
    • 
								
  • Unlimited Support
    • 
							

							[/zozo_vc_pricing_table][/vc_column][/vc_row]
Pricing Table Output

Blog Post Settings

Before using Blog Setting in Visual Composer Shortcodes, Check whether you have created the Custom Post already. If not, Click this link to know that How To Create The Post.

  • Generel - The General setting for Blog Settings are following.
  • Extra Classes - You can add extra classes for Blog Settings.
  • CSS Animation - You can select animation for the Blog Settings such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Posts per Page - Enter the number of Post per Page.
  • Include Categories - Enter the slugs of a categories (comma seperated) to pull posts from or enter "all" to pull recent posts from all categories. Example: category-1, category-2.
  • Exclude Categories - Enter the slugs of a categories (comma seperated) to exclude. Example: category-1, category-2.
  • Show Thumbnail - This option allow you enable/disable the Thumbnail options.
  • Hide Author Name - This option allow you to show/hide the Author Name.
  • Hide Post Date - This option allow you to show/hide the Post Date.
  • Hide Post Categories - This option allow you to show/hide the Categories.
  • Hide Comments Count - This option allow you to show/hide the Comments.
  • Hide Read More Link - This option allow you to show/hide Read More link.
  • Show Social Sharing - This option allow you to show/hide Social Sharing options.
  • Layout - The following options includes to Layout for Blog.
  • Blog Layout - You can choose layout such as Large Image Posts, Medium IMage Posts, Grid Posts.
  • Pagination - You can choose pagination option such as Hide, Pagination, Infinite Scroll.
Blog Post Shortcode Example 1
							[vc_row][vc_column][zozo_vc_blog layout="list" posts="2"][/vc_column][/vc_row]
Output
Blog Post Shortcode Example 2
							[vc_row][vc_column][zozo_vc_blog posts="2"][/vc_column][/vc_row]
Output
Blog Post Shortcode Example 3
							[vc_row][vc_column][zozo_vc_blog layout="grid" columns="three" posts="2"][/vc_column][/vc_row]
Output

Latest Post Settings

  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Latest Post such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Posts to Show? - Enter the number of Posts to show.
  • Include Categories - Enter the slugs of a categories (comma seperated) to pull posts from or enter "all" to pull recent posts from all categories. Example: category-1, category-2.
  • Exclude Categories - Enter the slugs of a categories (comma seperated) to exclude. Example: category-1, category-2.
  • Blog Style - You can select the Blog Style such as Default, 2 Column style.
  • Show Read More Link - You can enable/disable to show Read More option.
Latest Post Shortcode Example
							[vc_row][vc_column][zozo_vc_latest_posts blog_style="two-column" read_more="yes"][/vc_column][/vc_row]
Output

Client Slider Settings

  • General - The General setting for Client Slider are following.
  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Client Slider such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Client/Brand Images - Select images from media library.
  • Custom Links - Enter links for each image here. Divide links with linebreaks (Enter).
  • Link Target - You have option to set the target to Same Window or New Window
  • Slider - The following options include the Slider settings.
  • Items to Display - This option allows you enter number of items to Display.
  • Items to Scrollby - This option allows you enter number of items to Scrollby.
  • Auto Play - This option allows you enable/disable autoplay option.
  • Timeout Duration - You can select Timeout Duration for slider.
  • Infinite Loop - You can set loop for slider.
  • Margin ( Items Spacing ) - You can add spacing between items.
  • Items To Display in Tablet - Enter Number of items to Display in Tablet.
  • Items To Display In Mobile Landscape - Enter Number of items to Display in Mobile Landscape.
  • Items To Display In Mobile Portrait - Enter Number of items to Display in Mobile Portrait.
  • Enable Navigation - You can enable/disable navigation for slider.
Client Slider Shortcode Example
							[vc_row][vc_column][zozo_vc_clients_slider images="57,56,55,54,53" items="4" items_scroll="2" items_tablet="3" items_mobile_landscape="2" items_mobile_portrait="1"][/vc_column][/vc_row]
Client Slider Output

Testimonial Grid

Before using Testimonial in Visual Composer Shortcodes, Check whether you have created the Custom Portfolio already. If not, Click this link to know that How To Create Testimonial.

  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Testimonial Grid such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Alignment - Enter the number of Posts to show.
  • Show Pagination? - This option allows to enable/disable pagination for Testimonial.
  • Testimonial Columns - You can choose column for Testimonial such as 2 Columns, 3 Columns, 4 Columns
  • Choose Testimonial Categories - This option allow you to choose categories such as Show all categories, Clients, Reviews.
Testimonial Grid Shortcode Example
							[vc_row][vc_column][zozo_vc_testimonials_grid pagination="no" posts="2"][/vc_column][/vc_row]
Output

Testimonial Slider Settings

  • General - The General setting for Testimonial are following.
  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Testimonial such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Testimonial Style - You can select Testimonial style such as Default Style, Border Style, Border Style2, Without Border.
  • Choose Testimonial Categories - This option allow you to choose categories such as Show all categories, Clients, Reviews.
  • Slider - The following options include the Slider settings.
  • Items to Display - This option allows you enter number of items to Display.
  • Items to Scrollby - This option allows you enter number of items to Scrollby.
  • Auto Play - This option allows you enable/disable autoplay option.
  • Timeout Duration - You can select Timeout Duration for slider.
  • Infinite Loop - You can set loop for slider.
  • Margin ( Items Spacing ) - You can add spacing between items.
  • Items To Display in Tablet - Enter Number of items to Display in Tablet.
  • Items To Display In Mobile Landscape - Enter Number of items to Display in Mobile Landscape.
  • Items To Display In Mobile Portrait - Enter Number of items to Display in Mobile Portrait.
  • Enable Navigation - You can enable/disable navigation for slider.
Testimonial Slider Shortcode Example
							[vc_row][vc_column][zozo_vc_testimonials_slider items="3" items_scroll="2"][/vc_column][/vc_row]
Output

Team Grid Settings

Before using Team in Visual Composer Shortcodes, Check whether you have created the Custom Portfolio already. If not, Click this link to know that How To Create Team.

  • Extra Class - This option allow you to add Extra class for team grid settings.
  • CSS Animation - You can select animation for the Testimonial such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Alignment - This option allow you to choose alignment option such as Default, Left, Right, Center.
  • Posts Per Page - Enter the number of post per page.
  • Show Pagination - Enable/Disable the Pagination option for Team Grid Settings.
  • Team Columns - Choose Column for the Team Grid Settings such as 2 Column, 3 Column, 4 Column.
  • Show Social Icons - Enable/Disable to show the Social Icons.
  • Choose Team Categories - This option allow you to choose categories.
Team Grid Shortcode Example
							[vc_row][vc_column][zozo_vc_team_grid show_pagination="no" columns="4" posts="2"][/vc_column][/vc_row]
Output

Team List Settings

  • Extra Class - This option allow you to add Extra class for team grid settings.
  • CSS Animation - You can select animation for the Testimonial such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Alignment - This option allow you to choose alignment option such as Default, Left, Right, Center.
  • Posts Per Page - Enter the number of post per page.
  • Show Pagination - Enable/Disable the Pagination option for Team Grid Settings.
  • Team Image - Choose team lists such as Image, Slider.
  • Choose Team Categories - This option allow you to choose categories.
Team List Shortcode Example
							[vc_row][vc_column][zozo_vc_team_list show_pagination="no" posts="2"][/vc_column][/vc_row]
Output

Team Slider Settings

  • General - The General setting for Testimonial are following.
  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Testimonial such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Alignment - This option allow you to choose alignment option such as Default, Left, Right, Center.
  • Show Social Icons - Enable/Disable to show the Social Icons.
  • Choose Team Categories - This option allow you to choose categories.
  • Slider - The following options include the Slider settings.
  • Items to Display - This option allows you enter number of items to Display.
  • Items to Scrollby - This option allows you enter number of items to Scrollby.
  • Auto Play - This option allows you enable/disable autoplay option.
  • Timeout Duration - You can select Timeout Duration for slider.
  • Infinite Loop - You can set loop for slider.
  • Margin ( Items Spacing ) - You can add spacing between items.
  • Items To Display in Tablet - Enter Number of items to Display in Tablet.
  • Items To Display In Mobile Landscape - Enter Number of items to Display in Mobile Landscape.
  • Items To Display In Mobile Portrait - Enter Number of items to Display in Mobile Portrait.
  • Navigation - You can enable/disable Navigation for slider.
  • Pagination - You can enable/disable Pagination for slider.
Team Slider Shortcode Example
							[vc_row][vc_column][zozo_vc_team_slider items="4" items_scroll="2"][/vc_column][/vc_row]
Output

Contact Info Settings

  • General - The General setting for Contact Info are following.
  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Contact such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Alignment - Choose alignment options such as Default, Center, Right, Left.
  • Style - You can choose Default style or Style2.
  • Widget Title - Enter the title for Contact Info.
  • Description - This option allows you to enter the description for the Widget title.
  • Show Separator - You can enable the separator between contact info title and its details.
  • Address Label - Enter the Label for Address.
  • Address - Enter the address.
  • Phone Label - Enter the Label for Phone.
  • Phone Number - Enter the Phone Number 1.
  • Phone Number 2 - Enter the Phone Number 2.
  • Phone Number 3 - Enter the Phone Number 3.
  • Email Label - Enter the Label for Email.
  • Email Address - Enter the Email Address 1.
  • Email Address 2 - Enter the Email Address 2.
  • Email Address 3 - Enter the Email Address 3.
  • Social Icons - The General setting for Social Icons are following.
  • Social Label - Enter the Label for Social.
  • Type - You can choose social type such as Circle, Square, Rounded, Transparent.
  • Style - You can choose social style such as default, bordered, background.
  • Facebook Link - Enter the URL and Link text to show the Facebook link. Likewise all the social icons are given below, enter the URL and link text to show the required Social links.
  • Stylings - You can choose the custom color for all the options in contact info.
  • Widget Title Color, Widget Description Color, Separator Color, Address Label Color, Address Text Color, Phone Label Color, Phone Text Color, Email Label Color, Email Text Color, Social Label Color, Icon Color, Icon Background Color, Icon Hover Color, Icon Background Hover Color.

Contact Form Settings

  • General - The General setting for Contact Info are following.
  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Contact Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Form Layout - This option allow you to choose layout such as Default, Two Column Style.
  • Form Style - This option allow you to choose layout such as Default, Transparent.
  • Fields - The General setting for Fields are following.
  • Show Name Field - This option allow you to show Name Field.
  • Name Field Label - Enter the Name Field Label.
  • Email Field Label - Enter the Email Field Label.
  • Show Phone Field - This option allow you to show Phone Filed Label.
  • Phone Field Label - Enter the Phone Field Label.
  • Show Message Field - This option allow you to show Message Field.
  • Message Field Label - Enter the Message Field Label.
  • Button - The General setting for Button are following.
  • Button Text - Enter Button Text.
  • Button Alignment - This option allow you to choose Button Alignment such as Left, Right, Center.
  • Set full width button? - You can enable Fullwidth Button by clicking Checkbox.
  • Add icon? - You can enable Add icon by clicking Checkbox.
Contact Form Shortcode Example
							[vc_row][vc_column][zozo_vc_contact_form][/vc_column][/vc_row]
Output

Mailchimp Form Settings

  • General - The General setting for Mailchimp Form are following.
  • Extra Class - This option allow you to add Extra class.
  • CSS Animation - You can select animation for the Contact Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Form Layout - This option allow you to choose layout such as Default, Transparent.
  • Mailing List - This option allow you to Select the list to sent the Mail.
  • Placeholder Text - Enter the Placeholder Text.
  • Button - The General setting for Button are following.
  • Button Text - Enter the text for the Button.
  • Button Alignment - This option allow you to set the alignment such as Inline, Right, Bottom.
  • Set full width button? - Click on Checkbox to show the Fullwidth Button.
  • Add icon? - Click on Checkbox to Add icon for the button.
  • Button Background Color - Select button Background Color.
  • Button Text Color - Select button text color.
  • Button Hover Background Color - Select button Hover Background Color
  • Button Hover Text Color - Select Button hover color for Text.
Mailchimp Form Shortcode Example
							[vc_row][vc_column][zozo_vc_mailchimp_form mailing_list="abe9b3f2a1"][/vc_column][/vc_row]
Output

Event Grid

  • Extra Class: You can add extra classes for the event box.
  • CSS Animation – You can select animation for the Mailchimp Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Posts per Page: You can set the number of post to show on the page using event grid.
  • Style: You can select the Event Grid style such as Classic/Grid.
  • Include Categories: Enter the slugs of a categories (comma separated) to pull posts from or enter “all” to pull recent posts from all categories. Example: category-1, category-2.
  • Exclude Categories: Enter the slugs of a categories (comma seperated) to exclude. Example: category-1, category-2.
  • Show Excerpt Content: Enable/Disable Excerpts.
  • Excerpt Length: Enter excerpt length.
  • Order By: You can order the post by Ascending or Descending order.
Event Grid Shortcode Example
							[vc_row css=".vc_custom_1481528162503{padding-top: 0px !important;padding-bottom: 0px !important;}"][vc_column][zozo_vc_event_grid][/vc_column][/vc_row]
Output

Case Studies Grid

  • Extra Class: You can add extra classes for the event box.
  • CSS Animation – You can select animation for the Mailchimp Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Posts per Page: You can set the number of post to show on the page using event grid.
  • Show Pagination?:You can enable/disable the pagination option.
  • Include Categories: Enter the slugs of a categories (comma separated) to pull posts from or enter “all” to pull recent posts from all categories. Example: category-1, category-2.
  • Exclude Categories: Enter the slugs of a categories (comma seperated) to exclude. Example: category-1, category-2.
  • Show Excerpt Content: Enable/Disable Excerpts.
  • Excerpt Length: Enter excerpt length.
  • Button Text: Enter the button text.
Case Studies Grid Shortcode Example
							[vc_row center_row="yes"][vc_column][zozo_vc_casestudies_grid columns="3" button_text="Read more.."][/vc_column][/vc_row]
Output

Modal Box

  • General You can customize the general settings for modal box.
  • Extra Class - You can add extra classes for the modal box.
  • CSS Animation - You can select animation for the Contact Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Display Modal On ? You can show the modal box on Button, Text, Image, On Page Load.
  • Modal ID: You need to enter the modal id for example “zozo-modal-5850f4c5a058a”.
  • Alignment:Choose the alignment of selector button/text/image.
  • Button Text:Enter the button text here..
  • Button Size:You can choose the button size such as small, medium, large, block.
  • Modal Box Size:You can show the modal box in these sizes as small, medium, large, block.
  • Stylings:You can customize the style changes for the modal box.
  • Border Radius: To shape the modal content box, enter border radius.
  • Padding:Add spacing for modal box.
  • Overlay Background Color: Add the overlay background color for the modal box.
  • Content Background Color:Add the background color for the content in modal box.

Search Form

  • General You can customize the general settings for modal box.
  • Extra Class: - You can add extra classes for the modal box.
  • CSS Animation: - You can select animation for the Contact Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Form Style: You can choose the form style such as default and transparent.
  • Add Domain: Enter domain extensions. Divide extensions with linebreaks.
  • Form Action URL:Enter the form action URL.
  • Placeholder Text:Enter domain name here.
  • Button:You can customize the button style for the search form.
  • Button Text:Enter the button text here..
  • Button Alignment:You can choose the button alignment such as inline, right.
  • Add icon?:You can add icon on the button, also choose the icon alignment option, icon library option.
  • Button Background ColorAdd the background color for the search button.
  • Button Text Color:Add the button text color.
  • Button Hover Background Color:You can add button hover bg color.
  • Button Hover Text Color:You can add button hover text color.

Service Grid

  • Extra Class:You can add extra classes for the service grid.
  • CSS Animation – You can select animation for the Mailchimp Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Posts per Page: You can set the number of post to show on the page using event grid.
  • Show Pagination?:You can enable/disable the pagination option.
  • Include Categories: Enter the slugs of a categories (comma separated) to pull posts from or enter “all” to pull recent posts from all categories. Example: category-1, category-2.
  • Exclude Categories: Enter the slugs of a categories (comma seperated) to exclude. Example: category-1, category-2.
  • Services Columns: You can show the service grid in two/three/four columns.
  • Show Excerpt Content: Enable/Disable Excerpts content.
  • Button Text: Enter the button text.

Timeline

  • General You can customize the general settings for modal box.
  • Extra Class: - You can add extra classes for the modal box.
  • CSS Animation: - You can select animation for the Contact Form such as Top to bottom, Bottom to top, Left to right, Right to left.
  • Timeline Skin: You can choose the Light/Dark skin for timeline.
  • Alignment: You can choose the alignment as Left/Right/Center.
  • Border Style:You can choose various border style for the timeline.
  • Separator:You can customize the separator for timeline.
  • Separator Text:Enter Separator text Ex: 2015
  • Separator Title Type:You can change the typography option for separator title.
  • Separator Font Size:Enter Separator Font Size in px. Ex: 20px.
  • Separator Color:You can choose the separator color.
  • Heading:You can customize the header settings for timeline.
  • Title:Enter the title here.
  • Title Type:You can choose the title type from h2 to h6 and div.
  • Title Text Transform:You can choose the title transform here.
  • Title Font Weight:You can choose the title font weight here.
  • Title Font Size:Enter Title Font Size in px. Ex: 25px.
  • Title Line Height:Enter Title Line Height in px. Ex: 20px.
  • Title Letter Spacing:Enter Title Letter Spacing in px. Ex: 1px.
  • Title Color:Choose the title color here.
  • Title Margin:Enter Title Margin in px. Ex: 5px 5px 5px 5px.
  • Description:The description settings are following.
  • Description:Enter the title description here.
  • Description Font Size:Enter Font Size in px. Ex: 20px
  • Description Text Color:Choose the color for description here.
Timeline Shortcode Example
							[vc_row parallax="content-moving" parallax_image="315" center_row="yes" typo_style="light" css=".vc_custom_1471501389453{padding-bottom: 85px !important;}" el_id="section-timeline"][vc_column][vc_row_inner css=".vc_custom_1471496104412{padding-top: 30px !important;}"][vc_column_inner width="1/2" typo_style="dark" css=".vc_custom_1471496358688{padding-top: 0px !important;}"][zozo_vc_timeline timeline_align="right" timeline_text="1995" title="From strategy to structure" title_type="h5" title_transform="uppercase" title_weight="700"]Maecenas iaculis fringilla magna sit amet volutert proin vestibu um, ex quis imperdiet tempus, nu turpis condimentum est, atur pretium urna.[/zozo_vc_timeline][/vc_column_inner][vc_column_inner width="1/2" typo_style="dark"][/vc_column_inner][/vc_row_inner][vc_row_inner css=".vc_custom_1473337656742{padding-top: 0px !important;}"][vc_column_inner width="1/2"][/vc_column_inner][vc_column_inner width="1/2" typo_style="dark"][zozo_vc_timeline timeline_text="2000" title="When theory steps in…" title_type="h5" title_transform="uppercase" title_weight="700"]Maecenas iaculis fringilla magna sit amet volutert proin vestibu um, ex quis imperdiet tempus, nu turpis condimentum est, atur pretium urna.[/zozo_vc_timeline][/vc_column_inner][/vc_row_inner][vc_row_inner css=".vc_custom_1473337672186{padding-top: 0px !important;}"][vc_column_inner width="1/2" typo_style="dark" css=".vc_custom_1471495317165{padding-top: 0px !important;}"][zozo_vc_timeline timeline_align="right" timeline_text="2005" title="The emerging of a legitimacy function" title_type="h5" title_transform="uppercase" title_weight="700"]Maecenas iaculis fringilla magna sit amet volutert proin vestibu um, ex quis imperdiet tempus, nu turpis condimentum est, atur pretium urna.[/zozo_vc_timeline][/vc_column_inner][vc_column_inner width="1/2" typo_style="dark"][/vc_column_inner][/vc_row_inner][vc_row_inner css=".vc_custom_1473337690087{padding-top: 0px !important;}"][vc_column_inner width="1/2"][/vc_column_inner][vc_column_inner width="1/2" typo_style="dark"][zozo_vc_timeline timeline_text="2010" title="The rise of the consultants" title_type="h5" title_transform="uppercase" title_weight="700"]Maecenas iaculis fringilla magna sit amet volutert proin vestibu um, ex quis imperdiet tempus, nu turpis condimentum est, atur pretium urna.[/zozo_vc_timeline][/vc_column_inner][/vc_row_inner][vc_row_inner css=".vc_custom_1473337672186{padding-top: 0px !important;}"][vc_column_inner width="1/2" typo_style="dark" css=".vc_custom_1471495317165{padding-top: 0px !important;}"][zozo_vc_timeline timeline_align="right" timeline_text="2016" title="New Branch Launched" title_type="h5" title_transform="uppercase" title_weight="700"]Maecenas iaculis fringilla magna sit amet volutert proin vestibu um, ex quis imperdiet tempus, nu turpis condimentum est, atur pretium urna.[/zozo_vc_timeline][/vc_column_inner][vc_column_inner width="1/2" typo_style="dark"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]
Output