Popover Shortcode
Avada includes a popover shortcode that is perfect for adding additional content for your viewers. The content is housed as secondary information that the viewer can trigger by a mouse hover, or a mouse click. Our expanded options allow you customize several aspects of the popover like background colors, border colors, text colors, trigger value, popup placement and more.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”60px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_half last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][popover title=”Unleash The Power of Avada” title_bg_color=”” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”hover” placement=”top” class=”” id=””][imageframe lightbox=”no” style_type=”border” bordercolor=”rgba(255,255,255,.2)” bordersize=”15px” stylecolor=”” align=”left” animation_type=”fade” animation_direction=”up” animation_speed=”1″ class=”” id=””]
[/imageframe][/popover]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat orem ipsum dolor sit amet, consectetur adipisicing [popover title=”Unleash The Power of Avada” title_bg_color=”” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”click” placement=”top” class=”” id=””]mouse click here[/popover] elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims.
[separator style_type=”none” top_margin=”20″ bottom_margin=”20″ sep_color=”” icon=”” width=”” class=”” id=””][button link=”” color=”custom” size=”xlarge” type=”flat” shape=”round” target=”” title=”” gradient_colors=”transparent|” gradient_hover_colors=”rgba(000,000,000,.03)|” accent_color=”rgba(000,000,000,.2)” accent_hover_color=”rgba(000,000,000,.3)” bevel_color=”” border_width=”1px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”” animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”” class=”” id=””][popover title=”Unleash The Power of Avada” title_bg_color=”” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”hover” placement=”top” class=”” id=””]Hover Here For More Info[/popover][/button][/one_half][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”yes” bordersize=”0px” bordercolor=”#eaeaea” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Background Colors
Control the background color behind the popover title and the content itself.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”60px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][two_third last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][separator style_type=”none” top_margin=”10″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat orem ipsum dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims sadips ipsums dolores sits unser.
[/two_third][one_third last=”yes” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][separator style_type=”none” top_margin=”25″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][button link=”” color=”custom” size=”xlarge” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”rgba(000,000,000,.03)|” accent_color=”rgba(000,000,000,.2)” accent_hover_color=”rgba(000,000,000,.3)” bevel_color=”” border_width=”1px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”” animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”center” class=”” id=””][popover title=”Unleash The Power of Avada” title_bg_color=”#add16c” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”#ede9e2″ bordercolor=”#c1bfbf” textcolor=”#333333″ trigger=”hover” placement=”top” class=”” id=””]Background Colors[/popover][/button][/one_third][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Border / Text Colors
Control the border color and text color of the popover shortcode.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”60px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][two_third last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][separator style_type=”none” top_margin=”10″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat orem ipsum dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims sadips ipsums dolores sits unser.
[/two_third][one_third last=”yes” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][separator style_type=”none” top_margin=”25″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””][button link=”” color=”custom” size=”xlarge” type=”flat” shape=”round” target=”_blank” title=”” gradient_colors=”transparent|” gradient_hover_colors=”rgba(000,000,000,.03)|” accent_color=”rgba(000,000,000,.2)” accent_hover_color=”rgba(000,000,000,.3)” bevel_color=”” border_width=”1px” shadow=”no” icon=”” icon_position=”left” icon_divider=”yes” modal=”” animation_type=”0″ animation_direction=”up” animation_speed=”1″ alignment=”center” class=”” id=””][popover title=”Unleash The Power of Avada” title_bg_color=”#fff” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”#ff” bordercolor=”#8b7e63″ textcolor=”#8b7e63″ trigger=”hover” placement=”top” class=”” id=””]Border/Text Colors[/popover][/button][/one_third][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Trigger Value
Set the popover to trigger on mouse hover or mouse click.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”60px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_half last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][separator style_type=”none” top_margin=”10″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [popover title=”Unleash The Power of Avada” title_bg_color=”#fff” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”hover” placement=”top” class=”” id=””]mouse hover trigger[/popover] ut enim ad minim veniam, quis nostrud exercitation ullamco. Excepteur sint occaecat cupidatats.
[/one_half][one_half last=”yes” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][separator style_type=”none” top_margin=”10″ bottom_margin=”” sep_color=”” icon=”” width=”” class=”” id=””]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [popover title=”Unleash The Power of Avada” title_bg_color=”#fff” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”click” placement=”top” class=”” id=””]mouse click trigger[/popover] ut enim ad minim veniam, quis nostrud exercitation ullamco. Excepteur sint occaecat cupidatats.
[/one_half][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”0px” paddingbottom=”0px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_full last=”yes” spacing=”yes” background_color=”#f6f6f6″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”solid” padding=”40px” class=”” id=””]Popover Placement
Control the direction of the popover popup box, left, right, top, bottom.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”60px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””][one_fourth last=”no” spacing=”yes” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”0px” border_color=”” border_style=”” padding=”” class=”” id=””][popover title=”Unleash The Power of Avada” title_bg_color=”” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”hover” placement=”top” class=”” id=””]
[/popover]
[popover title=”Unleash The Power of Avada” title_bg_color=”” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”hover” placement=”right” class=”” id=””]
[/popover]
[popover title=”Unleash The Power of Avada” title_bg_color=”” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”hover” placement=”bottom” class=”” id=””]
[/popover]
[popover title=”Unleash The Power of Avada” title_bg_color=”” content=”Create beautiful, eye catching layouts with all the various elements Avada provides, like this nice little popover.” content_bg_color=”” bordercolor=”” textcolor=”” trigger=”hover” placement=”top” class=”” id=””]
[/popover]
Complete Set of Options
Every option and description included with the popover shortcode is listed below.
[/one_full][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”0px” bordercolor=”” borderstyle=”solid” paddingtop=”30px” paddingbottom=”80px” paddingleft=”0px” paddingright=”0px” menu_anchor=”” equal_height_columns=”yes” hundred_percent=”no” class=”” id=””][one_half last=”no” spacing=”yes” background_color=”#f8f8f8″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”1px” border_color=”#eaeaea” border_style=”solid” padding=”30px” class=”” id=””][checklist icon=”fa-check” iconcolor=”#333333″ circle=”no” circlecolor=”” size=”small” class=”” id=””][li_item icon=””]title – The custom title text that is displayed in the popup box.[/li_item][li_item icon=””]title_bg_color – Accepts a hexcode ( #000000 ). Sets the heading’s background color. Leave Blank for Theme Option selection.[/li_item][li_item icon=””]content – The custom text that is displayed in the popup box.[/li_item][li_item icon=””]content_bg_color – Accepts a hexcode ( #000000 ). Sets the background color. Leave Blank for Theme Option selection.[/li_item][li_item icon=””]bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color. Leave Blank for Theme Option selection.[/li_item][/checklist][/one_half][one_half last=”yes” spacing=”yes” background_color=”#f8f8f8″ background_image=”” background_repeat=”no-repeat” background_position=”left top” border_size=”1px” border_color=”#eaeaea” border_style=”solid” padding=”30px” class=”” id=””][checklist icon=”fa-check” iconcolor=”#333333″ circle=”no” circlecolor=”” size=”small” class=”” id=””][li_item icon=””]textcolor – Accepts a hexcode ( #000000 ). Sets the text’s color. Leave Blank for Theme Option selection.[/li_item][li_item icon=””]trigger – Can be one of these values: click, or hover. Sets the mouse action to trigger popover.[/li_item][li_item icon=””]placement – Can be one of these values: default, top, left, right, or bottom. Sets the popover’s position.[/li_item][li_item icon=””]class – Add a custom class to the wrapping HTML element for further css customization.[/li_item][li_item icon=””]id – Add a custom id to the wrapping HTML element for further css customization.[/li_item][/checklist][/one_half][/fullwidth][fullwidth backgroundcolor=”” backgroundimage=”http://cdn.fligo.eu/wp-content/uploads/2014/11/home_slider.jpg” backgroundrepeat=”no-repeat” backgroundposition=”left top” backgroundattachment=”fixed” video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” bordersize=”1px” bordercolor=”” borderstyle=”solid” paddingtop=”35px” paddingbottom=”75px” paddingleft=”40px” paddingright=”40px” menu_anchor=”” equal_height_columns=”no” hundred_percent=”no” class=”” id=””]