1. Button Varieties

Using our buttons shortcodes, you can easily create a variety of buttons. These buttons all stem from a single tag, but vary in color and size (each of which are adjustable using color=”” and type=”” parameters). Furthermore, advanced option buttons have been integrated into the post page text editor, allowing you to instantly generate buttons of any type without having to write the shortcode markup yourself.

2. Content Boxes

Content boxes are a great way to grab your visitor’s eye and direct them to important content within the post. The ElegantThemes shortcode pack comes with five box variations, all of which stem from the [ box ] shortcode and are adjustable using the type=”” parameter. These boxes have a fluid width that automatically adjusts the the size of its parent element. In this example, each box is placed within a [ one_third ] column.

3. Toggled Content

Now you can create toggled content on the fly using the [ lear_more ] shortcode. Any content can be added within the toggled div, and you can even specify whether the element should be open or closed on page load. The toggled content shortcode has a fluid width, meaning it can adapt to any size page (as shown below).

4. Tabbed Content

Now you can create tabbed content with the click of a button using the [ tab ] shortcode. This shortocode has two variations (horizontal and vertical tabs) and has options for auto-rotation, rotation speed and transition animation. These tabs have a fluid width, which means that they can adjust to any page size. In this example each tabbed element has been placed within a [ one_half ] column. We have also integrated advanced buttons for the tabs shortcode, allowing you to create your tabs through a graphical interface rather than having to write the shortcode markup yourself.

5. Slideshow

The [ tab ] shortcode also acts as a versatile javascript slider than can be used in any number of situations. The slider has a fluid width, which means it can fit anywhere you want it to go. In this example, the slider has been allowed to extend the entire width of the page. This slideshow supports an unlimited number of slides as well as auto-rotation. You can also choose which type of transition animation to use.

Phasellus aliquet nibh quis ipsum aliquet dignissim. Nam eleifend fermentum lacus, quis consequat orci euismod sed. Etiam mollis, risus vitae facilisis lobortis, turpis nisl eleifend lacus, a dictum velit nibh ultrices ligula. Phasellus varius libero quis dolor dignissim nec tristique nisi tristique. Aliquam erat volutpat. In a molestie eros. Integer condimentum imperdiet magna at lobortis. Phasellus vestibulum lobortis risus, a pellentesque magna viverra at. Vivamus consequat dapibus sem, et luctus massa suscipit in. In non nisi dui, eget tempor dolor. Quisque fringilla tellus non orci mattis eu consectetur diam tincidunt. Nullam leo nisi, venenatis sed tristique nec, iaculis id nisl. Donec ornare, sapien quis consequat dapibus, ipsum nunc imperdiet leo, quis elementum orci dolor at massa. Etiam commodo ipsum nec dui lacinia pretium. Nullam ullamcorper feugiat felis, et ornare nisi rutrum sit amet. Vivamus euismod arcu vitae dui cursus facilisis. Aenean tristique elit ut arcu tempus vel vulputate ligula euismod. Nulla enim tellus, scelerisque in facilisis ut, pretium in mi. Integer eget elementum mauris. Maecenas vitae enim nunc.

6. Image Slider

The [ tab ] shortcode also acts as an image slider. This slider can produce an image slideshow of any size. The shortcode will even automatically crop and resize your images to fit the dimensions of the slider that you have chosen. You can also choose to enabled/disable auto rotation, adjust the transition effect, and increase/decrease the rotation speed.

7. Easy Tooltips

Now you can add beautiful tooltips to any element by wrapping it in a [ tooltip ] shortcode. Below are a few examples of how the tooltips could be used when combined with text, images, and even other shortcodes!

Test Tooltip Text

11. Column Layouts

Sometimes it can get frustrating trying to organize content via the WordPress text editor. With the column layout shortcodes, however, you can now break down your content into any number of advanced layouts giving variety and hierarchy to your post. Columns can be created in halves, thirds, fourths and two-thirds.