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 – sadie
Example 2 – goliath
Example 3 – julia
Example 4 – marley
Video Gallery
Image Gallery
Testimonial
Your custom text here<strong>bill gates</strong><strong>famous visionary</strong>
Your custom text here<strong>steven tyler</strong><strong>famous singer</strong>
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”.
Some text here that will be included in accordionSome text here that will be included in accordionSome text here that will be included in 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”.
Some text here that will be included in tab contentSome text here that will be included in tab contentSome text here that will be included in tab content
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”.
Some content here, other shortcodes can be included Some content here, other shortcodes can be included Some content here, other shortcodes can be included
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.
<strong>Service 1</strong> <strong>Lorem ipsum dolor</strong> <strong>$39</strong> <strong>Donec lobortis quam</strong> <strong>$45</strong> <strong>Pellentesque habitant</strong> <strong>$68</strong> <strong>In a facilisis augue</strong> <strong>$28</strong> <strong>Aenean et placerat erat</strong> <strong>$55</strong> <strong>Nam neque massa</strong> <strong>$78</strong>
<strong>Service 2</strong> <strong>Lorem ipsum dolor</strong> <strong>$39</strong> <strong>Donec lobortis quam</strong> <strong>$45</strong> <strong>Pellentesque habitant</strong> <strong>$68</strong> <strong>In a facilisis augue</strong> <strong>$28</strong> <strong>Aenean et placerat erat</strong> <strong>$55</strong> <strong>Nam neque massa</strong> <strong>$78</strong>
<strong>Service 3</strong> <strong>Lorem ipsum dolor</strong> <strong>$39</strong> <strong>Donec lobortis quam</strong> <strong>$45</strong> <strong>Pellentesque habitant</strong> <strong>$68</strong> <strong>In a facilisis augue</strong> <strong>$28</strong> <strong>Aenean et placerat erat</strong> <strong>$55</strong> <strong>Nam neque massa</strong> <strong>$78</strong>
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.
Price
$20.35Etiam quis mi lacus
Proin fermentum velit non ligula malesuada imperdiet. Sed sapien enim, porta vel tempus sed.Price
$10.35Nulla vestibulum ultrices felis sit
Suspendisse et ligula hendrerit, auctor justo vel, sagittis metus.Price
$6.00Mauris tincidunt quam
Pellentesque imperdiet, purus vel feugiat pharetra, lectus velit scelerisque.Price
$10.00Morbi tincidunt congue venenatis
Pellentesque imperdiet, purus vel feugiat pharetra, lectus velit scelerisque.
$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)
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.
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.
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).
<strong>Rooms & Suites</strong><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</strong>View 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: $).
0$<strong>Honeyweek</strong><strong>Just married?</strong>
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.
Clean Box
This simple shortcode allows you to display clean box with border where you can insert any content that you want.
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.
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.
<strong>Double room I</strong><strong>Double room II</strong>
<strong>Double room I</strong><strong>Double room II</strong>
<strong>Double room I</strong><strong>Double room II</strong>
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.