Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Construct] ShortCode Documentation
09-26-2012, 10:29 AM (This post was last modified: 10-13-2012 10:06 PM by Sam Barrow.)
Post: #1
[Construct] ShortCode Documentation
Recently, a lot of people have been asking about our shortcode functions. We have released this documentation to shed a little light on shortcodes that we have developed for your use. The shortcodes can be downloaded if you import the XML document that you received with your purchase at ThemeForest. However, if you do not wish to import all of the files from the demo, you can follow this documentation to find the shortcode you want to use.

In any shortcode, you simply add it to your page by editing the page and going to HTML to input it.

Each shortcode that is used in the demo is listed below along with a link to the demo page that has the shortcode that it's referring to. Each shortcode, for means of better understanding, is highlighted by a 'code' box.

Code:
Like this

We will start with Boxes that can be added using a shortcode.

Alert Boxes

The general alert box:
Code:
<div class="alert_icons_block c_after">
<div class="box">General Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

The error message box:
Code:
<div class="alert_icons_block c_after">
<div class="box error">Error Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

The green success message box:
Code:
<div class="alert_icons_block c_after">
<div class="box success">Success Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

The yellow success message box:
Code:
<div class="alert_icons_block c_after">
<div class="box success2">Success Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

The general message (with header) box:
Code:
<div class="alert_icons_block alert_block c_after">
<div class="box"><strong>General Message</strong>General Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

The error message (with header) box:
Code:
<div class="alert_icons_block alert_block c_after">
<div class="box error"><strong>Error Message</strong>Error Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

The green success message (with header) box:
Code:
<div class="alert_icons_block alert_block c_after">
<div class="box success"><strong>Success Message</strong>Success Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

The yellow success message (with header) box:
Code:
<div class="alert_icons_block alert_block c_after">
<div class="box success2"><strong>Success Message</strong>Success Message. Your Message Goes Here.<a class="close" href="#">close</a></div>
</div>

Get a Quote Promo Box:
Code:
[quote]

Share this Story box:
Code:
[share]


Buttons

Large button:
Code:
<div class="buttons c_after">[large_button label="Large Button" url="#"]Large Button[/large_button]</div>

Medium button:
Code:
<div class="buttons c_after">[medium_button label="Medium Button" url="#"]Medium Button[/medium_button]</div>

Small button:
Code:
<div class="buttons c_after">[small_button label="Small Button" url="#"]Small Button[/small_button]

Default (sky blue) colored button:
Code:
[button url="#" label="Learn More"]Learn More[/button]

Purple colored button:
Code:
[button color="blue" url="#"]Learn More[/button]

Green colored button:
Code:
[button color="green" url="#"]Learn More[/button]

Red colored button:
Code:
[button color="red" url="#" label="Learn More"]Learn More[/button]

Yellow colored button:
Code:
[button color="yellow" url="#" label="Learn More"]Learn More[/button]

Orange colored button:
Code:
[button color="orange" url="#" label="Learn More"]Learn More[/button]

Grey colored button:
Code:
[button color="grey" url="#" label="Learn More"]Learn More[/button]

Black colored button:
Code:
[button color="black" url="#" label="Learn More"]Learn More[/button]

Large facebook button:
Code:
<div class="social_icons">
<ul>
    <li>[social_facebook url="#" size="large"]</li>
</ul>
</div>

Large twitter button:
Code:
<div class="social_icons">
<ul>
    <li>[social_twitter url="#" size="large"]</li>
</ul>
</div>

Large linkedin button:
Code:
<div class="social_icons">
<ul>
    <li>[social_linkedin url="#" size="large"]</li>
</ul>
</div>

Large reddit button:
Code:
<div class="social_icons">
<ul>
    <li>[social_reddit url="#" size="large"]</li>
</ul>
</div>

Large RSS button:
Code:
<div class="social_icons">
<ul>
    <li>[social_rss url="#" size="large"]</li>
</ul>
</div>

Large Google+ button:
Code:
<div class="social_icons">
<ul>
    <li>[social_google url="#" size="large"]</li>
