Shortcodes

Video

With our video shortcodes, you can embed videos anywhere. Oh, and did we mention they are responsive? They'll work on any mobile device that supports video!

What sites can I embed from? →

Parameters

  • align - left, center (default), right
  • aspect_ratio - 4:3, 16:9 (default), 21:9
  • width - every full number between 1 and 100 (the width of the video in percent)
[video]https://www.youtube.com/watch?v=s9_6bEsMmJc[/video]

Testimionials

You already know you're pretty awesome - but what about sharing what others think? Share testimonies from your customers!


Parameters

  • by - name of person who said the testimonial
  • class - give your shortcode a unique classname for custom styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare quam massa, ut placerat leo lacinia in. Duis adipiscing magna non mi eleifend sollicitudin. Aliquam erat volutpat. In non pellentesque eros, non egestas lectus. In sollicitudin libero nec augue ornare convallis. Morbi id risus sed dolor ultricies tincidunt. Suspendisse quis aliquet mauris, vel fermentum erat. Vestibulum eu aliquet augue, et hendrerit justo.
John Appleseed

[symple_testimonial by="John Appleseed"]<img src="photo.jpg" class="alignleft" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare quam massa, ut placerat leo lacinia in. Duis adipiscing magna non mi eleifend sollicitudin. Aliquam erat volutpat. In non pellentesque eros, non egestas lectus. In sollicitudin libero nec augue ornare convallis. Morbi id risus sed dolor ultricies tincidunt. Suspendisse quis aliquet mauris, vel fermentum erat. Vestibulum eu aliquet augue, et hendrerit justo.[/symple_testimonial]

Google Maps

How about detailing an address with a Google Map?


Parameters

  • title - your desired text title
  • location - address
  • height - desired height (required)
  • zoom - map zoom value, default is 8
  • class - give your shortcode a unique classname for custom styling

[symple_googlemap title="Envato Office" location="2 Elizabeth St, Melbourne Victoria 3000 Australia" zoom="10" height=250]

Highlights

Highlight text with a vengence!

Make important points stand out! Etiam rhoncus accumsan elit sed. Lorem ipsum t, consectetur adipiscing elit. Etiam rhoncus accumsan elit sedLorem ipsum t, consectetur adipiscing elit. Etiam rhoncus accumsan elit sed.Etiam rhoncus accumsan elit sed.

<p>[symple_highlight color="yellow"]Make important points stand out![/symple_highlight] Etiam rhoncus accumsan elit sed. [symple_highlight color="blue"]Lorem ipsum t, consectetur adipiscing elit.[/symple_highlight] [symple_highlight color="red"]Etiam rhoncus accumsan elit sedLorem ipsum t,[/symple_highlight] consectetur adipiscing elit. [symple_highlight color="green"]Etiam rhoncus accumsan elit sed.[/symple_highlight]Etiam rhoncus accumsan elit sed.</p>

Buttons

Make your visitors press your buttons... in a good way!

Primary Secondary

Apply the CSS class "btn" to <a> and <button> elements to create a standard button.

Example:
<a href="#" class="button">Primary</a>
<a href="#" class="button secondary">Secondary</a>



Custom Buttons

If you're looking to do something a little different than the "norm", here are some stylized buttons you can use.


Parameters

  • color - black, red, orange, blue, pink, rosy, green, brown, purple, gold, teal
  • url - http://www.example.com
  • title - this is the link title value
  • target - blank, self
  • border_radius - any pixel value - use 99px for pill-shaped buttons
  • class - give your shortcode a unique classname for custom styling
  • icon_left - enter the name of an icon from FontAwesome
  • icon_right - enter the name of an icon from FontAwesome
Button Button Button Button Button Button Button Button Button Button Button

[symple_button color="black" url="#"]Button[/symple_button]
[symple_button color="red" url="#"]Button[/symple_button]
[symple_button color="orange" url="#"]Button[/symple_button]
[symple_button color="blue" url="#"]Button[/symple_button]
[symple_button color="pink" url="#"]Button[/symple_button]
[symple_button color="rosy" url="#"]Button[/symple_button]
[symple_button color="green" url="#"]Button[/symple_button]
[symple_button color="brown" url="#"]Button[/symple_button]
[symple_button color="purple" url="#"]Button[/symple_button]
[symple_button color="gold" url="#"]Button[/symple_button]
[symple_button color="teal" url="#"]Button[/symple_button]

