Content blocks

This Item allows you to create Tabs in 3 different styles. You can add as many tabs as you want.

Default code:

[tabs title="" type=""][tab title="Title"]Content[/tab][/tabs]

Attributes:

• title - Tabs title
• type - There are 3 different styles for this Item: horizontal, centered and vertical

Example of this shortcode below:

[tabs title="" type=""]
[tab title="Commodo luctus"]<p class="big">Lorem ipsum dolor sit amet ...</p><p>Donec vestibulum justo ...</p>[/tab]
[tab title="Eget lacina"]<p class="big">Curabitur et ligula ...</p><p>Donec vestibulum justo a diam ...</p>[/tab]
[tab title="Porta gravida"]<p class="big">Lorem ipsum dolor sit ...</p><p>Donec vestibulum justo ...</p>[/tab]
[/tabs]

[tabs title="" type="vertical"]
[tab title="Commodo luctus"]<p class="big">Lorem ipsum dolor sit amet ...</p><p>Donec vestibulum justo ...</p>[/tab]
[tab title="Eget lacina"]<p class="big">Curabitur et ligula ...</p><p>Donec vestibulum justo a diam ...</p>[/tab]
[tab title="Porta gravida"]<p class="big">Lorem ipsum dolor sit ...</p><p>Donec vestibulum justo ...</p>[/tab]
[/tabs]

This Item allows you to create Tabs in 3 different styles. You can add as many tabs as you want.

Attributes:

• Title - Tabs title
• Tabs - Tabs content
• Style - There are 3 different styles for this Item: Horizontal, Horizontal with centered tabs and Vertical
• Unique ID (optional) - Use this option if you want to open specified tab from link. For example: Your Unique ID is offer and you want to open 2nd tab, please use link: your-url/#offer-2
• 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; }

This Item adds an Accordion or Toggle on page. You can add as many tabs as you need. Just type the Title and Content (you can use html tags) for each tab. You can also use Drag & Drop option to set the order for items.

Default code:

[accordion title="" open1st="0" openAll="0" style=""][accordion_item title="Title"]Content[/accordion_item][/accordion]

Attributes:

• title - Accordion title
• open1st - To open first tab on load type: 1
• openAll - To open all tabs on load type: 1
• style - Select accordion or toggle

Example of this shortcode below:

[accordion title="" open1st="1" openAll="0" style=""]
[accordion_item title="<i class='icon-cog'></i> Sed est elit posuere ac semper hendrerit neque"]<p class="big">Lorem ipsum dolor sit amet ...</p><p>Donec vestibulum justo ...</p>[/accordion_item]
[accordion_item title="<i class='icon-star'></i> Aenean ligula nibh, molestie id viverra a"]<p class="big">Curabitur et ligula ...</p><p>Donec vestibulum justo a diam ...</p>[/accordion_item]
[accordion_item title="<i class='icon-users'></i> Morbi sed dolor risus rhoncus sapien"]<p class="big">Lorem ipsum dolor sit ...</p><p>Donec vestibulum justo ...</p>[/accordion_item]
[/accordion]

[accordion title="" open1st="1" openAll="0" style="toggle"]
[accordion_item title="Sed est elit posuere ac semper hendrerit neque"]<p class="big">Lorem ipsum dolor sit amet ...</p><p>Donec vestibulum justo ...</p>[/accordion_item]
[accordion_item title="Aenean ligula nibh, molestie id viverra a"]<p class="big">Curabitur et ligula ...</p><p>Donec vestibulum justo a diam ...</p>[/accordion_item]
[accordion_item title="Morbi sed dolor risus rhoncus sapien"]<p class="big">Lorem ipsum dolor sit ...</p><p>Donec vestibulum justo ...</p>[/accordion_item]
[/accordion]

This Item adds an Accordion or Toggle on page. You can add as many tabs as you need. Just type the Title and Content (you can use html tags) for each tab. You can also use Drag & Drop option to set the order for items.

Attributes:

• Title - Accordion item title
• Accordion - Add as many tabs you want, use drag & drop to change their order or remove them
• Open first - Open first tab on load
• Open All - Open all tabs on load
• Style - Select Accordion or Toggle
• 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; }

This Item creates an FAQ page.  You can also use Drag & Drop option to set the order for the items on this page.

Default code:

[faq title="" open1st="0" openAll="0"][faq_item title="Title" number="1"]Content[/faq_item][/faq]

Attributes:

• title - FAQ item title
• open1st - Open first tab on load
• openAll - Open all tabs on load

Example of this shortcode below:

[faq title="" open1st="1" openAll="0"]
[faq_item title="Sed est elit posuere ac semper at hendrerit a neque?" number="1"]Lorem ipsum dolor sit amet ...[/faq_item]
[faq_item title="Donec vestibulum justo a diam ultricies pellentesque?" number="2"]Lorem ipsum dolor sit amet ...[/faq_item]
[faq_item title="Quisque mattis diam vel lacus tincidunt elementum?" number="3"]Lorem ipsum dolor sit amet ...[/faq_item]
[faq_item title="Integer a placerat at, mollis nunc vel neque sollicitudin?" number="4"]Lorem ipsum dolor sit amet ...[/faq_item]
[faq_item title="Integer lorem non enim fringilla orci?" number="5"]Lorem ipsum dolor sit amet ...[/faq_item]
[/faq]

This Item creates an FAQ page.  You can also use Drag & Drop option to set the order for the items on this page.

Attributes:

• Title - FAQ item title
• Add tab - Add as many tabs you want, use drag & drop to change their order or remove them
• Open First - Open first tab on load
• Open All - Open all tabs on load
• 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; }

This is one of 2 tabs you can add. Some Shortcodes and HTML tags allowed.

Second tab has been replaced with external link

The List item enables you to define and create styles, images, icons and more.

Default code:

[list icon="icon-lamp" image="" title="" link="" target="_blank" style="1" animate=""]Insert your content here[/list]

Attributes:

• icon - Use an icon from the icon's list
• image - Image URL instead of an icon (use link with http://)
• title - List item title
• link - Link (with http://)
• target - Link target - 0 (default), _blank (new tab or window)
• style - Select style: 1 - with background, 2 - transparent, 3 - vertical or 4 - ordered list
• 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:

[list icon="icon-heart-line" image="" title="Tincidunt mauris" link="" target="" style="1" animate=""]Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor. [/list]

[list icon="" image="IMAGE_URL" title="Integer aliquam" link="#" target="" style="2" animate=""]Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor. [/list]

[list icon="" image="IMAGE_URL" title="Malesuada fames" link="" target="" style="3" animate=""]Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor. [/list]

[list icon="icon-heart-line" image="" title="1" link="" target="" style="4" animate=""]Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor. [/list]

The List item enables you to define and create styles, images, icons and more.

Attributes:

• Icon - Use an icon from the icon's list
• Image - Select image from Media Library instead of using an icon
• Title - List item title
• Content - List item content
• Link - Link (with http://)
• Open in new window - Link target
• Style - Choose between 4 different Item styles
• 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; }

This Item creates a Pricing page. You can choose among 3 different styles. For example, you can use boxes or tables, with or without labels.

Default code:

[pricing_item image="" title="" price="" currency="" currency_pos="left" period="" subtitle="" link_title="" icon="" link="" target="" featured="0" style="box" animate=""]
<ul>
 	<li><strong>List</strong> item</li>
</ul>
[/pricing_item]

Attributes:

• image - Image URL (use link with http://)
• title -Pricing title
• price - Price
• currency - Pricing currency
• currency_pos - Show currency on the: left or right
• period - Pricing period
• subtitle - Text will be visible under price
• link_title - Button text
• icon - Use an icon from the icon's list
• link - Link (with http://)
• target - Link target - 0 (default), _blank (new tab or window), lightbox (lightbox - image or embed video)
• featured - Enter 1 to feature the item
• style - Select box, table or label styles
• 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:

Box:

[pricing_item image="https://themes.muffingroup.com/be/theme/wp-content/uploads/2015/09/home_betheme_pricingbox.png" title="Basic" currency="$" currency_pos="left" price="12" period="/ monthly" subtitle="Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide." link_title="Sign up now" link="#" target="" icon="" featured="0" style="box" animate=""]
<ul>
	<li><strong>10GB</strong> Space amount</li>
	<li><strong>Unlimited</strong> users</li>
	<li><strong> 30GB</strong> Bandwidth</li>
	<li><span class="yes"></span></li>
	<li><strong>20</strong> MySQL Databases</li>
</ul>
[/pricing_item]

Table:

[pricing_item image="" title="Standard" currency="$" currency_pos="left" price="29" period="/ monthly" subtitle="Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide." link_title="Sign up now" link="#" target="" icon="" featured="0" style="table" animate=""]
<ul>
	<li><strong>10GB</strong> Space amount</li>
	<li><strong>Unlimited</strong> users</li>
	<li><strong> 30GB</strong> Bandwidth</li>
	<li><span class="no"></span></li>
	<li><strong>20</strong> MySQL Databases</li>
</ul>
[/pricing_item]

Label:

[pricing_item image="" title="Basic" currency="$" currency_pos="left" price="12" period="/ monthly" subtitle="Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide." link_title="Sign up now" link="#" target="" icon="" featured="0" style="label" animate=""]
<ul>
	<li>Space amount</li>
	<li>Users</li>
	<li>Bandwidth</li>
	<li>Enhanced Security</li>
	<li>MySQL Databases</li>
</ul>
[/pricing_item]

This Item creates a Pricing page. You can choose among 3 different styles. For example, you can use boxes or tables, with or without labels.

Attributes:

• Image - Select image from Media Library
• Title - Pricing title
• Price - Price
• Currency - Pricing currency
• Currency | Position - Show currency on the left or right side
• Period - Pricing period
• Subtitle - Text will be visible under price
• Content - Pricing content
• Button | Title - Button text
• Button | Icon - Use an icon from the icon's list
• Button | Link - Link (with http://)
• Button | Target - Link target
• Featured - Select Yes if you want an item featured
• Style - Select one of 3 different styles
• 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; }

If you prefer something other than Revolution Slider we recommend the Slider Item. You can easily show simple slide images by pasting slides on a page.Youadd slides I within the "Slides" section,located on the left side of the WordPress dashboard.

Default code:

[slider style="" category="" orderby="date" order="DESC"]

Attributes:

• style - Select one of 4 available styles: [default], description, flat, carousel or center
• category - Enter category slug or leave empty
• orderby - Select date, menu_order or title
• order - Select ASC or DESC

Example of this shortcode below:

[slider category="About" orderby="date" order="DESC"]

If you prefer something other than Revolution Slider we recommend the Slider Item. You can easily show simple slide images by pasting slides on a page.Youadd slides I within the "Slides" section,located on the left side of the WordPress dashboard.

Attributes:

• Style - Select one of 5 available styles
• Category - Slider items category
• Order by - Select order by column
• Order - Select order
• 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; }