</ul>
</div>

Large Dribbble button:
Code:
<div class="social_icons">
<ul>
    <li>[social_dribbble url="#" size="large"]</li>
</ul>
</div>

Small facebook button:
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_facebook url="#" size="small"]</li>
</ul>
</div>

Small twitter button:
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_twitter url="#" size="small"]</li>
</ul>
</div>

Small linkedin button:
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_linkedin url="#" size="small"]</li>
</ul>
</div>

Small reddit button:
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_reddit url="#" size="small"]</li>
</ul>
</div>

Small RSS button:
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_rss url="#" size="small"]</li>
</ul>
</div>

Small Google+ button:
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_google url="#" size="small"]</li>
</ul>
</div>

Small dribbble button:
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_dribbble url="#" size="small"]</li>
</ul>
</div>

Large facebook button (square):
Code:
<div class="social_icons">
<ul>
    <li>[social_facebook url="#" size="large" style="2"]</li>
</ul>
</div>

Large twitter button (square):
Code:
<div class="social_icons">
<ul>
    <li>[social_twitter url="#" size="large" style="2"]</li>
</ul>
</div>

Large linkedin button (square):
Code:
<div class="social_icons">
<ul>
    <li>[social_linkedin url="#" size="large" style="2"]</li>
</ul>
</div>

Large reddit button (square):
Code:
<div class="social_icons">
<ul>
    <li>[social_reddit url="#" size="large" style="2"]</li>
</ul>
</div>

Large RSS button (square):
Code:
<div class="social_icons">
<ul>
    <li>[social_rss url="#" size="large" style="2"]</li>
</ul>
</div>

Large Google+ button (square):
Code:
<div class="social_icons">
<ul>
    <li>[social_google url="#" size="large" style="2"]</li>
</ul>
</div>

Large dribbble button (square):
Code:
<div class="social_icons">
<ul>
    <li>[social_dribbble url="#" size="large" style="2"]</li>
</ul>
</div>

Small facebook button (square):
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_facebook url="#" size="small" style="2"]</li>
</ul>
</div>

Small twitter button (square):
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_twitter url="#" size="small" style="2"]</li>
</ul>
</div>

Small linkedin button (square):
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_linkedin url="#" size="small" style="2"]</li>
</ul>
</div>

Small reddit button (square):
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_reddit url="#" size="small" style="2"]</li>
</ul>
</div>

Small RSS button (square):
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_rss url="#" size="small" style="2"]</li>
</ul>
</div>

Small Google+ button (square):
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_google url="#" size="small" style="2"]</li>
</ul>
</div>

Small dribbble button (square):
Code:
<div class="social_icons">
<ul class="small">
    <li>[social_dribbble url="#" size="small" style="2"]</li>
</ul>
</div>

Important Note

In version 2, icon shortcodes have changed. Simply place the icon in a wrapper (either [small_icons], [large_icons], or [medium_icons]). The code for the icon itself is [icon url="" image=""]. This allows you to specify your own image files for icons.

Small design icon:
Code:
[small_icons][design_icon][/small_icons]

Small flexible icon:
Code:
[small_icons][flexible_icon][/small_icons]

Small fonts icon:
Code:
[small_icons][fonts_icon][/small_icons]

Small ultra icon:
[code][small_icons][ultra_icon][/small_icons]

Small support icon:
[code][small_icons][support_icon][/small_icons]

Small easy icon:
Code:
[small_icons][easy_icon][/small_icons]

Small color icon:
Code:
[small_icons][color_icon][/small_icons]

Small updates icon:
Code:
[small_icons][updates_icon][/small_icons]

Medium design icon:
Code:
[medium_icons][design_icon][/design_icon][/medium_icons]

Medium flexible icon:
Code:
[medium_icons][flexible_icon][/flexible_icon][/medium_icons]

Medium fonts icon:
Code:
[medium_icons][fonts_icon][/fonts_icon][/medium_icons]

Medium support icon:
Code:
[medium_icons][support_icon][/support_icon][/medium_icons]

