200+ shortcodes & items
with 2 unique styles for unlimited possibilities
Typography
Basic typography
<p class="big">Praesent nec magna ac pede. Mauris suscipit mauris. Nam quis erat id tortor. Phasellus at nibh nulla nulla, egestas quam eu tortor orci, id eros. Mauris neque. Pellentesque dolor. Mauris in est. <a href="#">Vivamus lacus sed justo</a>. Aenean ac dignissim nibh. Suspendisse sapien. Donec in faucibus volutpat, velit in leo ultrices posuere ante a nisl. Sed nec magna. Donec enim luctus diam eu mauris. Pellentesque facilisis. Nulla augue a.</p> <p>Lorem ipsum dolor sit amet augue. <strong>Sed eu sem urna elit</strong>, non odio. Aenean lacus tellus quis ante. Fusce enim. <strike>Aliquam ultricies</strike> porta. Aenean ac eros sed arcu. Mauris nunc posuere cubilia Curae, Nullam et ipsum. Aliquam quis elit. Pellentesque habitant morbi <u>tristique commodo</u>. Suspendisse vitae lectus varius quis, tellus.Donec ullamcorper in, dapibus quam hendrerit eget, bibendum a, bibendum tempus. <i>Pellentesque ac ipsum</i>. Vestibulum non sem. Mauris purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed.</p> <h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6>
Praesent nec magna ac pede. Mauris suscipit mauris. Nam quis erat id tortor. Phasellus at nibh nulla nulla, egestas quam eu tortor orci, id eros. Mauris neque. Pellentesque dolor. Mauris in est. Vivamus lacus sed justo. Aenean ac dignissim nibh. Suspendisse sapien. Donec in faucibus volutpat, velit in leo ultrices posuere ante a nisl. Sed nec magna. Donec enim luctus diam eu mauris. Pellentesque facilisis. Nulla augue a.
Lorem ipsum dolor sit amet augue. Sed eu sem urna elit, non odio. Aenean lacus tellus quis ante. Fusce enim. Aliquam ultricies porta. Aenean ac eros sed arcu. Mauris nunc posuere cubilia Curae, Nullam et ipsum. Aliquam quis elit. Pellentesque habitant morbi tristique commodo. Suspendisse vitae lectus varius quis, tellus.Donec ullamcorper in, dapibus quam hendrerit eget, bibendum a, bibendum tempus. Pellentesque ac ipsum. Vestibulum non sem. Mauris purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed.
H1 Heading
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.
H2 Heading
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.
H3 Heading
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.
H4 Heading
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.
H5 Heading
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.
H6 Heading
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.
Dropcap
Creates a nice looking segment of text, where one letter is featured.
Default code:
[dropcap background="" color="" circle="0" size="1"]I[/dropcap]nsert your content here
Attributes:
- background - background color in hex format, e.g.: #000000
- color - text color in hex format, e.g.: #FFFFFF
- circle - 0 (default look), 1 (circle style)
- size - dropcap size: 1, 2, 3
Example of this shortcode below:
[dropcap background="" color="" circle="0" size="2"] A [/dropcap] [dropcap background="#eee" color="#444" circle="1" size="1"] E [/dropcap]
A ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis eges tas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet ante. Donec eu libero sit amet quam egestas semper.
E issim nibh. Suspendisse sapien. Donec in faucibus volutpat, velit in leo ultrices posuere ante a nisl. Sed nec magna. Donec enim luctus diam eu mauris. Pellentesque facilisis. Nulla au us volutpat, velit in leo ultrices gue netus et malesuada fames ac turpis egestas.
Highlight
Highlight - this item creates text with a nice highlight effect. This item has 2 attributes:
Default code:
[highlight background="" color=""]Insert your content here[/highlight]
Attributes:
- background - background color for highlighted text
- color - text color for highlighted text
Example of this shortcode below:
[highlight background="" color=""]suspendisse sapien[/highlight] [highlight background="#444" color="#fff"]enim luctus diam[/highlight]
Pellentesque suspendisse sapien tristique commodo. Suspendisse vitae lectus varius quis, tellus.Donec ullamcorper in, dapibus quam hendrerit eget bibendum a, bibendum tempus. Pellentesque ac ipsum. Vestibulum non sem. Mauris purus.
Aenean ac dignissim nibh donec in faucibus volutpat, velit in leo ultrices posuere ante a nisl. Sed nec magna. Donec enim luctus diam eu mauris. Pellentesque facilisis. Nulla augue a. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed
Tooltip Tooltip Image
Creates a small box under regular text in which you can rollover additional information.
Default code:
[tooltip hint="Insert your hint here"]Insert your content here[/tooltip] [tooltip_image hint="Insert your hint here" image=""]Insert your content here[/tooltip_image]
Attributes:
- hint - popup text
- image - image URL
Example of this shortcode below:
[tooltip hint="Lorem ipsum dolor sit"]tooltip[/tooltip] [tooltip_image hint="Phasellus fermentum in dolor. Pellentesque facilisis tristique senectus et netus" image="IMAGE_URL"]tooltip with image[/tooltip_image]
Pellentesque habitant tooltip senectus et netus et malesuada fames ac turpis egestas, ultricies eget, tempor sit amet.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, Phasellus fermentum in dolor. Pellentesque facilisis tristique senectus et netus
tooltip with image ante. Donec eu libero sit amet quam egestas semper.
Blockquote
Default code:
[blockquote author="" link="" target="_blank"]Insert your content here[/blockquote]
Attributes:
- author - Blockquote author
- link - Link to author's page (with http://)
- target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
Example of this shortcode below:
[blockquote author="Thomas McKenzie" link="#" target="_blank"] Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque ... [/blockquote]
Attributes:
- Content - Blockquote content. Some HTML tags allowed.
- Author - Blockquote author
- Link - Link to author's page (with http://)
- Link | Target - Link target
- Custom | Classes - type your own class for the item - this is a useful option for those who want to create a special style.
For example: you can type my-class-big-font class and then go to BeTheme options > Custom CSS & JS > Custom CSS and write your own styles for this class:.my-class-big-font { font-size:150% !important; font-weight:bold; }
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In in leo ultrices posuere ante viverra ipsum ...
Buttons
Creates buttons in many different styles. A button can link to another page/subpage or it can be the download button. It can also have an icon on the left- or right-hand side.
Default code:
[button title="" link="" target="_blank" align="" icon="" icon_position="" color="" font_color="" size="2" full_width="" class="" download="" onclick=""]
Attributes:
- title - Text on the button
- link - Link (with http://)
- target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
- align - Button align: left, center or right
- icon - To use a button with an icon, type the icon name here
- icon_position - Icon position: left or right
- color - Button background color - Use one of predefined colors, color name or hex, e.g.: grey or #CCCCCC
- font_color - Button text color - Use color name or hex, e.g.: black or #000000
- size - Button size: 1,2,3,4
- full_width - Stretch to the width of a column
- class - This option is useful when you want to use scroll
- rel - Adds an rel="..." attribute to the link
- download - Download file when clicking on the link. Enter the new filename for the downloaded file.
- onclick - Adds an onclick="..." attribute to the link
Example of this shortcode below:
[button title="Default button" link="#" target="" icon="" icon_position="" color="" font_color="" size="2" full_width="" class="" download="" onclick=""] [button title="Button with icon" link="#" target="" icon="icon-layout" icon_position="left" color="" font_color="" size="2" full_width="" class="" download="" onclick=""] [button title="Button with icon" link="#" target="" icon="icon-basket" icon_position="right" color="" font_color="" size="2" full_width="" class="" download="" onclick=""] [button title="Default button" link="#" target="" icon="" icon_position="" color="theme" font_color="" size="2" full_width="" class="" download="" onclick=""]
Creates buttons in many different styles. A button can link to another page/subpage or it can be the download button. It can also have an icon on the left- or right-hand side.
Attributes:
- Title - Text on the button
- Link - Link (with http://)
- Link | Target - Link target
- Align - Button align - left, center or right
- Icon - Button icon
- Icon | Position - Icon position
- Background - Button background color - Use one of predefined colors, color name or hex, e.g.: grey or #CCCCCC
- Font color - Button text color - Use color name or hex, e.g.: black or #000000
- Size - Button size: 1,2,3,4
- Full Width - Stretch to the width of a column
- Class - This option is useful when you want to use scroll
- Rel - Adds an rel="..." attribute to the link
- Download - Download file when clicking on the link
- OnClick - Adds an onclick="..." attribute to the link
Fancy link
Great shortcode with different variations on hover.
Default code:
[fancy_link title="" link="" target="" style="1" class="" download=""]
Attributes:
- title - Link text
- link - Link (with http://)
- target - Link target: 0 (default), _blank (new tab or window)
- style - Number of style, choose number from 1 to 8
- class - This option is useful when you want to use scroll or prettyphoto
- download - Download file when clicking on the link. Enter the new filename for the downloaded file.
Example of this shortcode below:
[fancy_link title="Phasellus" link="#" target="" style="1" class="" download=""] [fancy_link title="Phasellus" link="#" target="" style="2" class="" download=""] [fancy_link title="Phasellus" link="#" target="" style="3" class="" download=""] [fancy_link title="Phasellus" link="#" target="" style="4" class="" download=""] [fancy_link title="Phasellus" link="#" target="" style="5" class="" download=""] [fancy_link title="Phasellus" link="#" target="" style="6" class="" download=""] [fancy_link title="Phasellus" link="#" target="" style="7" class="" download=""] [fancy_link title="Phasellus" link="#" target="" style="8" class="" download=""]
Image
This Item is a useful option for embedding images onto a page. Images can have links or be zoomed.
Default code:
[image src="" width="" height="" align="" border="0" margin_top="" margin_bottom="" link="" link_image="" target="" alt="" caption="" greyscale="0" animate=""]
Attributes:
- src - Image URL (use link with http://)
- width - Image width in px - optional
- height - Image height in px - optional
- align - Choose how you want to align the image - 0 (default), left, center or right
- border - Border around the image - enter: 1
- margin_top - Margin top in px
- margin_bottom - Margin bottom in px
- link_image - Image URL to open in popup after click (use link with http://)
- link - If you don't want to open the image after click you can type your own link (with http://)
- target - Link target - 0 (default), _blank (new tab or window)
- hover - Hover effect - to disable please enter: disable
- alt - Alternate text
- caption - Short text under image
- greyscale - Greyscale effect (works only for images with link) - enter: 1
- animate - Entrance animation - available values: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpLarge, fadeInDownLarge, fadeInLeftLarge, fadeInRightLarge, zoomIn, zoomInUp, zoomInDown, zoomInLeft, zoomInRight, zoomInUpLarge, zoomInDownLarge, zoomInLeftLarge, bounceIn, bounceInUp, bounceInDown, bounceInLeft, bounceInRight
Example of this shortcode below:
[image src="https://themes.muffingroup.com/be/theme/wp-content/uploads/2015/10/home_betheme_offerslider_thumb.png" width="" height="" align="center" border="1" margin_top="" margin_bottom="" link="#" link_image="IMAGE_URL" target="" alt="" caption="" greyscale="0" animate=""] [image src="https://themes.muffingroup.com/be/theme/wp-content/uploads/2015/10/home_betheme_offerslider_thumb.png" width="" height="" align="center" border="1" margin_top="" margin_bottom="" link="" link_image="" target="" alt="" caption="Praesent in libero vel turpis pellen" greyscale="0" animate=""]
This Item is a useful option for embedding images onto a page. Images can have links or be zoomed.
Attributes:
- Image - Select image from Media Library
- Image | Width - Image width in px - optional
- Image | Height - Image height in px - optional
- Align - Choose how you want to align the image - none, left, center or right
- Border - Show Image Border
- Margin | Top - Margin top in px
- Margin | Bottom - Margin bottom in px
- Zoomed image - This image or embed video will be opened in lightbox
- Link - If you don't want to open the image after click you can type your own link (with http://)
- Open in new window - Adds a target="_blank" attribute to the link
- Hover Effect - Animated effect on image hover
- Alternate Text - Image Alternate Text
- Caption - Short text under image
- Greyscale Images - Works only for images with link
- Animation - Entrance animation
- Custom | Classes - type your own class for the item - this is a useful option for those who want to create a special style.
For example: you can type my-class-big-font class and then go to BeTheme options > Custom CSS & JS > Custom CSS and write your own styles for this class:.my-class-big-font { font-size:150% !important; font-weight:bold; }
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Nulla imperdiet sit amet magna. Vestibulum dapibus.
Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel.
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient
Tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus.
Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Nulla imperdiet sit amet magna. Vestibulum dapibus.
Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient

Praesent in libero vel turpis pellen
Ordered, Unordered & Definition Lists
<ul> <li>Aliquam tincidunt cons ectetuer mauris eu risus</li> <li>Vestibulum auctor dapibus con sectet uer neque</li> <li>Suspendisse a pellentesque dui, non felis</li> </ul> <ol> <li>Aliquam tincidunt cons ectetuer mauris eu risus</li> <li>Vestibulum auctor dapibus con sectet uer neque</li> <li>Suspendisse a pellentesque dui, non felis</li> </ol> <dl> <dt>Magna comodo</dt> <dd>Consectetur adipisicing elit, sed do</dd> <dt>Nullam wisi eu</dt> <dd>Quisque lorem tortor fringilla sed.</dd> <dt>Auctor dapibus</dt> <dd> Ut enim ad minim veniam, quis nostru</dd> </dl>
- Lorem ipsum dolor sit amet, consecte cons ectetuer tuer adipi sit amet magna scing elit
- Aliquam tincidunt cons ectetuer mauris eu risus
- Vestibulum auctor dapibus con sectet uer neque
- Suspendisse a pellentesque dui, non felis
- Lorem ipsum dolor sit amet, consecte cons ectetuer tuer adipi sit amet magna scing elit
- Aliquam tincidunt cons ectetuer mauris eu risus
- Vestibulum auctor dapibus con sectet uer neque
- Suspendisse a pellentesque dui, non felis
- Magna comodo
- Consectetur adipisicing elit, sed do
- Nullam wisi eu
- Quisque lorem tortor fringilla sed.
- Auctor dapibus
- Ut enim ad minim veniam, quis nostru
Bullets lists
Useful to present something within the list. We prepared several types of lists.
List check
<ul class="list_check"> <li>List item 1</li> <li>List item 2</li> </ul>
List star
<ul class="list_star"> <li>List item 1</li> <li>List item 2</li> </ul>
List idea
<ul class="list_idea"> <li>List item 1</li> <li>List item 2</li> </ul>
List mixed
<ul class="list_mixed"> <li class="list_check">List item 1</li> <li class="list_star">List item 2</li> <li class="list_idea">List item 3</li> </ul>
Each of these lists has a different class type. To change the type of the list, simply change the name of class
- Suspendisse a pellentesque dui, non felis.
- Quisque lorem tortor fringilla sed.
- Quisque cursus et, porttitor risus.
- Nulla ipsum dolor lacus, suscipit adipiscing.
- Suspendisse a pellentesque dui, non felis.
- Quisque lorem tortor fringilla sed.
- Quisque cursus et, porttitor risus.
- Nulla ipsum dolor lacus, suscipit adipiscing.
- Suspendisse a pellentesque dui, non felis.
- Quisque lorem tortor fringilla sed.
- Quisque cursus et, porttitor risus.
- Nulla ipsum dolor lacus, suscipit adipiscing.
- Suspendisse a pellentesque dui, non felis.
- Quisque lorem tortor fringilla sed.
- Quisque cursus et, porttitor risus.
- Nulla ipsum dolor lacus, suscipit adipiscing.
Icon block
Creates icon as block element.
Default code:
[icon_block icon="icon-lamp" align="" color="" size="25"]
Attributes:
- icon - Type name of icon you want use
- align - Choose how you want to align the icon - 0 (default), left, center or right
- color - Use color name or hex, e.g.: black or #000000
- size - Icon size in px
Example of this shortcode below:
[icon_block icon="icon-camera" align="center" color="" size="40"] [icon_block icon="icon-picture" align="center" color="#AAAAAA" size="90"]
Progress icons
Default code:
[progress_icons icon="icon-heart-line" image="" count="5" active="3" background=""]
Attributes:
- icon - Type name of icon you want use
- image - If you don't want to use icon you can enter image URL (use link with http://)
- count - Number of icons
- active - Numebr of active icons
- background - Background color - Use color name or hex, e.g.: black or #000000
Example of this shortcode below:
[progress_icons icon="icon-heart-line" count="9" active="5" background=""] [progress_icons icon="icon-thumbs-up" count="12" active="6" background=""] [progress_icons icon="icon-light-up" count="10" active="7" background="#AAAAAA"]
Content link
Creates links with icon and content inside.
Default code:
[content_link title="" icon="icon-lamp" link="" target="_blank" class="" download=""]
Attributes:
- title - Item title text
- icon - Type in icon name
- link - Link (with http://)
- target - Link target - 0 (default), _blank (new tab or window)
- class - This option is useful when you want to use scroll or prettyphoto
- download - Download file when clicking on the link. Enter the name of file to download.
Example of this shortcode below:
[content_link title="Vitae adipiscing" icon="icon-picture" link="#" target="" class="" download=""]
Icon bar
Default code:
[icon_bar icon="icon-lamp" link="" target="_blank" size="" social=""]
Attributes:
- icon - Type name of icon you want use
- link - Link (with http://)
- target - Link target - 0 (default), _blank (new tab or window)
- size - If you want large icon, then type large, leave field empty if you want default size
- social - Using this option makes icons colorful, available styles: facebook, google, twitter, vimeo, youtube, flickr, linkedin, pinterest, dribbble
Example of this shortcode below:
[icon_bar icon="icon-picture" link="#" target="" size="large" social=""] [icon_bar icon="icon-calendar" link="#" target="" size="small" social=""] [icon_bar icon="icon-facebook" link="#" target="" size="small" social="facebook"] [icon_bar icon="icon-gplus" link="#" target="" size="small" social="google"] [icon_bar icon="icon-twitter" link="#" target="" size="small" social="twitter"] [icon_bar icon="icon-vimeo" link="#" target="" size="small" social="vimeo"] [icon_bar icon="icon-play" link="#" target="" size="large" social="youtube"] [icon_bar icon="icon-flickr" link="#" target="" size="large" social="flickr"] [icon_bar icon="icon-linkedin" link="#" target="" size="large" social="linkedin"] [icon_bar icon="icon-pinterest" link="#" target="" size="large" social="pinterest"] [icon_bar icon="icon-dribbble" link="#" target="" size="large" social="dribbble"]
Divider Hr
Creates spaces between elements. It also aligns a single line, with boxes located underneath. You can choose different styles of this item.
Default code:
[divider height="30" style="default" line="default" themecolor="1"]
Attributes:
- height - Divider height in px
- style - Style: 0 (default), dots or zigzag
- line - Line width (works only with style: default): 0 (default), narrow or wide
- themecolor - Line color the same as the theme color (works only with style: default) - enter: 1
Example of this shortcode below:
[hr height="30" style="default" line="narrow" themecolor="0"] [hr height="30" style="default" line="narrow" themecolor="1"] [hr height="30" style="default" line="default" themecolor="0"] [hr height="30" style="default" line="default" themecolor="1"] [hr height="30" style="default" line="wide" themecolor="0"] [hr height="30" style="default" line="wide" themecolor="1"] [hr height="30" style="dots" line="default" themecolor="1"] [hr height="30" style="zigzag" line="default" themecolor="1"]
Creates spaces between elements. It also aligns a single line, with boxes located underneath. You can choose different styles of this item.
Attributes:
- Divider height - Divider height in px
- Style - Divider style
- Line - Line Width
- Theme Color - Line color the same as the theme color
- Custom | Classes - type your own class for the item - this is a useful option for those who want to create a special style.
For example: you can type my-class-big-font class and then go to BeTheme options > Custom CSS & JS > Custom CSS and write your own styles for this class:.my-class-big-font { font-size:150% !important; font-weight:bold; }
Google font
This shortcode allows you to add text with any google font you want. Some of the fonts in the Google Fonts Directory support multiple styles.
Default code:
[google_font font="Open Sans" size="25" weight="400" italic="0" letter_spacing="" color="#626262" subset=""]Insert your content here[/google_font]
Attributes:
- font - Google font name
- size - Font size in px
- weight - Font weight (some fonts only): 100, 200, 300, 400, 500, 600, 700, 800, 900
- italic - Font style: italic (some fonts only)
- letter_spacing - Letter spacing in px, default: 0
- color - Use color name or hex, e.g.: grey or #626262
- subset - Subset for google font. Multiple separate with comma, e.g.: latin,latin-ext (some fonts only)
Example of this shortcode below:
[google_font font="Pompiere" size="80"] Quisque lorem tortor fringilla sed [/google_font] [google_font font="Exo" subset="cyrillic-ext,latin" size="40"]Praesent in libero vel turpis pellentesque[/google_font] [google_font font="Old Standard TT" size="23"] Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis [/google_font]
Alert
This shortcode allows you to add alerts.
Default code:
[alert style="warning"]Insert your content here[/alert]
Attributes:
- style - Alert style: error, info, success, warning
Example of this shortcode below:
[alert style="warning"] Warning message. This is a <a href="#">sample link</a> [/alert] [alert style="error"] Error message. This is a <a href="#">sample link</a> [/alert] [alert style="info"] Info message. This is a <a href="#">sample link</a> [/alert] [alert style="success"] Success message. This is a <a href="#">sample link</a> [/alert]
Idea
Creates a nice box with text inside. There are no attributes, just text.
Default code:
[idea]Insert your content here[/idea]
Example of this shortcode below:
[idea]Nulla imperdiet sit <a href="#">amet magna</a>. Vestibulum dapibus. Curabitur sit amet magna quam. Praesent in libero vel turpis <strong>pellentesque egestas sit amet vel nunc.</strong>[/idea]
Popup
Default code:
[popup title="Title" padding="0" button="0"]Insert your popup content here[/popup]
Attributes:
- title - Popup link text
- padding - Popup window inner padding in px
- button - Use button instead of text link
Example of this shortcode below:
[popup title="Click to open Popup" padding="20" button="1"][image src="IMAGE_URL" link="" link_image="" border="1"][divider height="20"]Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellen tesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.[/popup] [popup title="Click to open Popup" padding="20" button="0"][image src="IMAGE_URL" link="#" link_image="#" border="1"][divider height="20"]Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellen tesque facilisis.[/popup]
Share Box
Share box powered by sharethis.com. There are no attributes for this shortcode.
Default code:
[share_box]
Table
This shortcode uses html code to create a table. Content is the only thing that is needed. You can make any number of rows or columns you want and place anything you want in the table. Here are 2 examples of raw HTML used for tables:
Example of this shortcode below:
<table> <thead> <tr> <th>Employee</th> <th>Salary</th> <th>Bonus</th> <th>Supervisor</th> </tr> </thead> <tbody> <tr> <td>Stephen C. Cox</td> <td>$300</td> <td>$50</td> <td>Bob</td> </tr> </tbody> </table>
<table> <thead> <tr> <th class="clear"></th> <th>Salary</th> <th>Bonus</th> <th>Supervisor</th> </tr> </thead> <tbody> <tr> <th>Stephen C. Cox</th> <td>$300</td> <td>$50</td> <td>Bob</td> </tr> </tbody> </table>
Employee | Salary | Bonus | Supervisor |
---|---|---|---|
Stephen C. Cox | $300 | $50 | Bob |
Josephin Tan | $150 | - | Annie |
Joyce Ming | $200 | $35 | Andy |
James A. Pentel | $175 | $25 | Annie |
Salary | Bonus | Supervisor | |
---|---|---|---|
Stephen C. Cox | $300 | $50 | Bob |
Josephin Tan | $150 | - | Annie |
Joyce Ming | $200 | $35 | Andy |
James A. Pentel | $175 | $25 | Annie |
Code
This Item can be used to present code. It also converts HTML tags into HTML special characters.
IMPORTANT! This item does not parse html! If you want to parse, use Column item instead!
Default code:
[code]Insert your content here[/code]
This Item can be used to present code. It also converts HTML tags into HTML special characters.
IMPORTANT! This item does not parse html! If you want to parse, use Column item instead!
Attributes:
- Content - Item content
- Custom | Classes - type your own class for the item - this is a useful option for those who want to create a special style.
For example: you can type my-class-big-font class and then go to BeTheme options > Custom CSS & JS > Custom CSS and write your own styles for this class:.my-class-big-font { font-size:150% !important; font-weight:bold; }
<h1>H1 Heading</h1> <p>Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper.</p>
Icons
Default code:
[icon type="icon-lamp"]
Attributes:
- type - Icon name
Columns
This Item creates a column. You can use iframes, HTML, local CSS styles, and more. Inside Column, you can enter anything you wish.
Default code:
[one]Insert your content here[/one] [one_second]Insert your content here[/one_second] [one_third]Insert your content here[/one_third] [two_third]Insert your content here[/two_third] [one_fourth]Insert your content here[/one_fourth] [two_fourth]Insert your content here[/two_fourth] [three_fourth]Insert your content here[/three_fourth] [one_fifth]Insert your content here[/one_fifth] [two_fifth]Insert your content here[/two_fifth] [three_fifth]Insert your content here[/three_fifth] [four_fifth]Insert your content here[/four_fifth] [one_sixth]Insert your content here[/one_sixth] [two_sixth]Insert your content here[/two_sixth] [three_sixth]Insert your content here[/three_sixth] [four_sixth]Insert your content here[/four_sixth] [five_sixth]Insert your content here[/five_sixth]
This Item creates a column. You can use iframes, HTML, local CSS styles, and more. Inside Column, you can enter anything you wish.
Attributes:
- Title - This field is used as an Item Label in admin panel only
- Content - Shortcodes and HTML tags allowed
- Text Align - Text align: left, center, right or justify
- Background | Color - Background color - Use color name or hex, e.g.: silver or #C0C0C0
- Background | Image - Choose image from Media Library
- Background | Position - This option can be used only with your custom image selected above
- Margin | Bottom - Column margin bottom: default, 0, 10px, 20px, 30px, 40xp, 50px
- Padding - Padding - Use value with px or %, e.g.: 20px or 20px 10px 20px 10px or 20px 1%
- Animation - Entrance animation
- Custom | Classes - type your own class for the item - this is a useful option for those who want to create a special style.
For example: you can type my-class-big-font class and then go to BeTheme options > Custom CSS & JS > Custom CSS and write your own styles for this class:.my-class-big-font { font-size:150% !important; font-weight:bold; }
- Custom | Styles - Custom inline CSS styles, e.g.: border:1px solid #999;