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.
Parameters
- title
- subtitle
- effect : saddie / goliath / julia / marley
- background : URL to image with http://
- fontcolor : color value (HEX)
- width : size in PX
- height : size in PX
- link : URL with http://
- target : _self / _blank
Testimonial
Parameters
- title
- subtitle
- class : custom css class (eg. right)
Nunc at pellentesque...
Nunc at pellentesque...
Video Gallery
Parameters
- id : ID of video
- web : youtube / vimeo
- fs : 1 / 0
- size : 1 – 12 (grid)
Image Gallery
Parameters
- orderby : none / ID / author / title / date / modified / parent / rand / comment_count / menu_order / post__in
- order : ASC / DESC
- id : image ID
- columns : 1 – 12 (grid)
- size : full / medium / thumbnail (image size)
- link : URL with http://
- modal : enable / disable
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”.
Parameters
- title
- status : active
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”.
Parameters
- class : custom css class
- title
- status : active
Grid
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”.
Parameters
- title
- margin : true / false
- size : 1 – 12 (grid)
- screen : xs / sm / md / lg (grid)
1/2 Phasellus vulputate ac...1/2 Phasellus vulputate ac...1/3 Phasellus vulputate ac...1/3 Phasellus vulputate ac...1/3 Phasellus vulputate ac...1/4 Phasellus vulputate ac...1/4 Phasellus vulputate ac...1/4 Phasellus vulputate ac...1/4 Phasellus vulputate ac...
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.
Table
This shortcode allows you to display Pricing Table.
Parameters
- width : table width in PX or %
- size : cell(s) width in PX or % (coma separated)
- head : true / false (table heading display)
- fixed : true / false (table fixed layout)
- center : true / false (table text align center)
Your title | ipsum | dolor | sit |
---|---|---|---|
content | lorem | ipsum | dolor |
sit | amet | consectetur | adipiscing |
tempus | lacinia | scelerisque | porttitor |
laoreet | ultricies | diam | eget |
arcu | molestie | dapibus | sollicitudin |
Your title | ipsum | dolor | sit |
---|---|---|---|
content | lorem | ipsum | dolor |
sit | amet | consectetur | adipiscing |
tempus | lacinia | scelerisque | porttitor |
laoreet | ultricies | diam | eget |
arcu | molestie | dapibus | sollicitudin |
Google Map
This shortcode allows you to display Google Map.
Parameters
- address
- latitude : number
- longitutde : number
- width: PX or %
- height: PX or %
- enablescrollwheel: true / false
- disablecontrols: ture / false
- zoom : 0 – 23
- tooltip : disable / tooltip text
You must provide valid address or coordinates (2)
Headline
This shortcode allows you to display headline with effect.
Parameters
- subtitle
- class : custom css class
- style : custom css styles
Lorem ipsum dolor sit amet:
Lorem ipsum dolor sit amet:reliabilityexperienceeffectiveness
Icontext
This shortcode allows you to display text with Font Awesome icon and link.
Parameters
- title
- icon : font Awesome class
- link : URL with http://
Readmore
This shortcode allows you to display text readmore button.
Parameters
- icon : font Awesome class
- link : URL with http://
- type : large
Lorem ipsum dolor
Pricing
This shortcode allows you to display pricing table.
Parameters
- img : URL to image with http://
- title
- price
- before_price
- after_price
- sub
- button_name
- url : URL with http://
- highlight : true / false
- class : custom css class
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Lorem ipsum dolor sit amet
Font Awesome
This shortcode allows you to display Font Awesome icon.
Parameters
- class : font Awesome class
Counter
This shortcode allows you to display counters.
Parameters
- icon : font Awesome class
- size : font size
- number
- unit
- link : URL with http://
- title