BASIC ELEMENTS

BUTTON

Simply display a button element for a call to action or highlight a link.

    [button url="#" title="Shortcode Button" class="" color=""]

Available "Button" attributes include:

  • url - This is where you set the url/link for the button.
  • class - If you want to set a custom css class for the element.
  • color - Add color value for button background (supports brand colors).
  • title - Label for the button text.
  • size - Set the size of the button (options are default or small).


VIDEO - YOUTUBE

Display/embed a youtube video with a responsive player.

    [youtube id="6AVRRZgNyyU"]

Available "youtube" attributes include:

  • id - Add the YouTube video id.
  • class - If you want to set a custom css class for the element.


VIDEO - VIMEO

Display/embed a vimeo video with a responsive player.

    [vimeo id="6AVRRZgNyyU"]

Available "viemo" attributes include:

  • id - Add the Vimeo video id.
  • class - If you want to set a custom css class for the button.


GAP

Use this element to add variable spacing between content.

    [gap size="0px"] or [gap size="5%"]

Available "gap" attributes include:

  • size - Use a number and a delineator (px or %), this will add padding to the gap element.
  • class - If you want to set a custom css class for the gap.


Line

Simple divider line for dividing sections of content on the same background.

    [line color="" class=""]

Available "line" attributes include:

  • color - Use a hex code here to change the color of the line.
  • class - If you want to set a custom css class.




LAYOUT / GRID

SECTION / ROW

Create a section or row of content. Used as a container for any content between the shortcode tags.

    [section class="" align="" width=""]

            // Your interior content can go here...

    [/section]

Available "section" attributes include:

  • class - If you want to set a custom css class for the element.
  • align - Text align for section (align-lft, align-rt, align-ctr).
  • width - Max width of section (default is 1280px - or full width of parent container).


COLUMNS

Break up the content into columns to create dynamic layouts on the fly.

    [col sm="6" md="" lg=""]

            // This is a column that spans 6 out of 12 columns...

    [/col]
    [col sm="6" md="" lg=""]

            // This is a column that spans 6 out of 12 columns...

    [/col]

Available "col" attributes include:

  • class - If you want to set a custom css class for the element.
  • sm - Number of columns to span (out of 12) on small screens.
  • md - Number of columns to span (out of 12) on medium screens.
  • lg - Number of columns to span (out of 12) on large screens.


NESTED COLUMNS

Break up the content into columns to create dynamic layouts on the fly.
Use this shortcode to nest a child set of [col] inside a partent [col]

    [col sm="10"]
        [col-child sm="6" md="" lg=""]

            This is a child column that spans 6 out of 12 of the parent col element...

        [/col-child]
    [/col]

Available "col-child" attributes include:

  • class - If you want to set a custom css class for the element.
  • sm - Number of columns to span (out of 12) on small screens.
  • md - Number of columns to span (out of 12) on medium screens.
  • lg - Number of columns to span (out of 12) on large screens.




DYNAMIC CONTENT

GETCONTENT

Display dynamic database driven content.

    [getcontent type="POSTTYPE" show="3" grid="col-md-4, col-sm-6" order="" tag="" taxonomy="" term="" pagination="" layout="card"]

Available "getcontent" attributes include:

  • type - Type of content you want (post_type name from wordpress).
  • show - Number of items to be returned (default is all).
  • grid - Change the count of items per row (Uses Bootstrap class names. Supports mulitple items, seperate each class by a comma.).
  • order - order of the content (ASC or DESC).
  • tag - Name of tag to filter results by (tag must be assigned to the same content type as set in 'type').
  • taxonomy - Name of Taxonomy to filter results by (taxonomy must be assigned to the same content type as set in 'type').
  • term - Taxonomy term or terms.
  • pagination - True/False, turn on 'older' and 'newer' buttons to page thru content.
  • layout - Choose the template for the grid item (options: card, card-min, card-alt, tile, tile-min, banner - default is card).




CSS CLASSES

COLORS

Use these classes on shortcodes that support custom class attributes. These classes will change the color of text contained in the element. Can be used with default Wordpress hyperlink editor.

  • color-purple (#994CBF)
  • color-orange (#f07f0a)
  • color-blue (#488ECC)
  • color-green (#8DE317)
  • color-teal (#54ADB4)
  • color-grey (#7F7674)
  • color-white (#ffffff)
  • color-black (#111111)

BACKGROUNDS

Use these classess with shortcodes that support custom class atrributes. These classes will change the background color of the element.

  • bkg-purple (#994CBF)
  • bkg-orange (#f07f0a)
  • bkg-blue (#488ECC)
  • bkg-green (#8DE317)
  • bkg-teal (#54ADB4)
  • bkg-grey (#7F7674)
  • bkg-white (#ffffff)
  • bkg-black (#111111)