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


Boxes & Infographics

Choose global style for all shortcodes:ClassicSimple

With this Item you can create an awesome Icon box featuring a hover effect. There are many different styles or you can create your own.

Default code:

[icon_box title="" icon="icon-lamp" image="" icon_position="" border="0" link="" target="_blank" class="" animate=""]Insert your content here[/icon_box]

Attributes:

  • title - Icon Box title
  • icon - Use an icon from the icon's list
  • image - Image URL instead of an icon (use link with http://)
  • icon position - Select: left or top
  • border - Show right border - enter: 1
  • link - Link (with http://)
  • target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
  • class - This option is useful when you want to use scroll
  • 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:

[icon_box title="Aenean fermen" icon="icon-heart-line" image="" icon_position="top" border="1" link="#" target="_blank" animate="" class=""]Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.[/icon_box]

[icon_box title="Curabitur ipsum" icon=" icon-database-line" image="" icon_position="left" border="0" link="#" target="_blank" animate="" class=""]Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.[/icon_box]

[icon_box title="Aenean fermen" icon="" image="IMAGE_URL" icon_position="" border="0" link="#" target="_blank" animate="" class=""]Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.[/icon_box]

With this Item you can create an awesome Icon box featuring a hover effect. There are many different styles or you can create your own.

Attributes:

  • Title - Icon Box title
  • Content - Icon Box content text
  • Icon - Use an icon from the icon's list
  • Image - Select image from Media Library instead of using an icon
  • Icon Position - Choose position: Top or Left
  • Border - Show right border
  • Link - Link (with http://)
  • Link | Target - Link target
  • Link | Class - This option is useful when you want to use scroll
  • 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; }

Default code:

[feature_box image="" title="" background="" link="" target=""]Insert your content here[/feature_box]

Attributes:

  • image - Image URL instead of an icon (use link with http://)
  • title - Feature Box title
  • background - Use color name or hex, e.g.: grey or #CCCCCC
  • link - Link (with http://)
  • target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
  • 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:

[feature_box image="IMAGE_URL" title="Nulla imperdiet" background="#F7F7F7" link="#" target=""]Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra dapibus.[/feature_box]

Attributes:

  • Image - Select image from Media Library
  • Title - Feature Box title
  • Content - Feature Box content text
  • Background color - Use color name or hex, e.g.: grey or #CCCCCC
  • Link - Link (with http://)
  • Link | Target - Link target
  • 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; }
home_betheme_featurebox_1

Nulla imperdiet

Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra dapibus.
home_betheme_featurebox_2

Integer aliquam

Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra dapibus.

Flat Box features an icon on the left and an image on the right with a nice hover effect.

Default code:

[flat_box icon="icon-lamp" background="" image="" title="" link="" target="" animate=""]Insert your content here[/flat_box]

Attributes:

  • icon - Use an icon from the icon's list
  • background - Background color - Use color name or hex, e.g.: grey or #CCCCCC
  • image - Image URL (use link with http://)
  • title - Title appears under the image
  • link - Link (with http://)
  • target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
  • 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:

[flat_box icon="icon-heart-line" background="" image="https://themes.muffingroup.com/be/theme/wp-content/uploads/2015/09/home_betheme_flatbox.png" title="Beauty centre" link="#" target="" animate=""]Duis sed odio ligula. Suspendisse tempor consequat felis tempor lacinia. Nam porttitor, massa eget blandit mollis[/flat_box]

Flat Box features an icon on the left and an image on the right with a nice hover effect.

Attributes:

  • Icon - Use an icon from the icon's list
  • Icon background - Background color - Use color name or hex, e.g.: grey or #CCCCCC
  • Image - Select image from Media Library
  • Title - Title appears under the image
  • Content - Content text. Some Shortcodes and HTML tags allowed
  • Link - Link (with http://)
  • Link | Target - Link target
  • 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; }

Default code:

[hover_box image="" image_hover="" link="" target=""]

Attributes:

  • image - upload image
  • image_hover - upload image
  • link - type link for item

Example of this shortcode below:

[hover_box image="IMAGE_URL" image_hover="IMAGE_URL" link="#" target=""]

Attributes:

  • Image - Select image from Media Library
  • Image | Hover - Select hover image from Media Library
  • Link - Link (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; }

Photo box - attractive box with title, text and image, with a nice hover effect.

Default code:

[photo_box image="" title="" link="" target="_blank" greyscale="0" animate=""]Insert your content here[/photo_box]

Attributes:

  • image - type path for image
  • title - large text visible under image
  • link - URL to any page
  • target - optional target for link, ex. "_blank"
  • 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:

[photo_box image="https://themes.muffingroup.com/be/theme/wp-content/uploads/2015/09/home_betheme_photobox.png" title="Nulla imperdiet" link="#" target="" greyscale="0" animate=""]Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.[/photo_box]

Photo box - attractive box with title, text and image, with a nice hover effect.

Attributes:

  • Title - title for Photo Box
  • Image - choose photo for Photo Box
  • Content - text from this section is visible under photo
  • Text Align - choose between Center, Left or Right align for text
  • Link - type link for this item if needed
  • Open in new window - Yes to open link in a new window
  • Animation - choose Entrance Animation on Scroll or No Animation

Sliding Box allows you to create a photo box with a nice sliding effect. This box can contain a link if desired.

Default code:

[sliding_box image="" title="" link="" target="_blank" animate=""]

Attributes:

  • image - put path for the image
  • title - text appears in the bottom of the image
  • link - enter URL for the image
  • target - optional target for link, ex. "_blank"
  • 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:

[sliding_box image="IMAGE_URL" title="Aenean ligula" link="#" target="" animate=""]

Sliding Box allows you to create a photo box with a nice sliding effect. This box can contain a link if desired.

Attributes:

  • Image - select Sliding Box photo
  • Title - enter text; it will appearunder the photo
  • Link - enter link if needed
  • Open in new window - enter Yes if you want to open the link in a new window
  • Animation - choose Entrance Animation on Scroll or No Animation

Article Box - this shortcode creates a box with an image and some text. Box can be linked if desired.Article Box has 5 attributes:

Default code:

[article_box image="" slogan="" title="" link="" target="_blank" animate=""]

Attributes:

  • image - put path to image for article box shortcode
  • slogan - slogan located next to image
  • title - title for article box shortcode
  • link - link to any page
  • target - optional target for link, ex. "_blank"
  • 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:

[article_box image="IMAGE_URL" slogan="Aliqu tincid mauris" title="Aenean ferme ntum elit eget" link="#" target="" animate=""]

Article Box - this shortcode creates a box with an image and some text. Box can be linked if desired.Article Box has 5 attributes:

Attributes:

  • Image - upload image for box
  • Slogan - text available at the top of right side item
  • Title - title for article box item
  • Link - link to any page of your choosing - this field can be left empty
  • Open in new window - if you want to open the link in the new window
  • Animation - choose entrance animation on scroll or leave not animated
home_betheme_articlebox_1

Aliqu tincid mauris

Aenean ferme ntum elit eget

home_betheme_articlebox_2

Nec malesuada fames

Vitae adipiscing turpis aen

home_betheme_articlebox_3

Lorem ipsum primi

Nulla imperdiet sit amet

This Item creates a Promo Box with text, image and a button with a link. You can select left or right style and other settings as well.

Default code:

[promo_box image="" title="" btn_text="" btn_link="" target="_blank" position="" border="0" animate=""]Insert your content here[/promo_box]

Attributes:

  • image - Image URL (use link with http://)
  • title - Promo Box title
  • btn_text - Button title
  • btn_link - Button link (with http://)
  • target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
  • position - Select left or right
  • border - To show right border 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:

[promo_box image="IMAGE_URL" title="Eleifend ante lobortis" btn_text="Button with icon" btn_link="#" position="left" border="0" target="" animate=""]<p class="big">Vitae adipiscing turpis. Aenean ligula nibh, molest ie id viverra a, dapibus at dolor. In iaculis viverra ne que, ac eleifend ante lobortis.</p>[/promo_box]

This Item creates a Promo Box with text, image and a button with a link. You can select left or right style and other settings as well.

Attributes:

  • Image - Select image from Media Library instead of using an icon
  • Title - Promo Box title
  • Content - Progress Box content
  • Button | Text - Button title
  • Button | Link - Button link (with http://)
  • Button | Target - Link target
  • Image position - Choose between left or right side image position
  • Border - Show right border
  • 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; }
home_betheme_icon_8

Eleifend ante lobortis

Vitae adipiscing turpis. Aenean ligula nibh, molest ie id viverra a, dapibus at dolor. In iaculis viverra ne que, ac eleifend ante lobortis.

Button with icon
home_betheme_icon_9

Ante laculis viverra

Vitae adipiscing turpis. Aenean ligula nibh, molest ie id viverra a, dapibus at dolor. In iaculis viverra ne que, ac eleifend ante lobortis.

Button with icon

The Trailer Box item features a slogan, a photo, and has a nice hover effect.

Default code:

[trailer_box image="" slogan="" title="" link="" target="_blank" animate=""]

Attributes:

  • image - Image URL instead of an icon (use link with http://)
  • slogan - Slogan to show above the title
  • title - Title will appear on the image
  • link - Link (with http://)
  • target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
  • 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:

[trailer_box image="IMAGE_URL" slogan="Vitae adipis" title="Vitae adipiscing turpis aenea" link="#" target="" animate=""]

The Trailer Box item features a slogan, a photo, and has a nice hover effect.

Attributes:

  • Image - Select image from Media Library
  • Slogan - Slogan to show above the title
  • Title - Title will appear on the image
  • Link - Link (with http://)
  • Link | Target - Link target
  • 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; }

Default code:

[zoom_box image="" bg_color="#000" content_image="" link="" target="_blank"]Insert your content here[/zoom_box]

Attributes:

  • image - Image URL (use link with http://)
  • bg_color - Use color name or hex, e.g.: grey or #CCCCCC
  • content_image - Small overlay image URL (use link with http://)
  • link - Link (with http://)
  • target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)

Example of this shortcode below:

[zoom_box image="IMAGE_URL" bg_color="#e8a735" content_image="IMAGE_URL" link="#" target=""]SMALL BUSINESS WEBSITES[/zoom_box]

Attributes:

  • Image - Select image from Media Library
  • Overlay background - Use color name or hex, e.g.: grey or #CCCCCC
  • Content Image - Select small overlay image from Media Library
  • Content - Zoom Box content text
  • Link - Link (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; }

Default code:

[story_box image="" style="horizontal" title="" link="" target="_blank" animate=""]Insert your content here[/story_box]

Attributes:

  • image - Image URL (use link with http://)
  • style - You can select style for horizontal or vertical Image
  • title - Story Box title
  • link - Link (with http://)
  • target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
  • 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:

[story_box image="IMAGE_URL" style="horizontal" title="Praesent felis volutpat curabitur sitam porttitor donec facilisis" link="#" target="" animate=""]Curabitur sit amet porttitor orci. Donec a mollis diam, facilisis convallis sem. Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla semper a nullam.[/story_box]

Attributes:

  • Image - Select image from Media Library
  • Style - You can select style for Horizontal or Vertical Image
  • Title - Story Box title
  • Content - Story Box content text
  • Link - Link (with http://)
  • Link | Target - Link target
  • 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; }
home_betheme_storybox_1

Praesent felis volutpat curabitur sitam porttitor donec facilisis


Curabitur sit amet porttitor orci. Donec a mollis diam, facilisis convallis sem. Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla semper a nullam.
home_betheme_storybox_2

Nunc magna rhoncus velporta commodo nec libero maecenas


Maecenas congue massa nec odio cursus finibus. In quis dapibus lectus. Integer neque metus, laoreet sed posuere vitae, hendrerit et diam fusce.

Default code:

[before_after image_before="" image_after=""]

Attributes:

  • image_before - 1st Image URL (use link with http://)
  • image_after - 2nd Image URL (use link with http://)

Example of this shortcode below:

[before_after image_before="IMAGE1_URL" image_after="IMAGE2_URL"]

Attributes:

  • Image | Before - Select 1st image from Media Library
  • Image | After - Select 2nd image from Media Library
  • 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; }
home_betheme_beforeafter_1_2home_betheme_beforeafter_1
home_betheme_beforeafter_2_2home_betheme_beforeafter_2

Create Quick Fact, a nice item for presenting facts with short descriptions.

Default code:

[quick_fact heading="" number="" prefix="" label="%" title="" animate=""]Insert your content here[/quick_fact]

Attributes:

  • heading - Text above counter number
  • number - Number appears at the top of the Quick Fact
  • prefix - This is text e.g. % or $ - before the number
  • label - This is text e.g. % or $ - after the number
  • title - Title under the large number
  • 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:

[quick_fact heading="" number="35" prefix="" label="" title="countries" animate=""]Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.[/quick_fact]

Create Quick Fact a nice item for presenting facts with short descriptions.

Attributes:

  • Heading - Text above counter number
  • Number - Number appears at the top of the Quick Fact
  • Prefix - This is text e.g. % or $ - before the number
  • Postfix - This is text e.g. % or $ - after the number
  • Title - Title under the large number
  • Content - Short description under the title
  • 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; }
35

countries


Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
142

articles


Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
89

projects


Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
9

years of experience


Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.

This Item creates a Counter with icons or images.

Default code:

[counter icon="icon-lamp" color="" image="" number="44" prefix="" label="%" title="" type="vertical" animate=""]

Attributes:

  • icon - Use an icon from the icon's list
  • color - Use color name or hex, e.g.: grey or #CCCCCC
  • image - Image URL instead of an icon (use link with http://)
  • number - Number for Counter item
  • prefix - This is text e.g. % or $ - before the number
  • label - This is text e.g. % or $ - after the number
  • title - Title placed under number
  • type - Select vertical or horizontal
  • 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:

[counter icon=" icon-t-shirt-line" color="" image="" number="1452" prefix="" label="" title="Tincidunt mauris" type="vertical" animate=""]

[counter icon="" color="" image="IMAGE_URL" number="744" prefix="" label="" title="Malesuada fames" type="vertical" animate=""]

[counter icon="icon-attach-line" color="" image="" number="367" prefix="" label="" title="Vestibulum commodo" type="horizontal" animate=""]

This Item creates a Counter with icons or images.

Attributes:

  • Icon - Use an icon from the icon's list
  • Icon color - Use color name or hex, e.g.: grey or #CCCCCC
  • Image - Select image from Media Library instead of using an icon
  • Number - Number for Counter item
  • Prefix - This is text e.g. % or $ - before the number
  • Postfix - This is text e.g. % or $ - after the number
  • Title - Title placed under number
  • Style - Select Vertical or Horizontal style
  • 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; }
1452

Tincidunt mauris

958

Integer aliquam

home_betheme_icon_2
744

Malesuada fames

home_betheme_icon_6
295

Bibendum sapien


Chart use this item to put charts on your page.

Default code:

[chart percent="" label="" icon="" image="" title=""]

Attributes:

  • title - Title for chart item
  • percent - Identify the percent desired around the circle
  • label - Text inside Chart item
  • icon - Use an icon from the icon's list
  • image - Image URL instead of an icon (use link with http://)
  • line_width - Chart circle line width

Example of this shortcode below:

[chart percent="42" label="42%" icon="" image="" title="Curabitur ipsum"]

[chart percent="34" label="" icon="icon-heart-line" image="" title="Tincidunt mauris"]

[chart percent="50" label="" icon="" image="IMAGE_URL" title="Tincidunt mauris" line_width="5"]

Chart use this item to put charts on your page.

Attributes:

  • Title - Title for chart item
  • Percent - Identify the percent desired around the circle
  • Chart | Label - Text inside Chart item
  • Chart | Icon - Use an icon from the icon's list
  • Chart | Image - Select image from Media Library instead of using an icon
  • Line width - Chart circle line width
  • 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; }
42%

Curabitur ipsum

67%

Aliquam eratur

Tincidunt mauris

home_betheme_icon_1

Tincidunt mauris

Progress bars - present your skills using this shortcode.

Default code:

[progress_bars title=""][bar title="Bar1" value="50" size="20"][/progress_bars]

Attributes:

  • title - Title for Progress Bars

Attributes for bar shortcode:

  • title - Bar title
  • value - Bar value in percent, from 0 to 100
  • size - Bar size in px, default: 20

Example of this shortcode below:

[progress_bars title=""]
[bar title="Aenean fermen" value="60"]
[bar title="Quisque lorem" value="47" size="10"]
[/progress_bars]

Progress bars - present your skills using this shortcode.

Attributes:

  • Title - Progress bars title
  • Content - Please use below bar shortcode
    [bar title="Title" value="50" size="20"]
  • 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; }

Countdown - this shortcode will place a time countdown in any location you specify.

Default code:

[countdown date="12/30/2016 12:00:00" timezone="0"]

Attributes:

  • date - Enter Launch Date in the following format: month/day/year hour:minute:second, e.g. 12/30/2016 12:00:00
  • timezone - Choose your time zone
  • show - Show fields - dhms (days hours minutes seconds - default), dhm (days hours minutes), dh (days hours), d (days)

Example of this shortcode below:

[countdown date="12/30/2016 12:00:00" timezone="0"]

Countdown - this shortcode will place a time countdown in any location you specify.

Attributes:

  • Launch Date - Enter Launch Date in the following format: month/day/year hour:minute:second, e.g. 12/30/2016 12:00:00
  • UTC Timezone - Choose your time zone
  • Show - Show fields
  • 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; }
00

days


00

hours


00

minutes


00

seconds