VC Shortcodes

ACCORDION

Accordion are flexible and easy to use. It will be perfect to manage huge amount of content and bring a neat look. With Accordion shortcode, you can create as many accordions as you want, choose different icons and set active accordion when loading page. You can collapse all accordions at loading page by setting value -1 for active-tab.

About Accordions

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Active Accordions

I’m an active accordion after you opened to read. Click [-] to have this content hidden.

Not only Text

You can add many more thing into this content. Such as below image

Lots of Use

Accordions are customizable. You can make your huge amount of content look neatly such as for FAQs, About Us Section,… You can think of much more when you need it.

TOGGLES

Accordion are flexible and easy to use. It will be perfect to manage huge amount of content and bring a neat look. With Accordion shortcode, you can create as many accordions as you want, choose different icons and set active accordion when loading page. You can collapse all accordions at loading page by setting value -1 for active-tab.

About Accordions

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Active Accordions

I’m an active accordion after you opened to read. Click [-] to have this content hidden.

Not only Text

You can add many more thing into this content. Such as below image

Lots of Use

Accordions are customizable. You can make your huge amount of content look neatly such as for FAQs, About Us Section,… You can think of much more when you need it.

Horizontal Tab

About Tabs: Tabs is useful to handle large amount of content

[video_player video_ratio=”16:9″ visibility=”all” video_m4v=”http://wp.nootheme.com/citilights/dummy/wp-content/uploads/2014/10/big_buck_bunny.mp4″]

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

[gap size=”20″ visibility=”all”]

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Vertical Tab

Quisque tincidunt dictum ipsum quis cursus. Mauris et urna et turpis placerat egestas. Mauris ultricies risus eu massa gravida pulvinar. Aliquam quam diam, egestas in imperdiet a, aliquam ut odio. Vivamus nulla neque, scelerisque eu hendrerit ut, molestie eu sapien.

Aenean a ante lacus. Fusce eget lorem sollicitudin, adipiscing magna at, cursus orci. Morbi a rhoncus risus, ac porttitor arcu. Mauris dignissim elit sagittis, dictum mi sed, faucibus mi. Cras facilisis nibh dui, vitae sollicitudin sapien sagittis ac. Donec purus enim, posuere ac vestibulum vel, ultrices non mi. Sed condimentum suscipit leo, ut lacinia sem molestie ut. Nulla facilisi. Curabitur lobortis nec eros a pellentesque.

Quisque tincidunt dictum ipsum quis cursus. Mauris et urna et turpis placerat egestas. Mauris ultricies risus eu massa gravida pulvinar. Aliquam quam diam, egestas in imperdiet a, aliquam ut odio. Vivamus nulla neque, scelerisque eu hendrerit ut, molestie eu sapien.

Quisque tincidunt dictum ipsum quis cursus. Mauris et urna et turpis placerat egestas. Mauris ultricies risus eu massa gravida pulvinar. Aliquam quam diam, egestas in imperdiet a, aliquam ut odio. Vivamus nulla neque, scelerisque eu hendrerit ut, molestie eu sapien.

Aenean a ante lacus. Fusce eget lorem sollicitudin, adipiscing magna at, cursus orci. Morbi a rhoncus risus, ac porttitor arcu. Mauris dignissim elit sagittis, dictum mi sed, faucibus mi. Cras facilisis nibh dui, vitae sollicitudin sapien sagittis ac. Donec purus enim, posuere ac vestibulum vel, ultrices non mi. Sed condimentum suscipit leo, ut lacinia sem molestie ut. Nulla facilisi. Curabitur lobortis nec eros a pellentesque.

Quisque tincidunt dictum ipsum quis cursus. Mauris et urna et turpis placerat egestas. Mauris ultricies risus eu massa gravida pulvinar. Aliquam quam diam, egestas in imperdiet a, aliquam ut odio. Vivamus nulla neque, scelerisque eu hendrerit ut, molestie eu sapien.

Aenean a ante lacus. Fusce eget lorem sollicitudin, adipiscing magna at, cursus orci. Morbi a rhoncus risus, ac porttitor arcu. Mauris dignissim elit sagittis, dictum mi sed, faucibus mi. Cras facilisis nibh dui, vitae sollicitudin sapien sagittis ac. Donec purus enim, posuere ac vestibulum vel, ultrices non mi. Sed condimentum suscipit leo, ut lacinia sem molestie ut. Nulla facilisi. Curabitur lobortis nec eros a pellentesque.

Previous tab Next tab

Counter

Counter can give your site a more visual look for showing your achievement, your work, your target or any interesting number to your visitors. Below we made an example.

[gap size=”50″ visibility=”all”]
[counter size=”72″ alignment=”center” visibility=”all” number=”277″]

CUSTOMERS

Vivamus aliquam dolor vel dui dapibus, id vehicula urna.

[/counter]

[counter size=”72″ alignment=”center” visibility=”all” number=”43255″]

HOURS

Vivamus aliquam dolor vel dui dapibus, id vehicula urna.

[/counter]

[counter size=”72″ alignment=”center” visibility=”all” number=”1111″]

EMAIL

Vivamus aliquam dolor vel dui dapibus, id vehicula urna.

[/counter]

[counter size=”72″ alignment=”center” visibility=”all” number=”123″]

SOLUTIONS

Vivamus aliquam dolor vel dui dapibus, id vehicula urna.

[/counter]

PROGRESS BAR

Counter can give your site a more visual look for showing your achievement, your work, your target or any interesting number to your visitors. Below we made an example.

[gap size=”50″ visibility=”all”]
[progress_bar style=”lean” rounded=”true” visibility=”all” title=”progress thin”][progress_bar_item progress=”80″ color=”primary” title=”Basic Bar”][progress_bar_item progress=”40″ color=”success” title=”Color”][progress_bar_item progress=”90″ color=”info” title=”Stripped”][progress_bar_item progress=”50″ color=”warning” title=”Animated Stripped Progress Bar”][/progress_bar]
[progress_bar style=”thick” rounded=”true” visibility=”all” title=”Progress Bar”][progress_bar_item progress=”80″ color=”primary” title=”Basic Bar”][progress_bar_item progress=”40″ color=”success” title=”Another Color Bar”][progress_bar_item progress=”66″ color=”info” title=”Stripped Bar”][progress_bar_item progress=”58″ color=”warning” title=”Animated Stripped Bar”][/progress_bar]

PIE CHART

Pie chart is a more visual way of demonstrating percentages than progress bar. The color element has a stronger impact, which makes the whole chart more eye-catching.

[gap size=”50″ visibility=”all”]
CREATIVE IDEAS
[gap size=”30″ visibility=”all”]

Ut wisi enim ad minim veniam, quis nos trud exerci tation ullamcorper.

BUSINESS SOLUTIONS
[gap size=”30″ visibility=”all”]

Ut wisi enim ad minim veniam, quis nos trud exerci tation ullamcorper.

INOVATIVE PROJECTS
[gap size=”30″ visibility=”all”]

Ut wisi enim ad minim veniam, quis nos trud exerci tation ullamcorper.

CUSTOMER SUPPORT
[gap size=”30″ visibility=”all”]

Ut wisi enim ad minim veniam, quis nos trud exerci tation ullamcorper.

ICON

Citilights is integrated fully with Font Awesome Icon set to give you numerous choice. Use your favorite icons with difference preset styles: Custom Icon, Filled Stack, Bordered Stack or just Simple one.

Simple Icon

[gap size=”20″ visibility=”all”][icon icon=”fa-taxi” size=”4x” custom_size=”50″ shape=”circle” style=”simple” visibility=”all” custom_style=”text-align: center; display: block;margin: 16px auto;”][gap size=”40″ visibility=”all”]

Custom Icon

[gap size=”20″ visibility=”all”][icon icon=”fa-coffee” size=”custom” custom_size=”50″ shape=”circle” style=”custom” visibility=”all” custom_style=”text-align: center; display: block;margin: 16px auto;”]

Filled Stack

[gap size=”20″ visibility=”all”][icon icon=”fa-camera” size=”4x” custom_size=”50″ shape=”circle” style=”stack_filled” visibility=”all” custom_style=”text-align: center; display: block;margin: 0 auto;”][gap size=”20″ visibility=”all”]

Bordered Stack

[gap size=”20″ visibility=”all”][icon icon=”fa-star” size=”4x” custom_size=”50″ shape=”circle” style=”stack_bordered” visibility=”all” custom_style=”text-align: center; display: block;margin: 0 auto;”][gap size=”20″ visibility=”all”]

ICON LIST ITEM

You are able to use whole Font Awesome Icon set to make up your icon list. Below is just a small preview.

[gap size=”50″ visibility=”all”]
[icon_list visibility=”all”][icon_list_item icon=”fa-check” icon_size=”22″ text_same_size=”true” text_same_color=”true” icon_color=”#40d1af”]Add the item here…[/icon_list_item][icon_list_item icon=”fa-check” icon_size=”22″ text_same_size=”true” text_same_color=”true” icon_color=”#40d1af”]Add the item here…[/icon_list_item][icon_list_item icon=”fa-check” icon_size=”22″ text_same_size=”true” text_same_color=”true” icon_color=”#40d1af”]Add the item here…[/icon_list_item][icon_list_item icon=”fa-check” icon_size=”22″ text_same_size=”true” text_same_color=”true” icon_color=”#dd3333″]Add the item here…[/icon_list_item][icon_list_item icon=”fa-check” icon_size=”22″ text_same_size=”true” text_same_color=”true” icon_color=”#dd3333″]Add the item here…[/icon_list_item][/icon_list]
[icon_list visibility=”all”][icon_list_item icon=”fa-flash” text_same_size=”true” text_same_color=”true” icon_color=”#eeee22″ icon_size=”22″]Add the item here…[/icon_list_item][icon_list_item icon=”fa-file-picture-o” text_same_size=”true” text_same_color=”true” icon_color=”#eeee22″ icon_size=”22″]Add the item here…[/icon_list_item][icon_list_item icon=”fa-share-square” text_same_size=”true” text_same_color=”true” icon_color=”#eeee22″ icon_size=”22″]Add the item here…[/icon_list_item][icon_list_item icon=”fa-file-text” text_same_size=”true” text_same_color=”true” icon_color=”#eeee22″ icon_size=”22″]Add the item here…[/icon_list_item][icon_list_item icon=”fa-adjust” text_same_size=”true” text_same_color=”true” icon_color=”#eeee22″ icon_size=”22″]Add the item here…[/icon_list_item][/icon_list]

BUTTON

We bring you here some buttons at various size that you will absolutely need somewhere in your website for your Call To Actions. Below come different premade styles, with icons and text or with icons only. We also preset number of button color for your easy choice or you may custom your own. They are all at your hand now.

3D SQUARE

[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON [gap size=”30″ visibility=”all”]SQUARE BUTTON

3D ROUND

[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON [gap size=”30″ visibility=”all”]SQUARE BUTTON

3D PILL

[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON [gap size=”30″ visibility=”all”]SQUARE BUTTON

METRO SQUARE

[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON [gap size=”30″ visibility=”all”]SQUARE BUTTON

METRO ROUND

[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON [gap size=”30″ visibility=”all”]SQUARE BUTTON

METRO PILL

[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON[gap size=”30″ visibility=”all”]SQUARE BUTTON [gap size=”30″ visibility=”all”]SQUARE BUTTON

RESPONSIVE SLIDER

Responsive slider brings your site lots of slider options. You can create fully responsive sliders with fade or slide animation, showing indicator or arrow. It can be automatic slide transferred or with timer, text or image. And many more options comes in this shortcode that you can use for your slider customization.

Fade Animation With Indicator

[slider animation=”fade” slider_time=”3000″ slider_speed=”600″ indicator=”true” indicator_position=”top” swipe=”true” visibility=”all” layout=”standard”][slide type=”image” image=”6919″][slide type=”image” image=”6920″][slide type=”image” image=”6921″][/slider]
[code visibility=”all”][slider animation=”fade” slider_time=”3000″ slider_speed=”600″ indicator=”true” indicator_position=”top” swipe=”true” visibility=”all”][slide type=”image” image=”5580″][slide type=”image” image=”5578″][slide type=”image” image=”5577″][/slider][/code]

Auto Slide Animation

[slider animation=”slide” slider_time=”3000″ slider_speed=”600″ indicator_position=”top” swipe=”true” visibility=”all” auto_play=”true” pause_on_hover=”true”][slide type=”image” image=”6920″][slide type=”image” image=”6921″][slide type=”image” image=”6919″][/slider]
[code visibility=”all”][slider animation=”slide” slider_time=”3000″ slider_speed=”600″ indicator_position=”top” swipe=”true” visibility=”all” auto_play=”true” pause_on_hover=”true”][slide type=”image” image=”5580″][slide type=”image” image=”5578″][slide type=”image” image=”5577″][/slider][/code]

Random Slider With Timer

[slider animation=”slide” slider_time=”3000″ slider_speed=”600″ indicator_position=”top” swipe=”true” visibility=”all” pause_on_hover=”true” indicator=”true” auto_play=”true” random=”true” timer=”true”][slide type=”image” image=”6921″][slide type=”image” image=”6920″][slide type=”image” image=”6919″][/slider]
[code visibility=”all”][slider animation=”slide” slider_time=”3000″ slider_speed=”600″ indicator_position=”top” swipe=”true” visibility=”all” pause_on_hover=”true” indicator=”true” auto_play=”true” random=”true” timer=”true”][slide type=”image” image=”5580″][slide type=”image” image=”5578″][slide type=”image” image=”5577″][/slider][/code]

Text Slide With Navigation Arrow

[slider animation=”slide” slider_time=”3000″ slider_speed=”600″ indicator_position=”bottom” visibility=”all” pause_on_hover=”true” prev_next_control=”true” swipe=”true” timer=”true” custom_style=”background: #dd3333;”][slide type=”content”]

[icon custom_size=”36″ shape=”circle” visibility=”all” icon=”fa-twitter” size=”custom” icon_color=”#ffffff” hover_icon_color=”#ffffff”]

fringilla @merito, nec venenatis sem posuere quis. Sed sed faucibus ligula.

_ Mark Hain

about 1 hour ago

[/slide][slide type=”content”]

[icon custom_size=”36″ shape=”circle” visibility=”all” icon=”fa-twitter” size=”custom” icon_color=”#ffffff” hover_icon_color=”#ffffff”]

fringilla @merito, nec venenatis sem posuere quis. Sed sed faucibus ligula.

_ Mark Hain

about 1 hour ago

[/slide][slide type=”content”]

[icon custom_size=”36″ shape=”circle” visibility=”all” icon=”fa-twitter” size=”custom” icon_color=”#ffffff” hover_icon_color=”#ffffff”]

fringilla @merito, nec venenatis sem posuere quis. Sed sed faucibus ligula.

_ Mark Hain

about 1 hour ago

[/slide][/slider]

[code visibility=”all”][slider animation=”slide” slider_time=”3000″ slider_speed=”600″ indicator_position=”bottom” visibility=”all” pause_on_hover=”true” prev_next_control=”true” swipe=”true”][slide type=”content”]Add the content here…[/slide][slide type=”content”]Add the content here…[/slide][slide type=”content”]Add the content here…[/slide][/slider][/code]
[gap size=”50″ visibility=”all”]
[gap size=”20″ visibility=”all”]

A site-wide Call to Action Section! Have you fallen in love yet?

Leave a Reply

wpChatIcon