Elegant Themes Shortcodes Tutorial

March 7, 2013 · 23 comments

in Shortcodes

ET Shortcode 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 short codes Elegant Themes Shortcodes Tutorial

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)

elegantthemesshortcodes 300x146 Elegant Themes Shortcodes Tutorial

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

elegantthemeshortcodeboxes 300x182 Elegant Themes Shortcodes Tutorialelegantthemesshortcodesbuttons 300x170 Elegant Themes Shortcodes Tutorial

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

elegantthemesshortcodestabs 300x237 Elegant Themes Shortcodes Tutorial

“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 300x81 Elegant Themes Shortcodes Tutorial

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 300x134 Elegant Themes Shortcodes Tutorial

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

Elegant Themes Column Layouts Shortcode Elegant Themes Shortcodes Tutorial

 

 

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="http://uploadwp.com/wp-content/uploads/2010/06/adam-roo.png"]
Content
[/testimonial]

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 300x139 Elegant Themes Shortcodes Tutorial

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 300x193 Elegant Themes Shortcodes Tutorial

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]
[/tabs]

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.

Notes:

  • 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 300x122 Elegant Themes Shortcodes Tutorial 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]
[/tabs]

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

passwordprotectcontent 300x247 Elegant Themes Shortcodes Tutorial

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…

[protected]

At the very top and:

[/protected]

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

Adam Barndt

Article by

I am a Social Media Specialist and Journalist living in Milwaukee, WI. I began using WordPress to self publish after college when I found working as a reporter didn't allow me the opportunities to write on my own terms. Since then, I have turned more to the production and development side of the platform, helping companies and individuals establish and control their web presence. If you have any questions, feel free to leave a comment below.

Adam has written 16 awesome articles for us at Upload WordPress

Twitter: @adambarndt | Facebook | Google+

Stay Updated - Subscribe

{ 23 comments… read them below or add one }

Artur March 9, 2013 at 2:26 am

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

Reply

Adam Barndt Adam Barndt March 9, 2013 at 10:46 am

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. http://uploadwp.com/securing-your-wordpress-site/

Let me know if you have any more questions.

Reply

Nils February 28, 2014 at 11:17 am

There is also a Plugin called "Better Wordpress Security", which secures WordPress:

https://wordpress.org/plugins/better-wp-security/

Reply

Adam Barndt Adam Barndt February 28, 2014 at 11:24 am

Thanks Nils! I came across this plugin as well a few months ago. It is very robust and easy to use (even includes the functionality outlined in this article). It's a bit more for the advanced user, but definitely comes recommended. (I did find, however, that the backup functionality does not work if you have an extremely low traffic site, like a live dev site.) Thanks for sharing!

-Adam

Reply

Abdulla Al-Taweel April 28, 2013 at 7:55 am

Hey Adam,

Quick question, how do I add an image to a tooltip? Im currently using Fusion Theme from Elegant Themes, and I seem to only be able to add text :/

Thanks

Reply

Adam Barndt Adam Barndt June 3, 2013 at 10:29 am

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.

-Adam

Reply

Paul June 2, 2013 at 1:37 pm

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.

Reply

Adam Barndt Adam Barndt June 3, 2013 at 10:27 am

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!

Reply

Fabian June 14, 2013 at 10:18 am

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

Reply

Teddy Triton Teddy Triton June 16, 2013 at 12:25 pm

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.

Adam

Reply

Susan August 6, 2013 at 8:31 am

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

Reply

Teddy Triton Teddy Triton August 6, 2013 at 12:54 pm

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.

Thanks,

Adam

Reply

Susan August 6, 2013 at 1:05 pm

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!!!

Susan

Reply

cory shubert September 26, 2013 at 10:18 am

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,
Cory

Reply

PM Falcon September 27, 2013 at 9:26 am

The solution for missing line breaks noted here didn't work with ET Aggregate theme, but this did (use before EVERY affected line):
<br class="clearfix">

Reply

Dr. Asadi October 21, 2013 at 3:09 pm

Wow!

Very thanks Adam :)

God bless you xo

Reply

Teddy Triton Teddy Triton October 21, 2013 at 6:34 pm

You're welcome Dr. Asadi – Thanks for the positive feedback!

Reply

Smutje October 23, 2013 at 11:00 am

Hey Adam,

thank´s a lot!! I was really looking for a tutorial like this.
This gets bookmarked right away.
Nice work!

Reply

Ragsy November 3, 2013 at 2:43 pm

Your tutorials are wonderful.
Thanks so much for taking the time to make them.

Reply

Teddy Triton Teddy Triton November 3, 2013 at 6:29 pm

Thanks for taking time to let us know they helped!

Reply

Eddie December 10, 2013 at 2:21 pm

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?

Reply

Trevor K December 18, 2013 at 11:34 am

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?

Thanks
Trevor K

Reply

selim January 10, 2014 at 10:22 am

Leave a Comment

Previous post:

Next post: