200+ shortcodes & items
with 2 unique styles for unlimited possibilities
Content elements
Timeline
This Item creates a Timline section. You can use it for any purpose you need. It works just like Tabs or Accordion. Just Add tab and the desired content.
Attributes:
- Timeline - Please add date wrapped into span tag in Title field.
<span>2015</span>Event Title
- 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; }
29.12.2013Vitae adipiscing turpis aen
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum stie id viverra.15.08.2013Quisque lorem tortor fringilla
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum stie id viverra.11.05.2013Aenean ferme ntum elit eget
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum stie id viverra.
How it works
The How it Works item allows you to create steps sections that can be used on landing pages.
Default code:
[how_it_works image="" number="" title="" border="1" link="" target="" animate=""]Insert your content here[/how_it_works]
Attributes:
- image - Image URL (use link with http://)
- number - Digit appears in the right bottom section of the item
- title - Title appears under the circle
- border - Enter 1 to show a connecting line between items
- 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:
[how_it_works image="IMAGE_URL" number="1" title="Step 1" border="1" link="" target="" animate=""]Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.[/how_it_works]
The How it Works item allows you to create steps sections that can be used on landing pages.
Attributes:
- Background image - Select image from Media Library
- Number - Digit appears in the right bottom section of the item
- Title - Title appears under the circle
- Content - Enter descriptive text
- Line - Choose whether or not to show a connecting line between items
- 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; }
Step 1
Step 2
Step 3
Step 4
Contact box - this shortcode creates an attractive Contact Box item.
Default code:
[contact_box title="" address="" telephone="" telephone_2="" fax="" email="" www="" image="" animate=""]
Attributes:
- title - Contact box title
- address - Enter your address. HTML tags are also allowed
- telephone - Telephone number
- telephone_2 - Additional telephone number
- fax - Fax number
- email - Email address
- www - Website URL
- image - Background image URL (use link with http://)
- 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:
[contact_box title="Contact Box" address="<strong>Envato</strong><br>Level 13, 2 Elizabeth St,<br>Melbourne, Victoria 3000 Australia" telephone="+61 (0) 7 9180 3458" telephone_2="" fax="" email="[email protected]" www="http://www.envato.com/" image="" animate=""]
Contact box - this shortcode creates an attractive Contact Box item.
Attributes:
- Title - Contact box title
- Address - Enter your address. HTML tags are also allowed
- Phone - Telephone number
- Phone 2nd - Additional telephone number
- Fax - Fax number
- Email - Email address
- WWW - Website URL
- Background image - Select image from Media Library
- 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; }
Contact Box
- Envato
Level 13, 2 Elizabeth St,
Melbourne, Victoria 3000 Australia
This item will create a Opening hours box in which you can type whatever content you want.You can also include a background image for an added effect.
Default code:
[opening_hours title="" image="" animate=""]Insert your content here[/opening_hours]
Attributes:
- title - Opening hours title
- image - Image URL (use link with http://)
- 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:
[opening_hours title="Opening hours" image="IMAGE_URL" animate=""] <p>Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.</p> <ul> <li><label>Monday - Friday</label><span>8<sup>00</sup> - 16<sup>00</sup></span></li> <li><label>Saturday</label><span>8<sup>00</sup> - 15<sup>00</sup></span></li> </ul> [/opening_hours]
This item will create a Opening hours box in which you can type whatever content you want.You can also include a background image for an added effect.
Attributes:
- Title - Opening hours title
- Content - Use any content you want, including plain text or html tags
- Background image - Select image from Media Library
- 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; }
Opening hours
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
- 800 - 1600
- 800 - 1500
This Item allows you to create an awesome Info box. You can also include a background image for an added effect.
Default code:
[info_box title="" image="" animate=""]Insert your content here[/info_box]
Attributes:
- title - Info Box title
- image - Background image URL (use link with http://)
- 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:
[info_box title="Infobox" image="IMAGE_URL" animate=""] <ul> <li>100% Responsive & Retina ready</li> <li>Best drag&drop page builder</li> <li>Tons of shortcodes</li> <li>SEO optimized</li> <li>and so much more...</li> </ul> [/info_box]
This Item allows you to create an awesome Info box. You can also include a background image for an added effect.
Attributes:
- Title - Info Box title
- Content - Info Box content
- Background image - Select image from Media Library
- 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; }
Infobox
- 100% Responsive & Retina ready
- Best drag&drop page builder
- Tons of shortcodes
- SEO optimized
- and so much more...
Map with address box
This Item will create the Google map. Map item is based on Google Maps API.
Default code:
[map lat="" lng="" zoom="13" height="200" type="ROADMAP" controls="mapType" draggable="" border="0" icon="" title="" telephone="" email="" www="" latlng=""]Insert your content here[/map]
Attributes:
- lat - Type Lat value for your position
- lng - Type Lng value for your position
- zoom - Zoom level of the map, e.g. 13
- height - Map height in px
- type - Select one of 4 map types: ROADMAP, SATELLITE, HYBRID or TERRAIN
- controls - Choose which controls to show: zoom, mapType, streetView, zoom mapType, zoom streetView, mapType streetView, zoom mapType streetView or hide
- draggable - Choose one of 3 options: [default], disable, disable-mobile
- icon - Image URL (.png format only, use link with http://)
- title - Title for address box
- telephone - Phone number for address box
- email - Email for address box
- www - WWW for address box
- latlng - Separate Lat,Lang,IconURL[optional] with coma [ , ]
Separate multiple Markers with semicolon [ ; ]
Example: -33.88,151.21,ICON_URL;-33.89,151.22
Example of this shortcode below:
[map lat="-33.8710" lng="151.2039" height="400" zoom="13" type="ROADMAP" controls="mapType" draggable="" icon="" title="" telephone="" email="" www="" latlng=""][/map]
This Item will create the Google map. Map item is based on Google Maps API.
Attributes:
- Google Maps Lat - Type Lat value for your position
- Google Maps Lng - Type Lng value for your position
- Zoom - Zoom level of the map
- Height - Map height in px
- Type - Select one of 4 map styles
- Controls - Choose which controls to show
- Draggable - Celect if map should be draggable
- Border - Show map border
- Marker Icon - Select image from Media Library (.png format only)
- Styles - Get predefined styles from snazzymaps.com or generate your own here
- Additional Markers | Lat,Lng,IconURL - Separate Lat,Lang,IconURL[optional] with coma [ , ]
Separate multiple Markers with semicolon [ ; ]
Example: -33.88,151.21,ICON_URL;-33.89,151.22 - Box | Title - Title for address box
- Box | Address - Content for address box
- Box | Telephone - Phone number for address box
- Box | Email - Email for address box
- Box | WWW - WWW for address box
- 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; }
The map will appear only if Google Maps Lat and Google Maps Lng are correctly entered.
Our office
- Envato
Level 13, 2 Elizabeth
Victoria 3000 Australia
Our Team
This Item creates a single Our team profile to show your team.
Default code:
[our_team image="" title="" subtitle="" email="" phone="" facebook="" twitter="" linkedin="" vcard="" blockquote="" style="vertical" link="" target="" animate=""]Insert your content here[/our_team]
Attributes:
- image - Image URL (use link with http://)
- title - Our team item title
- subtitle - Subtitle for a team profile
- phone - Phone number for your team or for a member of the team
- email - Email for one of our team's profile
- facebook - Facebook link (with http://) for a team's profile
- twitter - twitter link (with http://) for a team's profile
- linkedin - LinkedIn link (with http://) for a team's profile
- vcard - vCard link (with http://) for a team's profile
- blockquote - Type blockquote
- style - Select style: vertical, horizontal and circle
- 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:
Vertical
[our_team image="IMAGE_URL" title="Jennifer Lee" subtitle="Software Engineer" email="[email protected]" phone="" facebook="http://facebook.com" twitter="http://twitter.com/" linkedin="http://www.linkedin.com/" vcard="" blockquote="" style="vertical" link="" target="" animate=""]Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.[/our_team]
Horizontal
[our_team image="IMAGE_URL" title="Doris Flores" subtitle="Business Analyst" email="[email protected]" phone="" facebook="http://facebook.com" twitter="http://twitter.com/" linkedin="http://www.linkedin.com/" vcard="" blockquote="" style="horizontal" link="" target="" animate=""]Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.[/our_team]
Circle
[our_team image="IMAGE_URL" title="Kevin Perry" subtitle="Software Engineer" email="[email protected]" phone="" facebook="http://facebook.com" twitter="http://twitter.com/" linkedin="http://www.linkedin.com/" vcard="" blockquote="" style="circle" link="" target="" animate=""]Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.[/our_team]
This Item creates a single Our team profile to show your team.
Attributes:
- Heading - Heading text above the photo
- Photo - Select image from Media Library
- Title - Our team item title
- Subtitle - Subtitle for a team profile
- Phone - Phone number for your team or for a member of the team
- Content - Our team item content
- Email - Email for one of our team's profile
- Facebook - Facebook link (with http://) for a team's profile
- Twitter - twitter link (with http://) for a team's profile
- LinkedIn - LinkedIn link (with http://) for a team's profile
- vCard - vCard link (with http://) for a team's profile
- Blockquote - Type blockquote
- Style - Choose between 3 different styles
- 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; }
Our Team List
Our team list - present your staff using this shortcode.
Default code:
[our_team_list image="" title="" subtitle="" blockquote="" email="" phone="" facebook="" twitter="" linkedin="" vcard="" link="" target=""]Insert your content here[/our_team_list]
Attributes:
- image - Image URL (use link with http://)
- title - Our team item title
- subtitle - Subtitle for a team profile
- blockquote - Type blockquote
- phone - Phone number for your team or for a member of the team
- email - Email for one of our team's profile
- facebook - Facebook link (with http://) for a team's profile
- twitter - twitter link (with http://) for a team's profile
- linkedin - LinkedIn link (with http://) for a team's profile
- vcard - vCard link (with http://) for a team's profile
- 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:
[our_team_list image="IMAGE_URL" title="Tina Rice" subtitle="Web Developer" blockquote="Vitae adipiscing turpis. Aen ligula nibh, molestie sed vitae dictum in gravida" email="[email protected]" phone="" facebook="http://facebook.com" twitter="http://twitter.com/" linkedin="" vcard="" link="" target=""] <p class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem.</p> <p>Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula.</p> [/our_team_list]
Our team list - present your staff using this shortcode.
Attributes:
- Photo - Select image from Media Library
- Title - Our team item title
- Subtitle - Subtitle for a team profile
- Phone - Phone number for your team or for a member of the team
- Content - Our team item content
- Blockquote - Type blockquote
- Email - Email for one of our team's profile
- Facebook - Facebook link (with http://) for a team's profile
- Twitter - twitter link (with http://) for a team's profile
- LinkedIn - LinkedIn link (with http://) for a team's profile
- vCard - vCard link (with http://) for a team's profile
- 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; }
Tina Rice
Web Developer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula.
Fancy heading
Fancy heading - use this shortcode if you want a unique heading. You can create different styles with icons and other elements.
Default code:
[fancy_heading title="" h1="0" icon="icon-lamp" slogan="" style="icon" animate=""]Insert your content here[/fancy_heading]
Attributes:
- title - Fancy heading title
- h1 - Wrap title into H1 instead of H2, enter: 1
- icon - Use an icon from the icon's list
- slogan - Displays small text under the title
- style - Choose style: icon, line or arrows
- 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
[fancy_heading title="Praesent dapibus neque id" h1="0" icon="icon-picture" slogan="" style="icon" animate=""] <p class="big">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam.</p> [button title="Button with icon" icon="icon-heart-fa" icon_position="left" link="#"] [button title="Button with icon" icon="icon-heart-fa" icon_position="left" link="#" color="theme"] [/fancy_heading]
Line
[fancy_heading title="Praesent dapibus neque id" h1="0" icon="icon-lamp" slogan="Morbi in sem quis dui placerat" style="line" animate=""][/fancy_heading]
Arrows
[fancy_heading title="Praesent dapibus neque id" h1="0" icon="icon-lamp" slogan="" style="arrows" animate=""] <p class="big">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam.</p> [/fancy_heading]
Fancy heading - use this shortcode if you want a unique heading. You can create different styles with icons and other elements.
Attributes:
- Title - Fancy heading title
- Use H1 tag - Wrap title into H1 instead of H2
- Icon - Use an icon from the icon's list
- Slogan - Displays small text under the title
- Content - Content to appear inside the heading
- Style - Select 1 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; }
Praesent dapibus neque id
Praesent dapibus neque id
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam.
Call to action
This Item allows you to create a Call to Action item with or without a background image, icons, or text.
Default code:
[call_to_action title="" icon="icon-lamp" link="" button_title="" class="" target="_blank" animate=""]Insert your content here[/call_to_action]
Attributes:
- title - Title visible onleft side of the item
- icon - Select an icon from the list of available icons
- button_title - Fill in this field to show a button instead of an icon
- 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:
[call_to_action title="Click to play " icon="icon-play" link="https://www.youtube.com/watch?v=liqoMjRT81A" button_title="" class="prettyphoto" target="_blank" animate=""] You can setup any youtube or vimeo videos to play. Instead of videos you can also open other things like images or other links. Open videos or images inside popup window or regular. [/call_to_action]
This Item allows you to create a Call to Action item with or without a background image, icons, or text.
Attributes:
- Title - Title visible onleft side of the item
- Icon - Select an icon from the list of available icons
- Content - Content visible on the right side of the item
- Button Title - Fill in this field to show a button instead of an icon
- Link - link for action icon in the middle of the item (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; }
Fancy divider
Default code:
[fancy_divider style="" color_top="" color_bottom=""]
Attributes:
- style - Choose one of 7 available styles: circle up, circle down, curve up, curve down, stamp, triangle up or triangle down
- color_top - Use color name or hex, e.g.: grey or #CCCCCC
- color_bottom - Use color name or hex, e.g.: blue or #2991D6
Example of this shortcode below:
[fancy_divider style="circle up" color_top="#3498db" color_bottom="#ffffff"] [fancy_divider style="circle down" color_top="#3498db" color_bottom="#ffffff"] [fancy_divider style="curve up" color_top="#3498db" color_bottom="#ffffff"] [fancy_divider style="circle down" color_top="#3498db" color_bottom="#ffffff"] [fancy_divider style="stamp" color_top="#3498db" color_bottom="#ffffff"] [fancy_divider style="triangle up" color_top="#3498db" color_bottom="#ffffff"] [fancy_divider style="triangle down" color_top="#3498db" color_bottom="#ffffff"]
Attributes:
- Style - Choose one of 7 available styles
- Color Top - Use color name or hex, e.g.: grey or #CCCCCC
- Color Bottom - Use color name or hex, e.g.: blue or #2991D6
- 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; }
Hover color
Default code:
[hover_color background="#2991D6" background_hover="#236A9C" border="" border_hover="" padding="40px 30px" link="" target="" class="" style=""]]Insert your content here[/hover_color]
Attributes:
- background - Use color name or hex. Example: blue or #2991D6
- background_hover - Use hover color name or hex. Example: navy or #236A9C
- border - Border color (optional)
- border_hover - Hover border color (optional)
- 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
- padding - Use value with px or %. Example: 20px or 20px 10px 20px 10px or 20px 1%
- style - Type your own inline CSS for the item - this is a useful option for those who want to create a special style. Example:
border: 1px solid #999;
Example of this shortcode below:
[hover_color background="#2991D6" background_hover="#1c79b7" link="#" padding="40px 30px" class="" target="" style=""]<h4 style="margin: 0; color: #fff;">Curabitur sit amet magna quam</h4>[/hover_color]
Attributes:
- Content - Hover color content
- Background color - Use color name or hex. Example: blue or #2991D6
- Background color | Hover - Use hover color name or hex. Example: navy or #236A9C
- Border color - Border color (optional)
- Border color | Hover - Hover border color (optional)
- Padding - Use value with px or %. Example: 20px or 20px 10px 20px 10px or 20px 1%
- Link - Link (with http://)
- Link | Target - Link target
- Link | Class - This option is useful when you want to use scroll
- 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 - Type your own inline CSS for the item - this is a useful option for those who want to create a special style. Example:
border: 1px solid #999;
Feature list
Feature list - with this shortcode you can create a list of feature elements with icons and text.
Default code:
[feature_list columns="4"][item icon="icon-lamp" title="" link="" target="" animate=""][/feature_list]
Attributes:
- columns - Number of columns, recommended: 1 - 4
Attributes for item shortcode:
- icon - Use an icon from the icon's list
- title - List item title
- link - Link (with http://)
- target - Link target - 0 (default), _blank (new tab or window)
- 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_list columns="4"] [item icon="icon-tools" title="Best Muffin Options panel" link="#" target="" animate=""] [item icon="icon-cog" title="Easy and fast Muffin Builder" link="#" target="" animate=""] [item icon="icon-basket" title="WooCommerce ready" link="#" target="" animate=""] [item icon="icon-globe" title="WordPress Multilingual ready" link="#" target="" animate=""] [item icon="icon-flag" title="Built-in Translator" link="#" target="" animate=""] [item icon="icon-infinity" title="Unlimited layouts" link="#" target="" animate=""] [item icon="icon-code" title="200+ builder items/shortcodes" link="#" target="" animate=""] [item icon="icon-picture" title="Revolution Slider included" link="#" target="" animate=""] [item icon="icon-palette" title="Unlimited colors" link="#" target="" animate=""] [item icon="icon-docs" title="Outstanding documentation" link="#" target="" animate=""] [item icon="icon-help" title="and much more..." link="#" target="" animate=""] [/feature_list]
Feature list - with this shortcode you can create a list of feature elements with icons and text.
Attributes:
- Title - Feature List title
- Content - Please use below shortcode:
[item icon="" title="" link="" target=""]
- Columns - Number of columns, recommended: 1 - 4
- 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; }
Video
This item is a very useful option for embedding Vimeo, Youtube and HTML5 videos into page.
Default code:
[video_embed video="62954028" parameters="" mp4="" ogv="" placeholder="" html5_parameters="" width="700" height="400"]
Attributes:
- video - video`s ID. This value is placed at the end of every Vimeo or YouTube video link
For Vimeo video ID is: http://vimeo.com/19819283
For YouTube video ID is: http://www.youtube.com/watch?v=YE7VzlLtp-4
The bolded values are ID's for videos
- parameters - Multiple parameters should be connected with "&"
For example: autoplay=1&loop=1 - mp4 - instead of YouTube and Vimeo videos you can upload your own videos in HTML5 format. Please add both mp4 and ogv for cross-browser compatibility.
- ogv - instead of YouTube and Vimeo videos you can upload your own videos in HTML5 format. Please add both mp4 and ogv for cross-browser compatibility.
- placeholder - placeholder image for HTML5 videos (useful especially on mobile devices)
- html5_parameters - Available values (with ; but without ""): "a;c;l;", "a;c;;m", "a;;l;m", "a;c;;", "a;;l;", "a;;;m", "a;;;", ";c;l;m", ";c;l;", ";c;;m", ";c;;" (a = autoplay, c = show controls, l = play in loop, m = mute)
- width - video width in px
- height - video height in px
Example of this shortcode below:
[video_embed video="94365069" parameters="" mp4="" ogv="" placeholder="" width="1176" height="662"]
This item is a very useful option for embedding Vimeo, Youtube and HTML5 videos into page.
Attributes:
- Youtube or Vimeo | Video ID - video`s ID. This value is placed at the end of every Vimeo or YouTube video link
For Vimeo video ID is: http://vimeo.com/19819283
For YouTube video ID is: http://www.youtube.com/watch?v=YE7VzlLtp-4
The bolded values are ID's for videos
- Youtube or Vimeo | Parameters - Multiple parameters should be connected with "&"
For example: autoplay=1&loop=1 - HTML5 | MP4 video - instead of YouTube and Vimeo videos you can upload your own videos in HTML5 format. Please add both mp4 and ogv for cross-browser compatibility.
- HTML5 | OGV video - instead of YouTube and Vimeo videos you can upload your own videos in HTML5 format. Please add both mp4 and ogv for cross-browser compatibility.
- HTML5 | Placeholder image - placeholder image for HTML5 videos (especially useful for mobile devices).
- HTML5 | Parameters - Select autoplay, controls, loop and muted parameters.
- Width - Player width in px (optional)
- Height - Player height in px (optional)
- 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; }