Zephyr is bundled with Ultimate Addons for Visual Composer plugin.
Modal Box
via buttons:
[ultimate_modal modal_title=”What is Modal Box?” btn_size=”block” btn_bg_color=”#7049ba” btn_txt_color=”#ffffff” btn_text=”Simple text” modal_style=”overlay-fade” overlay_bg_opacity=”80″ header_bg_color=”#d13a7a” header_text_color=”#ffffff” modal_border_style=”solid” modal_border_width=”0″ modal_border_color=”” modal_border_radius=”0″]In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.
Modal windows are commonly used in GUI systems to command user awareness and to display emergency states, although they have been argued to be ineffective for that use. Modal windows are prone to produce mode errors.[/ultimate_modal]
[ultimate_modal modal_title=” Popup with Single Image” btn_size=”block” btn_bg_color=”#ffb03a” btn_txt_color=”#ffffff” btn_text=”Single Image” modal_size=”medium” modal_style=”overlay-zoomin” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”0″ modal_border_color=”” modal_border_radius=”0″]
[/ultimate_modal]
[/ultimate_modal][ultimate_modal modal_title=” Popup with Image Gallery” btn_size=”block” btn_bg_color=”#424242″ btn_txt_color=”#ffffff” btn_text=”Image Gallery” modal_size=”medium” modal_style=”overlay-slidedown” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”0″ modal_border_color=”” modal_border_radius=”0″]
[/ultimate_modal]
[ultimate_modal modal_title=” Popup with Image Slider” btn_size=”block” btn_bg_color=”#e0e0e0″ btn_txt_color=”#424242″ btn_text=”Image Slider” modal_size=”medium” modal_style=”overlay-fade” overlay_bg_opacity=”80″ modal_border_style=”solid” modal_border_width=”0″ modal_border_color=”” modal_border_radius=”0″][/ultimate_modal]
via text links:
[ultimate_modal modal_title=”Send Us a Message” modal_on=”text” read_text=”CONTACT FORM” txt_color=”#7049ba” modal_style=”overlay-slidedown” overlay_bg_opacity=”80″ header_bg_color=”#7049ba” header_text_color=”#ffffff” modal_border_style=”solid” modal_border_width=”0″ modal_border_color=”” modal_border_radius=”0″]
[/ultimate_modal]
[ultimate_modal modal_on=”text” read_text=”GOOGLE MAPS” txt_color=”#ffb03a” modal_style=”overlay-fade” overlay_bg_opacity=”80″]
[/ultimate_modal]
[ultimate_modal modal_contain=”ult-vimeo” modal_on=”text” read_text=”EMBEDDED VIDEO” txt_color=”#424242″ modal_style=”overlay-fade” overlay_bg_opacity=”80″][/ultimate_modal]
[ultimate_modal modal_on=”text” read_text=”CUSTOM HTML” txt_color=”#7049ba” modal_style=”overlay-fade” overlay_bg_opacity=”80″]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor nulla, fermentum id maximus ac, commodo porttitor sem. Duis non tristique mi, at tempor quam. Quisque congue dui at eros iaculis consequat. Etiam quis aliquam leo. Mauris nunc turpis, venenatis nec velit non, elementum cursus urna. Quisque pellentesque aliquam lacinia.
Quisque vitae augue et orci mattis rhoncus. Nam egestas libero leo, in interdum tortor varius semper. Curabitur ligula quam, efficitur non gravida eget, malesuada quis augue. Morbi convallis ornare ullamcorper. Nulla facilisi. Sed in tristique risus, in blandit felis. Pellentesque consectetur eleifend leo, quis facilisis urna hendrerit vitae. Cras tristique erat et leo vehicula dignissim. Sed nec consequat enim.
Cras dictum tristique nisl, non ornare tortor auctor vel. Fusce in rhoncus arcu. Donec condimentum ut erat non dictum. Curabitur vestibulum mollis nulla sodales viverra. In ac diam nisl. Duis posuere fringilla leo. Donec tristique mauris id ligula porta, suscipit facilisis ante consequat.
Suspendisse nisl risus, tincidunt id suscipit eu, gravida sit amet enim. Donec molestie nibh in odio tempor, eu iaculis neque tempor. In purus nibh, scelerisque id interdum id, dictum vel neque. Nunc ut lacus vulputate, viverra ligula non, consectetur sapien. Pellentesque vestibulum arcu id orci luctus, at consectetur est vulputate. Quisque fringilla vitae quam vitae euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae ipsum nec massa tempor tempor.
Mauris mollis, orci a porttitor blandit, nisl nulla pulvinar odio, ut condimentum ipsum nibh eu metus. Curabitur ultrices vulputate est iaculis hendrerit. Mauris id condimentum purus. Duis pellentesque fermentum felis eget mollis. Integer eu quam porta, laoreet eros et, interdum sapien. Morbi sit amet enim sit amet velit dictum dapibus vitae at purus. Morbi nisl lectus, imperdiet ac facilisis sit amet, dictum vel ligula.
Sed a rutrum leo. Aliquam erat volutpat. Nunc vulputate sollicitudin nisl, non tristique nisi ultricies interdum. Vivamus et tempor ligula. Sed volutpat vulputate diam, et tristique arcu iaculis id. Etiam convallis ullamcorper nisi. Sed pretium lectus nec mi ullamcorper, nec vehicula est pellentesque. Nulla tincidunt ipsum ut purus gravida malesuada. Nunc lobortis est vel ultrices auctor. Vivamus magna purus, pharetra placerat felis vel, viverra interdum justo.
Vivamus vel dui a nisi semper vehicula at sed sem. Aenean nec porttitor ante. Quisque tristique libero neque, eget eleifend ligula porta non. Nulla pharetra orci aliquet neque viverra, eu sollicitudin nulla viverra. Sed sodales bibendum est sed vehicula. Cras ligula quam, posuere sit amet ante non, lobortis eleifend libero. Sed vel tincidunt neque, eu iaculis augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean id gravida dolor, et congue magna. Duis ullamcorper venenatis metus at accumsan. Mauris in dolor diam. Nulla laoreet odio eget ligula dictum, id ornare justo eleifend.[/ultimate_modal]
Highlight Box
[ultimate_ctation ctaction_background=”#7049ba” ctaction_background_hover=”#d13a7a” enable_icon=”enable_icon_value” icon=”Defaults-star-o” icon_size=”32″ icon_color=”#ffffff” text_font_size=”24″ ctaction_padding_top=”30″ ctaction_padding_bottom=”30″]Always deliver more
than expected[/ultimate_ctation]
than expected[/ultimate_ctation]
[ultimate_ctation ctaction_background=”#ffb03a” ctaction_background_hover=”#424242″ enable_icon=”enable_icon_value” effect=”bottom-push” icon=”Defaults-heart-o” icon_size=”32″ icon_color=”#ffffff” text_font_size=”24″ ctaction_padding_top=”30″ ctaction_padding_bottom=”30″]Life is short.
Do stuff that matters[/ultimate_ctation]
Do stuff that matters[/ultimate_ctation]
[ultimate_ctation ctaction_background=”#3498db” ctaction_background_hover=”#81d742″ enable_icon=”enable_icon_value” effect=”left-push” icon=”Defaults-camera-retro” icon_size=”32″ icon_color=”#ffffff” text_font_size=”24″ ctaction_padding_top=”30″ ctaction_padding_bottom=”30″]Done is better
than perfect[/ultimate_ctation]
than perfect[/ultimate_ctation]
Counter
[stat_counter icon=”Defaults-google-plus” icon_size=”36″ icon_color=”#c63b1e” icon_style=”advanced” icon_border_style=”solid” icon_color_border=”#c63b1e” icon_border_size=”2″ icon_border_radius=”500″ icon_border_spacing=”80″ icon_position=”left” counter_title=”Google posts” counter_value=”7250″ speed=”3″ font_size_title=”16″ font_size_counter=”44″]
[stat_counter icon=”Defaults-facebook” icon_size=”36″ icon_color=”#3b5998″ icon_style=”advanced” icon_border_style=”solid” icon_color_border=”#3b5998″ icon_border_size=”2″ icon_border_radius=”500″ icon_border_spacing=”80″ icon_position=”left” counter_title=”Facebook Friends” counter_value=”3891″ speed=”3″ font_size_title=”16″ font_size_counter=”44″]
[stat_counter icon=”Defaults-twitter” icon_size=”36″ icon_color=”#00acee” icon_style=”advanced” icon_border_style=”solid” icon_color_border=”#00acee” icon_border_size=”2″ icon_border_radius=”500″ icon_border_spacing=”80″ icon_position=”left” counter_title=”Twitter Followers” counter_value=”16042″ speed=”3″ font_size_title=”16″ font_size_counter=”44″]
[stat_counter icon=”Defaults-flickr” icon_size=”36″ icon_color=”#ff0084″ icon_style=”advanced” icon_border_style=”solid” icon_color_border=”#ff0084″ icon_border_size=”2″ icon_border_radius=”500″ icon_border_spacing=”80″ icon_position=”left” counter_title=”Flickr Photos” counter_value=”1753″ speed=”3″ font_size_title=”16″ font_size_counter=”44″]
Info Banner
[ultimate_info_banner banner_title=”Give a title to this banner” banner_desc=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor nulla, fermentum id maximus ac, commodo porttitor sem. Duis non tristique mi, at tempor quam.” button_text=”Learn More” button_link=”url:%23||” banner_image=”4618″ banner_size=”320″ ib3_alignment=”ultb3-img-center” overlay_color=”rgba(0,0,0,0.15)” banner_img_height_large_screen=”600″ button_color=”#7049ba” button_text_color=”#ffffff” button_border_width=”0″ button_border_radius=”3″]
[ultimate_info_banner banner_title=”Give a title to this banner” banner_desc=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor nulla, fermentum id maximus ac, commodo porttitor sem. Duis non tristique mi, at tempor quam.” button_text=”Learn More” button_link=”url:%23||” banner_image=”4578″ banner_size=”320″ ib3_alignment=”ultb3-img-center” ib3_effect=”ultb3-hover-6″ overlay_color=”rgba(0,0,0,0.2)” banner_img_height_large_screen=”600″ button_color=”#ffb03a” button_text_color=”#ffb03a” button_border_width=”0″ button_border_radius=”2″ ib3_background=”#23aee0″]
[ultimate_info_banner banner_title=”Give a title to this banner” banner_desc=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor nulla, fermentum id maximus ac, commodo porttitor sem. Duis non tristique mi, at tempor quam.” button_text=”Learn More” button_link=”url:%23||” banner_image=”4617″ banner_size=”320″ ib3_alignment=”ultb3-img-center” ib3_effect=”ultb3-hover-1″ overlay_color=”rgba(61,27,6,0.35)” banner_img_height_large_screen=”800″ button_color=”#ffffff” button_text_color=”#ffffff” button_text_hover_color=”#424242″ button_border_width=”0″ button_border_radius=”2″]
Info Box
[bsf-info-box icon=”Defaults-pencil” icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#7049ba” title=”This is an icon box” read_more=”box” link=”url:%23||” hover_effect=”style_2″ pos=”square_box” box_border_width=”0″ box_bg_color=”#f5f5f5″ desc_font_color=”#999999″]Write a short description, that will describe the title or something informational.[/bsf-info-box]
[bsf-info-box icon=”Defaults-plane” icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#ffb03a” title=”This is an icon box” read_more=”box” hover_effect=”style_2″ pos=”square_box” box_border_width=”0″ box_bg_color=”#f5f5f5″ desc_font_color=”#999999″]Write a short description, that will describe the title or something informational.[/bsf-info-box]
[bsf-info-box icon=”Defaults-bullhorn” icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#3ac494″ title=”This is an icon box” read_more=”box” link=”url:%23||” hover_effect=”style_2″ pos=”square_box” box_border_width=”0″ box_bg_color=”#f5f5f5″ desc_font_color=”#999999″]Write a short description, that will describe the title or something informational.[/bsf-info-box]
Info Table
[ultimate_info_table color_scheme=”custom” color_bg_main=”#f5f5f5″ color_bg_highlight=”#7049ba” color_txt_highlight=”#ffffff” package_heading=”The title of Info Table” package_sub_heading=”Sub Heading” icon_type=”selector” icon=”Defaults-heart-o” icon_size=”32″ icon_color=”#333333″ icon_style=”circle” icon_color_bg=”#ffffff” use_cta_btn=”true” package_btn_text=”Call to action” package_link=”url:%23||”]Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet. Lorem ipsum dolor sit amet. Maecenas sed diam eget risus varius blandit sit amet non magna. Mattis purus sit amet fermentum.[/ultimate_info_table]
[ultimate_info_table design_style=”design04″ color_scheme=”custom” color_bg_main=”#f5f5f5″ color_bg_highlight=”#7049ba” color_txt_highlight=”#ffffff” package_heading=”The title of Info Table” package_sub_heading=”Sub Heading” icon_type=”selector” icon=”Defaults-key” icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#7049ba” use_cta_btn=”true” package_btn_text=”Call to action” package_link=”url:%23||”]Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet. Lorem ipsum dolor sit amet. Maecenas sed diam eget risus varius blandit sit amet non magna. Mattis purus sit amet fermentum.[/ultimate_info_table]
[ultimate_info_table design_style=”design06″ color_scheme=”custom” color_bg_main=”#f5f5f5″ color_bg_highlight=”#7049ba” color_txt_highlight=”#ffffff” package_heading=”The title of Info Table” package_sub_heading=”Sub Heading” icon_type=”selector” icon=”Defaults-key” icon_size=”32″ icon_color=”#333333″ use_cta_btn=”true” package_btn_text=”Call to action” package_link=”url:%23||”]Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet. Lorem ipsum dolor sit amet. Maecenas sed diam eget risus varius blandit sit amet non magna. Mattis purus sit amet fermentum.[/ultimate_info_table]
Info List
[info_list style=”hexagon” icon_bg_color=”#7049ba” icon_color=”#ffffff” font_size_icon=”24″ connector_color=”#999999″][info_list_item list_title=”Crafted with love” list_icon=”Defaults-thumbs-o-up” title_font_size=”20″ title_font_line_height=”30″ desc_font_line_height=”21″]Write a short description, that will describe the title or something informational and useful.[/info_list_item][info_list_item list_title=”Layout Versions” list_icon=”Defaults-th” title_font_size=”20″ title_font_line_height=”30″ desc_font_line_height=”21″]Write a short description, that will describe the title or something informational and useful.[/info_list_item][info_list_item list_title=”Unlimted Colors” list_icon=”Defaults-flask” title_font_size=”20″ title_font_line_height=”30″ desc_font_line_height=”21″]Write a short description, that will describe the title or something informational and useful.[/info_list_item][/info_list]
[info_list position=”top” style=”circle with_bg” icon_bg_color=”#ffb03a” icon_color=”#ffffff” font_size_icon=”28″ connector_color=”#999999″][info_list_item list_title=”Crafted with love” list_icon=”Defaults-thumbs-o-up” title_font_size=”20″ title_font_line_height=”30″ desc_font_line_height=”21″]Write a short description, that will describe the title or something informational and useful.[/info_list_item][info_list_item list_title=”Layout Versions” list_icon=”Defaults-th” title_font_size=”20″ title_font_line_height=”30″ desc_font_line_height=”21″]Write a short description, that will describe the title or something informational and useful.[/info_list_item][info_list_item list_title=”Unlimted Colors” list_icon=”Defaults-flask” title_font_size=”20″ title_font_line_height=”30″ desc_font_line_height=”21″]Write a short description, that will describe the title or something informational and useful.[/info_list_item][info_list_item list_title=”Lots of Features” list_icon=”Defaults-film” title_font_size=”20″ title_font_line_height=”30″ desc_font_line_height=”21″]Write a short description, that will describe the title or something informational and useful.[/info_list_item][/info_list]
Price Box
[ultimate_pricing design_style=”design05″ color_scheme=”custom” color_bg_main=”#f5f5f5″ color_bg_highlight=”#d13a7a” color_txt_highlight=”#ffffff” package_heading=”Package Name” package_sub_heading=”Sub Heading” package_price=”$99″ package_unit=”per month” package_btn_text=”Get Now” package_link=”url:%23||”]
- 15 Emails Accounts
- 50 GB Bandwidth
- 1 MySQL Database
- Daily Backup
- Web File Management
[ultimate_pricing design_style=”design05″ color_scheme=”custom” color_bg_main=”#f5f5f5″ color_bg_highlight=”#ffb03a” color_txt_highlight=”#ffffff” package_heading=”Package Name” package_sub_heading=”Sub Heading” package_price=”$199″ package_unit=”per month” package_btn_text=”Get Now” package_link=”url:%23||”]
- 15 Emails Accounts
- 50 GB Bandwidth
- 1 MySQL Database
- Daily Backup
- Web File Management
[ultimate_pricing design_style=”design05″ color_scheme=”custom” color_bg_main=”#f5f5f5″ color_bg_highlight=”#7049ba” color_txt_highlight=”#ffffff” package_heading=”Package Name” package_sub_heading=”Sub Heading” package_price=”$299″ package_unit=”per month” package_btn_text=”Get Now” package_link=”url:%23||”]
- 15 Emails Accounts
- 50 GB Bandwidth
- 1 MySQL Database
- Daily Backup
- Web File Management
Timeline
[icon_timeline timeline_layout=”timeline-custom-width” custom_width=”400″ tl_animation=”tl-animation-shadow”][icon_timeline_sep time_sep_title=”This is a Timeline Separator”][icon_timeline_item time_title=”Provide the title for this timeline item”]Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi facilisis sagittis sem, a blandit arcu molestie in. Morbi at neque volutpat, tempus nibh id, vulputate nibh.[/icon_timeline_item][icon_timeline_item time_title=”This complete box is a link” time_link_apply=”box” time_link=”url:%23||”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum et augue in varius. Nam facilisis, velit vitae egestas bibendum, mi enim venenatis ante, eu commodo quam elit ac erat. Fusce mollis diam eu erat consectetur, nec elementum libero lacinia.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi facilisis sagittis sem, a blandit arcu molestie in. Morbi at neque volutpat, tempus nibh id, vulputate nibh.[/icon_timeline_item][icon_timeline_item time_title=”Provide the title for this timeline item” time_link_apply=”more” time_link=”url:%23||”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum et augue in varius. Nam facilisis, velit vitae egestas bibendum, mi enim venenatis ante, eu commodo quam elit ac erat. Fusce mollis diam eu erat consectetur, nec elementum libero lacinia.[/icon_timeline_item][icon_timeline_item time_title=”This title is a link” time_link_apply=”title” time_link=”url:%23||”]Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi facilisis sagittis sem, a blandit arcu molestie in. Morbi at neque volutpat, tempus nibh id, vulputate nibh.[/icon_timeline_item][icon_timeline_feat time_title=”Provide the title for this timeline item” time_link_apply=”more” time_link=”url:%23||”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum et augue in varius. Nam facilisis, velit vitae egestas bibendum, mi enim venenatis ante, eu commodo quam elit ac erat. Fusce mollis diam eu erat consectetur, nec elementum libero lacinia. Sed eget nulla turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi facilisis sagittis sem, a blandit arcu molestie in. Morbi at neque volutpat, tempus nibh id, vulputate nibh.[/icon_timeline_feat][icon_timeline_sep time_sep_title=”This is a Timeline Separator”][/icon_timeline]