Portfolio section

[zp_portfolio preselect_cat=”graphics” lightbox=”false”] [code_wrapper] [zp_portfolio preselect_cat=”graphics” lightbox=”true”] “preselect_cat” is a portfolio category slug. “lightbox” option are ‘true’ or ‘false’
[/code_wrapper]

Blog section

[blog_section columns=”3″ items=”3″ category=”” exclude_ids=”” ][/blog_section] [code_wrapper] [blog_section columns=”3″ items=”3″ category=”” exclude_ids=”” ][/blog_section] [/code_wrapper]

Services section

[services columns=”4″ align=”center” items=”4″] [code_wrapper] [services columns=”4″ align=”center” items=”4″] [/code_wrapper]

Image section

[image_section image_url=”http://demo.zigzagpress.com/awaken/wp-content/uploads/2014/01/tumblr_n10mzgcbTV1st5lhmo1_1280.jpg” link=”” title=”Single Photo Example” desc=”Here is an example with one single photo displayed on the right.” image_position=”right” ]Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius..

[button class=”btn-default” size=”btn-lg” inline=”false” link=”#Works” ]Learn More[/button][/image_section] [code_wrapper] [image_section image_url=”IMAGE_URL” link=”IMAGE_LINK” title=”TITLE” desc=”DESCRIPTION” image_position=”right/left” ]CONTENT_HERE[/image_section] [/code_wrapper]

Video section

[video_section src=”//player.vimeo.com/video/80813929″ title=”An Embed Video Example” desc=”Here is an example with an embed video displayed on the left” video_position=”left” height=”200″ width=”300″]Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

[button class=”btn-default” size=”btn-lg” inline=”false” link=”#Works” ]Learn More[/button] [/video_section] [code_wrapper] [video_section src=”VIDEO_URL” title=”TITLE” desc=”DESCRIPTION” video_position=”left/right” height=”200″ width=”300″]CONTENT_HERE[/video_section] [/code_wrapper]

slider section

[slider_section slidename=”slider_section” slideshow=”slides” caption=”true” slider_position=”right” title=”Showcase Something” desc=”This is a carousel example…” ]Unde, vero voluptas delectus explicabo maxime ad qui incidunt! Saepe, dolor, consequatur, distinctio incidunt unde fuga expedita ducimus maiores tempora quis vitae?

[button class=”btn-default” size=”btn-lg” inline=”false” link=”#Works” ]Learn More[/button] [/slider_section] [code_wrapper] [slider_section slidename=”SLIDER_NAME” slideshow=”SLIDESHOW” caption=”true” slider_position=”left/right” title=”TITLE” desc=”DESCRIPTION” ]CONTENT HERE[/slider_section] NOTE: “slidename” serves as the ID of the slider. This must be unique and must be one word only. “slideshow” is a slug of the slideshow. See “Slides”
[/code_wrapper]

Prices section

[pricing columns=”3″][/pricing] [code_wrapper] [pricing columns=”3″][/pricing] [/code_wrapper]

Team section

[team columns=”4″ align=”left” ][/team] [code_wrapper] [team columns=”4″ align=”left” ][/team] [/code_wrapper]

Testimonials section

[testimonial_section] [code_wrapper] [testimonial_section] [/code_wrapper]

Clients section

[client_carousel name=”1″][/client_carousel] [code_wrapper] [client_carousel name=”1″][/client_carousel] [/code_wrapper]

Contact section

[contact_section][contact-form-7 id=”4387″ title=”Contact form 1″][/contact_section] [code_wrapper] [contact_section]CONTACT_FORM_7_SHORTCODE[/contact_section] [/code_wrapper]

Button Style

[button class=”btn-default” size=”btn-lg” inline=”false” link=”#” ]Default[/button][button class=”btn-primary” size=”btn-lg” inline=”true” link=”#” ]Primary[/button][button class=”btn-success” size=”btn-lg” inline=”true” link=”#” ]Success[/button][button class=”btn-info” size=”btn-lg” inline=”true” link=”#” ]Info[/button][button class=”btn-warning” size=”btn-lg” inline=”true” link=”#” ]Warning[/button][button class=”btn-danger” size=”btn-lg” inline=”true” link=”#” ]Danger[/button][button class=”btn-inverse” size=”btn-lg” inline=”true” link=”#” ]Inverse[/button] [code_wrapper] [button class=”btn-default” size=”btn-lg” inline=”false” link=”#” ]Default[/button] [button class=”btn-primary” size=”btn-lg” inline=”true” link=”#” ]Primary[/button] [button class=”btn-success” size=”btn-lg” inline=”true” link=”#” ]Success[/button] [button class=”btn-info” size=”btn-lg” inline=”true” link=”#” ]Info[/button] [button class=”btn-warning” size=”btn-lg” inline=”true” link=”#” ]Warning[/button] [button class=”btn-danger” size=”btn-lg” inline=”true” link=”#” ]Danger[/button] [button class=”btn-inverse” size=”btn-lg” inline=”true” link=”#” ]Inverse[/button] [/code_wrapper]

Button Sizes

[button class=”btn-default” size=”btn-hg” inline=”false” link=”#” ]Extra Large[/button][button class=”btn-default” size=”btn-lg” inline=”true” link=”#” ]Large[/button][button class=”btn-default” size=”” inline=”true” link=”#” ]Medium[/button][button class=”btn-default” size=”btn-sm” inline=”true” link=”#” ]Small[/button][button class=”btn-default” size=”btn-xs” inline=”true” link=”#” ]Extra Small[/button] [code_wrapper] [button class=”btn-default” size=”btn-hg” inline=”false” link=”#” ]Extra Large[/button] [button class=”btn-default” size=”btn-lg” inline=”true” link=”#” ]Large[/button] [button class=”btn-default” size=”” inline=”true” link=”#” ]Medium[/button] [button class=”btn-default” size=”btn-sm” inline=”true” link=”#” ]Small[/button] [button class=”btn-default” size=”btn-xs” inline=”true” link=”#” ]Extra Small[/button] [/code_wrapper]

Modal Box

[column_wrapper] [column_grid_8]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/column_grid_8][column_grid_4] [modal modal_name=”modal_box1″ btn_label=”Launch Modal Box” btn_size=”btn-hg” btn_class=”btn-default” ][modal_header title=”Modal title”][/modal_header][modal_content]

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Popover in a modal

This [popover position=”right” title=”popover title” label=”And here’s some amazing content. It’s very engaging. right?”]popover[/popover] should trigger a popover on click.

Tooltips in a modal

Here is some dummy text. You can also use [tooltip position=”top” title=”Hey, i’m a top tooltip!” ]tooltips[/tooltip]. That one showed on top, but you can have it on the [tooltip position=”bottom” title=”Hey, i’m a bottom tooltip!”]bottom too[/tooltip]! How about [tooltip position=”left” title=”Hey, i’m a left tooltip!” ]left[/tooltip] or [tooltip position=”right” title=”Hey, i’m a right tooltip!” ]right[/tooltip]?

---

Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

Donec ullamcorper nulla non metus auctor fringilla.Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.[/modal_content][modal_footer]Buy This Theme[/modal_footer][/modal][/column_grid_4][/column_wrapper] [code_wrapper] [modal modal_name=”” btn_label=”” btn_size=”btn-hg” btn_class=”btn-default”][modal_header title=””][/modal_header][modal_content][/modal_content][modal_footer][/modal_footer][/modal] [/code_wrapper]

Tooltips in a modal

Here is some dummy text. You can also use [tooltip position=”top” title=”Hey, i’m a top tooltip!” ]tooltips[/tooltip]. That one showed on top, but you can have it on the [tooltip position=”bottom” title=”Hey, i’m a bottom tooltip!”]bottom too[/tooltip]! How about [tooltip position=”left” title=”Hey, i’m a left tooltip!” ]left[/tooltip] or [tooltip position=”right” title=”Hey, i’m a right tooltip!” ]right[/tooltip]?
[code_wrapper] [tooltip position=”right” title=”Hey, i’m a right tooltip!” ]right[/tooltip] [/code_wrapper]

Popover in a modal

This [popover position=”right” title=”popover title” label=”And here’s some amazing content. It’s very engaging. right?”]popover[/popover] should trigger a popover on click.
[code_wrapper] [popover position=”right” title=”popover title” label=”And here’s some amazing content. It’s very engaging. right?”]popover[/popover] [/code_wrapper]

Info Boxes

[column_wrapper][one_half][alert class=”alert-success” ]Success Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. [/alert][alert class=”alert-info” ]Info Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. [/alert][/one_half] [one_half][alert class=”alert-warning” ]Warning Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.[/alert][alert class=”alert-danger” ]Danger Box
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. [/alert][/one_half] [/column_wrapper] [code_wrapper] [alert class=”alert-warning” ]TEXT HERE[/alert] [alert class=”alert-success” ]TEXT HERE[/alert] [alert class=”alert-info” ]TEXT HERE[/alert] [alert class=”alert-danger” ]TEXT HERE[/alert] [/code_wrapper] [column_wrapper][one_half]

Tabs

[tab ids=”tab1,tab2,tab3,tab4″ nav=”Tab 1,Tab 2,Tab 3,Tab 4″][tabpane id=”tab1″]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane] [tabpane id=”tab2″]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane][tabpane id=”tab3″]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane] [tabpane id=”tab4″]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tabpane][/tab][code_wrapper] [tab ids=”tab1,tab2,tab3″ nav=”Tab 1,Tab 2,Tab 3″] [tabpane id=”tab1″][/tabpane] [tabpane id=”tab2″][/tabpane] [tabpane id=”tab3″][/tabpane] [/tab] [/code_wrapper][/one_half] [one_half]

Accordion

[accordion_wrap][accordion id=”one” title=”Is this template compatible with Bootstrap 3?”]Absolutely! As shown with a few examples within this demo, you can use all the bootstrap goodies such as carousels, modal windows, tooltips, tabs, accordions, form elements…[/accordion][accordion id=”two” title=”Is this template compatible with Bootstrap 3?”]Absolutely! As shown with a few examples within this demo, you can use all the bootstrap goodies such as carousels, modal windows, tooltips, tabs, accordions, form elements…[/accordion][accordion id=”three” title=”Is this template compatible with Bootstrap 3?”]Absolutely! As shown with a few examples within this demo, you can use all the bootstrap goodies such as carousels, modal windows, tooltips, tabs, accordions, form elements…[/accordion][/accordion_wrap] [code_wrapper] [accordion_wrap] [accordion id=”one” title=”TITLE”]CONTENT HERE[/accordion] [accordion id=”two” title=”TITLE”]CONTENT HERE[/accordion] [accordion id=”three” title=”TITLE”]CONTENT HERE[/accordion] [/accordion_wrap] [/code_wrapper] [/one_half][/column_wrapper]

Two Columns

[column_wrapper][one_half]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_half][one_half]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_half][/column_wrapper] [code_wrapper] [column_wrapper] [one_half][/one_half] [one_half][/one_half] [/column_wrapper] [/code_wrapper]

Three Columns

[column_wrapper][one_third]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_third][one_third]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_third][one_third]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_third][/column_wrapper] [code_wrapper] [column_wrapper] [one_third][/one_third] [one_third][/one_third] [one_third][/one_third] [/column_wrapper] [/code_wrapper]

Four Columns

[column_wrapper][one_fourth]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][one_fourth]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][one_fourth]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][one_fourth]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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/one_fourth][/column_wrapper] [code_wrapper] [column_wrapper] [one_fourth][/one_fourth] [one_fourth][/one_fourth] [one_fourth][/one_fourth] [one_fourth][/one_fourth] [/column_wrapper] [/code_wrapper]