Shortcodes now Sleeker, Faster and Responsive

Posted on September 6, 2012 by in Theme Changes/Bug Fixes | 130 comments

Shortcodes now Sleeker, Faster and Responsive
It has been a long time since we created our shortcodes collection. Since then a lot has changed. CSS3 compatible browsers have become mainstream, making standard design elements no longer require bulky imagery. WordPress has added new functions that allow us to make our shortcodes more efficient. Many of our themes have become responsive, while our shortcodes have not. All of these issues have now been addressed, and each of our themes have been updated with a completely redesigned set of shortcodes.
View The Shortcodes

Faster Loading

Every line of code in our shortcodes has been re-written to be faster. Our shortcodes have been redesigned to use CSS3 to create common design elements such as gradients. This has greatly reduced the amount of images used by our shortcodes. The shortcodes/images folder, which used to contain 90 images, now contains a single PNG sprite, taking the overall size down from 140kb to 15kb!

We have also taken advantage of new WordPress functions introduce in 3.3 that allow us to better target which pages are using shortcodes and which are not. This means that pages that have no shortcodes will no longer load the shortcode javascrtip, improving the loading time of your entire website. We have also improved our own codebase, making the shortcodes simpler and more efficient. Not only will our shortcodes load faster, but they will perform better on the page as well.

Responsive Design

Recently we have been putting a lot of effort into creating responsive themes. Responsive themes are designs that adapt to devices with smaller screen sizes, such as iPhones and iPads. As the size of the browser window gets smaller, the theme will shrink and rearrange itself to insure that everything is readable. Until now, our shortcodes were not responsive, and as our responsive designs “adapted,” the shortcodes did not. Now our shortcodes will change along with our responsive themes, insuring a cohesive and intuitive experience for your visitors.

All of our shortcodes have also been re-coded to be fluid-width, meaning that they are not fixed at a any single width. They are all capable of growing and shrinking depending on what resolution they are being viewed at.

Along with making all shortcodes fluid width, we have applied some additional creative solutions to help insure that no shortcodes break when being viewed on mobile phones.

When responsive themes are viewed on a smartphone, the space available for the content of your page is reduced from 960px across to 320px across. When you take something like a “Tabs” shortcode, and try to squish it down to only a couple hundred pixels, it becomes almost impossible to fit.

If you take a Tabs shortcode that has 10 tabs, no matter how small you make the tabs or the text, they will simply never fit in the small horizontal space allotted. This is why everything looks squished. To fix this we decided to reduce all tabs into sliders as the screen is shrunk. No matter how many tabs you have, the shortcode will still work as the tabs themselves are no longer displayed.

Simplification is often the best solution. Another example is with our most commonly used shortcode: Columns. While columns are great on a page that has lots of space, as you shrink down your screen, trying to fit 4 readable columns on a page that only has around 300px to work with becomes impossible.

Even text becomes unintelligible, as it is broken down to only 1-2 words per line. With our new shortcodes, columns are simply removed when you view your content on a smartphone, and all of the content with the columns are extended to the full width of the page. When viewing a website on such a small device, utilizing the entire screen is extremely important.

A Cleaner, Modern Style

In addition to being re-coded and made responsive, all of our shortcodes have also been re-designed with a new sleek, modern look. You will also notice that all shortcodes have a more cohesive style than before.

To update your shortcodes, simply download and install the latest version of your theme from the members area. I hope everyone enjoys these new features. Let us know what you think in the comments 🙂

Premade Layouts

