Theme comes with a set of shortcode where you can use in post, elements (Blueprint), or text widget. In Blueprint, almost everywhere can render shortcode, from text element to feature element. Meanwhile, in post you can use shortcode generator to create some types of shortcode.

Structure of shortcode

[shortcodename {config's key}="{value}"]{content}[/shortcodename]

For property related with color, theme allows user to use custom hex-color or 14 sync colors with the shortcode, in case user change any of this sync colors, that shortcode will still be synchronized. Here are the list of sync colors value to use with shortcode.

Color Name Value
primary brand primary_brand
secondary brand secondary_brand
Light Scheme Primary Text primary_text
Light Scheme Secondary Text secondary_text
Light Scheme Primary Background primary_background
Light Scheme Secondary Background secondary_background
Light Scheme Border border
Dark Scheme Primary Text dark_primary_text
Dark Scheme Secondary Text dark_secondary_text
Dark Scheme Primary Background dark_primary_background
Dark Scheme Secondary Background dark_secondary_background
Dark Scheme Border dark_border
Custom 1 custom_1
Custom 2 custom_2

Here are the options and configurations of available shortcodes and below each table you will see a sample of how to apply the shortcode.

Text (name: bp_text)

Property (* = required) Config’s key Value
color color hex or sync color
background color bg_color hex or sync color
font size font_size number or number + unit
font weight font_weight lighter/bold/bolder/100-900
font font primary/secondary/custom_a/…
line height line_height number or number + unit
letter spacing letter_spacing number or number + unit
text indent text_indent number or number + unit
content* text or shortcode 
[bp_text color="primary_brand" font_size="20px" font="secondary"]This is sample text[/bp_text]

Alignment (name: bp_align)

Property (* = required) Config’s key Value
position* position left/center/right
content* text or shortcode 
[bp_align position="center"]This is content to be aligned[/bp_align]

Column (name: bp_column)

Property (* = required) Config’s key Value
layout* layout 6-6, 4-4-4-4, 3-3-3, etc.
content* text or shortcode (use string [SEPERATOR] to divide columns.

For “layout” Sum of layout must be 12, using shortcode couldn’t make equally 5 columns layout. ‘6-6’ means there are 2 columns, which have width of 6/12 or 50% width. ‘3-3-6’ means there are 3 columns, which have width of 3/12 or 25%, 3/12 or 25%, 6/12 or 50% width respectively.

For “content”, using [SEPARATOR] (all capital letters) to separate the column content, for example “content of 1st column[–SEPARATOR–]content of 2nd column[SEPARATOR]content of 3rd column”.

[bp_column layout="7-5"]Column Width 7/12[SEPERATOR]Column Width 5/12[/bp_column]

Dropcap (name: bp_dropcap)

Property (* = required) Config’s key Value
color color hex or sync color
background color bg_color hex or sync color
font size font_size number or number + unit
font weight font_weight lighter/bold/bolder/100-900
font font primary/secondary/custom_a/…
line height line_height number or number + unit
border color border_color hex or sync color
circle circle true/false
content* text or shortcode 
[bp_dropcap circle="true"]D[/bp_dropcap]

Code (name: bp_code)

Property (* = required) Config’s key Value
color color hex or sync color
background color bg_color hex or sync color
border color border_color hex or sync color
font size font_size number or number + unit
font font primary/secondary/custom_a/…
content* text or shortcode 
[bp_code bg_color="#333333" border_color="#000000"]This is code section $html or @javascript[/bp_code]

Bullet (name: bp_bullet)

Property (* = required) Config’s key Value
bullet style style circle/disc/square/lower-roman/upper-roman/lower-alpha/upper-alpha/decimal
bullet image image url of image to display instead of bullet style above
content* text or shortcode (use string [LI] to divide columns. 
[bp_bullet style="lower-alpha"]This is 1st list[LI]This is 2nd list[LI]This is 3rd list[/bp_bullet]

Tooltip (name: bp_tooltip)

Property (* = required) Config’s key Value
tooltip position position top/right/bottom/left
tooltip message* content text
content* text or shortcode 
[bp_tooltip position="right" content='this is popup message"]Hover here to popup tooltip message.[/bp_tooltip]

Title (name: bp_title)

User can use this shortcode to display page title of each page. The benefit of using this shortcode is to create header using blueprint block to repeat using in many pages.

[bp_title][/bp_title]

Excerpt (name: bp_excerpt)

User can use this shortcode to display excerpt of each page. The benefit of using this shortcode is to create header using blueprint block to repeat using in many pages.

[bp_excerpt][/bp_excerpt]

Taxonomy and Category (name: bp_taxonomy)

This shortcode will display the current page taxonomy. User can choose whether to display category or tag, and whether to display as string or link via the existing options.

Property (* = required) Config’s key Value
display as tag tag true/false
can link to archive page link true/false 
[bp_taxonomy tag="true" link="true"][/bp_taxonomy]

Author (name: bp_author)

User can use this shortcode to display name of the author who created that page. The benefit of using this shortcode is to create blueprint block to repeat using in many pages.

Property (* = required) Config’s key Value
can link to archive page link true/false 
[bp_author][/bp_author]

Date (name: bp_date)

User can use this shortcode to display published date. The benefit of using this shortcode is to create blueprint block to repeat using in many pages.

Property (* = required) Config’s key Value
display date format format check date formats from here 
[bp_date format="F j, Y"][/bp_date]

Archive Title (name: bp_archive_title)

User can use this shortcode to display archive title. The benefit of using this shortcode is to create custom blueprint block to use as custom archive page title.

[bp_archive_title]

Icon (name: bp_icon)

Property (* = required) Config’s key Value
icon* icon et-anchor/check and etc.
style style plain/border/fill/fill-square/border-square
hover style hover_style plain/border/fill/fill-square/border-square
color color hex or sync color
hover color hover_color hex or sync color
size size small/medium/large/x-large 
[bp_icon icon="anchor" color="primary_brand" hover_style="border"][/bp_icon]

Video (name: bp_video)

Property (* = required) Config’s key Value
video source url* video_url url of video
video source type* video_type external/self-hosted
style style styles of video (depends on the theme)
poster image url poster_url url of image
width width number
video ratio video_ratio 16:9/21:9/etc.
alignment alignment left/center/right
auto play autoplay true/false
loop play loop true/false
position position overlapleft/left/center/right/overlapright
display full width fullscreen true/false 
[bp_video video_url="www.twisttheme.com/wp-content/uploads/sample-video.mp4" video_type="self-hosted"][/bp_video]

Image (name: bp_image)

Property (* = required) Config’s key Value
image caption caption string or shortcode
alignment alignment left/center/right
image ID* image_id id of image
display circle image_circle true/false
image size image_size thumbnail/medium/twist_medium/medium_large/large/twist_large/full
image max width image_max_width number or number + unit
image popup image_popup true/false
image ratio image_ratio auto/1×1/3×2/2×3/4×3/3×4/16×9
image link image_link url
open link in same tab media_target_self true/false
image lazy load image_lazy_load true/false
position position overlapleft/left/center/right/overlapright
display full width  fullscreen true/false
image caption image_caption true/false (depends on theme) 
[bp_image image_id="12" image_size="large" image_ratio="1x1" image_lazy_load="false" position="overlapright" caption="this is image caption"][/bp_image]

Button (name: bp_button)

Property (* = required) Config’s key Value
style style border/fill/… (depends on theme)
hover style button_hover none/inverse/brand
color button_color basic/brand
size button_size small/medium/large
border thickness button_thickness number
border radius button_radius number
icon button_icon et-anchor/check and etc.
icon position button_icon_position before/after
label* button_label text string
link* button_link url
open link in same tab button_target_self true/false
display full width button_full_width true/false
display inline button_inline true/false
alignment alignment left/center/right 
[bp_button button_radius="0" button_size="medium" button_link="www.twisttheme.com" button_label="Button"][/bp_button]

Heading (name: bp_heading)

Property (* = required) Config’s key Value
style style plain/fill/… (depends on theme)
alternate color alternate_color hex or sync color
size size h1-h6
letter spacing letter_spacing number or number + unit
alignment alignment left/center/right
uppercase uppercase true/false
font family font_family primary/secondary/custom_a/…
text* text text 
[bp_heading size="h1" alignment="center" uppercase="true" text="this is heading"][/bp_heading]

Quote (name: bp_quote)

Property (* = required) Config’s key Value
style style styles of quote (depends on theme)
background color background_color hex or sync color
background opacity background_opacity number (1-100)
border color border_color hex or sync color
quote font quote_font primary/secondary/custom_a/…
alignment alignment left/center/right
quote text* text text
author auhor text 
[bp_quote text="Imagination is more important than knowledge" author="Albert Einstein" quote_font="secondary"][/bp_quote]

Blueprintblock (name: bp_blueprint)

User can use this shortcode to display blueprintblock element byy input ID of blueprintblock.

Property (* = required) Config’s key Value
blueprintblock id* id blueprintblock post ID 
[bp_blueprint id="12"][/bp_blueprint]

Custom Field (name: bp_ctf)

This shortcode will display custom field value. User can choose whether to display which custom field in that post or in any other post ID.

Property (* = required) Config’s key Value
name of custom field name custom field key to display
post id id post id, in case don’t want to display custom field of that post 
[bp_ctf name="my_meta"][/bp_ctf]

Cart (name: bp_cart)

This shortcode will display cart with number of items in cart. With ajax number update, this will benefit you to use in widget location such as input cart icon with number of added item in topbar or sidebar.

Property (* = required) Config’s key Value
icon to show icon et-basket/cart/ln-cart/et-bag/bag 
[bp_cart icon="et-basket"][/bp_cart]