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.Small Buttons
[button]Button Text[/button] [button color="lightblue"]Button Text[/button] [button color="teal"]Button Text[/button] [button color="silver"]Button Text[/button] [button color="black"]Button Text[/button] [button color="pink"]Button Text[/button] [button color="purple"]Button Text[/button] [button color="orange"]Button Text[/button] [button color="green"]Button Text[/button] [button color="red"]Button Text[/button]Icon Buttons
[button type="icon"]Button Text[/button] [button type="icon" icon="search"]Button Text[/button] [button type="icon" icon="refresh"]Button Text[/button] [button type="icon" icon="question"]Button Text[/button] [button type="icon" icon="people"]Button Text[/button] [button type="icon" icon="warning"]Button Text[/button] [button type="icon" icon="mail"]Button Text[/button] [button type="icon" icon="heart"]Button Text[/button] [button type="icon" icon="paper"]Button Text[/button] [button type="icon" icon="notice"]Button Text[/button] [button type="icon" icon="stats"]Button Text[/button] [button type="icon" icon="rss"]Button Text[/button]Big Buttons
[button type="big"]Big Button[/button] [button type="big" color="purple"]Big Button[/button] [button type="big" color="orange"]Big Button[/button] [button type="big" color="green"]Big Button[/button] [button type="big" color="red"]Big Button[/button] [button type="big" color="turquoise"]Big Button[/button]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
[box type="warning"]WarningCurabitur 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.[/box]
Download Box
[box type="download"]DownloadCurabitur 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.[/box]
Info Box
[box type="info"]InfoCurabitur 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.[/box]
Bio Box
[box type="bio"]About MeCurabitur 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.[/box]
Normal Box
[box type="shadow"]Normal BoxCurabitur 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, eu lacinia nunc eleifend.[/box]
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).[learn_more caption="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. [/learn_more]
[learn_more caption="Content Open" state="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.
[button type="icon" icon="notice"]Learn More[/button]
[/learn_more]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.[tabs slidertype="top tabs"][tabcontainer] [tabtext]Tab One[/tabtext] [tabtext]Tab Two[/tabtext] [tabtext]Tab Three[/tabtext] [tabtext]Tab Four[/tabtext] [/tabcontainer] [tabcontent] [tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus. Sed egestas fringilla turpis at ullamcorper. Pellentesque adipiscing ornare cursus. Aliquam a nulla sapien. Sed facilisis ultricies purus, sed dapibus eros auctor vel. Phasellus et est nibh. Sed sagittis neque vel magna euismod ut vulputate sapien tempus. Fusce feugiat condimentum nulla. Aliquam quis convallis nunc. Nulla eu eros quam.[/tab] [tab]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. Mauris mauris ligula, feugiat eget dapibus nec, tincidunt in odio. Integer purus lacus, aliquam vitae consequat porta, blandit vel erat. Donec ut fermentum erat. Vivamus in augue et lectus dapibus faucibus ac in nisi. Nam porttitor justo sed sem dapibus luctus.[/tab] [tab]Integer a lorem vel nisl vestibulum feugiat. Nulla rhoncus tellus quis lorem ullamcorper tempor. Proin aliquam feugiat pharetra. Ut vel massa ut mauris bibendum euismod. Sed rutrum placerat lacus eget dignissim. Nullam rhoncus aliquet blandit. Fusce diam enim, aliquet eu cursus molestie, vulputate et turpis. Nunc aliquet elit eu eros ultricies lacinia et nec lorem. Duis ac dolor metus. Integer elit mauris, vehicula scelerisque bibendum eu, scelerisque at ligula. Vivamus vitae libero ipsum, ac volutpat lacus. Vivamus consequat nulla tellus, quis hendrerit tellus. Phasellus pretium elit pharetra dui placerat ut pulvinar velit auctor. Nulla facilisi. [/tab] [tab]Fusce iaculis elit consectetur ante porta sit amet accumsan lorem bibendum. Duis faucibus nisi ornare sem ultrices condimentum. In purus augue, suscipit vel laoreet ut, mattis in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis tortor sit amet risus ultrices consequat tempus nec nunc. Duis accumsan tortor ut odio ultrices ut tempus ipsum gravida. Maecenas porttitor leo a turpis luctus vitae placerat metus egestas. Nulla placerat ornare neque ut iaculis. Nam non ultricies purus. Nulla facilisi. Maecenas congue ante in dui lobortis posuere. Aenean tempor luctus laoreet. Nulla pulvinar urna at erat posuere eu auctor arcu rutrum. Donec pulvinar dictum leo vitae venenatis.[/tab] [/tabcontent] [/tabs]
[tabs slidertype="left tabs" auto="on"][tabcontainer] [tabtext]Tab One[/tabtext] [tabtext]Tab Two[/tabtext] [tabtext]Tab Three[/tabtext] [tabtext]Tab Four[/tabtext] [/tabcontainer] [tabcontent] [tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus. Duis cursus egestas hendrerit. Fusce luctus risus id elit malesuada ac sagittis magna tempus.[/tab] [tab]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..[/tab] [tab]Integer a lorem vel nisl vestibulum feugiat. Nulla rhoncus tellus quis lorem ullamcorper tempor. Proin aliquam feugiat pharetra. Ut vel massa ut mauris bibendum euismod. Sed rutrum placerat lacus eget dignissim. Nullam rhoncus aliquet blandit. Fusce diam enim, aliquet eu cursus molestie, vulputate et turpis.[/tab] [tab]Fusce iaculis elit consectetur ante porta sit amet accumsan lorem bibendum. Duis faucibus nisi ornare sem ultrices condimentum. In purus augue, suscipit vel laoreet ut, mattis in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis tortor sit amet risus ultrices consequat tempus nec nunc.[/tab] [/tabcontent] [/tabs]
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. [tabs slidertype="simple" auto="on" fx="slide"][tab]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.[/tab] [tab]Vivamus odio nunc, mattis non lobortis quis, semper vitae justo. Etiam venenatis lorem at sem tincidunt fermentum. Pellentesque luctus ipsum sit amet quam consequat id fermentum magna laoreet. Ut eros magna, placerat vehicula tincidunt nec, aliquet laoreet sapien. Nam eu nibh nec magna viverra aliquet non sit amet nulla. Morbi sed tempus nibh. Praesent venenatis vehicula sapien, nec convallis risus consectetur quis. Mauris et lectus turpis, eget aliquam magna. Sed sodales leo non tortor rhoncus consequat. Praesent in turpis eu neque fringilla pharetra. Vestibulum nec vehicula est. Etiam sodales pulvinar feugiat. Vivamus sodales ligula sed odio tincidunt vulputate. Fusce venenatis tempus massa, nec egestas tortor sollicitudin eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.[button type="icon" icon="notice"]Learn More[/button]
[/tab]
[tab]
[box type="warning"]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.[/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.[/box]
[box type="download"]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.[/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.[/box]
[box type="info"]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.[/box]
[/tab]
[/tabs]
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.[/box]
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. [tabs slidertype="images" auto="yes" autospeed="4000"][imagetab width="800" height="500"]http://www.elegantthemes.com/preview/TheProfessional/wp-content/uploads/2010/09/slider-1.jpg[/imagetab] [imagetab width="800" height="500"]http://www.elegantthemes.com/preview/TheProfessional/wp-content/uploads/2010/09/slider-2.jpg[/imagetab] [imagetab width="800" height="500"]http://www.elegantthemes.com/preview/TheProfessional/wp-content/uploads/2010/09/slider-3.jpg[/imagetab] [imagetab width="800" height="500"]http://www.elegantthemes.com/preview/TheProfessional/wp-content/uploads/2010/09/slider-4.jpg[/imagetab] [/tabs]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![tooltip text="Praesent malesuada, libero id sollicitudin dapibus, odio purus venenatis turpis, eu imperdiet turpis nunc in quam. Nam at ante quam, a accumsan erat. Nulla facilisi. Nulla nec sapien leo. Pellentesque rhoncus risus non elit tristique euismod. Nullam iaculis, neque vel mollis aliquam, leo augue posuere mauris."]Test Tooltip Text[/tooltip]
8. Social Media
Allowing your post to be promoted via the various social media networks has never been easier. Now you can add social media buttons to your posts quickly and easily using the various social media shortcodes provided.[digg]
[stumble]
[facebook]
[buzz]
[retweet]
[twitter name="elegantthemes"]
[feedburner name="elegantthemes"]
Schreibe einen Kommentar