Elegant Theme Shortcodes Explained - Mad Lemmings

Elegant Theme Shortcodes Explained

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.​

Elegant Themes Buttons Shortcodes

How to add them:

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

Add Elegant Theme Button from toolbar

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.​

Elegant Themes Buttons Shortcodes

How to add them:

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

Elegant Themes add box via toolbar

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:

Elegant Themes Shortcode Expand/Toggle

How to add them:

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

Elegant Themes Toolbar Learn More Toggle

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:

Elegant Themes Tabs Shortcode

How to add them:

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

Elegant Themes Tabs Shortcodes

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:

Elegant Themes Shortcode Slider

How to add them:

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

Elegant Themes Tabs Shortcodes

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:

Elegant Themes Shortcode Author Info Bio

How to add them:

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

Elegant Themes Toolbar Author Info

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:

Elegant Themes Shortcode Pricing Tables

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:

Elegant Themes Shortcodes Custom Lists

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:

Elegant Themes shortcode Columns

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):

Elegant Themes Columns in 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

Testimonials

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:

elegant themes shortcode testimonial

How to add them:

The Testimonial shortcode has a number of parameters which are described below the example. 

[testimonial company="Company name" author="Name goes here" image="http://www.elegantthemes.com/preview/TheProfessional/wp-content/uploads/2010/09/profile2.jpg"]Content[/testimonial]

In the above example you can see all of the elements, which are explained below:

company​ - if you want a subtitle to the person's name, this is the spot to do it. Could also be a place for a job title or similar.

author - the person giving the testimonial's name

image - the url of the image you want displayed next to the name

Content - this goes between the tags, and is the main quote/testimonial text

Tooltips

This is something that is useful when you have lots of buttons, that perhaps need more explanation. When you put your mouse over something, this small bubble/tooltip will appear:

What they look like:

Elegant Themes Shortcode Tooltip

How to add them:

The Tooltip shortcode is one of the simplest. Here is an example. 

[tooltip text="Add a caption title"] Content [/tooltip]

text​ - what will appear in the tooltip

Content - this goes between the tags, and the element that has the tooltip (can be anything)

Password Protected

If you have valuable content that you want protecting, especially within an otherwise public piece of content, then this shortcode is very helpful.

What they look like:

Elegant Themes Shortcode Password Protection

How to add them:

The Password Protected shortcode is one of the simplest. Here is an example. 

[protected] Content [/protected]

Content - this goes between the tags, and is the content you want to protect

Dropcaps

A very old school way of starting a sentence, drop caps can add some nice style to a page or post.

What they look like:

Elegant Themes Shortcode Dropcaps

How to add them:

The Dropcaps shortcode is relatively simple, as it only has one parameter. Here is an example. 

[dropcap style="font-size: 60px; color: #9b9b9b;"] L [/dropcap]

style - the css you want applied to the content between the tags

Note: if you are not familiar with css, then you may need to look up some of the above, but basically you need to decide on a font size, and color (for which you need the hex code)

Quotes

A great way to present a specific phrase or sentence within a piece of content.

What they look like:

Elegant Themes Shortcode Quote

How to add them:

The Quotes shortcode is relatively simple, as it only has one parameter. Here is an example. 

[quote type="center"] Content [/quote]

type - you can use this to center your quote (see the use in the example above)

Social Media Buttons

Testing showed that not all of these buttons are working in the current version of Divi (2.5) so I don't recommend using these.

They are also quite ugly (different shapes and sizes).

Personally, I would recommend using with one of the best paid plugins around (social warfare) or if you want to go for Free, then ​Simple Share Buttons Addr

What they look like:

Elegant Themes shortoces social media buttons

​As you can see above the Buzz (previously Google Buzz) icon no longer works, and the rest are very different in size, shape etc.

How to add them:

The Social media buttons shortcodes are added one at a time.

You can use the toolbar in the text tab of WordPress.​ (they are towards the end of the list)

Elegant Themes Columns in Toolbar

Here is an example of the actual shortcodes that I believe are working: 

[stumble]

[facebook]

[twitter name="name"]

[retweet]

[feedburner name="name"]

Some of the shortcodes need parameters like your Twitter username or your RSS feed to work.