BASIC ELEMENTS

BUTTON

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

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

Available "Button" attributes include:

  • url - This is where you set the url/link for the button.
  • class - If you want to apend a current class, or set a custom css class for the element.
  • title - Label for the button text.
  • size - Set the size of the button (options are default or small).
  • target - Set the target of the link. (Use _blank to open in a new window.)


VIDEO - YOUTUBE

Display/embed a youtube video with a responsive player.

    [youtube id="XXXXXXXXXX" class=" "]

Available "youtube" attributes include:

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


VIDEO - VIMEO

Display/embed a vimeo video with a responsive player.

    [vimeo id="XXXXXXXXXX" class=" "]

Available "viemo" attributes include:

  • id - Add the Vimeo video id.
  • class - If you want to apend a current class, or set a custom css class for the element.


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

Use this element to add a divider/line between content sections or as a design element.

    [line class="" width="" color=""]

Available "line" attributes include:

  • class - If you want to apend a current class, or set a custom css class for the element.
  • width - Set the max width of the line. Default is 100% or full width of the parent container.
  • color - HEX code (includeing #) of the color wanted for the color of the line.




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 grid based 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 apend a current class, or set a custom css class for the element.
  • xs - Number of columns to span (out of 12) on extra small screens.
  • 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 grid based layouts on the fly.
Use this shortcode to nest a child set of columns 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 apend a current class, or set a custom css class for the element.
  • xs - Number of columns to span (out of 12) on extra small screens.
  • 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-6" order=" " taxonomy=" " term=" " pagination=" " layout="card--default"]

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).
  • order - order of the content (ASC or DESC).
  • grid - Bootstrap CSS grid classes to change the number of items displayed on a row.
  • taxonomy - Name of Taxonomy to filter results by (use the taxonomy name/slug from Wordpress).
  • term - Taxonomy term or terms (seperate multiple with a comma).
  • locations - Filters content by taxonomy of Locations (seperate multiple with a comma).
  • roles - Filters content by taxonomy of Roles (seperate multiple with a comma).
  • types - Filters content by taxonomy of Type (seperate multiple with a comma).
  • pagination - True/False, turn on 'older' and 'newer' buttons to page thru content.
  • layout - Choose the template for the grid item (options: card--default, card--alt, tile--default, tile--alt, panel--default, panel--alt - If Empty: layout is based on selected post type).




ACCORDION CONTENT

ACCORDION

Display content in an accordion form. Expand and collapse content.

    [accordion class="" width=""]

        [accordionitem]s will go here...

    [/accordion]

Available "accoridon" attributes include:

  • class - If you want to apend a current class, or set a custom css class for the element.
  • width - Set the max width for the accordion. Default is 100% (will filll the width of the container)


ACCORDION ITEM

Create an accordion item inside an [accordion].

    [accordionitem title=""]

        ... your content will go here ...

    [/accordion]

Available "accoridonitem" attributes include:

  • title - Set the title of the accoridon item, this will also act as the clickable action to show more content
  • disabled - Set to 'true' to disable the item. (use this option if the accordion item will have no expandable/hidden content)


EXPANDABLE CONTENT

EXPAND/COLLAPSE

Display content in an Expand/Collapse element form. Expand and collapse content.

    [expand class="" width=""]

        ... Content here will be seen by default...

        [expandcontent class=""]

            ...Content inside the Expand Content tag will be hidden by default...

        [/expandcontent]

    [/expand]

Available "expand" attributes include:

  • class - If you want to apend a current class, or set a custom css class for the element.
  • width - Set the max width for the expand/collapse element. Default is 100% (will filll the width of the container)


MISC CONTENT

MAP

Display a google map with location marker.

    [map class="" width="" height="" address=""]

Available "map" attributes include:

  • class - If you want to apend a current class, or set a custom css class for the element.
  • width - Set the max width for the map. Default is 100% (will filll the width of the container)
  • height - Set the height for the map. Default is 40%.
  • address - Add an address to add a map marker and center the map at that locaiton. (ex. 1234 Streename City, TX 00000)


FORM

Display a form with First Name, Last Name, Email, and Comment fields.

    [form class="" width="" to="" subject=""]

Available "form" attributes include:

  • class - If you want to apend a current class, or set a custom css class for the element.
  • width - Set the max width for the form. Default is 100% (will filll the width of the container)
  • to - The email address you want the form to submit to.
  • subject - The subject of the email that is sent by the form.