Examples


Buttons

Add buttons to your content easily and customize them as any color you’d like.

Black Button Red Button Orange Button Blue Button Green Button White Button
 Black Button 

Buttons with Icons

Buttons can also have any Font Awesome icon assigned to the left of text or just the icon by itself.
Button with Icon

 Button with Icon 
 /rescue_button]

[rescue_clear_floats]

Toggle Content

Maybe for an awesome FAQ page? The sky’s the limit.

[rescue_spacing size="10px"] [rescue_toggle title="Conubia consectetuer etiam eiusmod porro, quisque?"]Great question! Accumsan pharetra tristique minus leo tempore, ratione temporibus, temporibus anim facilis faucibus. Ipsum, diam quisque, voluptatem. [/rescue_toggle] [rescue_toggle title="Etiam eiusmod quisque?"]Another toggle box. Delectus provident lacinia, tempore lectus ultricies! Ipsum nisi ornare pede voluptate mi, quos? Earum curae, vitae imperdiet! Aliqua fames aperiam nisl ultrices dolor! Recusandae ex[/rescue_toggle] [rescue_toggle title="Varius, possimus iaculis asperiores?"]Voluptatum, provident, mus, magnam aliquid diamlorem, delectus provident lacinia, tempore lectus ultricies! Ipsum nisi ornare pede voluptate mi, quos? Earum curae, vitae imperdiet! Aliqua fames aperiam nisl ultrices dolor! Recusandae ex[/rescue_toggle] [rescue_toggle title="This Is Your Toggle Title"]Elit mi hymenaeos architecto modi vehicula ornare tempora, eget morbi.[/rescue_toggle] [rescue_spacing size="30px"]
[rescue_toggle title="This Is Your Toggle Title"]
This is the toggle content.
[/rescue_toggle]
[rescue_clear_floats]
[rescue_clear_floats]

Progress Bar

Let your visitors visualize the progress of a project, donation funds, or anything you’d like!

[rescue_spacing size="10px"] [rescue_column size="one-half" position="first"] [rescue_progressbar title="Example" percentage="75" color="#f1c40f"] [rescue_progressbar title="Example" percentage="55" color="#66bb6a"] [rescue_progressbar title="Example" percentage="90" color="#ff7043"] [/rescue_column] [rescue_column size="one-half" position="last"][/rescue_column] [rescue_spacing size="30px"]
[rescue_progressbar title="Example" percentage="75" color="#f1c40f"]
[rescue_clear_floats]
[rescue_clear_floats]

Tabbed Content

Create multiple tabbed content sections to display just about anything!

[rescue_spacing size="10px"] [rescue_column size="one-half" position="first"] [rescue_tabgroup] [rescue_tab title="First Tab"] gateway-post
[rescue_spacing size="10px"]

Urna voluptate natoque, luctus penatibus do, veritatis magna, reiciendis nostrum vestibulum! Et officia aute, sequi doloremque nullam rem cumque eligendi harum consequat rerum dolor justo.

[/rescue_tab] [rescue_tab title="Second Tab"] Litora sapien cillum corrupti perferendis montes veritatis, velit, unde sollicitudin orci pharetra, error, voluptas, minim pariatur, ullamcorper laudantium tenetur! Porro eaque ex parturient inventore ante.

Dis alias. Voluptatum hac arcu exercitationem tempore curabitur, quos eius integer similique. Reiciendis! Ut, arcu fermentum? Do risus, veniam sint semper consequatur lobortis, sodales nonummy.
[/rescue_tab] [rescue_tab title="Third Tab"] [contact-form-7 id=”134″ title=”Contact form 1″] [/rescue_tab] [/rescue_tabgroup] [/rescue_column] [rescue_clear_floats] [rescue_spacing size="30px"]

[rescue_tabgroup]

[rescue_tab title="First Tab"]
First tab content
[/rescue_tab]

[rescue_tab title="Second Tab"]
Second Tab Content.
[/rescue_tab]

[/rescue_tabgroup]
[rescue_clear_floats]

500+ Icons by Font Awesome

Simply enter the icon name list on the Font Awesome icon directory and adjust the shortcode settings. A few examples:

[rescue_spacing size="30px"] [rescue_clear_floats] [rescue_column size="one-fifth" position="first"] [icon type="heart" size="2x" pull="left" color="#cccccc"]heart
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="globe" size="2x" pull="left" color="#cccccc"]globe
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="cloud" size="2x" pull="left" color="#cccccc"]cloud
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="refresh" size="2x" pull="left" color="#cccccc"]refresh
[/rescue_column] [rescue_column size="one-fifth" position="last"] [icon type="gavel" size="2x" pull="left" color="#cccccc"]gavel
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="leaf" size="2x" pull="left" color="#cccccc"]leaf
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="user-md" size="2x" pull="left" color="#cccccc"]user-md
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="rocket" size="2x" pull="left" color="#cccccc"]rocket
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="microphone" size="2x" pull="left" color="#cccccc"]microphone
[/rescue_column] [rescue_column size="one-fifth" position="last"] [icon type="medkit" size="2x" pull="left" color="#cccccc"]medkit
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="laptop" size="2x" pull="left" color="#cccccc"]laptop
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="smile-o" size="2x" pull="left" color="#cccccc"]smile-o
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="bolt" size="2x" pull="left" color="#cccccc"]bolt
[/rescue_column] [rescue_column size="one-fifth" position="first"] [icon type="pagelines" size="2x" pull="left" color="#cccccc"]pagelines
[/rescue_column] [rescue_column size="one-fifth" position="last"] [icon type="moon-o" size="2x" pull="left" color="#cccccc"]moon-o
[/rescue_column] [rescue_spacing size="30px"]
[icon type="heart" size="2x" pull="left" color="#cccccc"] [/icon]

Animations

Wrap anything with the animation shortcode and watch it come alive!

[rescue_column size="one-third" position="first"] [rescue_animate type="slideInDown" duration="2s" delay="0s" iteration="1"][rescue_button color="black" url="https://rescuethemes.com" title="Visit Site" target="blank" border_radius=""]slideInDown[/rescue_animate] [/rescue_column]
Content to animate.

Google Map

Display a Google Map for any location on any post or page.


Google now requires new websites to have a Google Maps API key. You can request a key here 


Notification Boxes

Have certain sections of text stand out by creating notices or alerts with the Notification Box shortcode.

This is just an example title
This is just an example title
This is just an example title
This is just an example title
This is just an example title

This sentence will be displayed as a notification.

Text Highlights

Quickly highlight sections of text to help more important words stand out.

Blue: The Merchandise Mart is a commercial building located in the Near North Side of Chicago.

Gray: The Merchandise Mart is a commercial building located in the Near North Side of Chicago.

Green: The Merchandise Mart is a commercial building located in the Near North Side of Chicago.

Red: The Merchandise Mart is a commercial building located in the Near North Side of Chicago.

Yellow: The Merchandise Mart is a commercial building located in the Near North Side of Chicago.



These are some words to be highlighted.

You must log in to submit a review.