Components

Alerts

[one_half]

[alert color=”info”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]

[alert color=”success”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]

[/one_half]

[one_half last]

[alert color=”danger”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]

[alert color=”warning”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]

[/one_half]

[clear]

You can also assign any fontAwesome icon

[one_half]

[alert color=”success” icon=”rocket”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]

[/one_half]

[one_half last]

[alert color=”info” icon=”info”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]

[/one_half]

[clear]

 

Call Out Box

A callout box is similar to an alert box but more structured and styled. The button can use any button color and icon.

[callout heading=”My Awesome Heading” message=”Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet.” link=”#” label=”Learn More” color=”primary”]

 

Panels

[one_half]
[panel title=”Color: default” color=”default” footer=”Optional footer text”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.
[/panel]
[/one_half]

[one_half last]
[panel title=”Color: primary” color=”primary” footer=”Optional footer text”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.
[/panel]
[/one_half]

[clear]

[one_half]
[panel title=”Color: success” color=”success” footer=”Optional footer text”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.
[/panel]
[/one_half]

[one_half last]
[panel title=”Color: info” color=”info” footer=”Optional footer text”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.
[/panel]
[/one_half]

[clear]

[one_half]
[panel title=”Color: warning” color=”warning” footer=”Optional footer text”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.
[/panel]
[/one_half]

[one_half last]
[panel title=”Color: danger” color=”danger” footer=”Optional footer text”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.
[/panel]
[/one_half]

[clear]

[one_half]

[panel color=”default” align=”left” image_top=”http://demo.bnecreative.com/sweetness/wp-content/uploads/sites/3/2016/01/bridge.jpg”]

 

Featured Top Panel

Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna.[/panel]

[/one_half]

[one_half last]

[panel color=”default” align=”left” image_bottom=”http://demo.bnecreative.com/sweetness/wp-content/uploads/sites/3/2016/01/bridge.jpg”]

 

Featured Bottom Panel

Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna.[/panel]

[/one_half]

[clear]

 

These come from the Bootstrap modal javascript component.

[popup text=”Click me to see a popup” header=”Title of popup” animate=”false”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad veniam.
[/popup]

[popup color=”red” text=”This popup will animate in” header=”Title of popup” animate=”true”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad minim veniam.
[/popup]

[popup text=”As a text link” color=”link” icon_before=”envelope” header=”Contact Us” animate=”true”]
This popup has a contact form inserted via Gravity Forms shortcode.
[gravityform id=”2″ title=”false” description=”false” ajax=”true”]
[/popup]

[clear]

[popup text=”Small Popup” header=”Title of popup” animate=”true” popup_size=”small”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad minim veniam.
[/popup]
[popup text=”Medium Popup” header=”Title of popup” animate=”true” popup_size=”medium”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad minim veniam.
[/popup]
[popup text=”large Popup” header=”Title of popup” animate=”true” popup_size=”large”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad minim veniam.
[/popup]

 

Quote

The [[blockquote]] shortcode can be useful to help you format a quote and a source that looks nice with our baked-in version of Twitter Bootstrap, without having to mess with any HTML. You can choose between two styles, default or fancy that are styled for this theme.

Default Style

[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”Captain Kirk”]

Fancy Style

[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”Lt. Sulu” style=”fancy”]

 

Quote Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”Captain Spock” align=”left” max_width=”300px” style=”fancy”]

Praesent congue turpis quis lacus viverra accumsan. Nunc ullamcorper est eleifend ante aliquet elementum. Vivamus at accumsan dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec viverra elit id vehicula tristique.

Morbi scelerisque libero faucibus justo mollis euismod. Phasellus quam velit, egestas ut feugiat non, sodales vel libero. Nullam orci sapien, euismod a nunc in, sollicitudin rutrum sapien. Fusce in velit non dolor fringilla iaculis. Nunc fringilla dolor felis. Maecenas nec nisi ac lectus pharetra volutpat non eget ligula. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”Admiral Ackbar” align=”right” max_width=”300px”]

Praesent congue turpis quis lacus viverra accumsan. Nunc ullamcorper est eleifend ante aliquet elementum. Vivamus at accumsan dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec viverra elit id vehicula tristique.

Morbi scelerisque libero faucibus justo mollis euismod. Phasellus quam velit, egestas ut feugiat non, sodales vel libero. Nullam orci sapien, euismod a nunc in, sollicitudin rutrum sapien. Fusce in velit non dolor fringilla iaculis. Nunc fringilla dolor felis. Maecenas nec nisi ac lectus pharetra volutpat non eget ligula. Suspendisse potenti.

 

Social Bar Icons

Your social networks are defined in Theme Options. By default you can include the icons in the header, but you can also throw them anywhere using the [[social_bar]] shortcode.

[one_third]

[social_bar color=”color” shape=”rounded” size=”25px”]

[social_bar color=”color” shape=”square” size=”25px”]

[social_bar color=”color” shape=”circle” size=”25px”]

[social_bar color=”color” shape=”transparent” size=”25px”]

[/one_third]

[one_third]

[social_bar color=”grey” shape=”rounded” size=”25px”]

[social_bar color=”grey” shape=”square” size=”25px”]

[social_bar color=”grey” shape=”circle” size=”25px”]

[social_bar color=”grey” shape=”transparent” size=”25px”]

[/one_third]

[one_third clear]

[social_bar color=”dark” shape=”rounded” size=”25px”]

[social_bar color=”dark” shape=”square” size=”25px”]

[social_bar color=”dark” shape=”circle” size=”25px”]

[social_bar color=”dark” shape=”transparent” size=”25px”]

[/one_third]

[clear]

 

Dividers

[one_half]

Solid Divider

[divider style=”solid”]

Double Solid Divider

[divider style=”double-solid”]

Thick Solid Divider

[divider style=”thick-solid”]
[/one_half]
[one_half last]

Dashed Divider

[divider style=”dashed”]

Double Dashed Divider

[divider style=”double-dashed”]

Thick Dashed Divider

[divider style=”thick-dashed”]
[/one_half]
[clear]

Shadow Divider

[divider style=”shadow”]

With Icons

[divider style=”thick-solid” color=”#ccc” width=”100%” align=”center” icon=”anchor” icon_color=”#dd3333″ icon_size=”20px” icon_bg_color=”#ffffff” icon_bg_size=”40px” icon_bg_radius=”100%”]

Divider with Color

[divider style=”thick-solid” color=”red” width=”100%” align=”center” icon=”anchor” icon_color=”#dd3333″ icon_size=”20px” icon_bg_color=”#ffffff” icon_bg_size=”40px” icon_bg_radius=”100%”]