Boxes

Every once and awhile you need a good box to display important messages, right?


Parameters

  • color - gray, green, yellow, blue, red
  • class - give your shortcode a unique classname for custom styling

Sample Content

Sample Content

Sample Content

Sample Content

Sample Content

[symple_box color="gray"]<p>Sample Content</p>[/symple_box]
[symple_box color="green"]<p>Sample Content</p>[/symple_box]
[symple_box color="yellow"]<p>Sample Content</p>[/symple_box]
[symple_box color="blue"]<p>Sample Content</p>[/symple_box]
[symple_box color="red"]<p>Sample Content</p>[/symple_box]

Dividers

Divide things, with style.


Parameters

  • style - solid, dashed, dotted, double
  • margin_top - margin top, measured in pixels
  • margin_bottom - margin bottom, measured in pixels




[symple_divider style="solid"]
[symple_divider style="dashed"]
[symple_divider style="dotted"]
[symple_divider style="double"]

Toggles

This Is Your Toggle Title

Sample Content

Multiple Toggles Are Nice

Sample Content

[symple_toggle title="This Is Your Toggle Title"]Sample Content[/symple_toggle]
[symple_toggle title="Multiple Toggles Are Nice"]Sample Content[/symple_toggle]

Accordions

Section 1

Sample Content

Section 2

Sample Content

[symple_accordion]
	[symple_accordion_section title="Section 1"]
		Sample Content
	[/symple_accordion_section]
	[symple_accordion_section title="Section 2"]
		Sample Content
	[/symple_accordion_section]
[/symple_accordion]

Tabs

First tab content
Third Tab Content.

[symple_tabgroup]
	[symple_tab title="First Tab"]
	First tab content
	[/symple_tab]
	
	[symple_tab title="Second Tab"]
	Third Tab Content.
	[/symple_tab]
[/symple_tabgroup]

Headings

H1 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac mattis nisl. Nulla cursus justo id eros luctus imperdiet id eget tellus. Nullam sit amet neque elementum nunc sollicitudin facilisis. Aliquam quis quam dui, vitae condimentum quam.

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac mattis nisl. Nulla cursus justo id eros luctus imperdiet id eget tellus. Nullam sit amet neque elementum nunc sollicitudin facilisis. Aliquam quis quam dui, vitae condimentum quam.

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac mattis nisl. Nulla cursus justo id eros luctus imperdiet id eget tellus. Nullam sit amet neque elementum nunc sollicitudin facilisis. Aliquam quis quam dui, vitae condimentum quam.

H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac mattis nisl. Nulla cursus justo id eros luctus imperdiet id eget tellus. Nullam sit amet neque elementum nunc sollicitudin facilisis. Aliquam quis quam dui, vitae condimentum quam.

H5 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac mattis nisl. Nulla cursus justo id eros luctus imperdiet id eget tellus. Nullam sit amet neque elementum nunc sollicitudin facilisis. Aliquam quis quam dui, vitae condimentum quam.

H6 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac mattis nisl. Nulla cursus justo id eros luctus imperdiet id eget tellus. Nullam sit amet neque elementum nunc sollicitudin facilisis. Aliquam quis quam dui, vitae condimentum quam.

Columns

One Half

[symple_column size="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. Excepteur sint occaecat.

One Half

[symple_column size="one-half" position="last"]

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. Excepteur sint occaecat.

One Third

[symple_column size="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. Excepteur sint occaecat.

One Third

[symple_column size="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. Excepteur sint occaecat.

One Third

[symple_column size="one-third" position="last"]

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. Excepteur sint occaecat.

One Third

[symple_column size="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.

Two Third

[symple_column size="two-third" position="last"]

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. Excepteur sint occaecat.


One Fourth

[symple_column size="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. Excepteur sint occaecat.

One Fourth

[symple_column size="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. Excepteur sint occaecat.

One Fourth

[symple_column size="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. Excepteur sint occaecat.

One Fourth

[symple_column size="one-fourth" position="last"]

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. Excepteur sint occaecat.

One Fourth

[symple_column size="one-fourth"]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

Three Fourth

[symple_column size="three-fourth" position="last"]

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. Excepteur sint occaecat.