Modals

[spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]

They may not be the most exciting shortcode we have to offer, but they can be very useful. Below are a few examples of what you can do with them.

[/spb_text_block] [divider type=”thin” text=”Go to top” full_width=”no” width=”1/1″ el_position=”first last”] [blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”first”]

[sf_modal header=”OK, here’s your modal.” btn_colour=”accent” btn_type=”standard” btn_size=”standard” btn_text=”SHOW ME THE MODAL!”]

Put anything you want in these bad boys.

[one_third] [chart percentage=”30″ size=”170″ barcolour=”#00a0f3″ trackcolour=”#e4e4e4″ content=”95,000″ align=”center”]

Click throughs.

[/one_third] [one_third] [chart percentage=”75″ size=”170″ barcolour=”#1dc6df” trackcolour=”#e4e4e4″ content=”ss-view” align=”center”]

95k Page Views

[/one_third] [one_third_last] [chart percentage=”50%” size=”170″ barcolour=”#00d1c5″ trackcolour=”#e4e4e4″ content=”ss-like” align=”center”]

Projects complete.

[/one_third_last] [hr] [progress_bar percentage=”100″ name=”Illustration” value=”100%” type=”” colour=”#007ef3″] [progress_bar percentage=”80″ name=”Photoshop” value=”80%” type=”” colour=”#00a0f3″] [progress_bar percentage=”70″ name=”After Effects” value=”70%” type=”” colour=”#1dc6df”] [progress_bar percentage=”100″ name=”Branding” value=”100%” type=”” colour=”#00d1c5″] [progress_bar percentage=”100″ name=”Marketing” value=”100%” type=”” colour=”#37ba85″] [/sf_modal] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″]

[sf_modal header=”Modal Example 2.” btn_colour=”accent” btn_type=”standard” btn_size=”standard” btn_text=”MODAL EXAMPLE 2″]

[spb_video title=”Watch this video” link=”http://vimeo.com/36176127″ size=”630 x 347″ full_width=”no” width=”1/1″ el_position=”first last”]   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio. Suspendisse viverra mauris eget tortor imperdiet vehicula. Proin egestas diam ac mauris molestie hendrerit. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio. Quisque nec nisi tortor. Etiam at mauris sit amet magna suscipit hend merit non sed ligula. Vivamus purus odio. [sf_button colour=”green” type=”sf-icon-reveal” size=”standard” link=”http://” target=”_self” icon=”ss-view” dropshadow=”no” extraclass=”ml0″]WATCH ANOTHER VIDEO[/sf_button] [/sf_modal] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”last”]

[sf_modal header=”Modal Example 3″ btn_colour=”accent” btn_type=”standard” btn_size=”standard” btn_text=”MODAL EXAMPLE 3″]

Follow these instructions

[hr] [sf_iconbox image=”” character=”1″ type=”left-icon” title=”Step One – Do this.” animation=”fade-in” animation_delay=”200″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox]   [sf_iconbox image=”” character=”2″ type=”left-icon” title=”Step Two – Now do this.” animation=”fade-in” animation_delay=”600″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox]   [sf_iconbox image=”” character=”3″ type=”left-icon” title=”Step Three – You’re done!” animation=”fade-in” animation_delay=”1000″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox]   [/sf_modal] [/spb_text_block]