Supreme Shortcodes - WordPress Plugin

Documentation v.2.0






Shortcode builder includes many useful and beautiful shortcodes that makes your content creation even more easier
and it is loaded with 100s of Options with Amazing simple Point-and-Click.

Supreme Shortocdes makes your theme beautiful!

This plugin adds 100+ extra functionalities to your website. You can choose from static elements such as: Boxes, Responsive rows and columns, Lines and dividers to animated elements such as: 3D Buttons, Modals and Popovers or Toggles and Tabs. Pritty much anything needed for todays modern web presentation.

Supreme Team have made the Supreme Shortcodes Builder so useful that you will start loving it from the very instance you start using them.

Built on Twitter Bootstrap framework for a responsive design, gives you 100% accurate fitting on any screen resolution.

We aim to make WordPress plugins easy-to-use for each user.

+ Followed by "One Click" idea!
+ Completely un-branded
+ We've made it easier for you!

Compatibility

+ Twenty Eleven
+ Twenty Twelve
+ Twenty Thirteen
+ Twenty Fourteen
It also goes well with any other theme thanks to their unique id’s and classes!

Many options, colorpickers, dropdowns with selection, icon panel, search function and more is available in Supreme ShortCodes Builder Manager to help you create your desired element fast and easy. Shortcodes Manager is available in both WordPress Visual Editor and Text mode, and you can embed Shortcodes in Sidebar Widget, Excerpt.

Did we mentioned that all of the shortcodes are fully responsive?
Built on Twitter Bootstrap makes it 100% pixel perfect when it comes to different screen resolutions, operating systems and devices.
Customize your website with this wonderful plugin today!


Full List

  • Break Line
  • Horizontal line
  • Div Clear
  • Divider Dotted
  • Divider Dashed
  • Divider To Top
  • Divider Shadow
  • Button Small
  • Button Normal
  • Button Large
  • Read More Button
  • Popover on top
  • Popover on right
  • Popover on bottom
  • Popover on left
  • Modal window with primary button
  • Tabs
  • Toggle
  • Progress bar clean (4 colors)
  • Progress bar with stripes (4 colors)
  • Progress bar animated (4 colors)
  • Ordered List
  • Styled Tables
  • Pricing Tables ( Responsive )
  • Hosted Audio
  • Mixcloud Audio
  • Soundcloud Audio
  • HTML5 Video
  • Flash Video
  • YouTube Video
  • Sharing Buttons
  • Facebook Like button (3 styles)
  • Google+ button (3 styles)
  • Twitter button (3 styles)
  • Pinterest button (3 styles)
  • Facebook share button
  • Tumbler button (3 styles)
  • Digg button (3 styles)
  • LinkedIn button (3 styles)
  • Responsive row
  • Responsive columns (12)
  • Google map – Road map
  • Google map – Satellite
  • Google map – Hybrid
  • Google map – Terrain
  • Google docs
  • Google Trends
  • Google Charts – Pie
  • Google Charts – Area
  • Swiper Carousel
  • Container
  • Text Color
  • SVG Drawings
  • Icon Melon (1600+)
  • Vimeo Video
  • Dailymotion Video
  • Dropcap Light
  • Dropcap Light Circled
  • Dropcap Dark
  • Dropcap Dark Circled
  • Quote + Cite
  • Highlight (3 colors)
  • Label (5 colors)
  • Abbrevation
  • Log In button
  • Log Out button
  • Info box
  • Alert box
  • Success box
  • Error box
  • Callout box with the button
  • 400+ Font Awesome Icons
  • Social Icons with the link (30)
  • Tooltip on the top
  • Tooltip on the right
  • Tooltip on the bottom
  • Tooltip on the left
  • Google Charts – Bubble
  • Google Charts – Combo
  • Google Charts – Org
  • Google Charts – Geo
  • Google Charts – Bar
  • Unordered List – Success
  • Unordered List – Info
  • Unordered List – Warning
  • Unordered List – Star
  • Unordered List – Green Plus
  • Unordered List – Red Minus
  • Related Posts
  • Page Siblings (side navigation)
  • Page Children (side navigation)
  • Image Fancy Box
  • Inline Fancy Box
  • Iframe Fancy Box
  • Page Fancy Box
  • SWF Fancy Box
  • Contact Form Light
  • Contact Form Dark
  • Posts Carousel
  • Pages Carousel
  • Custom Post Types Carousel
  • Code
  • Section Color
  • Section Image
  • Section Parallax
  • Aniimated Elements (on hover, scroll and click)
  • Hover Buttons
  • Iconmelon
  • Accordion


SOURCES AND CREDITS


There are two options for installing the Supreme Shortcodes WordPress Plugin: either upload the zip file using the WordPress Plugin Uploader or FTP the unzipped plugin files to the wp-content/plugins folder on your server.


ADDING PLUGIN USING THE ADMINISTRATION PANELS

You can download Themes directly to your blog by using the AddNew Themes option in the Appearance sub-menu.
  1. Log in to the WordPress Administration Panels.
  2. Select the Plugins -> Add New
  3. Select Upload link.
  4. Click Choose File and locate the plugin package zip file that was included inside the download
  5. Click Install Now


ADDING PLUGIN MANUALLY (FTP)

To add a Plugin to your WordPress installation, follow these basic steps:
  1. Unzip the zip file that was included with the plugin download.
  2. Once unzipped, you will have a folder titled SupremeShortcodes - this is the plugin content
  3. Using FTP, upload the SupremeShortcodes folder to wp-content/plugins on your server
  4. Log into the WordPress admin panel
  5. Navigation to Plugins
  6. Under "Supreme Shortcodes WordPress Plugin" click activate

REQUIREMENTS

Supreme Shortcodes WordPress Plugin requires WordPress 3.6+


SOURCE

wordpress codex

With Supreme Shortcodes plugin it is possible to create, organize and customize any page easily. Page Snippets (Pre-Build Pages) makes your every pages Unique. We created all those snippets to show you that building exceptional pages can be really easy.

Use these Page Snippets as a base to start creating your awesome pages like About us, Galleries, Team, Contact, FAQ, Pricing, Process, History, and more with unlimited shortcode combinations.


Download Snippets!

About Us - Demo | Download

Shortcode combination: Flat 3D Botton Shortcodes, Google Charts Shortcode, Columns / Unorder list with Retina Icons, Font Awesome Icons 300+, Social Icons 30+, Video Embed (Vimeo, YouTube, DailyMotion, Hosted, HTML5, Flash), Popup Over Shortcode, Modal Shortcode, Carousel Posts, Pages, Custom Post Types ( Portfolio, Events, Milestones...) Slider Shortcode, Testimonials Shorcode and Higlight (3 Flat colors), Divider - Scrooll to To.p


About-Us-Page-Snippets-Supreme-Shortcodes


Meet The Team - Demo | Download

Shortcode combination: Side Navigation, Button, Horizontal Line, Callout Box, Font Awesome Icons, Row, Responsive Columns, Blue Highliht, Social Icons, Toggle, Contact Form, Progress Bars, Divider Top...

Meet-The-Team-Page-Supreme-Shortcodes


We Are Hiring - Demo | Download

Shortcode combination: Side Navigation, Button, Calout Boxes, Font Awesome Icons, Row, Responsive Collumns, Gray and Blue Higlights, Social Icons, Dashed Divider, Info Box, Divider Top...

