Lightbox Examples

Add lightbox popups for images. You can add images, Youtube videos, and Vimeo – even inline content.
[one_fourth][lightbox link=”https://localhost:8888/district/wp-content/uploads/2013/02/sample1.png”]

Image

[/lightbox][/one_fourth] [one_fourth][lightbox link=”https://www.youtube.com/watch?v=Ju10iud1kWQ”]

Youtube

[/lightbox] [/one_fourth] [one_fourth] [lightbox link=”https://vimeo.com/27495689″]

Vimeo

[/lightbox] [/one_fourth] [one_fourth_last] [lightbox link=”#inline-test”]

Inline Content

[/lightbox] [/one_fourth_last]

[divider]Slider[/divider]
[slider crop=”yes” slide1=”https://localhost:8888/district/wp-content/uploads/2013/02/sample1.png” slide2=”https://localhost:8888/district/wp-content/uploads/2013/02/sample2.png”][/slider]

 

[divider]Accordion and Toggles[/divider]
[one_half]

Accordion

[accordion class=””]
[accordion_section title=”Title”]Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.[/accordion_section]
[accordion_section title=”Title”]Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.[/accordion_section]
[accordion_section title=”Title”]Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.[/accordion_section]
[/accordion]
[/one_half]
[one_half_last]

Toggles

[toggle title=”Great for FAQ” class=””]Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.[/toggle]
[toggle title=”Display on any page” class=””]Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.[/toggle]
[toggle title=”Add as many as you like” class=””]Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.[/toggle]
[/one_half_last]

 

[divider]Social Icons[/divider]

Social Icons

Add elegant icon links to your favorite social networks. No plugins to install or images to upload.

[social icon=”twitter” url=”https://twitter.com/ajgagnon” title=”Follow Us” target=”blank”][/social]
[social icon=”facebook” url=”https://facebook.com” title=”Like Us” target=”blank”][/social]
[social icon=”dribbble” url=”https://dribbble.com/ajgagnon” title=”Follow Me On Dribbble” target=”blank”][/social]
[social icon=”linkedin” url=”https://linkedin.com” title=”Connect on Linkedin” target=”blank”][/social]
[social icon=”rss” url=”#” title=”RSS Feed” target=”blank”][/social]
[social icon=”google” url=”https://google.com” title=”Put Me in your Circle” target=”blank”][/social]
[social icon=”pinterest” url=”#” title=”Follow Me On Pinterest” target=”blank”][/social]

 
 

[divider]Pricing Table[/divider]
[pricing_table class=””]

[pricing size=”one_third” featured=”no” plan=”Silver” cost=”$10″ per=”month” button_url=”#” button_text=”Purchase” button_target=”self”]

• Basic Coverage
• Admin Panel
• Basic Support
• Up to 10 projects

[/pricing]

[pricing size=”one_third” featured=”yes” plan=”Gold” cost=”$20″ per=”month” button_url=”#” button_text=”Purchase” button_target=”self”]

• Intermediate Coverage
• Admin Panel
• Enhanced Support
• Up to 50 projects

[/pricing]
[pricing size=”one_third” position=”last” featured=”no” plan=”Platinum” cost=”$30″ per=”month” button_url=”#” button_text=”Purchase” button_target=”self”]

• Unlimited Coverage
• Advanced Admin Panel
• Umlimited Support
• Unlimited projects

[/pricing]
[/pricing_table]

 

[divider]Blog Posts[/divider]
[posts number=’3′ category=’business’ title=’Latest Posts From The Blog.’ content=’yes’][/posts]

[divider]Portfolio Posts[/divider]
[posts number=’4′ category=’illustration’ content=’no’ title=’Choose Post Number, Post Type or Content to Show.’ type=’Portfolio’][/posts]

[divider]Buttons[/divider]

Button Shortcodes

Create buttons. Different preset sizes, custom colors and more. All with the touch of a button.

[button link=”#” variation=”dark” size=”small” target=”self”]Small Button[/button]   [button link=”#” variation=”dark” size=”medium” target=”self”]Medium Button[/button]   [button link=”#” variation=”dark” size=”large” target=”self”]Large Button[/button]   [button link=”#” variation=”dark” size=”huge” target=”self”]Huge Button[/button]

[one_half]

Preset Button Colors

[button link=”#” color=”red” size=”small” target=”self”]Red Button[/button]   [button link=”#” color=”orange” size=”small” target=”self”]Orange Button[/button]   [button link=”#” color=”yellow” size=”small” target=”self”]Yellow Button[/button]   [button link=”#” color=”green” size=”small” target=”self”]Green Button[/button]   [button link=”#” color=”blue” size=”small” target=”self”]Blue Button[/button]    [button link=”#” color=”purple” size=”small” target=”self”]Purple Button[/button] [/one_half]

[one_half_last]

Custom Button Colors

[button link=”#” background=”#BF6E9B” size=”small” target=”self”]#BF6E9B[/button]   [button link=”#”  background=”#8ACE5C” size=”small” target=”self”]#8ACE5C[/button]   [button link=”#”  background=”#d2d65a” size=”small” target=”self”]#d2d65a[/button]   [button link=”#”  background=”#20D0AB” size=”small” target=”self”]#20D0AB[/button]   [button link=”#”  background=”#C60108″ size=”small” target=”self”]#C60108[/button]  [/one_half_last]

[divider]Tabs[/divider]
[tabs tab1=”Web” tab2=”Graphics” tab3=”Laundry”]
[tab]

Websites Done Right

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.[/tab]
[tab]

Better Graphics, Better Results

Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris eleifend est et turpis. Duis id erat. [/tab]
[tab]

Super Soft Laundry

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.[/tab]
[/tabs]
[divider]Even These Dividers are Shortcodes[/divider]

Column Shortcodes

Full Width

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque.

[one_half]

One Half Shortcode

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

[/one_half]

[one_half_last]

One Half Shortcode

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

[/one_half_last]

[one_third]

One Third Shortcode

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.

[/one_third]

[one_third]

One Third Shortcode

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.

[/one_third]

[one_third_last]

One Third Shortcode

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.

[/one_third_last]

[one_fourth]

One Fourth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.

[/one_fourth]

[one_fourth]

One Fourth Shortcode

Mauris eleifend est et turpis.  Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.

[/one_fourth]

[one_fourth]

One Fourth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.

[/one_fourth]

[one_fourth_last]

One Fourth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.

[/one_fourth_last]

[one_fifth]

One Fifth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_fifth]

[one_fifth]

One Fifth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_fifth]

[one_fifth]

One Fifth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_fifth]

[one_fifth]

One Fifth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_fifth]

[one_fifth_last]

One Fifth Shortcode

Mauris eleifend est et turpis. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_fifth_last]

[one_sixth]

One Sixth Shortcode

Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_sixth]

[one_sixth]

One Sixth Shortcode

Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_sixth]

[one_sixth]

One Sixth Shortcode

Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_sixth]

[one_sixth]

One Sixth Shortcode

Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_sixth]

[one_sixth]

One Sixth Shortcode

Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_sixth]

[one_sixth_last]

One Sixth Shortcode

Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat.

[/one_sixth_last]