Select Page

Custom Module Demo Page

Balloon

Custom Module

Balloon

Accordion Image module allows you to create interactive image galleries. You can add multiple images and each image can have its own icon, title, description and button which can be revealed with a nice animation on hover or when the image is clicked. You can also set the image tab to be opened on load or add image overlay for the default state and for the hover state.

Demo 1
[dipi_balloon selector=”.balloon_one” ballon_placement=”bottom” ballon_animation=”fadeInUp” balloon_title=”Video Creation” use_balloon_arrow=”on” balloon_arrow_color=”#ff4200″ width=”225px” _builder_version=”4.5.7″ _module_preset=”default” balloon_title_font=”|700|||||||” balloon_title_text_color=”#ffffff” balloon_title_font_size=”14px” background_color=”#ff4200″ custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px”][/dipi_balloon]
[dipi_balloon selector=”.balloon_two” ballon_placement=”bottom” ballon_animation=”fadeInUp” balloon_title=”Unique Content” use_balloon_arrow=”on” balloon_arrow_color=”#ff4200″ width=”225px” _builder_version=”4.5.7″ _module_preset=”default” balloon_title_font=”|700|||||||” balloon_title_text_color=”#ffffff” balloon_title_font_size=”14px” background_color=”#ff4200″ custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px”][/dipi_balloon]
[dipi_balloon selector=”.balloon_three” ballon_placement=”bottom” ballon_animation=”fadeInUp” balloon_title=”Customization” use_balloon_arrow=”on” balloon_arrow_color=”#ff4200″ width=”225px” _builder_version=”4.5.7″ _module_preset=”default” balloon_title_font=”|700|||||||” balloon_title_text_color=”#ffffff” balloon_title_font_size=”14px” background_color=”#ff4200″ custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px”][/dipi_balloon]
[dipi_balloon selector=”.balloon_four” ballon_placement=”bottom” ballon_animation=”fadeInUp” balloon_title=”Quick Launch” use_balloon_arrow=”on” balloon_arrow_color=”#ff4200″ width=”225px” _builder_version=”4.5.7″ _module_preset=”default” balloon_title_font=”|700|||||||” balloon_title_text_color=”#ffffff” balloon_title_font_size=”14px” background_color=”#ff4200″ custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px”][/dipi_balloon]
Demo 2
[dipi_balloon selector=”.balloon_five” ballon_placement=”right” ballon_animation=”fadeInLeft” balloon_title=”Strawberry Muffin” balloon_description=”Pellentesque auctor felis quis risus fringilla laoreet. Sed pharetra cursus lorem quis ultrices. Aliquam ut volutpat tellus. Suspendisse ultrices nisl sit amet neque faucibus mollis. Duis eu arcu faucibus, facilisis turpis et, porttitor tortor. Maecenas porttitor blandit cursus. Integer sodales arcu at nibh porttitor varius.” use_balloon_arrow=”on” balloon_arrow_color=”#ffffff” width=”381px” _builder_version=”4.5.7″ _module_preset=”default” balloon_title_font=”|700|||||||” balloon_title_text_color=”#15022a” balloon_title_font_size=”22px” balloon_description_font_size=”14px” balloon_description_line_height=”1.4em” background_color=”#ffffff” z_index=”500″ custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px” border_radii_balloon_img=”on|100px|100px|100px|100px” box_shadow_style=”preset1″ box_shadow_blur=”56px” box_shadow_color=”rgba(21,2,42,0.22)”][/dipi_balloon]
[dipi_balloon selector=”.balloon_six” ballon_placement=”left” ballon_animation=”fadeInRight” balloon_title=”Chocolate Muffin” balloon_description=”Pellentesque auctor felis quis risus fringilla laoreet. Sed pharetra cursus lorem quis ultrices. Aliquam ut volutpat tellus. Suspendisse ultrices nisl sit amet neque faucibus mollis. Duis eu arcu faucibus, facilisis turpis et, porttitor tortor. Maecenas porttitor blandit cursus. Integer sodales arcu at nibh porttitor varius.” use_balloon_arrow=”on” balloon_arrow_color=”#ffffff” width=”381px” _builder_version=”4.5.7″ _module_preset=”default” balloon_title_font=”|700|||||||” balloon_title_text_color=”#15022a” balloon_title_font_size=”22px” balloon_description_font_size=”14px” balloon_description_line_height=”1.4em” background_color=”#ffffff” custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px” border_radii_balloon_img=”on|100px|100px|100px|100px” box_shadow_style=”preset1″ box_shadow_blur=”56px” box_shadow_color=”rgba(21,2,42,0.22)”][/dipi_balloon]
Demo 3
[dipi_balloon selector=”.pricing-feature-one” ballon_animation=”fadeInUp” balloon_description=”Pellentesque auctor felis quis risus fringilla laoreet. Sed pharetra cursus lorem quis ultrices. Aliquam ut volutpat tellus. Suspendisse ultrices nisl sit amet neque faucibus mollis.” use_balloon_arrow=”on” balloon_arrow_color=”#15022a” width=”381px” _builder_version=”4.5.7″ _module_preset=”default” balloon_title_font=”|700|||||||” balloon_title_text_color=”#15022a” balloon_title_font_size=”22px” balloon_description_text_color=”#ffffff” balloon_description_font_size=”14px” balloon_description_line_height=”1.4em” background_color=”#15022a” z_index=”500″ custom_padding=”0px||0px||false|false” border_radii=”on|5px|5px|5px|5px” border_radii_balloon_img=”on|100px|100px|100px|100px” box_shadow_style=”preset1″ box_shadow_blur=”56px” box_shadow_color=”rgba(21,2,42,0.22)”][/dipi_balloon]