We-Are-Hiring-Page-Supreme-Shortcodes


Services Page - Demo | Download

Shortcode combination: Side Navigation, Button, Dropcap, Callout Box, Divider Text Left, Google Chart, Ordered Lists, Progress Bars, Success Boxes, Divider Top...

Services-Page-Supreme-Shortcodes


F.A.Q. - Demo | Downlaod

Shortcodes combination: Row, Responsive Columns, Side Navigation, Button, Toogle, Tabs, Media/Video/Vimeo, Contact Form, Divider Top...

F.A.Q.-Page-Supreme-Shortcodes


Process Page - Demo | Download

Shortcodes combination: Row, Responsive Columns, Buttons, Tabs, Progress Bars, Boxes, Divider Top...

Process-Page-Supreme-Shortcodes


Pricing Page - Demo | Download

Shortcodes combination: Side Navigation, Row, responsive Columns, Styled Table, Pricing Tabels, Buttons, Horizontal Line, Divider Top...

Pricing-Page-Supreme-Shortcodes


History Page - Demo | Download

Shortcodes combination: Row, Responsive Columns, Button, Horizontal Line, Tabs, Read More Button, Toggles, Divider Top...

History-Page-Supreme-Shortcodes


Contact Page - Demo | Download

Shortcodes combination: Buttons, Colored Google Map, Row, Responsive Columns, Google Chart Geo, Font Awesome Retina Icons, Social Icons, Contact Form...

Contact-Us-Page-Supreme-Shortcodes


Each and Everything can be created using the Supreme Shortcodes Generator over and over again. We have made the Supreme Shortcodes Builder
so useful that you will start loving it from the very instance you start using them. Predefined Powerful 100+ Shortcodes have been included which will help you create
content in no time, so rich and incredible that your rivals are gonna envy you.

From a dropdown option in your edit page screen find that little colorful icon and simply select which shortcode to insert. This is how it looks in backend.


Supreme Shortcodes

NOTE : ALL OF THESE SHORTCODES WORK IN TEXT WIDGETS AS WELL! YAY!

Just copy and paste any shortcode in your text widget and place it on any sidebar or footer widget if you wish.
It's that simple! Embed Shortcodes anywhere with Supreme ShortCodes Builder!


Sections


Options


Twitter Bootstrap

We present to you the Supreme Options Panel. Now, you can choose whether to include a sertain script and style or not.
Suitable if your theme's already using for example Twitter Bootstrap v.2.3.2. So why load it twice?


Load yes or no:

Supreme Shortcodes


Colors

Another great new option is that you can now easily change colors for various elements/shortocdes. We understand the need for adjusting design and colors
so that fits in your theme design. With WordPress default color picker, choose desired colors for multiple elements.


Changable Colors for:

Supreme Shortcodes


Custom CSS

If you still find some elements in conflict with your theme and don't want to digg into code, use this option. Write your own CSS rule and we promice,
it won't be overwritten whith the new plugin update. This option is also useful and it applies for you theme style. You can overwrite your theme's style
sheet if you put the CSS rule "!important" to the desired element.

Supreme Shortcodes


Page snippets

Page snippets tab is for easy preview and download all available Page Snippets on the Supreme Shortcodes website.
Now you have an easy access to the list instead of going to another browser tab, search etc..

Supreme Shortcodes


Video Tutorials

Video tutorials tab is also for easy access to our YouTube channel. Since we regulary update and upload our video tutorials, don't worry about staying behind,
all of the new and old videos will be visible in this tab of our Supreme Options Panel.

Supreme Shortcodes

Animate items when scrolled into view, hovered, or clicked using Animate.css.

Animated allows for animating items on a page. There are many different options to choose from with some starting hidden and others ending hidden.
Animations can be triggered when an item on the page has the mouse hovered over it, when the user scrolls the page so that the item is visible, or when something is clicked with the mouse.

See Demo Animations here.

Supreme Shortcodes

OPTIONS

Animation Types

  • Attention Seekers: bounce, flash, pulse, shake, swing, tada, wiggle, wobble
  • Bouncing Entrances: bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceInUpExpand
  • Bouncing Exits: bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp
  • Expand: expandDown, expandLeft, expandRight, expandUp
  • Fading Entrances: fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig
  • Fading Exits: fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig
  • Flippers: flip, flipInDownBackward, flipInDownForward, flipInLeftBackward, flipInLeftForward, flipInRightBackward, flipInRightForward, flipInUpBackward, flipInUpForward, flipInX, flipInY, flipOutX, flipOutY
  • Lightspeed: lightSpeedIn, lightSpeedOut
  • Repeating: beating, blinking, floating, pulsating, throbbing, tossing
  • Rotating Entrances: rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
  • Rotating Exits: rotateDown, rotateLeft, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rotateRight, rotateUp
  • Slide: slideDown, slideDownReturn, slideLeft, slideLeftReturn, slideRight, slideRightReturn, slideUp, slideUpReturn
  • Specials: bombLeftOut, bombRightOut, foolishIn, foolishOut, hinge, holeOut, magic, pileDrive, rollIn, rollOut, springUp
  • Static: openDownLeft, openDownLeftOut, openDownLeftReturn, openDownRight, openDownRightOut, openDownRightReturn, openUpLeft, openUpLeftOut, openUpLeftReturn, openUpRight, openUpRightOut, openUpRightReturn
  • Swinging: swingInDownBackward, swingInDownForward, swingInLeftBackward, swingInLeftForward, swingInRightBackward, swingInRightForward, swingInUpBackward, swingInUpForward
  • Tin: tinDownIn, tinDownOut, tinLeftIn, tinLeftOut, tinRightIn, tinRightOut, tinUpIn, tinUpOut
  • Zoom: puffIn, puffOut, swap, swashIn, swashOut, twisterInDown, twisterInUp, vanishIn, vanishOut, zoomInBounce, zoomInGrow, zoomInShrink

Trigger

  • scroll - triggered when the user scrolls their browser window
  • hover - triggered when the user’s mouse hovers over the item
  • click - triggered when the user clicks on an item

Percent

  • Animate when given % of item is in view. This only applies to the trigger.


+ GET THE CODE
[st_animated type='fadeInLeft' trigger='scroll' precent='20']Animated element goes here[/st_animated]
[st_animated type='bounce' trigger='hover' precent='']Animated element goes here[/st_animated]
[st_animated type='fadeOut' trigger='click' precent='']Animated element goes here[/st_animated]


LIVE DEMO

Selections



Boxes

