Alerts
Hey, you! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[alert style="info" close="true"]<strong>Hey, you!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]
[divider]
Options
| Argument | Default | Description |
|---|---|---|
| style | info | Style of alert – info, success, danger, warning. |
| close | false | Whether to show close button – true, false. |
Styles
This is an “info” alert.
[alert style="info"]This is an "info" alert.[/alert]
This is a “success” alert.
[alert style="success"]This is a "success" alert.[/alert]
This is a “danger” alert.
[alert style="danger"]This is a "danger" alert.[/alert]
This is a “warning” alert.
[alert style="warning"]This is a "warning" alert.[/alert][divider]
Jumbotron
The Jumbotron, also known as “Hero” unit, comes from Bootstrap’s Jumbotron feature.
[raw] [jumbotron title=”Hello, world!”] This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. [/jumbotron] [/raw][raw] [jumbotron title="Hello, world!"] This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. [button link="http://google.com" color="primary" size="large"]Learn More[/button] [/jumbotron] [/raw]
Options
| Argument | Default | Description |
|---|---|---|
| title | None | Title of unit. |
| text_align | left | How to align text – left, right, center. |
| align | None | How to align unit – left, right, center, blank for no alignment. |
| max_width | None | Maxiumum width of unit, meant to be used with align left/right/center – 300px, 50%, etc. |
| class | None | Any additional CSS classes. |
| wpautop | true | Whether to apply wpautop on content. Shortcode will work best if you leave this set to true and wrap the [jumbotron] shortcode in the [raw] shortcode as shown in the example above. This way, WordPress’s automatic formatting will be applied when the shortcode is rendered, and will turn out nicer. |
Panels
[panel title=”Panel heading” 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][panel title="Panel heading" 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]
Styles
[raw]
[panel title=”Style: default” style=”default”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[/fusion_builder_column_inner]
[panel title=”Style: primary” style=”primary”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[clear]
[panel title=”Style: success” style=”success”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[/fusion_builder_column_inner][/fusion_builder_row_inner]
[panel title=”Style: info” style=”info”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[clear]
[panel title=”Style: warning” style=”warning”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[/fusion_builder_column_inner]
[panel title=”Style: danger” style=”danger”]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[clear]
[/raw]
[divider]
[divider]
[divider]
[/raw]
[divider]
Options
| Argument | Default | Description |
|---|---|---|
| style | default | Style of panel – default, primary, success, info, warning, danger. |
| title | None | Optional text for header title. |
| footer | None | Optional text for the footer. |
| text_align | left | How to align text – left, right, center. |
| class | None | Any additional CSS classes. |
| wpautop | true | Whether to apply wpautop on content. |
Popups
These come from the Bootstrap modal javascript component.
[popup text=”Click me to see a popup” header=”Title of popup”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad veniam.[/popup][popup text="Click me to see a popup" header="Title of popup"] 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=”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="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=”Contact Us!” color=”primary” icon_before=”envelope” header=”Contact Us” animate=”true”] This popup has a contact form inserted via Contact Form 7’s shortcode.[contact-form 1] [/popup]
[popup text="Contact Us!" color="primary" icon_before="envelope" header="Contact Us" animate="true"] This popup has a contact form inserted via Contact Form 7's shortcode. [contact-form 1] [/popup]
Options
| Argument | Default | Description |
|---|---|---|
| text (required) | None | Text of button to popup. |
| title | None | Title tag of button to popup, will default to $text if left blank. |
| color | default | Color of button to popup (view button colors). |
| icon_before | None | Icon before text of button to popup (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with fa-. |
| icon_after | None | Icon after text of button to popup (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with fa-. |
| size | default | Size of button – mini, small, default, large. |
| animate | false | Whether popup slides in or not – true, false. |
| header | None | Header text for 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.
[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”John Smith”][blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel." source="John Smith"]
Quote aligned left
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=”John Smith” align=”left” 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.
[blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel." source="John Smith" align="left" max_width="300px"]
Quote aligned right
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=”John Smith” 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.
[blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel." source="John Smith" align="right" max_width="300px"]
Options
| Argument | Default | Description |
|---|---|---|
| quote (required) | None | The text for the quote. |
| source | None | Optional source of the quote. Ex: John Smith |
| source_link | None | An optional URL to link the source to. Ex: http://google.com |
| align | None | How to align quote – left, right, or leave blank for no alignment. |
| max_width | None | Set a maximum width for the quote, to be used with align left or right. Ex: 300px, 50%, etc. |
| class | None | Any additional CSS classes you want to add to the blockquote. |
Progress Bars
Get creative with this one. — We honestly couldn’t think of a whole lot of real-world uses for this shortcode, but we thought it was too cool of a Boostrap feature to leave out.
[progress_bar percent=”30″][progress_bar percent="30"]
[progress_bar percent=”60″ striped=”true”]
[progress_bar percent="60" striped="true"]
[progress_bar percent=”90″ striped=”true” animate=”true”]
[progress_bar percent="90" striped="true" animate="true"]
Options
| Argument | Default | Description |
|---|---|---|
| percent | 100 | A percentage of how far the bar is – 25, 50, 80, etc. |
| color | default | Color of bar – default, danger, success, info, warning. |
| striped | false | Whether the bar is striped or not – true, false. |
| animate | false | Whether the bar is animated or not – true, false |
Note: For the bar to be animated, it must also be striped.
Colors
[raw]| Color | Example |
|---|---|
| Default | [progress_bar percent=”30″] [progress_bar percent=”60″ striped=”true”] [progress_bar percent=”90″ striped=”true” animate=”true”] |
| Danger | [progress_bar percent=”30″ color=”danger”] [progress_bar percent=”60″ color=”danger” striped=”true”] [progress_bar percent=”90″ color=”danger” striped=”true” animate=”true”] |
| Success | [progress_bar percent=”30″ color=”success”] [progress_bar percent=”60″ color=”success” striped=”true”] [progress_bar percent=”90″ color=”success” striped=”true” animate=”true”] |
| Info | [progress_bar percent=”30″ color=”info”] [progress_bar percent=”60″ color=”info” striped=”true”] [progress_bar percent=”90″ color=”info” striped=”true” animate=”true”] |
| Warning | [progress_bar percent=”30″ color=”warning”] [progress_bar percent=”60″ color=”warning” striped=”true”] [progress_bar percent=”90″ color=”warning” striped=”true” animate=”true”] |
Icon Lists
After you’ve inserted a standard unordered list, wrap it in the [icon_list] shortcode to make it stand out a little more.
General Usage
[raw]
[icon_list]
- List item 1
- List item 2
- List item 3
[icon_list]
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
[/icon_list]
[/fusion_builder_column_inner]
[icon_list icon=”star”]
- List item 1
- List item 2
- List item 3
[icon_list icon="star"] <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> [/icon_list]
[icon_list icon=”star” color=”#eec627″]
- List item 1
- List item 2
- List item 3
[icon_list icon="star" color="#eec627"] <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> [/icon_list]
[clear]
[/raw]
Options
| Argument | Default | Description |
|---|---|---|
| icon | caret-right | Icon to be used (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with fa-. |
| color | None | Color CSS value to get applied to icon, will default to current text color. Ex: #660000. |