Q: What are the available colors that I can use for the color parameters?

A: You can use the following colors:

• black
• blue
• gray
• green
• orange
• red
• violet
• yellow

Usage

Here is the syntax for each of the shortcodes, along with an example. In addition to the parameters listed below, each shortcode can accept a „class“ parameter, allowing you to give any element a unique CSS class.

Required parameters are marked with an asterisk.

Accordion

Shortcodes: accordion, accordion_item

Accordion Item Parameters:

• title*: The title of the accordion item.

Example:

[accordion]
   [accordion_item title="Accordion Item 1 Title"]
      Accordion item 1 content goes here.
   [/accordion_item]
   [accordion_item title="Accordion Item 2 Title"]
      Accordion item 2 content goes here.
   [/accordion_item]
   [accordion_item title="Accordion Item 3 Title"]
      Accordion item 3 content goes here.
   [/accordion_item]
[/accordion]

Alert

Shortcode: alert

Parameters:

• color: The alert box color.
• icon: The alert box icon.

Example:

[alert color="red" icon="exclamation-circle"]
    Alert text goes here.
[/alert]

Box

Shortcode: box

Parameters:

• title: The title of the box.

Example:

[box title="Box Title"]
    Box text goes here.
[/alert]

Button

Shortcode: button

Parameters:

• color: The button color.
• rel: The button rel attribute, i.e. nofollow
• target: The button target, i.e. _blank to open the link in a new window.
• title: The button title attribute (tooltip).
• url*: The button URL.

Example:

[button color="red" url="http://domain.com"]Click Me![/button]

Call-to-action

Shortcode: call_to_action

Parameters:

• button_color: The call-to-action button color.
• button_icon: The call-to-action button icon.
• button_icon_position: The call-to-action button icon position (left/right).
• button_text: The call-to-action button text.
• button_url: The call-to-action button URL.
• color: The call-to-action box color.
• layout: The call-to-action box layout style (horizontal/vertical)

  If the horizontal layout style is chosen, the call-to-action will be displayed in two columns, with the button to the right of the call-to-action text. If the vertical layout style is chosen, the call-to-action button will be displayed below the call-to-action text.

Example:

[call_to_action color="red" button_text="Go Now!" button_url="http://domain.com" button_color="black"]
    Call-to-action text goes here.
[/call_to_action]

Clear floats

Shortcode: clear_floats

Example:

[clear_floats]

Columns

Shortcodes: columns, column

Column Parameters:

• width: The column width.

Here is the list of available column widths:

• one-half
• one-third
• two-thirds
• one-fourth
• three-fourths
• one-fifth
• two-fifths
• three-fifths
• four-fifths

Make sure that the total width of your columns makes up one whole.

Unlike many other shortcode plugins, you do not need to use any type of „last“ indicator on the last column. This plugin is smart enough to figure that out for you.

Example:

[columns]
   [column width="one-third"]
      Column 1 text goes here.
   [/column]
   [column width="one-third"]
      Column 2 text goes here.
   [/column]
   [column width="one-third"]
      Column 3 text goes here.
   [/column]
[/columns]

Highlight

Shortcode: highlight

Parameters:

• color: The color of the highlight.
• text_color: The color of the highlighted text.

Example:

[highlight color="yellow" text_color="red"]Highlighted text content goes here.[/highlight]

Icon

Shortcode: icon

Parameters:

• color: The icon color.
• id*: The Font Awesome icon ID, i.e. „soccer-ball“.

  See the list of all available icons. Note that you do not need to include the „fa-“ prefix in your icon ID.

Example:

[icon id="soccer-ball" color="orange"]

Tabs

Shortcodes: tabs, tab

Tab Parameters:

• title*: The tab title.

Example:

[tabs]
   [tab title="Tab 1 Title"]
      Tab 1 text goes here.
   [/tab]
   [tab title="Tab 2 Title"]
      Tab 2 text goes here.
   [/tab]
   [tab title="Tab 3 Title"]
      Tab 3 text goes here.
   [/tab]
[/tabs]

Toggle

Shortcode: toggle

Parameters:

• title*: The toggle title.

Example:

[toggle title="Toggle 1 Title"]
   Toggle 1 text goes here.
[/toggle]

[toggle title="Toggle 2 Title"]
   Toggle 2 text goes here.
[/toggle]

[toggle title="Toggle 3 Title"]
   Toggle 3 text goes here.
[/toggle]