Boxes are a great way to grab your visitor’s eye and direct them to important content within the post. The Supreme Shortcode pack comes with 4 box variations, all of which stem from the [st_ 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.

Supreme Boxes with 4 Types

OPTIONS

 

Info

Info Box


+ GET THE CODE
[st_box title="Info Title" type="info"]Info Text[/st_box]

LIVE DEMO

Warning

Warning Box


+ GET THE CODE
[st_box title="Warning title" type="warning"]Warning Text[/st_box]

LIVE DEMO

Success

Success Box


+ GET THE CODE
[st_box title="Success Title" type="success"]Success Text[/st_box]

LIVE DEMO

Alert

Alert Box


+ GET THE CODE
[st_box title="Alert Title" type="error"]Alert Text[/st_box]

LIVE DEMO

NOTE: 12 Different Sizes if you combine them with Columns. For example:

+ GET THE CODE
      [st_row]
      [st_column6]
      [st_box title="Alert Title" type="error"]Alert Text[/st_box]
      [/st_column6][st_column6]
      [st_box title="Alert Title" type="success"]Alert Text[/st_box]
      [/st_column6]
      [/st_row]
    


Callouts

OPTIONS

Callouts


+ GET THE CODE
[st_callout title="Title" button_text="Button text" link="Button link"]Text[/st_callout]

LIVE DEMO

Now there’s really no need to purchase and overload your WordPress website with another plugin! Supreme Shortcodes introduce a bran new shortcode for your collection, Icon Boxes!
Options and colors are unlimited! You can choose the position of the icon (left, right, top or bottom) or even the shape of the icon holder. Weather you choose circle or square, your icon box will look amazing.
But what’s more exciting, you are not limited to only title and little text inside your icon box! Content can hold another shortcode, any text formatting, image and so much more!

Back End

Icon Boxes


OPTIONS

 

Front End output

Icon Boxes


+ GET THE CODE
      [st_icon_box background='#ffffff' opacity='0.1' border_color='#eeeeee' icon='heart' icon_color='#ffffff' icon_bg='#222222' icon_position='icon-top']
      

Lorem Ipsum

Pellentesque egoists sed tortor egestas pretium. Nam eget fermentum tellus, et fermentum diam. Mauris hendrerit, diam non commodo laoreet, est elit volutpat mauris.[st_break_line][st_break_line][st_hover_fancy_icon_button text_color="#ffffff" link="" background="#db233f" size="large" target="_self" icon="arrow-right" icon_color="#ffffff" icon_background="#333333" icon_position="ss-icon-left" icon_separator="ss-sep-diagonal" border_radius="0px"]Button[/st_hover_fancy_icon_button]

[/st_icon_box]

LIVE DEMO


Links & Buttons are very important when creating page content. With the Supreme Social Theme you’ll have a large variety of sizes and unlimited colours at your disposal. Now you can create beautiful buttons on the fly using the Buttons Shortcode.

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.


Selections





OPTIONS


3 Different Sizes

Supreme-Shortcodes-Buttons-Size

When you are in "Edit Post/Page" screen in WordPress admin, selecting the Insert Button shortcode, you'll see popup window that looks like this above.


Front End

Buttons Sizes


+ GET THE CODE
Large
[st_button text_color="#ffffff" link="#" background="#3498db" size="large" target="_self"]Large[/st_button]

Normal
[st_button text_color="#ffffff" link="" background="#3498db" size="btn" target="_self"]Normal[/st_button]

Small
[st_button text_color="#ffffff" link="#" background="#3498db" size="small" target="_self"]Small[/st_button]


LIVE DEMO

Unlimited Custom Color Schemes for Bottom and Text

Don’t forget about colors! Most of Supreme Shortcodes can be used with predefined color codes. Or you can also choose your own by using Supreme Color Picker.

Supreme-Shortcodes-Buttons-Background-Color

 

Front End

Buttons Colours


+ GET THE CODE
[st_button size="btn" link="#" background="#f1c40f" text_color="#ffffff"]Yellow[/st_button]

LIVE DEMO

Link Target Methods

Supreme-Shortcodes-Buttons-Target


+ GET THE CODE
_self
[st_button text_color="#ffffff" link="http://www.supremefactory.net" background="#3498db" size="btn" target="_self"]_self[/st_button]
_blank
[st_button text_color="#ffffff" link="http://www.supremefactory.net" background="#3498db" size="btn" target="_blank"]_blank[/st_button]
_parent
[st_button text_color="#ffffff" link="http://www.supremefactory.net" background="#3498db" size="btn" target="_parent"]_parent[/st_button]
_top
[st_button text_color="#ffffff" link="http://www.supremefactory.net" background="#0053b0" size="btn" target="_top"]_top[/st_button]

LIVE DEMO

With Icons

Choose from 400+ Font Awesome Icons. Live search integrated for easier go-trough + live preview of available icons.

Supreme-Shortcodes-Buttons-Target


+ GET THE CODE
[st_button size=”btn” link=”#” background=”#2ecc71″ text_color=”#ffffff” icon=”android”] App[/st_button]

Or the old fashion way, means, put icon shortcode inside button shortcode like this:

[st_button size=”btn” link=”#” background=”#2ecc71″ text_color=”#ffffff”][st_icon name=’android’ size=’icon-1′ color=”] App[/st_button]

LIVE DEMO




Read more buttons are generally used at the end of a block of teaser information (often on the home page). These buttons are flat and simple, but oversized to attract visitor attention.

OPTIONS

Supreme-Shortcodes-Buttons-Read-More


Front End

Read More Button


+ GET THE CODE
[st_button_more href="#"]Read More[/st_button_more]

LIVE DEMO



Allowing your Post/Page to be promoted via the various Social Networks has never been easier. Now you can add Social Media Buttons to your Posts/Peges quickly and easily using the various Social Media Shortcodes like Facebook, Twitter, Google Plus, Pinterest, Linkedin…

Sections




Facebook Buttons

OPTIONS

Supreme-Shortcodes-Share-Buttons-Facebook-1


+ GET THE CODE

Facebook Like 1

[st_fblike url="" style="standard" showfaces="false" width="" verb="like" font="arial"]

Facebook Like 2

[st_fblike url="" style="button_count" showfaces="true" width="" verb="recommend" font="arial"]

Facebook Like 3

[st_fblike url="" style="box_count" showfaces="false" width="" verb="like" font="arial"]

Facebook Share

[st_fbshare url=""]

LIVE DEMO


Twitter Buttons

OPTIONS

Supreme-Shortcodes-Share-Buttons-Twitter


+ GET THE CODE
Vertical
[st_twitter style="vertical" url="" source="@supremefactory" related="@puresoulmusic" text="" lang="en"]
Horizontal
[st_twitter style="horizontal" url="" source="" related="@supremefactory" text="@puresoulmusic" lang="en"]

LIVE DEMO


Google Plus Buttons

OPTIONS

3 Styles

Supreme-Shortcodes-Share-Buttons-Google-Plus-2

+ GET THE CODE
Inline Style
[st_gplus style="inline" size="small"]
Bubble Style
[st_gplus style="bubble" size="small"]
Style None
[st_gplus style="none" size="small"]

4 Sizes

Supreme-Shortcodes-Share-Buttons-Google-Plus


+ GET THE CODE
Small
[st_gplus style="inline" size="small"]
Medium
[st_gplus style="inline" size="medium"]
Standard
[st_gplus style="inline" size="standard"]
Tall
[st_gplus style="inline" size="tall"]

LIVE DEMO


Linkedin Buttons

OPTIONS

3 Styles

Supreme-Shortcodes-Share-Buttons-Linkedin

+ GET THE CODE
Style None
[st_linkedin_share url="" style="none"]
Style Top
[st_linkedin_share url="" style="top"]
Style Right
[st_linkedin_share url="" style="right"]

LIVE DEMO


Pinterest Pin Buttons

OPTIONS

3 Styles

Supreme-Shortcodes-Share-Buttons-Pinterest

+ GET THE CODE
Abode Style
[st_pinterest_pin style="above"]
Beside Style
[st_pinterest_pin style="beside"]
Style None
[st_pinterest_pin style="none"]

LIVE DEMO


Tumblr Buttons

OPTIONS

4 Styles

Supreme-Shortcodes-Share-Buttons-Tumblr

+ GET THE CODE
Plus Style
[st_tumblr style="plus"]
Standard Style
[st_tumblr style="standard"]
Icon + Text Style
[st_tumblr style="icon_text"]
Icon Style
[st_tumblr style="icon"]

LIVE DEMO


Digg Buttons

OPTIONS

4 Styles

Supreme-Shortcodes-Share-Buttons-Digg

+ GET THE CODE
Medium Style
[st_digg style="medium" title="" link=""]
Large Style
[st_digg style="large" title="" link=""]
Compact Style
[st_digg style="compact" title="" link=""]
Icon style
[st_digg style="icon" title="" link=""]

LIVE DEMO



OPTIONS

Supreme-Shortcodes-Buttons-Login-+-Logout-Buttons

+ GET THE CODE
[st_loginout text_col="#ffffff" background="#3498db" size="n" login_msg="Log In" logout_msg="Log Out"]

LIVE DEMO



OPTIONS



BORDERED BUTTON


Front End

Effect is visible on hover.


Back End
+ GET THE CODE

Thick

[st_hover_bordered_button text_color=”#ffffff” link=”#” background=”#226fbe” size=”normal” target=”_self” icon=”” border_radius=”0px” border_type=”ss-thick”]Border thick[/st_hover_bordered_button]

Dashed

[st_hover_bordered_button text_color=”#ffffff” link=”#” background=”#226fbe” size=”normal” target=”_self” icon=”” border_radius=”0px” border_type=”ss-dashed”]Border dashed[/st_hover_bordered_button]

Dotted

[st_hover_bordered_button text_color=”#ffffff” link=”#” background=”#226fbe” size=”normal” target=”_self” icon=”” border_radius=”0px” border_type=”ss-dotted”]Border dotted[/st_hover_bordered_button]

Double

[st_hover_bordered_button text_color=”#ffffff” link=”#” background=”#226fbe” size=”normal” target=”_self” icon=”” border_radius=”0px” border_type=”ss-double”]Border double[/st_hover_bordered_button]

LIVE DEMO


FILL IN BUTTON


Front End

Back End
+ GET THE CODE

Simple fill in

[st_hover_fill_button text_color=”#333333″ link=”#” background=”#ffffff” hover_background=”#333333″ size=”jumbo” target=”_self” icon=”bell” border_radius=”0px” hover_direction=”ss-expand-c”]Simple fill in[/st_hover_fill_button]

Top to bottom

[st_hover_fill_button text_color=”#333333″ link=”#” background=”#ffffff” hover_background=”#333333″ size=”jumbo” target=”_self” icon=”bell” border_radius=”0px” hover_direction=”ss-expand-c”]Top to bottom[/st_hover_fill_button]

Left to right

[st_hover_fill_button text_color=”#333333″ link=”#” background=”#ffffff” hover_background=”#333333″ size=”jumbo” target=”_self” icon=”bell” border_radius=”0px” hover_direction=”ss-expand-c”]Left to right[/st_hover_fill_button]

Expand horizontal

[st_hover_fill_button text_color=”#333333″ link=”#” background=”#ffffff” hover_background=”#333333″ size=”jumbo” target=”_self” icon=”bell” border_radius=”0px” hover_direction=”ss-expand-c”]Expand horizontal[/st_hover_fill_button]

Expand vertical

[st_hover_fill_button text_color=”#333333″ link=”#” background=”#ffffff” hover_background=”#333333″ size=”jumbo” target=”_self” icon=”bell” border_radius=”0px” hover_direction=”ss-expand-c”]Expand vertical[/st_hover_fill_button]

Expand to corners

[st_hover_fill_button text_color=”#333333″ link=”#” background=”#ffffff” hover_background=”#333333″ size=”jumbo” target=”_self” icon=”bell” border_radius=”0px” hover_direction=”ss-expand-c”]Expand to corners[/st_hover_fill_button]

LIVE DEMO

FANCY ICON


Front End





Back End
+ GET THE CODE

No separator

[st_hover_fancy_icon_button text_color=”#ffffff” link=”” background=”#fcad26″ size=”normal” target=”_self” icon=”beer” icon_background=”#D89119″ icon_position=”ss-icon-left” icon_separator=”ss-sep-none” border_radius=”0px”]Fancy Icon[/st_hover_fancy_icon_button]

Transparent 2 pixels separator

[st_hover_fancy_icon_button text_color=”#ffffff” link=”” background=”#fcad26″ size=”normal” target=”_self” icon=”beer” icon_background=”#D89119″ icon_position=”ss-icon-left” icon_separator=”ss-sep-transparent” border_radius=”0px”]Fancy Icon[/st_hover_fancy_icon_button]

Arrow separator

[st_hover_fancy_icon_button text_color=”#ffffff” link=”” background=”#fcad26″ size=”normal” target=”_self” icon=”beer” icon_background=”#D89119″ icon_position=”ss-icon-left” icon_separator=”ss-sep-arrow” border_radius=”0px”]Fancy Icon[/st_hover_fancy_icon_button]

Diagonal separator

[st_hover_fancy_icon_button text_color=”#ffffff” link=”” background=”#fcad26″ size=”normal” target=”_self” icon=”beer” icon_background=”#D89119″ icon_position=”ss-icon-left” icon_separator=”ss-sep-diagonal” border_radius=”0px”]Fancy Icon[/st_hover_fancy_icon_button]

LIVE DEMO

ARROWS


Front End

Back End
+ GET THE CODE

[st_hover_arrows_button text_color="#333333" link="#" background="" size="small" target="_self" icon="fa fa-" border_radius="500px" arrow_direction="fly-out-right"]Arrows[/st_hover_arrows_button]

LIVE DEMO

ICON ON HOVER


Front End

Back End
+ GET THE CODE

[st_hover_icon_button text_color="#ffffff" link="#" background="#971bd1" size="small" target="_self" icon="apple" icon_direction="top-to-bottom" border_radius="0px"]Icon on hover[/st_hover_icon_button]

LIVE DEMO

With the Supreme Swiper, fully responsive Carousel Slider you can easily insert awesome Image, Content, Posts, Pages,Custom Post Types (Events, Milestones, Portfolio) Slideshows everywhere.

You can display unlimited carousel sliders per page and specify a category to start with. Carousel slider width is completely flexible since it occupies columns to be more width flexible. It means you can display other contents beside carousel as well.

Supreme Shortcodes - Swiper Front End


OPTIONS

Supreme SHortcodes - Swiper Back End

+ GET THE CODE
Posts
[st_swiper posts='post' number='8']
Pages
[st_swiper posts='page' number='8']
Custom Post type
[st_posts_carousel posts='your-custom-post-type' number='8' display_title='no']

LIVE DEMO

You can now set your own Contact Forms everywhere and use our built in captchas and akismet spam filtering! We also have an autoresponder that you can setup and use. Perfectly styled Contact Forms which are very easy to use, and it comes with 2 colours.

OPTIONS

Supreme Shortcodes - Contact Form Light and Dark


+ GET THE CODE
Dark Contact Forma Shortcode
[st_contact_form_dark email='[email protected]']
Light Contact Form Shortcode
[st_contact_form_light email='[email protected]']

LIVE DEMO

Great to easily organize you content in the Page/Post with Break Lines, Horizontal Lines, 4 Dividers, and Clear Div option.


Selections


Break Line

Let your content breathe, and add extra space before + after the content.

[st_break_line]

Clear Floated Divs
[st_clear]

Horizontal Line

It is pretty much self explanatory. 
Insert horisontal line wherever on the website and its width will be 100% of the element (column) that surrounding it.

[st_horisontal_line]

LIVE DEMO
Dotted Divider

divider-dotted

[st_divider_dotted]

LIVE DEMO
Dashed Divider

divider-dashed

[st_divider_dashed]

LIVE DEMO
Shadow Divider

divider-shadow

[st_divider_shadow]

LIVE DEMO
Divider Top

divider-top

[st_divider_top]

LIVE DEMO
Divider Text

Divider Text

OPTIONS
[st_divider_text position='center' text='Our Portfolio']

LIVE DEMO

Selections





Lists

Unordered Lists With Icons

Emphasize your unrdered lists with custom icons such as the often-needed, success, info, green plus, red minus, warning, star.

OPTIONS

Success

Supreme-Lists-Shortcode-Success

+ GET THE CODE
[st_unordered listicon="success"]
	
  • success
[/st_unordered]

LIVE DEMO

Info

Supreme-Lists-Shortcode-Info

+ GET THE CODE
[st_unordered listicon="info"]
	
  • info
[/st_unordered]

LIVE DEMO

Green Plus

Supreme-Lists-Shortcode-Green-Plus

+ GET THE CODE
[st_unordered listicon="green plus"]
	
  • green plus
[/st_unordered]

LIVE DEMO

Red Minus

Supreme-Lists-Shortcode-Red-Minus

+ GET THE CODE
[st_unordered listicon="red minus"]
	
  • red minus
[/st_unordered]

LIVE DEMO

Warning

Supreme-Lists-Shortcode-Warning

+ GET THE CODE
[st_unordered listicon="warning"]
	
  • warning
[/st_unordered]

LIVE DEMO

Star

Supreme-Lists-Shortcode-Star

+ GET THE CODE
[st_unordered listicon="star"]
	
  • star
[/st_unordered]

LIVE DEMO

Ordered Lists With Numbers work of course, too!

</pre>

+ GET THE CODE
[st_ordered]
    
  1. First list item
  2. Second list item
  3. Third list item
  4. Fourth list item
  5. Fifth list item
  6. Sixth list item
  7. Seventh list item
  8. Eith list item
  9. Ninth list item
[/st_ordered]

LIVE DEMO




Styled Tables

Back End
+ GET THE CODE
[st_table cols=”Item||Info||Features||Price” data=”Total Price=$79||Item #2||Item Data||Item Feature||$10||Item #3||Item Data||Item Feature||$19||Item #4||Item Data||Item Feature||$50″]

LIVE DEMO



Pricing Tables

Back End
+ GET THE CODE
      [st_pricing_table columns='4'] [st_pricing_column title='STANDARD'] [st_price_info cost='$19.95/month'][/st_price_info]
      
  • [st_icon name='clock-o' size='icon-1' color=''] 24/7 Tech Support
  • [st_icon name='rocket' size='icon-1' color=''] Advanced Options
  • [st_icon name='hdd-o' size='icon-1' color=''] 100GB Storage
  • [st_icon name='cloud-upload' size='icon-1' color=''] 1GB Bandwidth
  • Another Feature Here
  • [st_button text_color='#fff' link='' background='#F1C40F' size='n']Join Now[/st_button]
[/st_pricing_column] [st_pricing_column title='BUSINESS'] [st_price_info cost='$59.99/month'][/st_price_info]
  • [st_icon name='clock-o' size='icon-1' color=''] 24/7 Tech Support
  • [st_icon name='rocket' size='icon-1' color=''] Advanced Options
  • [st_icon name='hdd-o' size='icon-1' color=''] 100GB Storage
  • [st_icon name='cloud-upload' size='icon-1' color=''] 1GB Bandwidth
  • Another Feature Here
  • [st_button text_color='#fff' link='' background='#2ECC71' size='n']Join Now[/st_button]
  [/st_pricing_column] [st_pricing_column title='PROFESSIONAL' highlight='true'] [st_price_info cost='$79.99/month'][/st_price_info]
  • [st_icon name='clock-o' size='icon-1' color=''] 24/7 Tech Support
  • [st_icon name='rocket' size='icon-1' color=''] Advanced Options
  • [st_icon name='hdd-o' size='icon-1' color=''] 100GB Storage
  • [st_icon name='cloud-upload' size='icon-1' color=''] 1GB Bandwidth
  • Another Feature Here
  • [st_button text_color='#fff' link='' background='#3498DB' size='n']Join Now[/st_button]
[/st_pricing_column] [st_pricing_column title='ENTERPRISE'] [st_price_info cost='$99.99/month'][/st_price_info]
  • [st_icon name='clock-o' size='icon-1' color=''] 24/7 Tech Support
  • [st_icon name='rocket' size='icon-1' color=''] Advanced Options
  • [st_icon name='hdd-o' size='icon-1' color=''] 100GB Storage
  • [st_icon name='cloud-upload' size='icon-1' color=''] 1GB Bandwidth
  • Another Feature Here
  • [st_button text_color='#fff' link='' background='#E74C3C' size='n']Call Us[/st_button]
[/st_pricing_column] [/st_pricing_table]

LIVE DEMO

Selections





Google Maps

Make Custom Google Maps Look with simple Shortcode and add it anywhere. Use nearly all Features of the Google Maps API including unlimited color variations, and 4 Map Types Road, Satellite, Hybrid, Terrain.

OPTIONS

* To convert an address into latitude & longitude please use this converter: Convert address to latitude and longotude.


Supreme-Shortcodes-Google-Maps


Road Maps

Supreme Shortcodes - Google Maps Road


+ GET THE CODE
[st_gmap latitude="40.709467" longitute="-74.008842" html="Colorful Road Map" zoom="13" maptype="ROADMAP" color="#03b2f7"]

LIVE DEMO
Satellite Maps

Supreme Shortcodes - Google Maps Satellite


+ GET THE CODE
[st_gmap latitude="40.709467" longitute="-74.008842" html="Satellite" zoom="10" maptype="SATELLITE" color="#03b2f7"]

LIVE DEMO
Hybrid Maps

Supreme Shortcodes - Google Maps Hybrid


+ GET THE CODE
[st_gmap latitude="40.709467" longitute="-74.008842" html="Hybrid" zoom="9" maptype="HYBRID" color="#03b2f7"]

LIVE DEMO
Terrain Maps

Supreme Shortcodes - Google Maps Terrain


+ GET THE CODE
[st_gmap latitude="40.709467" longitute="-74.008842" html="Terrain" zoom="13" maptype="TERRAIN" color="#03b2f7"]

LIVE DEMO



Google Trends

OPTIONS

Supreme-Shortcodes-Google-Trends


Supreme-Shortcodes-Google-Trends Front End


+ GET THE CODE
[st_trends width="680" height="330" query="facebook, google, youtube, pinterest, twitter, linkedin" geo="US"]

LIVE DEMO



Google Doc

Embed Documents, Presentations, Spreadsheets, Forms, Drawings, PDF, and more.

OPTIONS

Supreme-Shortcodes-Google-Docs


+ GET THE CODE
[st_gdocs width='680' height='400' url='https://docs.google.com/spreadsheet/ccc?key=0Aq8ebcJ6p6DjdFdZaGFoemFIVUJCbDNIeUJVTTJQQ3c&usp=sharing']

LIVE DEMO
Google Document

Supreme Shortcodes - Google Doc


Google Presentation

Supreme Shortcodes - Google Presentation


Google Spreadsheet

Supreme Shortcodes - Google Spreadsheet


Google Form

Supreme Shortcodes - Google Form


Google Drawing

Supreme Shortcodes - Google Drawing


LIVE DEMO



Google Charts

Supreme Google Chart Shortcodes let you embed interactive charts for displaying data from the Google Charts API. Embed 7 Google Chart Types: Pie, Bar, Area, Geo, Combo, Org, Bubble.


Pie Shortcode
OPTIONS

Supreme-Shortcodes-Google-Chart-Pie-

Pie Shortcode

+ GET THE CODE
[st_chart_pie title="1" data="('Task', 'Hours per Day'),('Work', 11),('Sleep', 7),('Eat', 2),('Commute', 3)"]

LIVE DEMO
Bar Shortcode
OPTIONS

Supreme-Shortcodes-Google-Chart-Bar

Bar Shortcode

+ GET THE CODE
[st_chart_bar title="Company Performance" data="('Year', 'Sales', 'Expenses'),('2004', 1000, 400),('2005', 1170, 460),('2006', 660, 1120),('2007', 1030, 540)" vaxis="Year" haxis="Amount"]

LIVE DEMO
 
Area Shortcode
OPTIONS

Supreme-Shortcodes-Google-Chart-Area

Area Shortcode

+ GET THE CODE
[st_chart_area title="Company Performance" data="('Year', 'Sales', 'Expenses'),('2004', 1000, 400),('2005', 1170, 460),('2006', 660, 1120),('2007', 1030, 540)" vaxis="Year" haxis="Amount"]

LIVE DEMO

Geo Shortcode
OPTIONS

Supreme-Shortcodes-Google-Chart-Geo

Geo Shortcode

+ GET THE CODE
[st_chart_geo title="Popularity" data="('Country', 'Popularity'),('Germany', 200),('United States', 300),('Brazil', 400),('Canada', 500),('France', 600),('RU', 700)" primary="#ffff00" secondary="#ebe5d8"]

LIVE DEMO

Combo Shortcode
OPTIONS

Supreme-Shortcodes-Google-Chart-Combo

Combo Shortcode

+ GET THE CODE
[st_chart_combo title="Monthly Coffee Production by Country" data="('Month','Bolivia','Ecuador','Madagascar','Papua New Guinea','Rwanda','Average'), ('2004/05',165,938,522,998,450,614.6), ('2005/06',135,1120,599,1268,288,682), ('2006/07',157,1167,587,807,397,623), ('2007/08',139,1110,615,968,215,609.4), ('2008/09',136,691,629,1026,366,569.6)" vaxis="Cups" haxis="Month" series="5"]

LIVE DEMO

Org Shortcode
OPTIONS

Supreme-Shortcodes-Google-Chart-Org

Org Shortcode

+ GET THE CODE
[st_chart_org data="('Name','Manager','Tooltip'),('Mike',null,'The President'),( 'Jim', 'Mike','The President'),('Alice', 'Mike','The President'), ('Alice2', 'Mike','The President'),('Bob','Jim','The President'),('Carol', 'Bob','The President'),('Carol2', 'Bob','The President')"]

LIVE DEMO

Bubble Shortcode
OPTIONS

Supreme-Shortcodes-Google-Chart-Bubble

Bubble Shortcode

+ GET THE CODE
[st_chart_bubble title="Popularity" data="('ID', 'X', 'Y', 'Temperature'),('',80,167,120),('',79,136,130),('',78,184,50),('',72,278,230),('',81,200,210),('',72,170,100),('',68,477,80)" primary="#ffff00" secondary="#ff0000"]

LIVE DEMO

Selection





Images/Gallery

OPTIONS

Supreme-Shortcodes-Fancybox-Image

Image Gallery Shortcode

+ GET THE CODE
[st_fancyboxImages href='http://www.demo.supremethe.me/supremesocial/wp-content/uploads/2013/08/007-920x613.jpg' thumb='http://www.demo.supremethe.me/supremesocial/wp-content/uploads/2013/08/007-920x613.jpg' group='1' title='1']

LIVE DEMO


Inline

OPTIONS

Supreme Shortcodes - Fancybox inline

Inline Shortcode

+ GET THE CODE
[st_fancyboxInline title='Link title' href='xoxo' content_title='Content Title' content='Write some text']

LIVE DEMO


iFrame

OPTIONS

Supreme-Shortcodes-Fancybox-iFrame


+ GET THE CODE
[st_fancyboxIframe title='Open Web Site in iFrame with Fancybox' href='http://www.supremefactory.net']

LIVE DEMO


Page

OPTIONS

Supreme-Shortcodes-Fancybox-Page


+ GET THE CODE
[st_fancyboxPage title='Open the Page in Fancybox' href='http://www.demo.supremethe.me/supremesocial/blog/']      

LIVE DEMO


SWF

OPTIONS

Supreme-Shortcodes-Fancybox-SWF

+ GET THE CODE
[st_fancyboxSwf title='Open SWF/Flash in Fancybox' href='http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf']

LIVE DEMO

Easily add Video add Audio from YouTube, Vimeo, Flash, SoundCloud, Mixcloud, and Self Hosted files to your content with our video shortcodes. We have included a large amount of options such as autoplay, HD, dimensions, controls, and much much more!

Seletion





YouTube

OPTIONS

Supreme-Shortcodes-Media-Video-YouTube


+ GET THE CODE
[st_video title='YouTube' type='youtube' width='680' height='383' src='I-vNiw2M1nA']

LIVE DEMO


Vimeo


+ GET THE CODE
[st_video title='Vimeo' type='vimeo' width='680' height='382' src='67956835']

LIVE DEMO


DailyMotion


+ GET THE CODE
[st_video title='DailyMotion' type='dailymotion' width='680' height='383' src='xyclod_despicable-me-2-3d-theatrical-trailer_shortfilms']

LIVE DEMO


HTML5

OPTIONS

Supreme-Shortcodes-Media-Video-HTML


+ GET THE CODE
[st_video title='HTML5 Video' type='html5' width='680' height='372' poster='http://2.s3.envato.com/files/49647471/Timelapse%20Clouds%20Over%20Treetops%20Preview%20Image%20NEW.jpg' mp4='http://1.s3.envato.com/h264-video-previews/3905406.mp4' webm='' ogg='']

LIVE DEMO


Flash

OPTIONS

Supreme-Shortcodes-Media-Video-Flash


+ GET THE CODE
[st_video title='FLASH' type='flash' width='680' height='383' src='http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf']

LIVE DEMO


SoundCloud

OPTIONS

Supreme-Shortcodes-Media-Audio-SoundCloud


+ GET THE CODE
[st_soundcloud color='' src='https://soundcloud.com/puresoul/puresoul-x-step-mini-av-mix']

LIVE DEMO


Mixcloud

OPTIONS

Supreme-Shortcodes-Media-Audio-Mixcloud


+ GET THE CODE
[st_mixcloud width='' height='' src='http://www.mixcloud.com/puresoul/puresoul-x-step-mini-av-mix/']

LIVE DEMO


Hosted Audio

OPTIONS

Supreme-Shortcodes-Media-Audio-Hosted


+ GET THE CODE
[st_audio title='Hain Teny' src='http://www.hainteny.com/wp-content/uploads/2013/music/Hain%20Teny%20-%20Repent%20Yourself%20-%20Audited%20Beats%20Remix.mp3']

LIVE DEMO

Responsive Rows

Supreme Theme adapts to many screen sizes thanks to Responsive Webdesign Techniques. Now you can easily browse your site using smartphones, tablets, laptops & desktop computers.

Supreme Responsive Shortcode lets you create responsive media/images/videos in no time! That means the image will flex to fit its parent container. Of course you can enable Lightbox/Fancybox aswell. Try resizing your browser to see responsive images in action.

Use External Media and Embed Shortcode is for including content (audio, video etc) from an external services supporting oEmbed format. We additionally process all embedded elements to make them fully responsive. You can embed media inside any columns layout. All media are fully responsive so they always best fit to any content structure.

+ GET THE CODE
[st_row][/st_row]

Columns

With Supreme Columns Shortcodes it is possible to create any type of layout. You can choose between twelve columns or create your own layout by using a combination of the columns. You can even nest column shortcodes inside of each other.

Sometimes it can get frustrating trying to organize content via the WordPress text editor. With the Columns Shortcodes, you can break down your content into any number of 12 layouts giving variety and hierarchy to your post. Possibilities with Columns combinations are unlimited. You can play with Factorials 1-12, but here are simple examples.

Supreme SHortcodes - Collumns

+ GET THE CODE
[st_row][st_column2]Your content goes here[/st_column2][st_column2]Your content goes here[/st_column2][st_column2]Your content goes here[/st_column2][st_column2]Your content goes here[/st_column2][st_column2]Your content goes here[/st_column2][st_column2]Your content goes here[/st_column2][st_column2]Your content goes here[/st_column2][/st_row]

Irregular Grid Combination

For example it is possible to split a page into 3 columns with one being twice the size of the others.

Irregular Grid Combination

+ GET THE CODE
[st_row][st_column3]Your content goes here[/st_column3][st_column6]Your content goes here[/st_column6][st_column3]Your content goes here[/st_column3][/st_row]

LIVE DEMO

Supreme Theme includes 30+ Retina Social Icons and 400+ Ultra-Sharp Font Awesome Icons. Retina Icons can be used separately or as a part of other page components.
Now easily add any of our 400+ built in icons to your posts and pages with our new icon shortcodes. Or if you prefer, you can even upload your own.
Our Icon Shortcodes come in three flavors, single icons, icon teasers and icon banners.

Socia lIcons BackEnd

Social Icons

Social Icons List


+ GET THE CODE
[st_social_icon name='social_facebook' href='http://www.facebook.com']

LIVE DEMO


Font Awesome Icons


OPTIONS

400+ Font Awesome Icons and user friendly Supreme Icon Builder with Live Preview

Supreme-Theme-Shortcode-Icons-2


Change between 6 Different Sizes for each Icon


Unlimited Color Variations with Color Picker

Unlimited Color Variations with Color Picker

+ GET THE CODE
[st_icon name='compass' size='icon-1' color='#444444' align='center']

LIVE DEMO


Icon Melon



OPTIONS


+ GET THE CODE
[st_icon_melon name='danger-death-delete-destroy-sull' size='icon-3' color='#242424' type='circle' background='#ffffff' border_color='#383838' align='ss-none']

LIVE DEMO See all 1600+ icons
SECTIONS

If you want to have the same look as on our Home Pages, use Full width Page template and Supreme Shortcode named: Section Image.
Image can be used as fixed to the page, it can scroll with page or you can apply famous parallax effect.
If you want that parallax effect, simply select Image Type: parallax

There are two options:

OPTIONS - IMAGE
Sections
OPTIONS - COLOR
Sections
+ GET THE CODE
[st_section_image image_id='YOU IMAGE ID' bg_color='#ffffff' type='fixed' position='left top' repeat='repeat']Content goes here[/st_section_image]
[st_section_color color='#e74c3c']Content goes here[/st_section_color]

LIVE DEMO

OUTPUT:

You can see the live demo Here

NOTE: Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.


CONTAINER

This shortcode is intended for narrowing/following the default website responsive width of the main content.
It is used to center the content on all of our demo pages (mainly Home Page variations – can be found in main navigation dropdown) which use Page Template named: 100% Full width.
In Container shortcode you can put rows and columns for even more responsive behaviour if needed.

OPTIONS:

There are no options for this shortcode.

+ GET THE CODE
[st_container]Content goes here[/st_container]

LIVE DEMO

OUTPUT:

Container

This useful shortcode allows you to create unlimited amount of skill meters with 4 different colors, 2 types, and animated option.

You can also use this shortcode to show some progresses.

OPTIONS

4 Flat Colors

Supreme-Shortcodes-Progress-Bars-1


+ GET THE CODE
[st_progress_bar width="80%" style="info" striped="striped" active="yes"]

LIVE DEMO
2 Types: No Stripes, Striped

Supreme-Shortcodes-Progress-Bars-2


+ GET THE CODE
[st_progress_bar width="80%" style="success" striped="no_stripes" active="no"]

LIVE DEMO
Active Animamtion

Supreme-Shortcodes-Progress-Bars-3


+ GET THE CODE
[st_progress_bar width="80%" style="danger" striped="striped" active="yes"]

LIVE DEMO

Tabs

Tabs are a nice way to group related content. The reader will be able to flip through the pages by clicking on the relevant tab. Create Tabbed Content with the click
of a button using the Supreme Tab Shortcode. Tabs have a fluid width, which means that they can adjust to any page size.

For the first time you can take advantage of tabs with dynamic contents. It means Tabs now can link up to the news section of your website and each tab will update
itself once you add news to your website, but you can add any Supreme Shortcode inside the Tabs.


OPTIONS

Supreme-Shortcodes-Tabs


+ GET THE CODE
      [st_tabs]
      [st_tab title="Tab Title 1"]Tab 1 Content[/st_tab]
      [st_tab title="Tab Title 2"]Tab 2 Content[/st_tab]
      [st_tab title="Tab Title 3"]Tab 3 Content[/st_tab]
      [st_tab title="Tab Title 4"]Tab 4 Content[/st_tab]
      [st_tab title="Tab Title 5"]Tab 5 Content[/st_tab]
      [/st_tabs]

LIVE DEMO


Toggles

Creating Toggle content like those seen below couldn’t be easier. Now you can create Toggled content on the fly using the Toggle Shortcode.
Any content can be added within the toggled div, and you can even add other Supreme Shortcodes. The Toggle Shortcode has a fluid width, meaning it can adapt to any size page
so you can put the Toggles in the different Columns.

OPTIONS

Supreme-Shortcodes-Toggle

NOTE: You can put another shortcode inside Toggle shortcode, for example: Tabs.


+ GET THE CODE
      [st_toggle]
      [st_panel title=”Title 1″ state=”closed”]Content 1[/st_panel]
      [st_panel title=”Title 2″ state=”closed”]Content 2[/st_panel]
      [/st_toggle]
    

LIVE DEMO


Accordion

Usefull if you wish to have only one panel opened at the time. Preview: It looks exactly the same as Toggle shortcode.
Color for header/white icon holder background is changable trough Supreme Admin panel.

OPTIONS
      [st_accordion]
      [st_acc_panel title="Title 1" state="closed"]Content 1[/st_acc_panel]
      [st_acc_panel title="Title 2" state="closed"]Content 2[/st_acc_panel]
      [st_acc_panel title="Title 3" state="open"]Content 3[/st_acc_panel]
      [/st_accordion]
    

LIVE DEMO

Slelections




Tooltip

Tooltips are a great way to provide popout tips for your readers. You can change the colors, sizes, and alignment with Supreme Tooltips.
These beautiful jQuery Tooltips can be added to any element, making it a great way to add additional info to your post without adding clutter.
Add beautiful tooltips to any element by wrapping it in a [st_ tooltip ] Shortcode, even combining with text, images, and even other shortcodes!

OPTIONS

Supreme-Shortcodes-Tooltip-1


+ GET THE CODE

TOP

[st_tooltip type="top" tooltip_text="And This is Supreme Tooltip"]Hover to see Top Tooltip[/st_tooltip]

RIGHT

[st_tooltip type="right" tooltip_text="And This is Supreme Tooltip"]Hover to see Right Tooltip[/st_tooltip]

BOTTOM

[st_tooltip type="bottom" tooltip_text="And This is Supreme Tooltip"]Hover to see Bottom Tooltip[/st_tooltip]

LEFT

[st_tooltip type="left" tooltip_text="And This is Supreme Tooltip"]Hover to see Left Tooltip[/st_tooltip]

LIVE DEMO


Popover

OPTIONS

Supreme-Shortcodes-Popover

Popover

+ GET THE CODE

TOP

[st_popover type="top" popover_title="Top Popover" text="This is a Supreme Top Popover"]Click for Top Popover[/st_popover]

RIGHT

[st_popover type="right" popover_title="Right Popover" text="This is a Supreme Right Popover"]Click for Right Popover[/st_popover]

BOTTOM

[st_popover type="bottom" popover_title="Bottom Popover" text="This is a Supreme Bottom Popover"]Click for Bottom Popover[/st_popover]

LEFT

[st_popover type="left" popover_title="Left Popover" text="This is a Supreme Left Popover"]Click for Left Popover[/st_popover]


LIVE DEMO


Modal

Add any HTML content to Modal such as Images, Video, Lists... We included Facebook Style Modal Popups with Corporate Ipsum text.

OPTIONS

Supreme-Shortcodes-Modal

Modal
+ GET THE CODE
[st_modal modal_link="Modal Button title" primary_text="Button Text" primary_link="#" modal_title="Title"]Content[/st_modal]


LIVE DEMO

Selections





Dropcaps

Dropcaps are a subtle typographic technique that can easily add flare and improve the hierarchy of your post copy and a nice way to lead the reader into your paragraphs.
Simply wrap a little at the beginning of your paragraph with the Dropcap Shortcode and it will become nested within the body content.
You can use them throughout your content but they are usually used on the first letter of each paragraph. We have four different styles to choose from:
light, light circled, dark, dark circled.


Light Dropcap

light

+ GET THE CODE
[st_dropcap type='light']L[/st_dropcap]

LIVE DEMO

Light Circled Dropcap

light_circled

+ GET THE CODE
[st_dropcap type='light_circled']L[/st_dropcap]

LIVE DEMO

Dark Dropcap

dark

+ GET THE CODE
[st_dropcap type='dark']L[/st_dropcap]

LIVE DEMO

Dark Circled Dropcap

dark

+ GET THE CODE
[st_dropcap type='dark_circled']l[/st_dropcap]

LIVE DEMO



Quotes

Supreme Block/PullQuotes & Testimonials shortcodes offer an easy way for you to cine an author or fellow blogger.

Testimonials are an important way to gain the trust of your visitors. With easy to use Testimonial Shortcode, you can enter your Testimonials once and then display
them throughout your site in endless ways. 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. Now you have an easy way to add styled testimonials to your posts and pages.

OPTIONS

Supreme-Shortcodes-Quotes

+ GET THE CODE
[st_quote author="Use Testimonials and let your Client speak"]Praesent non dolor in ante tincidunt viverra vitae ut massa. Nulla justo, 
Praesent non dolor in ante tincidunt viverra vitae ut massa. Nulla justo lorem, tincidunt quis pretium hendrerit, adipiscing quis[/st_quote]

LIVE DEMO



Highlights

+ GET THE CODE

yellow highlight

gray highlight

blue highlight

+ GET THE CODE
[st_highlight background_color="#196d9e" text_color="#f2f2f2"]Highlighted text[/st_highlight]

LIVE DEMO



Label

Default Label

default label

+ GET THE CODE
[st_label type='default']This is Default Label[/st_label]

New Label

new label

+ GET THE CODE
[st_label type='success']This is New Label[/st_label]
  

Warning Label

warning label

+ GET THE CODE
[st_label type='warning']This is Warning Label[/st_label]

Important label

important label

+ GET THE CODE
[st_label type='important']This is Important Label[/st_label]

Notice Label

notice label

+ GET THE CODE
[st_label type='notice']This is Notice Label[/st_label]

LIVE DEMO



Abbreviation

OPTIONS

Supreme-Shortcodes-Abbreviation

+ GET THE CODE
[st_abbr title="The abbreviated text."]The full, unabbreviated, text.[/st_abbr]

LIVE DEMO



Text Color

OPTIONS

Suitable for dark backgrounds. For example: if you use our "Section Image" or "Section Color" shortcode, and the background you've choose is dark, you will
probablly need to color your text in lighter color.


BACKEND:

Supreme Shortcodes Text Color - Front End


Output:

Supreme Shortcodes Text Color - Front End

+ GET THE CODE
[st_text_color color='#3498db']Colored Text goes here[/st_text_color]


LIVE DEMO

Supreme SVG Drawings will always draw the shape of and iMac, iPad or iPhone, depending on what you choose when generating shortcode.
You only need to specify the final image that will be visible when drawing is finished. PSD files for all avainable final images can be found at the support center.
This shortocde is available in both, Visual Composer “Add Element” and stand alone version.


+ GET THE CODE

iMac

[st_svg_drawing type=’imac’ image_id=’your-image-ID’ color=’#e74c3c’]

iPad

[st_svg_drawing type=’ipad’ image_id=’your-image-ID’ color=’#f1c40f’]

iPhone

[st_svg_drawing type=’iphone’ image_id=’your-image-ID’ color=’#00a8ff’]

LIVE DEMO

We do our best to make your life easier with the support. Your feedback is valuable for us. We would love to hear from you.
If you have any suggestion, positive comments or comment of suggestion, please feel free to contact us and we'll get in touch as soon as possible.