All Elegant Themes come with a huge choice of features, including shortcodes, to help you build an amazing website quickly.
If you have not used shortcodes before, they are basically small pieces of code that you can insert directly into a WordPress post or page that do something specific.
In the case of Elegant Themes, the shortcodes you get are:
- Buttons (various styles)
- Boxes (colored, containing text)
- Image Slider (great for showing many images)
- Testimonials (perfect for social proof)
- Pricing Tables
- Toggled Content (aka Accordion, handy for hiding/showing large content pieces)
- Tabbed Content (again for lots of content in one spot)
- Styled Lists (like this one, with various icons)
- Dropcaps, Quotes, Tooltips
- Author Info Box
- Password Protect Content
Of course, many of these elements can be created using the built in Page Builder or the Divi Page Builder, but if you are just working inside a simple (mainly text) page or post, shortcodes can be great.
The following examples of shortcode content is pulled from the Elegant Themes site, but gives you a great idea of how the elements appear within the Themes. They will vary depending on the exact theme and css.
There is also a detailed description of how to use the shortcode, the options and parameters and examples to help.
Click on the navigation links below to get to the element you are interested in.
Buttons
Buttons are a great way to attract someone's attention and get them to click through to a new page (sales offer, email signup, etc).
You should use them sparingly, but do use them. They can make a huge difference in your conversions (clicks).
What they look like:
Below is a screenshot showing you the variations of buttons you can get.

How to add them:
You can add the buttons right from the WordPress Toolbar within a page or post (see below):

Or you can type the shortcode directly into the text area of the post/page:
[button link="http://google.com"] Button Text [/button] (this is a standard button)
[button type="big" color="purple"] Link text [/button] (this is a big button)
[button link="url" type="icon" newwindow="yes"] Link text[/button] (this is a button with an icon)
Because there are so many variations for the buttons, it is far easier to do it from the toolbar but here are the options:
link - the url the user will be taken to when clicking the button
type - if you want a big button, or a icon button then you need to add this parameter (small buttons are the default, ie. no parameter)
color - blue, lightblue, teal, sliver, pink, black, purple, orange, green, red (you can see most of them in the image above).
icon - download, search, refresh, question, people, warning, mail, heart, paper, notice, stats, rss
newwindow - yes (default is no) opens a new tab/window when the button is clicked
Boxes
Boxes are the perfect way to highlight some content in your posts or pages (like these ones :>).
They need to have a purpose, so only use them for content where it makes sense. Because as you can see, they do really stand out.
The different colors and icons have meaning, so again use them if it makes sense. Otherwise just stick to the Normal box type.
What they look like:
Below is a screenshot showing you the various boxes you can add to your pages.

How to add them:
You can add the boxes right from the WordPress Toolbar within a page or post (see below):

Below is an example of a Download box (see image above for how it looks):
[box] Content goes here[/box] (this is a Normal box)
[box type="download"] Content goes here[/box] (this is a Download box)
The box types are: Download, Warning, Info, Bio.
If you don't add the type parameter, you get the Normal box.
Again, it is obviously easier to do it from the toolbar, but there are less variations than with the buttons..
Expand Content (aka Accordion, Learn more)
If you have large pieces of content that do not always need to be visible, then the accordion open/close style of box is great.
The most typical example of this is in FAQs where the reader can open each answer individually.
You can see more information about this on the Divi website
What they look like:

How to add them:
You can add the Toggle/Learn more right from the WordPress Toolbar within a page or post (see below):

