Shortcodes

Table Shortcode

Usage

It's quite simple. Just wrap a markdown table in [ed-table] tags. The [ed-table] shortcode has some optional parameters:

• class - alt (this class is provided by Editorial theme)
• header - true- is displayed.

  An example of the Table shortcode is as follows:

  [ed-table header=true class="alt"] | Header 1 | Header 2 | Header 3 | Header 4 | | Cell 1 | Cell 2 | Cell 3 | Cell 4 | | Cell 5 | Cell 6 | Cell 7 | Cell 8 | [/ed-table]

  Example

  Header 1	Header 2	Header 3	Header 4
  Cell 1	Cell 2	Cell 3	Cell 4
  Cell 5	Cell 6	Cell 7	Cell 8

  Box Shortcode

  Usage

  Wrap some content block in [ed-box] tags. The [ed-box] shortcode has some optional parameters:

  • heading - The heading for box
  • color - primary, secondary, success, warning and info.
  • class - alt (this class remove border from box).

  An example of the Box shortcode is as follows:

  [ed-box color="primary" heading="Primary Box Shortcode"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. [/ed-box] [ed-box color="secondary" heading="Secondary Box Shortcode"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. [/ed-box] [ed-box color="success" heading="Success Box Shortcode"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. [/ed-box] [ed-box color="info" heading="Info Box Shortcode"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. [/ed-box] [ed-box color="warning" heading="Warning Box Shortcode"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. [/ed-box] [ed-box color="danger" heading="Danger Box Shortcode"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. [/ed-box]

  Example

  Primary Box Shortcode

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna.

  Secondary Box Shortcode

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna.

  Success Box Shortcode

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna.

  Info Box Shortcode

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna.

  Warning Box Shortcode

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna.

  Danger Box Shortcode

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna.

  Buttons Shortcode

  Usage

  Wrap some buttons in [ed-buttons] tags. The [ed-buttons] has the following parameters: stacked, special orfit

  The [ed-button] shortcode that defines each button has the following parameters:

  • class- custom classes for button
  • type - primary, secondary, success, info, warning or danger.
  • size - small, mediumor large
  • url- The button url
  • target- The target of url

  An example of the Buttons shortcode is as follows:

  [ed-buttons] [ed-button type="primary" url="#"]Primary[/ed-button] [ed-button type="secondary" url="#"]Secondary[/ed-button] [ed-button type="success" url="#"]Success[/ed-button] [ed-button type="info" url="#"]Info[/ed-button] [ed-button type="warning" url="#"]Warning[/ed-button] [ed-button type="danger" url="#"]Danger[/ed-button] [/ed-buttons] [ed-buttons] [ed-button type="primary" size="small" url="#"]Primary[/ed-button] [ed-button type="secondary" size="small" url="#"]Secondary[/ed-button] [ed-button type="success" size="small" url="#"]Success[/ed-button] [ed-button type="info" size="small" url="#"]Info[/ed-button] [ed-button type="warning" size="small" url="#"]Warning[/ed-button] [ed-button type="danger" size="small" url="#"]Danger[/ed-button] [/ed-buttons] [ed-buttons ulclass="special"] [ed-button type="primary" size="small" url="#"]Primary[/ed-button] [ed-button type="secondary" size="small" url="#"]Secondary[/ed-button] [/ed-buttons] [ed-buttons ulclass="stacked"] [ed-button type="primary" size="small" url="#"]Primary[/ed-button] [ed-button type="secondary" size="small" url="#"]Secondary[/ed-button] [/ed-buttons] [ed-buttons ulclass="fit"] [ed-button type="primary" size="small" url="#"]Primary[/ed-button] [ed-button type="secondary" size="small" url="#"]Secondary[/ed-button] [/ed-buttons]

  Example

  • Primary
  • Secondary
  • Success
  • Info
  • Warning
  • Danger
  • Primary
  • Secondary
  • Success
  • Info
  • Warning
  • Danger
  • Primary
  • Secondary
  • Primary
  • Secondary
  • Primary
  • Secondary

  Flex row Shortcode

  Usage

  Use the [ed-flex-row] shortcode to set the number of columns that best render your content and layout. The [ed-flex-row] has the following parameters:

  • class- Row classes from Editorial theme (space separated): gtr-uniform, gtr-0, gtr-25, gtr-50, gtr-150, gtr-200, aln-between, aln-around, aln-evenly, aln-left, aln-center, aln-right, aln-top, aln-bottom and aln-middle .

  The [column] shortcode that defines each to the individual columns (e.g., .col-4 col-12-medium), has the following parameters:

  • class- Column classes from Editorial theme (space separated), indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use col-4. To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint : xsmall, small, medium, large and xlarge.

  An example of the Flex row shortcode is as follows:

  [ed-flex-row class="gtr-50"] [column class="col-4 col-12-medium"] [ed-box color="primary" heading="Primary"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. [/ed-box] [/column] [column class="col-4 col-12-medium"] [ed-box color="secondary" heading="Secondary"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. [/ed-box] [/column] [column class="col-4 col-12-medium"] [ed-box color="success" heading="Success"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. [/ed-box] [/column] [column class="col-4 col-12-medium"] [ed-buttons] [ed-button type="primary" url="#"]Primary[/ed-button] [ed-button type="secondary" url="#"]Secondary[/ed-button] [ed-button type="success" url="#"]Success[/ed-button] [ed-button type="info" url="#"]Info[/ed-button] [ed-button type="warning" url="#"]Warning[/ed-button] [ed-button type="danger" url="#"]Danger[/ed-button] [/ed-buttons] [/column] [column class="col-4 col-12-medium"] [ed-table header=true class="alt"] | Header 1 | Header 2 | Header 3 | Header 4 | | Cell 1 | Cell 2 | Cell 3 | Cell 4 | | Cell 5 | Cell 6 | Cell 7 | Cell 8 | [/ed-table] [/column] [column class="col-4 col-12-medium"] > Blockquote text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. [/column] [/ed-flex-row]

  Example

  Primary

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.

  Secondary

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.

  Success

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.

  • Primary
  • Secondary
  • Success
  • Info
  • Warning
  • Danger

  Header 1	Header 2	Header 3	Header 4
  Cell 1	Cell 2	Cell 3	Cell 4
  Cell 5	Cell 6	Cell 7	Cell 8

  Blockquote text

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo.

  Float image Shortcode

  Usage

  Use the [ed-float] shortcode to display a floating image, to the left or right of a text.

  The [ed-float] shortcode has the following parameters:

  * `direction` - left or right * `image` - Image name from page media * `alt` - Alt tag for image * `title` - Image title

  An example of the Float image shortcode is as follows:

  [ed-float direction=left image="home.jpg" alt="Home" title="Home"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. Pellentesque eu lectus dignissim justo consectetur tristique. [/ed-float] [ed-float direction=right image="home.jpg" alt="Home" title="Home"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. Pellentesque eu lectus dignissim justo consectetur tristique. [/ed-float]

  Example

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. Pellentesque eu lectus dignissim justo consectetur tristique.

  

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. Pellentesque eu lectus dignissim justo consectetur tristique.