200+ shortcodes & items
with 2 unique styles for unlimited possibilities


Typography

Choose global style for all shortcodes:ClassicSimple

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 netustooltip with image ante. Donec eu libero sit amet quam egestas semper.

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 ...

Thomas McKenzie

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
  • 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
  • Download - Download file when clicking on the link
  • OnClick - Adds an onclick="..." attribute to the link

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="http://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="http://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


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.

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>

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"]

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"]

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]
Quisque lorem tortor fringilla sed

Praesent in libero vel turpis pellentesque

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

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]
Warning message. This is a sample link
Error message. This is a sample link
Info message. This is a sample link
Success message. This is a sample link

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]
Nulla imperdiet sit amet magna. Vestibulum dapibus. Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc.

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>
EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
SalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie

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>

Default code:

[icon type="icon-lamp"]

Attributes:

  • type - Icon name
icon-acrobat
icon-address
icon-adjust
icon-aim
icon-air
icon-alert
icon-amazon
icon-android
icon-angellist
icon-appnet
icon-appstore
icon-archive
icon-arrow-combo
icon-arrows-ccw
icon-attach
icon-attach-line
icon-attention
icon-back
icon-back-in-time
icon-bag
icon-basket
icon-battery
icon-beaker-line
icon-behance
icon-bell
icon-bitbucket
icon-bitcoin
icon-block
icon-blogger
icon-book
icon-book-open
icon-bookmark
icon-bookmarks
icon-box
icon-briefcase
icon-brush
icon-bucket
icon-buffer
icon-calendar
icon-calendar-line
icon-call
icon-camera
icon-camera-line
icon-cancel
icon-cancel-circled
icon-cancel-squared
icon-cart
icon-cc
icon-cc-by
icon-cc-nc
icon-cc-nc-eu
icon-cc-nc-jp
icon-cc-nd
icon-cc-pd
icon-cc-remix
icon-cc-sa
icon-cc-share
icon-cc-zero
icon-ccw
icon-cd
icon-cd-line
icon-chart-area
icon-chart-bar
icon-chart-line
icon-chart-pie
icon-chat
icon-check
icon-chrome
icon-clipboard
icon-clock
icon-clock-line
icon-cloud
icon-cloud-line
icon-cloud-thunder
icon-cloudapp
icon-code
icon-cog
icon-cog-line
icon-comment-empty-fa
icon-comment-fa
icon-comment-line
icon-compass
icon-credit-card
icon-cup
icon-cup-line
icon-cw
icon-database
icon-database-line
icon-db-shape
icon-delicious
icon-desktop-line
icon-diamond-line
icon-digg
icon-direction
icon-disqus
icon-doc
icon-doc-landscape
icon-doc-line
icon-doc-text
icon-doc-text-inv
icon-docs
icon-dot
icon-dot-2
icon-dot-3
icon-down
icon-down-bold
icon-down-circled
icon-down-dir
icon-down-open
icon-down-open-big
icon-down-open-mini
icon-down-thin
icon-download
icon-dribbble
icon-dribbble-circled
icon-drive
icon-dropbox
icon-droplet
icon-drupal
icon-duckduckgo
icon-dwolla
icon-ebay
icon-email
icon-erase
icon-eventasaurus
icon-eventbrite
icon-eventful
icon-evernote
icon-export
icon-eye
icon-eye-line
icon-facebook
icon-facebook-circled
icon-facebook-squared
icon-fast-backward
icon-fast-forward
icon-feather
icon-fire-line
icon-fivehundredpx
icon-flag
icon-flash
icon-flashlight
icon-flattr
icon-flickr
icon-flickr-circled
icon-flight
icon-floppy
icon-flow-branch
icon-flow-cascade
icon-flow-line
icon-flow-parallel
icon-flow-tree
icon-folder
icon-food-line
icon-forrst
icon-forward
icon-foursquare
icon-gauge
icon-github
icon-github-circled
icon-globe
icon-globe-line
icon-gmail
icon-google
icon-google-circles
icon-googleplay
icon-gowalla
icon-gplus
icon-gplus-circled
icon-graduation-cap
icon-graduation-cap-line
icon-grooveshark
icon-guest
icon-hackernews
icon-heart-empty-fa
icon-heart-fa
icon-heart-line
icon-help
icon-help-circled
icon-home
icon-hourglass
icon-html5
icon-ie
icon-inbox
icon-inbox-line
icon-infinity
icon-info
icon-info-circled
icon-instagram
icon-install
icon-instapaper
icon-intensedebate
icon-itunes
icon-key
icon-key-line
icon-keyboard
icon-klout
icon-lamp
icon-language
icon-lanyrd
icon-lastfm
icon-lastfm-circled
icon-layout
icon-leaf
icon-left
icon-left-bold
icon-left-circled
icon-left-dir
icon-left-open
icon-left-open-big
icon-left-open-mini
icon-left-thin
icon-lego
icon-level-down
icon-level-up
icon-lifebuoy
icon-light-down
icon-light-up
icon-lightbulb-line
icon-link
icon-linkedin
icon-linkedin-circled
icon-list
icon-list-add
icon-lkdto
icon-location
icon-location-line
icon-lock
icon-lock-line
icon-lock-open
icon-login
icon-logo-db
icon-logout
icon-loop
icon-macstore
icon-magnet
icon-mail
icon-mail-line
icon-map
icon-meetup
icon-megaphone
icon-megaphone-line
icon-menu
icon-mic
icon-minus
icon-minus-circled
icon-minus-squared
icon-mixi
icon-mobile
icon-mobile-line
icon-money-line
icon-monitor
icon-moon
icon-mouse
icon-music
icon-music-line
icon-mute
icon-myspace
icon-network
icon-newspaper
icon-ninetyninedesigns
icon-note
icon-note-beamed
icon-note-line
icon-openid
icon-opentable
icon-palette
icon-paper-plane
icon-paper-plane-line
icon-params-line
icon-pause
icon-paypal
icon-pencil
icon-pencil-line
icon-phone
icon-photo-line
icon-picasa
icon-picture
icon-pinboard
icon-pinterest
icon-pinterest-circled
icon-plancast
icon-play
icon-plurk
icon-plus
icon-plus-circled
icon-plus-squared
icon-pocket
icon-podcast
icon-popup
icon-posterous
icon-print
icon-progress-0
icon-progress-1
icon-progress-2
icon-progress-3
icon-publish
icon-qq
icon-quora
icon-quote
icon-rdio
icon-rdio-circled
icon-record
icon-reddit
icon-renren
icon-reply
icon-reply-all
icon-resize-full
icon-resize-small
icon-retweet
icon-right
icon-right-bold
icon-right-circled
icon-right-dir
icon-right-open
icon-right-open-big
icon-right-open-mini
icon-right-thin
icon-rocket
icon-rss
icon-scribd
icon-search
icon-search-line
icon-share
icon-shareable
icon-shop-line
icon-shuffle
icon-signal
icon-sina-weibo
icon-skype
icon-skype-circled
icon-smashing
icon-smashmag
icon-songkick
icon-sound
icon-sound-line
icon-soundcloud
icon-spotify
icon-spotify-circled
icon-stackoverflow
icon-star
icon-star-empty
icon-star-line
icon-statusnet
icon-steam
icon-stop
icon-stripe
icon-stumbleupon
icon-stumbleupon-circled
icon-suitcase
icon-sweden
icon-switch
icon-t-shirt-line
icon-tag
icon-tag-line
icon-tape
icon-target
icon-thermometer
icon-thumbs-down
icon-thumbs-up
icon-thumbs-up-line
icon-ticket
icon-to-end
icon-to-start
icon-tools
icon-traffic-cone
icon-trash
icon-trash-line
icon-trophy
icon-truck-line
icon-tumblr
icon-tumblr-circled
icon-tv-line
icon-twitter
icon-twitter-circled
icon-up
icon-up-bold
icon-up-circled
icon-up-dir
icon-up-open
icon-up-open-big
icon-up-open-mini
icon-up-thin
icon-upload
icon-upload-cloud
icon-user
icon-user-add
icon-user-line
icon-users
icon-vcard
icon-viadeo
icon-video
icon-videocam-line
icon-vimeo
icon-vimeo-circled
icon-vk
icon-vkontakte
icon-volume
icon-w3c
icon-wallet-line
icon-water
icon-weibo
icon-wikipedia
icon-window
icon-windows
icon-wordpress
icon-xing
icon-yahoo
icon-yelp
icon-youtube

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;
1/1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi sit amet sem consequat eget ultricies nisi tincidunt. Donec dictum posuere commodo. Curabitur sollicitudin dictum urna quis molestie. Proin eget massa quis lorem hendrerit consequat interdum eget tortor.