Medium easy icon:
Code:
[medium_icons][easy_icon][/easy_icon][/medium_icons]

Medium color icon:
Code:
[medium_icons][color_icon][/color_icon][/medium_icons]

Large design icon:
Code:
[large_icons][design_icon][/design_icon][/large_icons]

Large flexible icon:
Code:
[large_icons][flexible_icon][/flexible_icon][/large_icons]

Large support icon:
Code:
[large_icons][support_icon][/support_icon][/large_icons]

Large easy icon:
Code:
[large_icons][easy_icon][/easy_icon][/large_icons]

Large SEO icon:
Code:
[large_icons][seo_icon][/seo_icon][/large_icons]


Maps

Maps:
Code:
[map address="" latitude="" longitude=""]

You will need to make sure that you change the source, otherwise it shows the map from the demo and not your location. If you want it on the contact page, just add it by going to Appearance > Theme Options > Contact > Show Map (yes)


Sliders

Intro Slider:
Code:
[intro_slider][intro_slider_element title="Welcome to Construct, a Responsive Business HTML template that has a ton of features. Let us tell you about it!" image="http://demo.squidix.com/construct/images/about_us/about_us_slide_1.png"]Want to take a tour? Check out the numerous options and features that Construct includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odios un dig nissimos ducimus qui blan ditiis prasix esentium voluptatum deleniti atque si corrupti quos dolores et quas molestias excep turi int occaecati cupiditate non provident, simi lique sunt in culpa qui officia deserunt mol distinctio. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis prae includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odio dignissimos duc imus qui blan ditiis prasix eseent ntium voluptatum deleniti atques.[/intro_slider_element][intro_slider_element title="Welcome to Construct, a Responsive Business HTML template that has a ton of features. Let us tell you about it!" image="http://demo.squidix.com/construct/images/about_us/about_us_slide_2.png"]Want to take a tour? Check out the numerous options and features that Construct includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odios un dig nissimos ducimus qui blan ditiis prasix esentium voluptatum deleniti atque si corrupti quos dolores et quas molestias excep turi int occaecati cupiditate non provident, simi lique sunt in culpa qui officia deserunt mol distinctio. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis prae includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odio dignissimos duc imus qui blan ditiis prasix eseent ntium voluptatum deleniti atques.[/intro_slider_element][intro_slider_element title="Welcome to Construct, a Responsive Business HTML template that has a ton of features. Let us tell you about it!" image="http://demo.squidix.com/construct/images/about_us/about_us_slide_3.png"]Want to take a tour? Check out the numerous options and features that Construct includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odios un dig nissimos ducimus qui blan ditiis prasix esentium voluptatum deleniti atque si corrupti quos dolores et quas molestias excep turi int occaecati cupiditate non provident, simi lique sunt in culpa qui officia deserunt mol distinctio. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis prae includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odio dignissimos duc imus qui blan ditiis prasix eseent ntium voluptatum deleniti atques.[/intro_slider_element][intro_slider_element title="Welcome to Construct, a Responsive Business HTML template that has a ton of features. Let us tell you about it!" image="http://demo.squidix.com/construct/images/about_us/about_us_slide_4.png"]Want to take a tour? Check out the numerous options and features that Construct includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odios un dig nissimos ducimus qui blan ditiis prasix esentium voluptatum deleniti atque si corrupti quos dolores et quas molestias excep turi int occaecati cupiditate non provident, simi lique sunt in culpa qui officia deserunt mol distinctio. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis prae includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odio dignissimos duc imus qui blan ditiis prasix eseent ntium voluptatum deleniti atques.[/intro_slider_element][intro_slider_element title="Welcome to Construct, a Responsive Business HTML template that has a ton of features. Let us tell you about it!" image="http://demo.squidix.com/construct/images/about_us/about_us_slide_5.png"]Want to take a tour? Check out the numerous options and features that Construct includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odios un dig nissimos ducimus qui blan ditiis prasix esentium voluptatum deleniti atque si corrupti quos dolores et quas molestias excep turi int occaecati cupiditate non provident, simi lique sunt in culpa qui officia deserunt mol distinctio. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis prae includes, we knoesir you’ll love them! At vero eos et accusamus et iusto odio dignissimos duc imus qui blan ditiis prasix eseent ntium voluptatum deleniti atques.[/intro_slider_element][/intro_slider]

