Grid Shortcode

There a total of 12 columns you can use to create your layout. Each row must add up to 12 columns.

[sp-grid first=true span=6]

6 columns

[/sp-grid][sp-grid last=true span=6]

6 columns

[/sp-grid]
[sp-grid first=true span=3]

3 columns

[/sp-grid][sp-grid last=true span=9]

9 columns

[/sp-grid]
[sp-grid first=true span=9]

9 columns

[/sp-grid][sp-grid last=true span=3]

3 columns

[/sp-grid]
[sp-grid first=true span=4]

4 columns

[/sp-grid][sp-grid last=true span=8]

8 columns

[/sp-grid]
[sp-grid first=true span=11]

11 columns

[/sp-grid][sp-grid last=true span=1]

1 column

[/sp-grid]

Shortcode:

[sp-code][sp-grid first=true span=6][/sp-grid][sp-grid last=true span=6][/sp-grid][/sp-code]

Options:

  • span Set how many columns to span.
  • offset Set the offset of a column.
  • first true Declares the first column.
  • last true Declares the last column so elements can clear.

Horizontal Rule Shortcode

With this shortcode you can create horizontal line rules to serve as a stylish divider.

[sp-hr]
[sp-hr color=”e66f6f”]
[sp-hr color=”75eebc”]
[sp-hr color=”407abc”]
[sp-hr color=”bc4072″]
[sp-hr color=”e66f6f” thickness=3]
[sp-hr color=”75eebc” thickness=3]
[sp-hr color=”407abc” thickness=3]
[sp-hr color=”bc4072″ thickness=3]
[sp-hr color=”e66f6f” style=dotted]
[sp-hr color=”75eebc” style=dotted]
[sp-hr color=”407abc” style=dotted]
[sp-hr color=”bc4072″ style=dotted]

Shortcode:

[sp-code][sp-hr][/sp-code]

Options:

  • color The color of the line you want. Use HEX value.
  • style dashed / solid / dotted The style of the line.
  • width 100% Set how wide you want the line. Recommended to leave default.
  • thickness 1 Set how thick you want the line to be. Use pixels.
  • custom_class Adds additional class so you can manipulate the styles for just this shortcode.

Dropcap Shortcode

With this shortcode you can make the first letter of a word in a paragraph larger to give it emphasis.

[sp-dropcap]A[/sp-dropcap]pple is a nutritious food that everyone should be consuming. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words

[sp-dropcap color=ffffff bg_color=333]A[/sp-dropcap]pple is a nutritious food that everyone should be consuming. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words

[sp-dropcap color=fff bg_color=800000 bg_style=circle]A[/sp-dropcap]pple is a nutritious food that everyone should be consuming. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words

Shortcode:

[sp-code][sp-dropcap color=800000]A[/sp-dropcap]pple and the rest of the content…[/sp-code]

Options:

  • size 60 The size you want the text to be. Use pixels.
  • color 800000 The color you want the text to be. Use HEX value.
  • bg_color The background-color you want on the dropcap. Use HEX value.
  • bg_style square / circle Set style you want for the background color.

Blockquote Shortcode

With this shortcode you can create a blockquote.

[sp-blockquote]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.[/sp-blockquote]

Shortcode:

[sp-code][sp-blockquote]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words[/sp-blockquote][/sp-code]

Options:

  • text_align center / left / right Choose how you want to align the quote text.
  • custom_class Adds additional class so you can manipulate the styles for just this shortcode.

Code Display Shortcode

With this shortcode you can display code such as PHP without executing it.

[sp-code][/sp-code]

Shortcode:

[sp-code][ sp-code ][ /sp-code ][/sp-code]

Example has spaces in shortcode for illustration only. Remove spaces in use case.