1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi consequat eget ultricies nisi tincidunt sit amet sem consequat eget adipiscing ultricies nisi tincidunt.
1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi consequat eget ultricies nisi tincidunt sit amet sem consequat eget adipiscing ultricies nisi tincidunt.

2/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi sit amet sem conse quat eget ultricies nisi tincidunt. Donec dictum posuere commodo. Curabitur soll dictum icitudin dictum dolor sit amet, consectetur adipiscing elit.


3/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi sit amet sem consequat eget ultricies nisi tincidunt. Donec dictum posuere commodo. Curabitur sollicitudin dictum urna quis molestie. Proin eget massa quis lorem hendrerit consequat interdum eget.
1/4
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing elit vesti bulum.

1/4
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing elit vesti bulum.
1/4
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing elit vesti bulum.
1/4
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing elit vesti bulum.
1/4
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing elit vesti bulum.

1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.
1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.
1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.
1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.
1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.

3/5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi sit amet sem consequat eget ultricies nisi tincidunt. Donec dictum posuere commodo. Curabitur sollicitudin dictum urna quis molestie.
1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.
1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.

4/5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi sit amet sem consequat eget ultricies nisi tincidunt. Donec dictum posuere commodo. Curabitur sollicitudin dictum urna quis molestie. Proin eget massa quis lorem hendrerit consequat interdum eget tortor.
1/5
Lorem ipsum dolor eget consequat sit amet, conse ctetur adipiscing.

1/6
Lorem ipsum dolor eget consequat sit amet.
1/6
Lorem ipsum dolor eget consequat sit amet.
1/6
Lorem ipsum dolor eget consequat sit amet.
1/6
Lorem ipsum dolor eget consequat sit amet.
1/6
Lorem ipsum dolor eget consequat sit amet.
1/6
Lorem ipsum dolor eget consequat sit amet.

5/6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet mi sit amet sem consequat eget ultricies nisi tincidunt. Donec dictum posuere commodo. Curabitur sollicitudin dictum urna quis molestie. Proin eget massa quis lorem hendrerit consequat interdum eget tortor.
1/6
Lorem ipsum dolor eget consequat sit amet.