Animated hover CSS3 effects for images
These shortcodes allows you to display an image and its description with animated CSS3 effect.
Note: If you would like to add your own text into the image description, just modify the shortcode below or edit an existing shortcode of the demo template.
Example 1
[anibox effect="sadie" background="http://placehold.it/480x360" width="480" height="360" fontcolor="#000000" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]Example Title
Lorem ipsum dolor sit amet.
#Example 2
[anibox effect="goliath" background="http://placehold.it/480x360" fontcolor="#ffffff" width="480" height="360" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]Example Title
Lorem ipsum dolor sit amet.
#Example 3
[anibox effect="julia" background="http://placehold.it/480x360" fontcolor="#000000" width="480" height="360" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]Example Title
Lorem ipsum dolor sit amet.
#Example 4
[anibox effect="marley" background="http://placehold.it/480x360" fontcolor="#000000" width="480" height="360" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]Example Title
Lorem ipsum dolor sit amet.
#Video Gallery
[row][pe_video id="Hq8SzbapPkA" web="youtube" fs="1" size="4"][pe_video id="74195893" web="vimeo" fs="1" size="4"][pe_video id="ixduuC4fH3E" web="youtube" fs="0" size="4"][/row][row][pe_video id="xAsF-LgqKrE" web="youtube" fs="1" size="6"][pe_video id="73847928" web="vimeo" fs="1" size="6"][/row]Image Gallery
[gallery modal="enable" size="full" columns="3" ids="611, 640, 639, 646, 645, 830" orderby="rand"]
f4
Caption title
taste4
Caption title
rooms1
Caption title
rest4
Caption title
fr5
Caption title
rest
Caption title
Testimonial
[testimonial class="right" title="bill gates" subtitle="famous visionary"]Your custom text here[/testimonial][testimonial title="steven tyler" subtitle="famous singer"]Your custom text here[/testimonial]
Accordion
This shortcode allows you to display accordion panels inside posts or widgets.
Note: Remember to always set the accordion title, and if you want that one of the accordions to be open on page load then enter the status attribute to „active”.
[accordion][accordion_content title="Accordion 1" status="active"]Some text here that will be included in accordion[/accordion_content][accordion_content title="Accordion 2"]Some text here that will be included in accordion[/accordion_content][accordion_content title="Accordion 3"]Some text here that will be included in accordion[/accordion_content][/accordion]Tabs
This shortcode allows you to display tabs inside posts or widgets.
Note: Remember to always set the tab title, and if you want than one of the tabs to be open on page load then enter the status attribute to „active”.
[tabs][tab title="Tab Name 1" status="active"]Some text here that will be included in tab content[/tab][tab title="Tab Name 2"]Some text here that will be included in tab content[/tab][tab title="Tab Name 3"]Some text here that will be included in tab content[/tab][/tabs]
Columns
This shortcode allows you to display columns inside posts or widgets.Note: It is needed to use the col short inside row shortcode. As well you can choose class suffix for different screens by using screen attribute, default is „md”.
[row][col size="4" screen="sm"] Some content here, other shortcodes can be included [/col][col size="4" screen="sm"] Some content here, other shortcodes can be included [/col][col size="4" screen="sm"] Some content here, other shortcodes can be included [/col][/row]Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
Pricing Table
This shortcode allows you to display Pricing Table.
[pricing_table title="Service 1" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table][pricing_table title="Service 2" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table][pricing_table title="Service 3" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table]| Service 1 | |
|---|---|
| Lorem ipsum dolor | $39 |
| Donec lobortis quam | $45 |
| Pellentesque habitant | $68 |
| In a facilisis augue | $28 |
| Aenean et placerat erat | $55 |
| Nam neque massa | $78 |
| Service 2 | |
|---|---|
| Lorem ipsum dolor | $39 |
| Donec lobortis quam | $45 |
| Pellentesque habitant | $68 |
| In a facilisis augue | $28 |
| Aenean et placerat erat | $55 |
| Nam neque massa | $78 |
| Service 3 | |
|---|---|
| Lorem ipsum dolor | $39 |
| Donec lobortis quam | $45 |
| Pellentesque habitant | $68 |
| In a facilisis augue | $28 |
| Aenean et placerat erat | $55 |
| Nam neque massa | $78 |
Table
This shortcode allows you to display simple table with menu.
[table][table_item table_image="672" table_desc="Etiam quis mi lacus
Proin fermentum velit non ligula malesuada imperdiet. Sed sapien enim, porta vel tempus sed." table_price="Price
$20.35"][table_item table_image="673" table_desc="Nulla vestibulum ultrices felis sit
Suspendisse et ligula hendrerit, auctor justo vel, sagittis metus." table_price="Price
$10.35"][table_item table_image="674" table_desc="Mauris tincidunt quam
Pellentesque imperdiet, purus vel feugiat pharetra, lectus velit scelerisque." table_price="Price
$6.00"][table_item table_image="671" table_desc="Morbi tincidunt congue venenatis
Pellentesque imperdiet, purus vel feugiat pharetra, lectus velit scelerisque." table_price="Price
$10.00"][/table]
$20.35
Proin fermentum velit non ligula malesuada imperdiet. Sed sapien enim, porta vel tempus sed.
$10.35
Suspendisse et ligula hendrerit, auctor justo vel, sagittis metus.
$6.00
Pellentesque imperdiet, purus vel feugiat pharetra, lectus velit scelerisque.
$10.00
Pellentesque imperdiet, purus vel feugiat pharetra, lectus velit scelerisque.
Google Map
This shortcode allows you to display Google Map.
Required attributes:
- addres or latitude and longitude
Optional attributes:
- height
- width
- zoom
- enablescrollwheel
- disablecontrols
- enablelatlngwindow (default: show-on-click)
- opacity level (default: 0)
- opacity background (default: #000000)
[pe_map address="New York City" latitude="51.519011" longitude="-0.116958" height="400px" width="100%" zoom="16" enablescrollwheel="false" disablecontrols="false" enablelatlngwindow="show-on-click" opacity="0.2" opacity-bg="#000000"]
Background
This shortcode allows you to set background for these sections: header, top 1, top 2, top 3, bottom 1, bottom 2.
Required attributes:
- image ID
- section name (header, top1, top, top3, bottom1 or bottom2)
Optional attributes:
- minimum height for section
- minimum height for mobile (below 768px)
- opacity level (default: 0.36)
- opacity background (default: #000000)
- color of widgets in selected section (default: #ffffff)
Take a look at example of this shortcode usage at the top of this page – for header widget position.
[background imgid="207" section="header" min-height="348" min-height-mobile="150" opacity="0.36" opacity-bg="#000000" fontcolor="#ffffff" ]Video Background
This shortcode allows you to set movie background for these sections: header, top 1, top 2, top 3, bottom 1, bottom 2.
Required attributes:
- movie ID (MP4 format)
- movie ID (WEBM format)
- section name (header, top1, top, top3, bottom1 or bottom2)
Optional attributes:
- movie ID (OGV format)
- minimum height for section
- image ID of poster for browsers/devices that not support videos
- color of text widget with suffix z-index-high (default: #ffffff)
- opacity level (default: 0)
- opacity background (default: #000000)
If you want to show some other widgets on the video background please use for these widgets this suffix: z-index-high.
Note: Please use this shortcode in widget without any other custom text.
[video-background section="top1" webm="575" mp4="574" ogv="576" min-height="348" poster="544" fontcolor="#ffffff" opacity="0.4" opacity-bg="#000000"]Box
This shortcode allows you to display box with image, title, text and more button.
Note: You need to enter at least one of these attributes: image ID from Media Library, alternative text for this image, title, text, link for readmore, image position (default: top).
[box imgid="103" alt="Rooms & Suites" title="Rooms & Suites" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum" more="#" ]
Box Circle
This shortcode allows you to display circle with price, currency, price and text with counter and nice animation on hover.
Note: You need to enter price, title, text, optionally you can set currency (default: $).
[box_circle price="99" text="Honeyweek" title="Just married?"]
Member
This shortcode allows you to display box with member’s informations (Custom Post Type: Team).
Note: You need to enter only member’s ID.
[row][col size="4" ][member id="235"][/col][col size="4" ][member id="248"][/col][col size="4" ][member id="245"][/col][/row]
Clean Box
This simple shortcode allows you to display clean box with border where you can insert any content that you want.
[clean_box]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.[/clean_box]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Special Offer Image
This shortcode allows you to display image from Media Library with title and link.
Note: You need to enter image’s ID (see on Media Library in list view). Optionally you can enter title, link href, link title and size of the image (pe-size1 = 1/3 theme’s width, pe-size2 = 1/2 theme’s width, pe-size3 = 2/3 theme’s width, pe-size4 = 100% theme’s width). Please use this shortcode inside shortcode row described above in COLUMNS section.
[row][special_offer_image id="289" title="Double room I" link_title="Single rooms" link="#" size="pe-size3"][special_offer_image id="289" title="Double room II" link_title="Single rooms" link="#" size="pe-size1"][/row]
[row][special_offer_image id="289" title="Double room I" link_title="Single rooms" link="#" size="pe-size2"][special_offer_image id="289" title="Double room II" link_title="Single rooms" link="#" size="pe-size2"][/row]
[row][special_offer_image id="289" title="Double room I" link_title="Single rooms" link="#" size="pe-size1"][special_offer_image id="289" title="Double room II" link_title="Single rooms" link="#" size="pe-size3"][/row]
Ninja Form Modal
This shortcode allows you to display Ninja Forms form with modal window.
Note: You need to enter Ninja Forms form ID. Optionally you can enter admin key of field and it’s option name that should be selected by default.
[ninja_form_modal id="2" admin_key_selected="listselect_11" admin_key_option_name="Room IV" ]