Button shortcode: [button][/button]
A button to CSSIgniter A button to CSSIgniter A button to CSSIgniter
[demo]A button to CSSIgniter[/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
New window to Google New window to Google New window to Google
[demo]New window to Google[/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
Download now Download now Download now
[demo]Download now[/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
Refresh Refresh Refresh
[demo]Refresh[/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
Rounded Rounded Rounded
[demo]Rounded[/demo]
[hr height=”5px” color=”#104864″]
Box shortcode: [box][/box]
[hr height=”5px” color=”#104864″]
Grid shortcodes: [[row][/row]], [[column][/column]], [[col][/col]]
Two equal rows
[row][col desktop=”6″ tablet=”6″]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/col][col desktop=”6″ tablet=”6″]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/col][/row]
[demo][row][col desktop=”6″ tablet=”6″]Content[/col][col desktop=”6″ tablet=”6″]Content[/col][/row][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
Three equal rows
[row][col desktop=”4″]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/col][col desktop=”4″]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/col][col desktop=”4″]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/col][/row]
[demo][row][col desktop=”4″]Content[/col][col desktop=”4″]Content[/col][col desktop=”4″]Content[/col][/row][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
Two unequal rows on deskop, equal on tablets.
[row][column desktop=”4″ tablet=”6″]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/column][column desktop=”8″ tablet=”6″]
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
[/column][/row]
[demo][row][column desktop=”4″]Content[/column][column desktop=”8″]Content[/column][/row][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[hr height=”5px” color=”#104864″]
Headings shortcodes: [[h][/h]], [[h1][/h1]], [[h2][/h2]], [[h3][/h3]], [[h4][/h4]], [[h5][/h5]], [[h6][/h6]]
[h scheme=”green”]This is set from the options to be H2[/h][demo][h scheme=”green”]This is set from the options to be H2[/h][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[h level=”3″ icon=”fa-globe” fg_color=”maroon” spin]A maroon H3 with globe[/h][demo][h level=”3″ icon=”fa-globe” fg_color=”maroon” spin]A maroon H3 with globe[/h][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[h4 icon=”fa-lemon-o” scheme=”yellow”]An H4 with a lemon[/h4][demo][h4 icon=”fa-lemon-o” scheme=”yellow”]An H4 with a lemon[/h4][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[h3 icon=”fa-globe” border_width=”0 0 4px 0″ border_color=”#444444″]With a bottom border[/h3][demo][h3 icon=”fa-globe” border_width=”0 0 4px 0″ border_color=”#444444″]With a bottom border[/h3][/demo]
[hr height=”5px” color=”#104864″]
List shortcode: [[list][/list]]
You can replace those boring default HTML bullets by any icon you like. Just create a normal unordered (ul) list from within the WordPress editor, and wrap it in a [[list][/list]] shortcode.
[row][col desktop=”4″][list scheme=”blue”]
- Item 1
- Item 2
- Item 2-1
- Item 3
[/list][/col][col desktop=”4″][list scheme=”green” icon=”fa-check”]
- Item 1
- Item 2
- Item 2-1
- Item 3
[/list][/col][col desktop=”4″][list color=”red” icon=”fa-close”]
- Item 1
- Item 2
- Item 2-1
- Item 3
[/list][/col][/row]
[demo][list color=”red” icon=”fa-close”]
- Item 1
- Item 2
- Item 2-1
- Item 3
[/list][/demo]
[hr height=”5px” color=”#104864″]
Blockquote shortcode: [quote][/quote]
[demo]
[demo]
[hr height=”5px” color=”#104864″]
Separator shortcodes: separator , hr
[separator /][demo][separator /][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[hr type=”dotted” scheme=”red” width=”50%” center /][demo][hr type=”dotted” scheme=”red” width=”50%” center /][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[hr type=”dashed” scheme=”green” height=”10px” /][demo][hr type=”dashed” scheme=”green” height=”10px” /][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[hr type=”groove” scheme=”blue” height=”thick” width=”80%” /][demo][hr type=”groove” scheme=”blue” height=”thick” width=”80%” /][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[hr type=”ridge” /][demo][hr type=”ridge” /][/demo]
[hr height=”5px” color=”#104864″]
Tooltip shortcode: [tooltip][/tooltip]
Do you know what a CPUAdd a Tooltip Text is?
[demo]CPUAdd a Tooltip Text[/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
Just a tooltip on the top.Add a Tooltip Text
[demo]on the top.Add a Tooltip Text[/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
How about an always on, right, tooltip?Add a Tooltip Text
[demo]always on, right, tooltip?Add a Tooltip Text[/demo]
[hr height=”5px” color=”#104864″]
Map shortcodes: [[map][/map]] , [[googlemap][/googlemap]]
[map lat=”40.7828649″ lon=”-73.9653549″ zoom=”16″ /][demo][map lat=”40.7828649″ lon=”-73.9653549″ zoom=”16″ /][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]
[map lat=”40.7828649″ lon=”-73.9653549″ title=”New York” text=”Central Park” /][demo][map lat=”40.7828649″ lon=”-73.9653549″ title=”New York” text=”Central Park” /][/demo]
[hr height=”5px” color=”#104864″]
Slider shortcode: [[slider][/slider]] , [slide][/slide]
[slider]
[demo][slider]
[/slider][/demo][hr height=”5px” color=”#104864″]
Tabs shortcodes: [tabs][/tabs] , [tab][/tab]
[demo] [/demo]
[hr height=”5px” color=”#104864″]
Accordions shortcodes: [[accordion][/accordion]], [[accordion_tab][/accordion_tab]]
Accordions’ syntax and attributes are exactly the same like the tabs shortcode. Only the actual names of the shortcode change. That way, you can easily swap from tabs to accordions and back, without touching any of the attributes.
[accordion][accordion_tab title=”Tab 1″]Content 1[/accordion_tab][accordion_tab title=”Tab 2″]Content 2[/accordion_tab][/accordion][demo][accordion][accordion_tab title=”Tab 1″]Content 1[/accordion_tab][accordion_tab title=”Tab 2″]Content 2[/accordion_tab][/accordion][/demo]
[hr height=”5px” color=”#104864″]
Recent Comments