Elegant Themes Shortcodes Tutorial

Enhance your WordPress Site with Elegant Themes Shortcodes

One of the many great features that Elegant Themes offers is their expansive support and seamless integration of shortcodes.  Shortcodes are small samples of simple code that can be inserted into WordPress content to call larger HTML and Javascript functions.  By using shortcodes with ET, you can drastically increase the functionality and display options for your website.Elegant Themes Shortcodes

In this article, we will demonstrate and explain a few of the more popular shortcodes offered by Elegant Themes.  More specifically, in the first half of this tutorial we’ll show you how to use the ET shortcodes that are included in the WordPress rich text editor.  The second half of our tutorial will walk you through a few of the popular shortcodes that aren’t available in the rich text editor.  Elegant Themes Shortcodes are the fastest way to add variety and distinction to your content.  Taking a few minutes to learn how to use them will give your site an edge.

Shortcodes found in the WordPress Rich Text Editor

Elegant Themes offers support for shortcodes caked into all of their themes through the rich text editor.  This means that instead of having to search out particular shortcodes from the themes documentation you can insert them right from withing your rich text editor.  Shortcodes in the rich text editor are inserted in the same way you would change text style, add a link, or change paragraph formatting.

Elegant Themes offers the following shortcodes in the WordPress rich text editor:

  • Learn More (collapsible content section)
  • Boxes (colored content backgrounds)
  • Buttons (learn more, etc.)
  • Tabs (tabbed content display)
  • Author Bio Box (about the author)


Using Rich Text Editor Shortcodes

Inserting content into the shortcodes couldn’t be easier. Simply click the icon of the element you would like to insert and fill out the fields.  The shortcodes will automatically populate with the content you entered.  Save your changes and view your post or page.

“Learn More” Shortcode

As shown in the tutorial video below, simply click the icon to insert the “Learn More” short code.  A new editor will pop open. Add your caption title, select the fields default state (open or closed) and add your content.

Note: The content field supports HTML tags.

Save your changes and preview them.

“ET Box” Shortcode


Click the icon to add a ET Box. Select the type of box you would like to add and add the box’s content.


“ET Button” Shortcode

Click the icon to add an ET Button.

Add the button’s destination URL in the “Link” field. Select the type of button you want, as well as the color.  The “Content” field dictates what text will appear linked in the button. You may also select the target for the link, either new window or same window.

“ET Tabs” Shortcode

Click the icon to add an ET Tab Box.

Select your tab style, either top tabs, left tabs, simple tabs, or image tabs.  Select your animation style, either fade or slide, set your desired speed and enter the tab text.

If you selected images as your tab type you will have to set the image dimensions, and place the image URLs in the tab content field.

“Author Bio” Shortcode 

Click the icon to insert the author bio shortcode.  Add your image URL and content.

For easy styling and formatting, use a square image and leave the “Use Resizing” field set to ON.

Elegant Themes Shortcodes Not Found in the Rich Text Editor

Now it’s time to talk about some of the shortcodes that are not found in the rich text editor.  In this second part of the tutorial we’ll show you how to use shortcodes that will enhance your social reach and the content of your WordPress site.  Specifically, we’ll demo shortcodes for adding social media links, column layouts, testimonials boxes and drop caps so lets get started…

Adding Social Media Linkssocialmedia

Having direct links from your content to social media sites has become a must in modern webdesign.

The Social Media shortcode makes it easy for your readers to share your content on their favorite social media or bookmarking sites.  Elegant Themes offers shortcode support for Digg, Stumbleupon, Facebook, Feedburner and Twitter.

The Social Media shortcodes are as follows:

  • [dig] = digg
  • [stumble] = stumbleupon
  • [facebook] = facebook
  • [retweet] = twitter
  • [feedburner name=”yourfeedburnername”]

Simply add the code to any WordPress page or post and save your changes. These icons are typically placed at the top or bottom of your content.

Adding Column Layouts to Posts and Pages coulmnlayout

ET shortcodes allow you to easily add a column layout to your posts and pages. Using the column layouts shortcode you can break up your page or post into halves, thirds or fourths.

To add column layouts copy the shortcode for the layout you want and paste it into your page or post.  Add your original content in place of the “Content” contained in the shortcode.