Recent Work Slider:
Code:
[recent_work_slider title="Recent Work Slider"]

Client Slider:
Code:
[client_slider title="Client Slider"]

Tables


Pricing Option 1:
Code:
<div class="pricing_option">
<h4 class="bord">Pricing Tables</h4>
<ul>
    <li>
<h4>Standard</h4>
<div class="price"><strong>$</strong><span>19</span><sup>99</sup><em>monthly</em></div>
5 projects

5 GB Storage

Unlimited Users

10 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
    <li>
<h4>Premium</h4>
<div class="price"><strong>$</strong><span>29</span><sup>99</sup><em>monthly</em></div>
10 projects

15 GB Storage

Unlimited Users

20 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
    <li class="active">
<div class="active_bg">
<h4>Professional</h4>
<div class="price"><strong>$</strong><span>39</span><sup>99</sup><em>monthly</em></div>
25 projects

20 GB Storage

Unlimited Users

30 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a>

</div></li>
    <li>
<h4>Maximum</h4>
<div class="price"><strong>$</strong><span>49</span><sup>99</sup><em>monthly</em></div>
35 projects

30 GB Storage

Unlimited Users

40 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
    <li>
<h4>Extreme</h4>
<div class="price"><strong>$</strong><span>59</span><sup>99</sup><em>monthly</em></div>
50 projects

45 GB Storage

Unlimited Users

50 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
</ul>
</div>

Pricing option 2:
Code:
<div class="pricing_option pricing_option2">
<ul>
    <li>
<h4>Standard</h4>
<div class="price"><strong>$</strong><span>19</span><sup>99</sup><em>monthly</em></div>
5 projects

5 GB Storage

Unlimited Users

10 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
    <li>
<h4>Premium</h4>
<div class="price"><strong>$</strong><span>29</span><sup>99</sup><em>monthly</em></div>
10 projects

15 GB Storage

Unlimited Users

20 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
    <li class="active">
<div class="active_bg">
<h4>Professional</h4>
<div class="price"><strong>$</strong><span>39</span><sup>99</sup><em>monthly</em></div>
25 projects

20 GB Storage

Unlimited Users

30 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a>

</div></li>
    <li>
<h4>Maximum</h4>
<div class="price"><strong>$</strong><span>49</span><sup>99</sup><em>monthly</em></div>
35 projects

30 GB Storage

Unlimited Users

40 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
</ul>
</div>

Pricing Option 3:
Code:
<div class="pricing_option pricing_option3">
<ul>
    <li>
<h4>Standard Package</h4>
<div class="price"><strong>$</strong><span>19</span><sup>99</sup><em>monthly</em></div>
5 projects

5 GB Storage

Unlimited Users

10 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
    <li class="active">
<div class="active_bg">
<h4>Professional Package</h4>
<div class="price"><strong>$</strong><span>39</span><sup>99</sup><em>monthly</em></div>
25 projects

20 GB Storage

Unlimited Users

30 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a>

</div></li>
    <li>
<h4>Extreme Package</h4>
<div class="price"><strong>$</strong><span>59</span><sup>99</sup><em>monthly</em></div>
50 projects

45 GB Storage

Unlimited Users

50 GB Bandwidth

Enhanced Security

&nbsp;

<a class="btn_m" href="#">Sign Up</a></li>
</ul>
</div>


Tabs

Accordion Tab:
Code:
[flyouts][flyout title="Flyout Content Area 1"]Content here[/flyout]
[flyout title="Another Flyout Content Area"]Next tab's content area[/flyout]
[flyout title="Yet Another Flyout Content Area"]Last tab's content[/flyout][/flyouts]