The toggle/learn more is quite simple for a shortcode, and is shown below:
[learn_more caption="Test" state="open"] Content goes here[/learn_more]
Simply add the shortcode tags, and paste in the content you want to toggle in between (where it says Content goes here).
Options:
caption - If you want a title on the box, you add the Caption parameter (shown in the shortcode above with Test)
state - If you want the box to be open by default, you can add the state parameter with the value open (closed is the default, so you don't need to add that if you want it closed.
Tabs (Tabbed Content)
If you have a variety text in categories to show, tabs can be a great way of splitting them up for easing digestion.
What they look like:

How to add them:
You can add Tabs right from the WordPress Toolbar within a page or post (see below):

The tabbed content shortcode is quite complex to construct, so I really recommend using the toolbar.
You need to add each tab while you are constructing it, as you cannot go back once you hit ok.
Below is a relatively simple example of two tabs (Tab1, Tab2):
[tabs slidertype="top tabs"] [tabcontainer] [tabtext]Tab1[/tabtext] [tabtext]Tab 2[/tabtext] [/tabcontainer] [tabcontent] [tab]1. Content goes here[/tab] [tab]2. Content goes here[/tab] [/tabcontent] [/tabs]
There are a number of parts to the tab:
tabs - the main area, with the options for how and where the tabs appear
tabcontainer - this contains the actual tabs (ie [tabtext] ... [/tabtext] )
tabtext - the individual tabs inside tabcontainer, added in the order they will appear
tabcontent - like the tabcontainer above, this one contains the content of each tab (ie. [tab]....[/tab])
tab - the content of each tab, inside tabcontent, added in the order they will appear
Options:
The only element that has options is the main tabs section at the beginning.
slidertype - where you want the tabs to appear, options are - top tabs, left tabs,
fx - the style of transition when the tab content is clicked, options are - slide, fade (fade is default so does not need to be added)
Slider (Content or Images)
Elegant Themes also offers a simple slider for various kinds of content (text or images).
It is useful for display lots of content automatically, with a delay between each piece. How the content moves and how long it appears for is controllable.
Below is an example using images.
What they look like:

How to add them:
You can add Slider via the Tabs button right from the WordPress Toolbar within a page or post (see below):

The slider shortcode is quite difficult to add, so I really recommend using the toolbar button, but I have given you all the details you need to do it by hand below.
You need to add each slider while you are constructing it, as you cannot go back once you hit ok.
Below is a relatively simple example of two slides:
[tabs slidertype="simple" fx="slide" auto="yes" autospeed="3000"] [tab]Content goes here[/tab] [tab]Content goes here[/tab] [/tabs]
There are a number of parts to the tab:
tabs - the main area, with the options for how and where the slides appear
tab - the content of each slide, added in the order they will appear
imagetab - in place of tabs, when you are using the image slider type, also comes with extra parameters (height, width)
and you have to paste in the full images URL into the content, instead of text.
Options:
The only element that has options is the main tabs section at the beginning.
fx - how you want the slide to appear/move, options are - slide, fade (fade is default so does not need to be added)
slidertype - the style of slide content, options are - simple, images (if you use images, then the [tab] becomes [imagetab] )
auto - whether or not to move the slides automatically (default no)
autospeed - if you set the auto to yes, you can define the slide change speed in milliseconds (1000 - 1 second)
Author Info/Bio
Depending on whether your chosen theme has an Author Info box at the bottom of the posts or not, this shortcode could be quite handy.
What they look like:

How to add them:
You can add the Author Info right from the WordPress Toolbar within a page or post (see below):

The Author Info shortcode has a number of elements, so is not the simplest to add by hand:
[author] [author_image timthumb='on']http://lightforsight.wplemmings.com/wp-content/uploads/2015/11/LFS-logo_white.png[/author_image] [author_info]Content goes here[/author_info] [/author]
As you can see, there is the main author shortcode, and inside it are a number of sub-shortcodes for the elements inside it like:
author_image - inside which you place the URL of the image you want displayed (the timthumb parameter turns auto-resizing on/off)
author_info - the text description for the author
Pricing Table
When you have products with various similar features and at multiple price points, the pricing table is a great way to compare them.
What they look like:

How to add them:
The Pricing Table shortcode has a number of elements, so is not the simplest to add by hand. However, if you copy this example below it will help you get started faster.
[pricing_table]
[pricing price="99.95" currency="$" title="Enterprise" desc="Description" moretext="join" url="http://www.google.com" window="new"][feature] Content [/feature][feature checkmark="x"] Content [/feature][feature] Content [/feature][/pricing]
[pricing price="99.95" title="Enterprise" desc="Description" moretext="join" type="big" url="http://www.google.com" window="new"][feature] Content [/feature][feature checkmark="x"] Content [/feature][feature] Content [/feature][/pricing]
[/pricing_table]
As you can see, there is the main pricing_table shortcode, and inside it are a number of sub-shortcodes for the elements inside it like:
pricing - this is for each column
feature - each individual feature in a column (there is one option - checkmark="x", if you want a cross instead of a tick)
Options for Pricing:
price - the price to display at the bottom of the column
currency - the symbol that will go in front of the price
title - the main title of the column
desc - the text below the title
join - the url for the button
window - "new" if you want clicking the button to open the url in a new window/tab
type - "big" if you want this column to stand out (typically you do this for your best selling price/item)
Custom Lists
Adding different icons to your lists can really make them stand out. And with this shortcode there are three types:
- grey dot
- green tick
- red cross
What they look like:

How to add them:
The Custom List shortcode is used as a wrapper on a normal html list. So you add the shortcode, then inside add a html list (with ul and li elements).
Note: because the example shows HTML, you need to add this in the text tab in the WordPress editor (NOT the visual tab)
There are a few examples below to help you see how it works:
[custom_list type="dot"]
<ul>
<li>Grey Dot</li>
<li>Grey Dot 2</li>
</ul>
[/custom_list]
[custom_list type="check"]
<ul>
<li>Green Ticks</li>
</ul>
[/custom_list]
[custom_list type="x"]
<ul>
<li>Red X</li>
</ul>
[/custom_list]
The shortcode is quite simple, but you have to remember to add the standard ul, li elements inside.
The only parameter for the Custom List shortcode is the type, which can either be x, check or dot.
Columns
Columns can be very handy for splitting up content into easy to manage pieces.
It helps with presentation and layout too.
The Elegant Themes shortcodes for columns are many, so you have a lot of variety to play with:
- halves, thirds, quarters
- one third / two third
- quarter / quarter / half
What they look like:

How to add them:
The Column shortcodes are used as a wrapper for the rest of your content. So you add the shortcode, then each column shortcode you add the content you wish to be in it.
Note: You have to use the last shortcode when you are at the last column in the series. This ensures that everything aligns correctly and ends with a new line afterwards.
You can also add columns via the toolbar, but only in the text editing tab (as seen below in the WordPress toolbar):

There are a few examples below to help you see how it works:
Halves
Content
Content 2
Thirds
Content 1
Content 2
Content 3