Check Out These Related Posts


  1. Excellent! I’ve been waiting for this update. Good work team.

    • Some great updates. Keep up the solid work!

    • Nice even shortcodes are responsive now 🙂

      • Yes, the theme are now “fully” responsive 🙂

    • It’s a nice idea that you made them responsive … 🙂

  2. Atlast! Much awaited “responsive” shortcodes. Hope these are decent enough otherwise ET continues to go down the hill!

    • Ouch, Raghav. That’s a rough comment. Surely there has to be a kind way to say that.

    • I don’t agree with you at all, Raghav. ET has been doing some excellent work with their websites design, plugins and shortcodes. They prove once more that they are committed to offering modern, flexible design solutions that are updated regularly. And their support is nothing short than fantastic! Excellent job, ET!!!

      • Being a subscriber for the past 2 years I have had a lot of moments of frustration because of bad support on offer. The support team is so eager to sell support. All they answer is stuff ridiculously basic. Regarding the responsive shortcodes, they have released these after releasing 10 responsive themes! And some of their support staff did not know that the shortcodes were not responsive all these days(there are threads on forum to show this)
        I sure loved their themes but that was an year ago, now there are thousands other providers ages ahead of ET. But I feel unless they do a major change of though process they are going to die a natural death.

        • Being critical is fine. Using exaggerations like “there are thousands other providers ages ahead of ET” is mumbo jumbo.

        • Do you want an arm and a leg for 40 bucks? Looks like you need some training on wp. Just compare what you are getting for a year vs. elsewhere you will pay $40+ for ONE theme.

          I had tehnical issues many times and the support was excellant. Keep it up elegantthemes!!

          • I can feel very much with him. cause it is the focus that counts.
            You dont set up a clients site only because of a lovely design, that probably some of 100.000s of other elegant customers also have.
            It is about a progress that is badly needed, that the poster writes about:
            Site loading and SEO ( I have talked about using sprites first time 3 years ago now on forums, at least they are used for shortcodes- and the rest?)
            Child theme usage
            overall size
            information flow.
            So, talking about the money paid is mumbo jumbo, cause he predicts if these things are not improved, or only slowly and will the supporters not wake up, then this is a pretty good prediction, the poster made.

            Even for 40 bucks, NOT only focusing on the own individual design style, can be awaited. Better said, the poster Raghav wrote more a recommendation, than that he sounded he would await it for 40 bucks.

            So, intepret him right, I woudl say.
            I am with him.

          • Andre, the things you mention in your comment are exactly what have been addressed in this update. We just updated our entire collection of themes with a completely redesigned set of shortcodes in the name of progress.

    • @Raghav, Don’t know what’s your problem.
      I would suggest you be reasonable in your comments – ET offers an amazing value at this price, and the work quality you get is much better than other theme sites who cost an arm and a leg.

      If you don’t think so, why not just leave to your other fav sites and not spoil the scene for the rest of us – I’m trying out this on a test site and simply lovin’ it. You left a bad taste in my mouth with that comment…

  3. Great! Sadly having downloaded the new version of simplypress, it promptly broke my website. It seems that the frontpage slider will only work if I turn off the responsive option making the fact that simplypress is a responsive theme rather pointless

    • If you experience any issues, please open a thread in our support forums. Such a problem is likely due to not running the latest version of WordPress, or a plugin conflict. With more details we can fix it for you.

  4. Just started using these things, wow, had no idea what I was missing. Thanks Nick, your themes are the best!

  5. Great job updating the shortcodes. I’m really excited to be able to use them in a variety of ways! Thanks for making the effort! They look great…and respond really well.

  6. Awesome job Nick 🙂 Specially responsive shortcode and Warning box.

  7. Great news. Have been waiting for a long time for this update. Finally responsive shortcodes. Going to update my theme now!

  8. Thanks,
    I noticed the new content boxes actually look nicer as compared to the older ones. The text is readable now.

    One question though, why don’t you use css sprites by default for the themes?

    • We will use sprites when possible in our new themes, but updating all of our old themes is not something we have on the to-do list right now.

  9. It is a great improve specially the sprite. Right now in several projects se had to manually deleted the un used shortcodes and put a condition were it appear. This is we can solve it. Great Job Nick

  10. Great job Nick!, i will renew my membership for sure, it is already finish? can i download now?, 😀

    • Yep, all of our themes have been updated with the new shortcodes.

  11. Hi – one shortcode (or plugin) I would love to see is a filterable portfolio that I can use on any of your themes. Other than that, I think you guys are doing a good job.

    • I’m about to start developing a WP Multisite project, and I’m pretty much sold on Elegant Themes. Very impressed with the level of innovation and the clean, beautiful designs. Good stuff!

  12. Super Arbeit, besten Dank!

  13. Hi,
    Thank’s for this beautiful work, i’m going to upload my web site… Very happy to renewed my membership in august ! 🙂

  14. Will the shortcodes plugin be similarly updated in the near future as well?

    • I was wondering the same as well.

    • The shortcodes plugin has been updated.

  15. Love it! Thank you so much for a very much needed update!

  16. After upload my thème Magnificent, all is all-right ! The news shorcodes are nices more simples and effectly more efficients… Thank’s very much !

  17. No more words – Its totally awesome!!!

  18. That’s the beautiful shortcodes & awesome stuff .

  19. Great Nick.
    Did you update the seperate plugin Shortcodes too?


    • The plugin will be updated shortly.

  20. This is really great! Thank you 🙂

  21. You guys just get better with each new upgrade !

  22. Brilliant and just in time to make it into our first release based upon of your responsive themes.

    Well done and have a nice weekend all of you guys 🙂


  23. This is such good news. 9/10 of my sites are responsive now and I’d been hesitant to use ET themes because of the shortcode issue.

    You’ve not only fixed but surpassed expectations, yet again.

    Love love love your work!

  24. The responsive short codes are a very welcome addition. I love ET short codes and this makes them even better.

  25. Just one clarification. Are the shortcodes exactly the same as the previous and I don’t have to change them in my page ? If I have to change them, where can I find the new ones ?

    Many thanks and congratulations for your work

    Pio Pio

    • They use the same markup, so all of your current pages will work fine.

  26. I installed Lucid a week ago – how do i upgrade the new short codes?

  27. EXCELENT! Keep up the good work!

  28. Danke!

  29. Great improvement. I found some great adjustment made in coding.

  30. Great stuff — is this update only for people who download and use the shortcode standalone package?

    Or do those of us who use shortcodes in elegantthemes THEMES have to update those?

    • Themes have been updated as well. To use the latest shortcodes, you will need to update your theme to the latest version.

  31. Great work, thank you!

    – Is there another approach to upgrade the shortcode components (for heavily modified themes)?

    – Does this mean that Convertible will become responsive someday?

    FYI, your great Vimeo video on Convertible is being blocked from being embedded; looks like Vimeo has gone to the dark side, and you need to pay to allow your videos to be embedded(???!!!).

  32. Does the builder plug in need to be uploaded.. I have used it for the last few weeks, and seems to be resonsive..

    • The builder plugin has not been updated; only our themes and the shortcodes plugin.

      • I am not an Elegant Themes customer (yet) but am very interested in the shortcodes feature. Is this a true plugin that you activate through the plugins section of the WordPress admin? Can I use it with other ressponsive sites I have already developed even if they aren’t running one of your themes?

  33. Those buttons will be perfect for a new project that I’m working on! Please update the shortcode plugin as soon as you can!

  34. It’s good to see ET is working on modernizing all of their themes instead of just launching new themes every month. 🙂

  35. I have read through these comments and some are very disturbing because let me ask some of you this question? where can you find such themes, so many, and so much options, add-ons, and short codes and features for the price you pay?

    I am a premium member and let me tell some of you that are posting harsh comments please, for $89.95 a year, how can you go wrong with so much to offer from ET?

    I have looked around and I am relatively new with WP and the themes, but I must say, for this amount a year, its a darn good price.

    Keep up the good work ET and the only issues I have with ET is some of my questions do not get answered, but regarding their work, its terrific!


  36. Nick and team, This is awesome news. Thanks for sharing this information in this new blog post. I really think that ET is a great Theme Provider. My only suggestion is that you blog more frequently. I enjoy reading your blog posts and am sure that others in the ET Community enjoy them as well. You don’t have to only post when something is newly created. You guys are always doing cool new things at ET. It would be nice to hear from you more often on the blog scene. Maybe some of your support team or people that customize themes for ET customers want to share something special about a new ET Theme or how ET themes are being used differently around the globe. Please do not think this is a critical complaint, because it definitely is not…..I really enjoy coming to your blog and your themes. I would just like to hear from ET more often on the blog. Thanks for being such a stellar entrepreneur. You have created something special.

  37. Very Nice!!
    But, I have edited codes so I can’t use auto-updating.
    So I will try updating by replacing files. Is it same as ver1.1 if I replace the folder : [../epannel/shortcodes/] ? Please answer me…

  38. I assume that the Shortcodes PLUGIN was also updated with these changes – is that correct?

    When I checked the changelog for the plugin, it said that there were no changes. but when I downloaded it anyway, the files seemed to be updated right before the release date.

    Please clarify. Thank You.

    • The plugin has been updated. Sorry for any confusion.

  39. Oh no!

    I’m all for progress, but past experience (with the last ET shortcodes update, the one “built into” theme updates) has shown me that there’s a weird disregard for existing designs…frankly I’m getting tired of all these updates that force yet another redesign of my site’s look and feel! >=\

    • I believe these redesigned shortcodes will fit much more nicely, in general, with almost any theme. They are less stylized, cleaner and coded in way that will result in much fewer compatibly issues. Not to mention that they have also improved in many others ways, as outlined above.

  40. Hoper all the themes will more faster and faster Nick, thanks.

  41. Hope all the themes will more faster and faster Nick, thanks.

  42. While I appreciate all these enhancements you’re making to existing functionality, as well as turning some of it into nice plug-ins, I really wish you would release new themes at a faster pace.

    It was a 2.5 month wait between Flexible and Lucid which is really quite poor compared to other sites. It has almost been a month since Lucid was released and yet there hasn’t been mention of another theme in the works. I find this disappointing!

    There has been just one theme released since June and the end of September is approaching fast. That will be one theme in 4 months! Apologies for the rant, but I keep checking back here every week hoping something new will be made available but alas. I’m left disappointed.

    • If we spend time working on theme updates, then that is less time that we can spend on new themes. With a large base of 76 themes and a large member base of 140,000, it is important for us to spend the necessary time updating our collection to insure that each theme is working better and better for our existing customers. The benefit from greatly improving every theme in our collection outweighs the benefit of creating a single new theme, and we will continue to update and improve all of our themes when we feel that there are important updates to be made. Responsiveness, speed and solid code improvements are important updates indeed 🙂

      Of course, we will always be creating awesome new themes as well! But now that all of our new themes are Responsive, it takes much more time to develop them. Each theme must be designed 4 times, in 4 different ways, to insure that it works correctly on each type of device. I would rather spend the extra time to create really solid themes than to try and make as many new themes as possible just to satisfy a monthly quota.

  43. Just as a small hint:

    if you use the shortcode [tabtext] the shortcode.php will produce a Tag bevore and behind the Tag.

    You can solve this at shortcode.php (wich related in folder epanel/shortcodes) in line 566 if you change the 3 lines:

    <li{$id}{$class}><a href='#'>

    into ONE Line like this:

    <li{$id}{$class}><a href='#'>{$content}</a></li>";

    … after that, you will get ONE Line in li with a simple -Tag in there and it’s easier to handle the wished placement by CSS

  44. Really awesome work. Thanks for sharing with us.

  45. I upgraded my website today and I really liked the new sliders. The new sliders are sleek and beautiful.
    I loved the new straight cut rectangle look. It reminds me of the new Windows 8 theme.

    Good work!

  46. I updated my theme and instantly had to revert back. The update made the theme no longer compatible with multiple plugins but it also voided some of the ET shortcodes that I had to manually type out because they’re not included with the others such as the ET quote shortcode.

    I know ET isn’t responsible for the plugins but the fact that I’d have to manually go through 400 posts to fix the ones where ET Quotes were used or other shortcodes just seems ludicrous.

  47. Keep up the good work guys. 😀

  48. Wow excellent !

    I’ve was really waiting for such an update.

    Good work team !

  49. You guys are doing such a great job. Proud to be a member of elegant themes. 🙂

  50. Great job on the shortcodes. It’s these things that really makes Elegant Themes stand out.

    However, will the elements you build with Elegant Builder also be streamlined and improved for fluid design?

    Right now when for example you use Elegant builder to make pricing tables, you end up with really scrambled results on smaller screens..


  51. I have only just read this thread fully (I scanned it previosuly) and I am really quite shocked by Raghav’s comments higher up the page.

    If anyone knows of a better value for money themes package than ET’s I’d be amazed.

    Constructive criticism is OK, but those comments were very harsh.

    Ian D

  52. I really love elegantthemes. Simply beautiful and these shortcodes made my day!
    Thank you.

  53. “Slideshow” and “Image Slider” are the coolest features in the theme. Excellent work keep it up.

  54. You guys make the greates themes. 🙂 Proud to be a member.

  55. I have looked at my site speed and done some tweaks and now its great. Thank you for bringing that up.

  56. I wish i could update without paying 39$/year. I only have one website, that doesn’t make sence for me to pay. Probobly will go back to some theme that i could have help if i need.
    Using chameleon and its really annoying that i cant take that ‘posted’ text out from below titles, yes yes i can, but then the statment disapiers on the main page, they are linked together, sucks

  57. Working to update a theme can be sometimes a bit hard than a new theme.But I must to recognize that I love this update! Good job,elegantthemes!

  58. Got to agree with Gdaiva. A one time payment would be so much better. It would be ok if the price would be higher as a one time payment, but when only having one (non profit) site running on elegantthemes, it dosen’t make sense to update for me.

  59. You guys do a great job, but why don’t you charge a one-time-payment like genesis for an example? Rather make a big one time payment, than smaller payments each year.

  60. What happens when a non ET theme has responsive shortcodes where the code is the same as the ET shortcode plugin like [/button] or [/toggle]? What if I want to use theme buttons but ET tabs? Is this a support forum question? Btw, I think it is good to suggest sprites, child themes, and other improvements. Wild exaggerations may be cultural….I quote a character in Jerry McGuire: “you think we are fighting and I think we are finally talking!” I am a New Yorker at heart. We are always saying things in ways that are not palatable to other parts of THIS country. Tolerance all around folks….

  61. Really awesome work. Thanks for sharing with us.

  62. We’re using Origin on a subsite currently in buildout but I’d like to tweak the CSS for the Quote shortcode to add a background color. I can’t seem to locate the CSS for it, though. Any clues?

    • If you could please open a thread in our support forums then our team will be able to assist you.

  63. Please when the themes are bought for the $39 a year does one get access to shortcodes??

    • All of our themes come with our shortcodes collection installed. If you would like to use our shortcodes on other themes, then you will need to use the shortcodes plugin which is only available on the $89 membership.

      • Hi Nick,

        I installed the shortcodes plugin and it is not showing all of them. I only see the following:

        ET learn more block
        ET box
        ET Button
        ET Tabs
        ET Author Bio

        The rest are missing. Any ideas?

        • If you need help, please open a ticket in our support forums so that our team can assist you.

  64. I am using the Elegant Themes builder to create my website. When I use the tabs module, the first dummy text I placed in there was for content holder only. When I went back in to update the text, the old content still shows up, until you click over to one of the other tabs then the new text shows. No matter how many times I’ve cleared cache, refreshed the page, tried different browsers, tried deleting and recreating the module – it always remembers the first text that was inputted and displays it.

    Any suggestions on what could be causing this and how I can fix it?

    • If you need help, please open a ticket in our support forums so that our team can assist you.

  65. I also tried switching from the tabs module since that wasn’t working to the toggle module, and am also having issues with that. They are displaying as default state open even though it is set to closed. Anyone else having that issue? I would prefer to use tabs, but it’s useless if I can’t update the text, and now apparently toggle is as well if I can’t set it to closed. I love the Elegant Builder, but these are 2 main elements that shouldn’t be broken. Please fix!

    • If you need help, please open a ticket in our support forums so that our team can assist you.

  66. I really enjoyed the ease of building a website with ET Trim. I also wanted to comment on the beauty of using the short code learn more block. The only comment as a graphic designer I’d like to make on the clean esthetic is one of contrast. I used “learn more” to condense a long page and the result made me realize that I wished the caption was either bold or a darker color for more contrast. A page full of blocks just looks too grey. If you could suggest a quick fix, it would make the page pop! Thanks a million.

  67. Thats really impressive really good work thnx alot

  68. Was wondering, can the shortcode plugin be used with any theme? I installed it along side your Serene theme, but it doesn’t seem it’s working. Furthermore, looking at shortcodes.php quickly, it looks like the post editor should show a ton of buttons, one for each shortcode, but I see no such buttons in WordPress 3.8. Thanks

    • OK I found the bug in Serene:
      function et_shortcodes_main_load(){
      if ( function_exists( ‘et_setup_theme’ ) ) return;
      I assume this checks if the theme being used is an Elegant Theme. If that is the case, it returns immediately, because it is assumed that all Elegant Themes come with ePanel, and the shortcodes already. However, that is not the case for Serene, which does not come with ePanel, *but* has the et_setup_theme() function anyway. So I change this function to check if ePanel is used instead:
      function et_shortcodes_main_load(){
      if ( function_exists( ‘et_add_epanel’ ) ) return;
      and that allows me to use the shortcodes in Serene.

  69. Thanks Nick, its amazing 😀

    • Yes, they can be used with any theme.

  70. I’ts works. I going tu buy all themes :D. Thank you

  71. wow, create easy tab, thanks Nick

  72. hi.. is there a way to comment the shortcode directly into theme or php? i’m not very good at coding, a few direction will be help.. thanks

    Best Regard

  73. may I suggest you provide buttons in the text editor for all the short codes because in your demo pages, you don’t show the codes for all of them including testimonials and author box. I have searched and cannot find it. Thank you.

  74. Thanks Nick for tutorials. Very nice work….. 🙂

  75. first of all, its a great plugin, I couldn’t find it in any other similar ones out there..
    second, i must a gree with @Jessica, a button on the editor will be great..

    over all, good jobs Nick.. keep it up 🙂

    Best Regard

  76. Waawww, nice plugin. I really love this plugin. The characteristic are good. Thanks for create it.

  77. How and where can I find (to use) these shortcodes specific for a a php page? Appreciate a reply.

  78. Wishing you’d not made the tabs un-adjustably default to slider in mobile, it’s not good UX in so many cases, as the user cannot place themselves within content, and in so many cases, seeing the tab titles is ESSENTIAL.
    Doubly, the shortcode of [tabs] then makes some other plugins that can deliver this function better clash shortcodes.
    Trying to hack that code is just far too much energy for what it’s worth.
    It would be AH-MAZING if there was a selectable option to have the tabs turn into vertical stack tabs(looking more like button filters, eg). In such a scenario, vertical tabs and horizontal alike would both have the “button” tab rows at top and then content below.

    PLEASE let me know if you take this feedback on!

    Love your work, otherwise.

  79. Hi Steve
    I got a site from another developer. it looks like he is using the theme chameleon . I wanted to use shortcodes. The them allready has some shortcode installed and when i try to install the new shortcodes i get errors becaise the files are called the same. Any advise? Could you rename the files . The problem is shortcodes.php and shortcodes.css

  80. merhabalar paylasimlarinizi begeniyle takip ediyorum ankara davetiye olarak sizleri cok seviyoruz.

Join To Download Today

Pin It on Pinterest