</div>

Sidebar Tabs (3):
Code:
<div class="sidebar_tabs_section sidebar_tabs">

<div id="s_tabs">
<ul class="tab_select">
    <li><a href="#stab-1">Archives</a></li>
    <li><a href="#stab-2">Categories</a></li>
    <li><a href="#stab-3">Comments</a></li>
</ul>
<div id="stab-1">
<ul>
    <li><a href="#">January 2012 (12)</a></li>
    <li><a href="#">February 2012 (12)</a></li>
    <li><a href="#">March 2012 (12)</a></li>
    <li><a href="#">April 2012 (12)</a></li>
    <li><a href="#">May 2012 (12)</a></li>
    <li><a href="#">June 2012 (12)</a></li>
    <li><a href="#">July 2012 (12)</a></li>
</ul>
</div>
<div id="stab-2">
<ul>
    <li><a href="#">Cat 1</a></li>
    <li><a href="#">Cat 2</a></li>
    <li><a href="#">Cat 3</a></li>
</ul>
</div>
<div id="stab-3">
<ul>
    <li><a href="#">Some comment</a></li>
    <li><a href="#">Some comment2</a></li>
    <li><a href="#">Some comment3</a></li>
</ul>
</div>
</div>
</div>

Vertical Tabs (5):
Code:
[tabs titles="Service #1;Service #2;Service #3;Service #4;Service #5"]

[tab index="1"]Lid est laborum et dolorum fugaerts. Etras harum quidem rerum facilis est etras expedita disnictio. Namsirs libero uns tempo re, cum soluta nobis est eligendi optio cumque nihil ims duod amets untra dolor amet sad ipet. Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermes ntum mas justo sitts amet risus. Cras mattis cosi sectetut amet fermens tum aecer nas faucib Sed ut perspiciatis unde omnis iste tus error siters voluptatem accusantium dolorem que laudantium, totam remteripaperiam, eaque ipsa quae illos inventore veritatis etra quasi arch itecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volu ptat equia[/tab]
[tab index="2"]Lid est laborum et dolorum fugaerts. Etras harum quidem rerum facilis est etras expedita disnictio. Namsirs libero uns tempo re, cum soluta nobis est eligendi optio cumque nihil ims duod amets untra dolor amet sad ipet. Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermes ntum mas justo sitts amet risus. Cras mattis cosi sectetut amet fermens tum aecer nas faucib Sed ut perspiciatis unde omnis iste tus error siters voluptatem accusantium dolorem que laudantium, totam remteripaperiam, eaque ipsa quae illos inventore veritatis etra quasi arch itecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volu ptat equia[/tab]
[tab index="3"]Lid est laborum et dolorum fugaerts. Etras harum quidem rerum facilis est etras expedita disnictio. Namsirs libero uns tempo re, cum soluta nobis est eligendi optio cumque nihil ims duod amets untra dolor amet sad ipet. Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermes ntum mas justo sitts amet risus. Cras mattis cosi sectetut amet fermens tum aecer nas faucib Sed ut perspiciatis unde omnis iste tus error siters voluptatem accusantium dolorem que laudantium, totam remteripaperiam, eaque ipsa quae illos inventore veritatis etra quasi arch itecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volu ptat equia[/tab]
[tab index="4"]Lid est laborum et dolorum fugaerts. Etras harum quidem rerum facilis est etras expedita disnictio. Namsirs libero uns tempo re, cum soluta nobis est eligendi optio cumque nihil ims duod amets untra dolor amet sad ipet. Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermes ntum mas justo sitts amet risus. Cras mattis cosi sectetut amet fermens tum aecer nas faucib Sed ut perspiciatis unde omnis iste tus error siters voluptatem accusantium dolorem que laudantium, totam remteripaperiam, eaque ipsa quae illos inventore veritatis etra quasi arch itecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volu ptat equia[/tab]
[tab index="5"]Lid est laborum et dolorum fugaerts. Etras harum quidem rerum facilis est etras expedita disnictio. Namsirs libero uns tempo re, cum soluta nobis est eligendi optio cumque nihil ims duod amets untra dolor amet sad ipet. Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermes ntum mas justo sitts amet risus. Cras mattis cosi sectetut amet fermens tum aecer nas faucib Sed ut perspiciatis unde omnis iste tus error siters voluptatem accusantium dolorem que laudantium, totam remteripaperiam, eaque ipsa quae illos inventore veritatis etra quasi arch itecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volu ptat equia[/tab]

