Below are examples of all of the styles and effects you can add to your site with the Shortecodes on Estyle

Small Buttons

Use buttons to add style to your links.

[button_round color=”blue” url=””] Button Text [/button_round]

[button_round color=”orange” url=”#”] Button Text [/button_round]

[button_round color=”green” url=”#”] Button Text [/button_round]

[button_round color=”purple” url=”#”] Button Text [/button_round]

[button_round color=”red” url=”#”] Button Text [/button_round]

[button_round color=”black” url=”#”] Button Text [/button_round]

[button_round color=”pink” url=”#”] Button Text [/button_round]

[button_round color=”grey” url=”#”] Button Text [/button_round]

[button_round color=”light” url=”#”] Button Text [/button_round]

[button_round color=”glossy-grey” url=””] Button Text [/button_round]

[button_round color=”glossy-light” url=”#”] Button Text [/button_round]

Big Buttons

Use buttons to add style to your links.

[big_button color=”blue” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”orange” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”green” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”purple” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”red” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”black” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”pink” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”grey” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”light” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”glossy-grey” url=”” desc=”Button Description Here”] Button Text [/big_button]

[big_button color=”glossy-light” url=”” desc=”Button Description Here”] Button Text [/big_button]

Icon Buttons

Use these icon buttons to make your links more relevant to what the button says.

[button_icon icon=”accept” url=””] Button Text [/button_icon]

[button_icon icon=”add” url=””] Button Text [/button_icon]

[button_icon icon=”anchor” url=””] Button Text [/button_icon]

[button_icon icon=”clock” url=””] Button Text [/button_icon]

[button_icon icon=”cancel” url=””] Button Text [/button_icon]

[button_icon icon=”coins” url=””] Button Text [/button_icon]

[button_icon icon=”delete” url=””] Button Text [/button_icon]

[button_icon icon=”heart” url=””] Button Text [/button_icon]

[button_icon icon=”hourglass” url=””] Button Text [/button_icon]

[button_icon icon=”house” url=””] Button Text [/button_icon]

[button_icon icon=”info” url=””] Button Text [/button_icon]

[button_icon icon=”lightbulb” url=””] Button Text [/button_icon]

[button_icon icon=”lightning” url=””] Button Text [/button_icon]

[button_icon icon=”lock” url=””] Button Text [/button_icon]

[button_icon icon=”palette” url=””] Button Text [/button_icon]

[button_icon icon=”refresh” url=””] Button Text [/button_icon]

[button_icon icon=”shuffle” url=””] Button Text [/button_icon]

[button_icon icon=”asterisk” url=””] Button Text [/button_icon]

[button_icon icon=”bell” url=””] Button Text [/button_icon]

[button_icon icon=”bomb” url=””] Button Text [/button_icon]

[button_icon icon=”briefcase” url=””] Button Text [/button_icon]

[button_icon icon=”cake” url=””] Button Text [/button_icon]

[button_icon icon=”bricks” url=””] Button Text [/button_icon]

[button_icon icon=”color” url=””] Button Text [/button_icon]

[button_icon icon=”disconnect” url=””] Button Text [/button_icon]

[button_icon icon=”door” url=””] Button Text [/button_icon]

[button_icon icon=”emoticon” url=””] Button Text [/button_icon]

[button_icon icon=”rss” url=””] Button Text [/button_icon]

[button_icon icon=”cart” url=””] Button Text [/button_icon]

Text Highlights

Use text highlighting to accent important text in any paragraph.

[highlight color=”blue”] Blue Highlight [/highlight]

[highlight color=”green”] Green Highlight [/highlight]

[highlight color=”pink”] Pink Highlight [/highlight]

[highlight color=”grey”] Grey Highlight [/highlight]

[highlight color=”black”] Black Highlight [/highlight]

[highlight color=”orange”] Orange Highlight [/highlight]

[highlight color=”purple”] Purple Highlight [/highlight]

[highlight color=”red”] Red Highlight [/highlight]

[highlight color=”light”] Light Highlight [/highlight]

[highlight color=”yellow”] Yellow Highlight [/highlight]

[one_half]

Toggle Box

Toggle boxes are great for having large amounts of content in limited space.
[toggle state=”closed” title=”This is a Toggle Box“] Aliquam iaculis elementum justo. Morbi ut porta lectus. Integer nulla velit, mollis id condimentum et, gravida vel ipsum. Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non.[/toggle]

[/one_half] [one_half last=”last”]

Tooltips

Have something to say but limited in space? Tooltips are perfect for that!

[tooltip color=”blue” text=”This is a tooltip. Choose from many color options.”] Blue Tooltip [/tooltip]
[tooltip color=”orange” text=”This is a tooltip. Choose from many color options.”] Orange Tooltip [/tooltip]
[tooltip color=”green” text=”This is a tooltip. Choose from many color options.”] Green Tooltip [/tooltip]
[tooltip color=”purple” text=”This is a tooltip. Choose from many color options.”] Purple Tooltip [/tooltip]
[tooltip color=”pink” text=”This is a tooltip. Choose from many color options.”] Pink Tooltip [/tooltip]
[tooltip color=”red” text=”This is a tooltip. Choose from many color options.”] Red Tooltip [/tooltip]
[tooltip color=”blue” text=”This is a tooltip. Choose from many color options.”] Grey Tooltip [/tooltip]
[tooltip color=”light” text=”This is a tooltip. Choose from many color options.”] Light Tooltip [/tooltip]
[tooltip color=”black” text=”This is a tooltip. Choose from many color options.”] Black Tooltip [/tooltip] [/one_half]

[clear]

Tabbed Content

Use tabs to display different items in an easy to manage interface.

[tabbed tabs=”Tab 1 | Tab 2| Tab 3″] [tab] Aliquam iaculis elementum justo. Morbi ut porta lectus. Integer nulla velit, mollis id condimentum et, gravida vel ipsum. Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor. Duis dolor velit, rhoncus quis gravida ac, pellentesque non est. Praesent accumsan, felis eget adipiscing bibendum, est arcu rutrum diam, a fringilla tortor leo scelerisque lectus. Fusce sit amet mattis nunc. Duis facilisis sodales mi sed eleifend. Cras lacus purus, vestibulum nec sollicitudin id, scelerisque a sem. Proin at felis leo. Vivamus ac tellus massa, eu hendrerit orci. Sed adipiscing arcu in est eleifend non lacinia metus blandit. Cras eu nisl sit amet urna sodales ullamcorper eu ac sapie [/tab] [tab] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor t [/tab] [tab] Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor. Duis dolor velit, rhoncus quis gravida ac, pellentesque non est. Praesent accumsan, felis eget adipiscing bibendum, est arcu rutrum diam, a fringilla tortor leo scelerisque lectus. Fusce sit amet mattis nunc. Duis facilisis sodales mi sed eleifend. Cras lacus purus, vestibulum nec sollicitudin id, scelerisque a sem. Proin at felis leo. Vivamus ac tellus massa, eu hendrerit orci. Sed adipiscing arcu in est eleifend non lacinia metus blandit. Cras eu nisl sit amet urna sodales ullamcorper eu ac sapie [/tab] [/tabbed]

[clear]

[image_slider width=”610″ height=”350″] [slide]http://estyle.showmysite.info/wp-content/uploads/2011/07/1.jpg[/slide] [slide]http://estyle.showmysite.info/wp-content/uploads/2011/07/2.jpg[/slide] [slide] http://estyle.showmysite.info/wp-content/uploads/2011/07/3.jpg [/slide][/image_slider]
[clear]

Notification Boxes

Notification boxes are great for when you have something important to address. These can be closed by clicking on the x.
[notification type=”standard”] This is a Notification Box. Awesome! [/notification]

[notification type=”success”] This is a Notification Box. Awesome! [/notification]

[notification type=”error”] This is a Notification Box. Awesome! [/notification]

[notification type=”info”] This is a Notification Box. Awesome! [/notification]

[notification type=”alert”] This is a Notification Box. Awesome! [/notification]

[clear]

Embed YouTube and Vimeo

Embed YouTube and Vimeo videos with one click and the clip ID to the video.

[youtube clip_id=”hbLgszfXTAY”]

[clear]

Drop Caps

[dropcap] Q[/dropcap] aecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor

[dropcap] V[/dropcap] el justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor

[clear]

Columns

These columns will work in any width page or post.

Half Page Columns
[one_half] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_half] [one_half last=”last”] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_half]

One Third
[one_third]Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_third] [one_third]Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_third] [one_third last=”last”]Duis dolor velit, rhoncus quis gravida ac, pellentesque non est. Praesent accumsan, felis eget adipiscing bibendum, est arcu rutrum diam, a fringilla tortor leo scelerisque lectus. Fusce sit amet mattis nunc. Duis facilisis sodales mi sed eleifend. Cras lacus purus, vestibulum nec sollicitudin id, scelerisque a sem. Proin at felis leo. Vivamus ac tellus massa, eu hendrerit orci. [/one_third]

One Fourth

[one_fourth] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_fourth] [one_fourth] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_fourth] [one_fourth] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_fourth] [one_fourth last=”last”] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/one_fourth]

Three fourths and one fourth

[three_fourths] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. Integer mattis blandit enim, nec porttitor ipsum egestas id. Suspendisse sapien sem, imperdiet tincidunt auctor non, facilisis fermentum neque. Quisque molestie tempus porttitor [/three_fourths] [one_fourth last=”last”] Maecenas vel justo quis nulla tempus blandit. Vestibulum mauris ipsum, tincidunt vel imperdiet quis, convallis sit amet ligula. [/one_fourth]