Be sure to use the shortcode that includes “last” in your last section to close the column layout as shown in the tutorial video below.

List of Elegant Themes Column Layouts Shortcodes

Column Layouts Shortcodes



Adding Testimonial Boxes

To add testimonial boxes to your WordPress pages and posts copy the shortcode below.

[testimonial company=”Company name” author=”Name goes here” image=”https://www.uploadwp.com/wp-content/uploads/2010/06/adam-roo.png”]

Paste it into your post or page and replace “company name” and “name goes here” with your content.  Replace the image URL with one of your own (found in your WordPress’ media library). Also replace the word “content” with additional information.

This box is great for testimonials, but is also a versatile tool for creating interesting page layouts. Experiment with the code to find a layout that fits your needs.

Adding Drop Caps dropcaps

Adding drop caps (think simple calligraphy) is an easy way to add flare and professionalism to your posts and pages.

Typically speaking, a drop cap is applied to the first letter of the first paragraph on your page or post.

To add drop caps copy the shortcode below and paste into any WordPress page or post.

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

Replace the letter “P” with the first letter of the first word in your paragraph (remember to delete it from the word to avoid redundancy).

Set your font size and color (the color uses a hex code, a six-digit number beginning with a pound sign). Any image editor will have hex codes.  You can also look up a full list of color hex codes by doing a Google search.

Elegant Themes Shortcodes Plugin

Most ET shortcodes operate from within the themes files.  Some however, require the use of the Elegant Themes Shortcodes Plugin.  To get the plugin login to your Elegant Themes Members Area and download “Shortcodes” from the Plugin Downloads area.shortcodeplugin

Login to your WordPress account and install and activate the plugin. (Dashboard > Plugins > Add New > Upload.)

With this plugin you’ll be able to access the image slider, slideshow, easy tooltips, and password protection shortcodes.  In this final section of our tutorial we’ll show you how to configure these shortcodes to expand the functionality of your Elegant Themes and WordPress site.

Image Slider Shortcode

You can create an image slider using the tabbed content section found in the rich text editor but it’s a little smoother to just use the shortcode and change the information directly.

To begin setting up the image slider, copy and paste the following code into your post or page:

[tabs slidertype=”images” auto=”yes” autospeed=”4000″]
[imagetab width=”800″ height=”500″] image.png [/imagetab]
[imagetab width=”800″ height=”500″] image.png [/imagetab]

Repeat the middle lines for as many images you want to set in the slider.

Replace the width and height values with the dimensions of your images.

Replace “image.png” with the URL of your images.

Save your changes.


  • When working with shortcodes, be sure to work in the “Text” tab of the rich text editor.
  • Images smaller than 600px wide will display gray bars on the left and right of the image.

Slideshowslideshow Shortcode

The slide show shortcode functions very similarly to the image slider short code.  The main difference is that the slide show is formatted to contain and properly display text and other shortcodes.  For example, you could embed content boxes or buttons within the slideshow.

To start, copy and paste the following code into your page of post:

[tabs slidertype=”simple” auto=”yes” fx=”slide” autospeed=”4000″]
[tab] Content [/tab]
[tab] Content [/tab]

You can now replace “Content” with text, other short codes or other HTML.

Easy Tooltip Shortcode

Tooltips are small word bubbles that appear when a word is hovered over.  With the ET shortcodes plugin you can quickly create this useful feature.

To begin, copy and paste the following shortcode into your post or page.

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

Replace “Add a caption title” with the content to appear in the bubble, and “Content” with the word to activate the tool tip.

Update your post and test.

Password Protect Content Shortcode


For a variety of reasons (subscriptions sites come to mind), you may choose to protect access to certain Posts and Pages by forcing site users to log-in.  With the password protect content shortcode it’s easy to accomplish.

The best way to use this shortcode is to add it as a last step.  Once your content is complete insert the following…


At the very top and:


At the very bottom.

This will require people to create an account before they can access your premium content.

Hopefully we’ve effectively demonstrated that with Elegant Themes shortcodes you can easily create functional and visually pleasing designs for your WordPress site.  We encourage you to take a look at all of the shortcodes offered by ET.  You’re sure to find plenty that will help to enhance your website.  Experiment to find the perfect design and as always, please post any questions in the comments below.

Important Note:  Here’s where you’ll find all of the Elegant Themes shortcodes – you must be logged into your Elegant Themes account to get the codes

27 thoughts on “Elegant Themes Shortcodes Tutorial

  1. Hi ,I have big qestion about WordPress. Im intresting how I can make my wordpress more secure ? Is there other way how I can simple LOG IN in to my wordpress site not with using WP_ADMIN or WP_LOGIN , can I make in other way ?? And I whould like to know how I can protect more and make it more safe WP platform. If u have some advice please tell how to make it 🙂

    • Hi Artur,

      The consensus seems to be that changing the wp_admin or wp_log in is riskier than it’s worth. It’s possible, but messing with it can cause problems with future upgrades and plugins.

      To make your site more secure out of the gate, the first thing you should do is delete the admin account (being sure to create a new account to use for administrative purposes.)

      The second step is to create a highly secure password. Contrary to popular belief, length beats entropy when it comes to password strength. That is to say, “thequickbrownfoxjumpsoverthelazybrowndog” is a much more secure password than “@ftg7C50%.”

      https://xkcd.com/936/ (Always love an excuse to share an XKCD.)

      Next, set up the plugin “Limit Login Attempts.” This plug in will lock out a user after a predetermined amount of unsuccessful log in attempts, effectively shutting down brute force attacks (the most common way WP sites are hacked. See this tutorial for help setting up the plug in. https://uploadwp.com/securing-your-wordpress-site/

      Let me know if you have any more questions.

    • Hey Abduall,

      Are you using the proper syntax for inserting an image? (). If so, there’s a good chance the tool tip doesn’t support HTML. I’m a sure there’s a tool tip plug in out there that will allow that, just might take some digging.


  2. Great article and like the rest of your site really helpful for the amateur WP developer.

    Such a shame that it is $90 to get the ET short codes though, I don’t want any of their other stuff it’s a bit pricey.

    • Hey Paul,

      Glad to be of help! I think the short codes come with a basic membership for like $40. I used to hate having to buy things for WordPress, but Elegant Themes is definitely worth the money if you want easy access or have to build multiple sites. Thanks for reading!

  3. Hey Adam, thanks a lot for your Elegant Themes Shortcodes tutorial! Do you have a tutorial about the shortcode for quotes too? That would be very amazing and appreciated! Thanks a lot in advance 🙂

    • Hi Fabian,

      Thanks for the positive feedback on our Shortcodes tutorial. We do not currently have one specifically on the Quotes shortcode. We’ll go ahead and add it to our queue of future tutorials so thanks for the suggestion.


  4. Hi, thanks for the great tutorial. I was wondering how do I add the target attribute to the buttons? I am trying target="_blank" after the link but it is still opening in the same window.

    Thanks =)

    • Hi Susan,

      When you click the ET Buttons short code icon in the rich text editor it should give you the option to select the target. Please send me the link to a specific example on your site and I'll take a closer look.



      • Hey Adam,

        Thanks for the reply. I didn't actual go through the rich text editor, I didn't realise that part, lol. I was just trying to type it out, but I see now.

        Thanks very much for your help!!!


  5. Hi, is there a place I can understand the flow and use of ET for email subscriptions or signups to a website? I see that the theme installs pages like Email Subscribed, Email Unsubscribed and Subscription Confirmed, and inside them they have custom fields like xyz_em_thanks_page… but I have not found documentation on how to tie all of these together and make them work? Any links/leads/ideas on this part?
    Thank you,

  6. First, thanks for a great tut. I love ET but the how to stuff they have is not so good…

    Second, how can I modify the format of the content in a tutorial box? Every time I add formatted content, the shortcode seems to overwrite it. Thoughts?

  7. Just wondering how I can re size the thumbnails in WordPress Origin theme. Every time I put a new picture in for thumbnails, it just sets it up at all different sizes. Also in different random area's, how can I fix this?

    Trevor K

  8. Hi, I have a white box
    [learn_more caption=”Test” state=”open”] Content goes here[/learn_more]
    but I can’t see “Test” because it is white. So I want to change the color of the box, because I need white text color for the page. How I can?
    Any suggestion-link?

Leave a Comment