Shortcodes

[box icon=”fa-info”]Download the CSSIgniter Shortcodes plugin from the WordPress plugin repository. Read the full documentation here.[/box]

Button shortcode: [[button][/button]]

[button url=”https://www.cssigniter.com” size=”large”]A button to CSSIgniter[/button] [button url=”https://www.cssigniter.com” size=”large” scheme=”red”]A button to CSSIgniter[/button] [button url=”https://www.cssigniter.com” size=”large” scheme=”yellow”]A button to CSSIgniter[/button]
[demo][button url=”https://www.cssigniter.com” size=”large”]A button to CSSIgniter[/button][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[button url=”http://www.google.com” target=”_blank”]New window to Google[/button] [button url=”http://www.google.com” target=”_blank” scheme=”red”]New window to Google[/button] [button url=”http://www.google.com” target=”_blank” scheme=”yellow”]New window to Google[/button]
[demo][button url=”http://www.google.com” target=”_blank” scheme=”red”]New window to Google[/button][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[button size=”small” scheme=”pink” border_color=”#c9054f” border_width=”2px” icon=”fa-download”]Download now[/button] [button size=”small” scheme=”yellow” border_color=”#e5d35b” border_width=”2px” icon=”fa-download”]Download now[/button] [button size=”small” scheme=”blue” border_color=”#0e76b8″ border_width=”2px” icon=”fa-download”]Download now[/button]
[demo][button size=”small” scheme=”pink” border_color=”#c9054f” border_width=”2px” icon=”fa-download”]Download now[/button][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[button scheme=”yellow” fg_color=”rgb(10, 20, 30)” icon=”fa-refresh” spin]Refresh[/button] [button scheme=”green” fg_color=”rgb(10, 20, 30)” icon=”fa-refresh” spin]Refresh[/button] [button scheme=”red” fg_color=”rgb(10, 20, 30)” icon=”fa-refresh” spin]Refresh[/button]
[demo][button scheme=”green” fg_color=”rgb(10, 20, 30)” icon=”fa-refresh” spin]Refresh[/button][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[button icon=”fa-spinner” corners=”5px” spin]Rounded[/button] [button icon=”fa-spinner” corners=”5px” scheme=”red” spin]Rounded[/button] [button icon=”fa-spinner” corners=”5px” scheme=”yellow” spin]Rounded[/button]
[demo][button icon=”fa-spinner” corners=”5px” spin]Rounded[/button][/demo]
[hr height=”5px” color=”#104864″]

Box shortcode: [[box][/box]]

[box]Just a box with some content in it.[/box][demo][box]Just a box with some content in it.[/box][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[box scheme=”red”]A red box[/box][demo][box scheme=”red”]A red box[/box][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[box scheme=”red” border_color=”#000000″ border_width=”thick” icon=”fa-download”]With a black border and icon[/box][demo][box scheme=”red” border_color=”#000000″ border_width=”thick” icon=”fa-download”]With a black border and icon[/box][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[box scheme=”green” fg_color=”rgb(255,255,255)” icon=”fa-refresh” spin]Custom foreground color[/box][demo][box scheme=”green” fg_color=”rgb(255, 255, 255)” icon=”fa-refresh” spin]Custom foreground color[/box][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[box icon=”fa-spinner” corners=”3px” spin]Rounded corners on a spinning icon.[/box][demo][box icon=”fa-spinner” corners=”20px” spin]Rounded corners on a spinning icon.[/box][/demo]
[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]]

[quote title=”Albert Einstein”]Try not to become a man of success, but rather try to become a man of value.[/quote]
[demo][quote title=”Albert Einstein”]Try not to become a man of success, but rather try to become a man of value.[/quote][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

[quote title=”Albert Einstein” scheme=”green” fg_color=”#ffffff”]Try not to become a man of success, but rather try to become a man of value.[/quote]
[demo][quote title=”Albert Einstein” scheme=”green” fg_color=”#ffffff”]Try not to become a man of success, but rather try to become a man of value.[/quote][/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 [tooltip tip=”Central Processing Unit”]CPU[/tooltip] is?
[demo][tooltip tip=”Central Processing Unit”]CPU[/tooltip][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

Just a tooltip [tooltip tip=”I’m on top!” position=”top”]on the top.[/tooltip]
[demo][tooltip tip=”I’m on top!” position=”top”]on the top.[/tooltip][/demo][hr height=”1px” color=”rgba(0,0,0,0.2)”]

How about an [tooltip tip=”Cool!” position=”right” light alwayson]always on, right, tooltip?[/tooltip]
[demo][tooltip tip=”Cool!” position=”right” light alwayson]always on, right, tooltip?[/tooltip][/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][slide][/slide][slide][/slide][slide][/slide][/slider]

[demo][slider][slide]Content 1[/slide][slide]Content 2[/slide][slide]Content 3[/slide][/slider][/demo]
[hr height=”5px” color=”#104864″]

Tabs shortcodes: [[tabs][/tabs]] , [[tab][/tab]]

[tabs][tab title=”Tab 1″]Content 1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam.
[/tab][tab title=”Tab 2″]Content 2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam.
[/tab][/tabs][demo][tabs][tab title=”Tab 1″]Content 1[/tab][tab title=”Tab 2″]Content 2[/tab][/tabs][/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″]

[box icon=”fa-info”]Download the CSSIgniter Shortcodes plugin from the WordPress plugin repository. Read the full documentation here.[/box]

107 comments

  1. Заказать купленный диплом, не выходя из дома.
    Легальный способ купить диплом, без заморочек.
    Купить диплом с гарантией качества, важная информация.
    Почему выгодно купить диплом, подробности.
    Где купить диплом без проблем, на проверенных ресурсах.
    Купить диплом по выгодной цене, важные моменты.
    Дипломы на заказ по лучшим ценам, спешите.
    Почему стоит купить диплом, наши преимущества.
    Как быстро купить диплом, подробности на сайте.
    Покупка диплома: безопасность и качество, гарантированный результат.
    Почему стоит купить диплом у нас, гарантированное качество.
    Легальная покупка дипломов, без рисков.
    Купить диплом без обмана, подробности у нас.
    Дипломы на всех условиях, лучшие предложения.
    Как купить дипломы онлайн, безопасность на первом месте.
    Почему стоит купить диплом здесь и сейчас, подробности на сайте.
    Официальная покупка диплома, подробности здесь.
    Почему стоит заказать диплом на нашем сайте, подробности у нас.
    купить диплом http://www.7arusak-diploms.com .

  2. Приобрести диплом без лишних хлопот, не выходя из дома.
    Легальный способ купить диплом, узнайте сейчас.
    Какой диплом купить, проверенные варианты.
    Почему выгодно купить диплом, подробности.
    Где купить диплом без проблем, на проверенных ресурсах.
    Лучшие предложения по покупке диплома, секреты выбора.
    Купить диплом срочно и недорого, подробности на сайте.
    Скрытая покупка дипломов, важная информация.
    Как быстро купить диплом, подробности на сайте.
    Купить диплом срочно и законно, гарантированный результат.
    Официальные документы для покупки, лучшие цены.
    Как купить диплом срочно, без рисков.
    Почему стоит заказать диплом, подробности у нас.
    Дипломы на всех условиях, подробности на сайте.
    Купить диплом без риска, безопасность на первом месте.
    Почему стоит купить диплом здесь и сейчас, интересные варианты.
    Заказать диплом онлайн без проблем, важные детали.
    Как купить диплом безопасно и быстро, безопасность на первом месте.
    купить диплом http://7arusak-diploms.com/ .

Leave a Reply

Your email address will not be published. Required fields are marked *