[/tabs]


Horizontal Tabs (3):
Code:
[horizontal_tabs titles="Step 1:Research and Plan;Step 2:Storyboard and Design;Step 3:Project Development"]
[horizontal_tab index="1"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at auctor purus. Curabitur at ligula nunc. Sed id mattis mi. Integer velit enim, scelerisque at iaculis ut, aliquet eget arcu. Proin ultrices augue nec quam eleifend sed venenatis odio iaculis. In mollis risus et orci luctus venenatis ornare nibh dapse ibus. Sed vehicula placerat orci, eget vestibulum eros tincidunt vitae. Fusce sollicitudin nisl eu ipsum dapibus fringilla. Ut quis erat ligula, vel pellente sque mi. Donec hendrerit adipiscing pellentesque.Sed augue dolor, cursus tempor gravida in, egestas vel turpis. Suspendisse potenti. Vestibulum at arcu id erat condimentum semper in ac odio. Donec nsi quam, adipiscing sed pulvinar vitae, pellentesque id mauris. Praesent tempus mauris quis ante hicula placerat orci, eget vestibulum eros tincidunt vitae. Fusce sollicitudin nisl eu ipsum dapibus fringilla. Ut quis erat ligula, vel hicula placerat orci, eget vestibulum eros tincidunt vitae.[/horizontal_tab][horizontal_tab index="2"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at auctor purus. Curabitur at ligula nunc. Sed id mattis mi. Integer velit enim, scelerisque at iaculis ut, aliquet eget arcu. Proin ultrices augue nec quam eleifend sed venenatis odio iaculis. In mollis risus et orci luctus venenatis ornare nibh dapse ibus. Sed vehicula placerat orci, eget vestibulum eros tincidunt vitae. Fusce sollicitudin nisl eu ipsum dapibus fringilla. Ut quis erat ligula, vel pellente sque mi. Donec hendrerit adipiscing pellentesque.Sed augue dolor, cursus tempor gravida in, egestas vel turpis. Suspendisse potenti. Vestibulum at arcu id erat condimentum semper in ac odio. Donec nsi quam, adipiscing sed pulvinar vitae, pellentesque id mauris. Praesent tempus mauris quis ante hicula placerat orci, eget vestibulum eros tincidunt vitae. Fusce sollicitudin nisl eu ipsum dapibus fringilla. Ut quis erat ligula, vel hicula placerat orci, eget vestibulum eros tincidunt vitae.[/horizontal_tab][horizontal_tab index="3"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at auctor purus. Curabitur at ligula nunc. Sed id mattis mi. Integer velit enim, scelerisque at iaculis ut, aliquet eget arcu. Proin ultrices augue nec quam eleifend sed venenatis odio iaculis. In mollis risus et orci luctus venenatis ornare nibh dapse ibus. Sed vehicula placerat orci, eget vestibulum eros tincidunt vitae. Fusce sollicitudin nisl eu ipsum dapibus fringilla. Ut quis erat ligula, vel pellente sque mi. Donec hendrerit adipiscing pellentesque.Sed augue dolor, cursus tempor gravida in, egestas vel turpis. Suspendisse potenti. Vestibulum at arcu id erat condimentum semper in ac odio. Donec nsi quam, adipiscing sed pulvinar vitae, pellentesque id mauris. Praesent tempus mauris quis ante hicula placerat orci, eget vestibulum eros tincidunt vitae. Fusce sollicitudin nisl eu ipsum dapibus fringilla. Ut quis erat ligula, vel hicula placerat orci, eget vestibulum eros tincidunt vitae.[/horizontal_tab]
[/horizontal_tabs]

Toggles:
Code:
[toggle title="Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur adipisci?"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at auctor purus. Curabitur at ligula nunc. Sed id mattis mi. Integer velit enim, scelerisque at iaculis ut, aliquet eget arcu. Proin ultrices augue nec quam eleifend sed venenatis odio iaculis. In mollis risus et orci luctus venenatis ornare nibh dapse ibus. Sed vehicula placerat orci, eget vestibulum eros tincidunt vitae. Fusce sollicitudin nisl eu ipsum dapibus fringilla. Ut quis erat ligula, vel pellente sque mi. Donec hendrerit adipiscing pellentesque.[/toggle]

Typography

Headings:
Code:
<div class="wraper_typ typ">

<div class="headings">
<h1>H1 Heading</h1>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums amet fugiats.</p>
<h2>H2 Heading</h2>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums amet fugiats.</p>
<h3>H3 Heading</h3>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums amet fugiats.</p>
<h4>H4 Heading</h4>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums amet fugiats.</p>
<h5>H5 Heading</h5>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums amet fugiats.</p>
<h6>H6 Heading</h6>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums amet fugiats.</p>
</div>

HTML Styles:
Code:
<div class="html_styles">
<p><a href="#">This is a text</a> link tincidunt quisque tristique. <span class="underline">This is underlined text</span>. Sollicitudin eros sapien, ultrices primis. This is Emphasized text volutpat tempor tur duis mattis dapibus, felis amet faucibus. fames etiam sit enim fermentum etiam quam eros velit aptent netus faucibus duis lectus integer malesuada, mattis tempus commodo lacus tellus porttitor varius integer diam molestie taciti eleifend donec fames platea molestie donec, bibendum vehicula nam turpis faucibus,</p>
</div>

Dropcap:
Code:
<div class="dropcap">
<p>Dlidunt quisque tristique. This is underlined text. Sollicitudin eros sapien, ultrices primis. This is Emphasized text volutpat tempor tur duis mattis dapibus, felis amet faucibus. fames etiam sit enim fermentum etiam quam eros velit aptent netus faucibus duis lectus integer malesuada, mattis tempus commodoiam molestie taciti eleifend donec fames platea molestie donec, bibendum vehicula nam turpis faucibus, Tncidunt quisque tristique. This is underlined text. Sollicitudin eros sapien, ultrices primis. This is Emphasized text volutpat tempor tur duis mattis dapibus, felis amet faucibus. fames etiam sit enim fermentum etiam quam eros velit aptent netus faucibus duis lectus integer malesuada, mattis tempus commodoiam molestie taciti eleifend donec fames platea molestie donec, bibendum vehicula nam turpis faucibus, Tncidunt quisque tristique. This is underlined text.</p>
</div>

Blockquote:
Code:
<div class="blockquote">
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper susci.</p></blockquote>
</div>

Bullets & Lists:
Code:
<div class="bullets_lists c_after">
<ul class="arrows_list">
<li>Cras rutrum leo at odio volutpat</li>
<li>Donec fermentum porttitor nunc</li>
<li>Maecenas quis nisi in uctus adipis</li>
<li>Aenean faucibus sapien a odio vasert</li>
</ul>
<ul>
<li>Pellentesque eu semt adipiscing tortor.</li>
<li>Duis fringilla urnla accumsan venenatis.</li>
<li>Nulla id ligula veltesque ac id magna.</li>
<li>Duis sollicitudin nisl adipiscing aliquet.</li>
</ul>
<ol>
<li>Pellentesque eu semt adipiscing tortor.</li>
<li>Duis fringilla urnla accumsan venenatis.</li>
<li>Nulla id ligula veltesque ac id magna.</li>
<li>Duis sollicitudin nisl adipiscing aliquet.</li>
</ol>
</div>

Columns:
Code:
<div class="columns">
<div class="col_2">
<p><strong>1/2</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_2">
<p><strong>1/2</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
</div>
<div class="columns">
<div class="col_3">
<p><strong>1/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_3">
<p><strong>1/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_3">
<p><strong>1/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
</div>
<div class="columns">
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
</div>
<div class="columns">
<div class="col_2">
<p><strong>1/2</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_2">
<p><strong>1/2</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
</div>
<div class="columns">
<div class="col_3">
<p><strong>1/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_3">
<p><strong>1/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_3">
<p><strong>1/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
</div>
<div class="columns">
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
</div>
<div class="columns">
<div class="col_5">
<p><strong>1/5</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_5">
<p><strong>1/5</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_5">
<p><strong>1/5</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_5">
<p><strong>1/5</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_5">
<p><strong>1/5</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue natus error sit voluptatem accusantium doloremque laste.</p>
</div>
</div>
<div class="columns">
<div class="col_6">
<p><strong>1/6</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue nat</p>
</div>
<div class="col_6">
<p><strong>1/6</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue nat</p>
</div>
<div class="col_6">
<p><strong>1/6</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue nat</p>
</div>
<div class="col_6">
<p><strong>1/6</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue nat</p>
</div>
<div class="col_6">
<p><strong>1/6</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue nat</p>
</div>
<div class="col_6">
<p><strong>1/6</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse sad. Sed ue nat</p>
</div>
</div>
<div class="columns">
<div class="col_4">
<p><strong>1/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste.</p>
</div>
<div class="col_3_4">
<p><strong>3/4</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ue natus error sit voluptatemntium doloremque laste. Lorem ipsum feugiat curabitur iaculis scelerisque nisi, ipsum potenti lectus sit praesent, ut diam a vehicula curabitur facilisis etiam aliquam enim nulla conubia lobortis, ut habitant morbi vehicula vivamus, proin nostra diam turpis curae vitae, rhoncus eu tortor magna bibendum nam sapien hendrerit venenatis libero posuere est egestas netus adipiscing nisl eu taciti tempus pellentesque, vel lacus commodo malesuada maecenas ipsum dictumst consectetur elit himenaeos tempus sem bibendum tempor dictum ultrices justo consequat senectus, semper eget duis mollis suspendisse quisque hendr</p>
</div>
</div>
<div class="columns">
<div class="col_3">
<p><strong>1/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste.</p>
</div>
<div class="col_2_3">
<p><strong>2/3</strong></p>
<p>Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempoid pretium iaculis tempor eu porta posuere eget elementum auctor, orci molestie risus id donec diam turpis curae vitae, rhoncus eu tortor magna bibendum nam sapien hendrerit venenatis libero posuere est egestas netus adipiscing nisl eu taciti tempus pellentesque, vel lacus commodo malesuada maecenas ipsum dictumst consectetur elit himenaeos tempus sem bibendum tempor dictum ultrices justo consequat senectus, semper eget duis.</p>
</div>
</div>

Video

Vimeo:
Code:
<!-- video_block -->
<div class="video_block c_after">[vimeo id="24637555"]</div>
<!-- /video_block -->

YouTube:
Code:
<!-- video_block -->
<div class="video_block c_after">[youtube id="AGZiLMGdCE0"]</div>
<!-- /video_block -->




Note: You will need to modify a lot of these to your own specifications. These are taken directly from the page and simply broken down one-by-one. If you need help, send us a ticket at [email protected]

Also, to continue this note, it is important to note that while in Visual mode on your editor, you can click "Show Kitchen Sink" and it will have more shortcodes for you to choose from!

Thank you,

Dave Russell + Sam Barrow
Find all posts by this user
Quote this message in a reply
09-26-2012, 04:47 PM
Post: #2
RE: [Construct] ShortCode Documentation
Thanks you share info good.!

Friv Heart
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Construct] Frequently Asked Questions (F.A.Q.) Dave 0 1,201 09-20-2012 11:06 PM
Last Post: Dave

Forum Jump:


User(s) browsing this thread: 1 Guest(s)