Shortcodes
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.
Warning Box
Warning
Curabitur luctus, dui ut tempor convallis, arcu sapien euismod ante, in pretium nunc ante sed purus. Nunc quis quam sit amet ipsum tempus mollis. Curabitur nisi erat.
Download Box
Download
Curabitur luctus, dui ut tempor convallis, arcu sapien euismod ante, in pretium nunc ante sed purus. Nunc quis quam sit amet ipsum tempus mollis. Curabitur nisi erat.
Info Box
Info
Curabitur luctus, dui ut tempor convallis, arcu sapien euismod ante, in pretium nunc ante sed purus. Nunc quis quam sit amet ipsum tempus mollis. Curabitur nisi erat.
Bio Box
About Me
Curabitur luctus, dui ut tempor convallis, arcu sapien euismod ante, in pretium nunc ante sed purus. Nunc quis quam sit amet ipsum tempus mollis. Curabitur nisi erat.
Normal Box
Normal Box
Curabitur luctus, dui ut tempor convallis, arcu sapien euismod ante, in pretium nunc ante sed purus. Nunc quis quam sit amet ipsum tempus mollis. Curabitur nisi erat. In placerat rutrum felis.
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).
Content Closed
Suspendisse elementum tincidunt mi, non dictum nibh molestie a. In placerat rutrum felis, eu lacinia nunc eleifend vitae. Pellentesque vitae porttitor mi. Nulla lobortis, justo nec eleifend cursus, dolor velit accumsan tortor, non euismod metus lorem in mauris. In non ultrices est. Etiam at leo quam.
Content Open
Suspendisse elementum tincidunt mi, non dictum nibh molestie a. In placerat rutrum felis, eu lacinia nunc eleifend vitae. Pellentesque vitae porttitor mi. Nulla lobortis, justo nec eleifend cursus, dolor velit accumsan tortor, non euismod metus lorem in mauris. In non ultrices est. Etiam at leo quam. Suspendisse elementum tincidunt mi, non dictum nibh molestie a. In placerat rutrum felis, eu lacinia nunc eleifend vitae. Pellentesque vitae porttitor mi. Nulla lobortis, justo nec eleifend cursus, dolor velit accumsan tortor, non euismod metus lorem in mauris. In non ultrices est. Etiam at leo quam. Pellentesque vitae porttitor mi. Nulla lobortis, justo nec eleifend cursus, dolor velit accumsan tortor, non euismod metus lorem in mauris.
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.
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.
12. Custom Icon Lists
We have added a few different list styles that can be applied to any list you make. Simply wrap the list in the [ custom_list ] shortcode and choose your icon type (green check mark, red x or gray dot). The list will then be formatted accordingly.
- list item 1
- list item 2
- list item 1
- list item 2
- list item 3
- list item 4
- list item 1
- list item 2
- list item 1
- list item 2
- list item 3
- list item 4
- list item 1
- list item 2
- list item 1
- list item 2
- list item 3
- list item 4
14. Testimonials
The new testimonials shortcode gives you an easy way to show your visitors what your customers think about your product. Gaining the trust of your viewers is important, and now it’s easier than ever to create styled testimonial blurbs on any of your posts or pages.
Company name
Company name
Company name
15. DropCaps
Dropcaps are a simply typographic technique that will spice up and give hierarchy to your post copy. Simply wrap a little at the beginning of your paragraph with the drop cap shortcode and it will become nested within the body content. You can then apply any style that you want to the letter, allowing you to change its size, color and font face.
16. Quotes
One thing that our themes have been lacking are well-formatted quotes. This problem has now been solved with new quote shortcode which comes in two different styles.