{"id":14549,"date":"2019-08-15T09:00:50","date_gmt":"2019-08-15T07:00:50","guid":{"rendered":"https:\/\/premiumaddons.com\/?post_type=docs&#038;p=14549"},"modified":"2024-02-25T19:01:54","modified_gmt":"2024-02-25T17:01:54","slug":"image-separator-widget-tutorial","status":"publish","type":"docs","link":"https:\/\/premiumaddons.com\/docs\/image-separator-widget-tutorial\/","title":{"rendered":"Image Separator Widget Tutorial"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Intro<\/strong><\/h3>\n\n\n\n<p>Premium Image Separator Widget for Elementor Page Builder adds the option to have an image, icon or lottie animation as a separator between 2 sections. This decorative element comes with many customization options. <\/p>\n\n\n\n<p>Click here to check <a href=\"https:\/\/premiumaddons.com\/image-separator-widget-elementor-page-builder\/\">Premium Image Separator Widget demo.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Requirements:<\/h3>\n\n\n\n<ul>\n<li>You will need <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/pro\/\" target=\"_blank\">Premium Addons PRO<\/a> plugin installed and activated on your website.<\/li>\n\n\n\n<li>Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/plugin-settings\/\" target=\"_blank\">this article<\/a> to know how to do that.<\/li>\n\n\n\n<li>Premium Addons works only with <a rel=\"noreferrer noopener\" href=\"https:\/\/bit.ly\/Get-Elementor\" target=\"_blank\">Elementor Page Builder<\/a> plugin so you will need to have it installed and activated as well.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Image Separator Widget for Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjElMkYwMyUyRmVsZW1lbnRvci1pbWFnZS1zZXBhcmF0b3Itd2lkZ2V0LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Image Separator Widget\" class=\"wp-image-26557\"  \/><figcaption class=\"wp-element-caption\">Elementor Image Separator Widget<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Features<\/strong><\/h3>\n\n\n\n<ul>\n<li>Separator Type<\/li>\n\n\n\n<li>Width\/Size<\/li>\n\n\n\n<li>Gutter (%)<\/li>\n\n\n\n<li>Alignment<\/li>\n\n\n\n<li>Link<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Image Settings<\/h4>\n\n\n\n<ul>\n<li><strong>Separator Type:<\/strong> Select separator type: icon, lottie animation and image.<\/li>\n\n\n\n<li><strong>Icon: <\/strong>\n<ul>\n<li><strong>Select an Icon: <\/strong>Select an icon from font awesome library.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Image:<\/strong>\n<ul>\n<li><strong>Image:<\/strong> Upload separator image.<\/li>\n\n\n\n<li><strong>Image Fit:<\/strong> Select how should image will be resized to fit its container.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Lottie Animation:<\/strong>\n<ul>\n<li><strong><strong>Animation JSON URL<\/strong>:<\/strong> Insert the JSON URL.<\/li>\n\n\n\n<li><strong><strong>Loop<\/strong>:<\/strong> Make the Lottie animation run forever.<\/li>\n\n\n\n<li><strong><strong>Reverse<\/strong>:<\/strong> Make the Lottie animation run backward.<\/li>\n\n\n\n<li><strong><strong>Only Play on Hover<\/strong>:<\/strong> Play the animation only on hover.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Width\/Size:<\/strong> Select the separator size in pixels, em or %.<\/li>\n\n\n\n<li><strong>Gutter:<\/strong> Adjust the gutter % value to change the separator vertical position. &#8220;-50 %&#8221; is the default and aligns the image to the middle.<\/li>\n\n\n\n<li><strong>Alignment:<\/strong> Align the separator horizontally to the left, center, or right.<\/li>\n\n\n\n<li><strong>Link:<\/strong> Enable or disable the link option. When enabled, the following options are available:<ul><li><strong>Link\/URL:<\/strong> Select a link to an existing page or enter a custom URL.<\/li><\/ul>\n<ul>\n<li><strong>Image Title:<\/strong> Add a link title to the separator that will be visible when a visitor hovers over the image.<\/li>\n\n\n\n<li><strong>Link Target:<\/strong> Select between blank, parent, self and top.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjElMkYwMyUyRmVsZW1lbnRvci1pbWFnZS1zZXBhcmF0b3Itc2V0dGluZ3MuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Elementor Image Separator Widget Main Settings\" class=\"wp-image-26558\"  \/><figcaption class=\"wp-element-caption\">Elementor Image Separator Main Settings<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Icon<\/h4>\n\n\n\n<ul>\n<li><strong>Color:<\/strong> Pick a color for icon.<\/li>\n\n\n\n<li><strong>Hover Color:<\/strong> Pick on hover color for icon.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Set a background color for icon.<\/li>\n\n\n\n<li><strong>Hover Background Color:<\/strong> Set on hover background color for icon.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Set Border Radius for separator using pixels (PX), percentage (%), or em (EM).<\/li>\n\n\n\n<li><strong>Icon Shadow:<\/strong> Adjust icon shadow using the following controls:\n<ul>\n<li>Color<\/li>\n\n\n\n<li>Horizontal Position<\/li>\n\n\n\n<li>Vertical Position<\/li>\n\n\n\n<li>Blur<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Creates space around the separator in Pixel (px), Em (em), or Percentage (%).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjElMkYwMyUyRmVsZW1lbnRvci1pbWFnZS1zZXBhcmF0b3Itc3R5bGUtaWNvbi5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Image Separator Widget Main Settings\" class=\"wp-image-26559\"  \/><figcaption class=\"wp-element-caption\">Style Icon for Elementor Image Separator<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Image \/ Lottie Animation<\/h4>\n\n\n\n<ul>\n<li><strong>CSS Filters: <\/strong>Customize separator by adjusting the following settings:\n<ul>\n<li>Blur<\/li>\n\n\n\n<li>Brightness<\/li>\n\n\n\n<li>Contrast<\/li>\n\n\n\n<li>Saturation<\/li>\n\n\n\n<li>Hue<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Hover CSS Filters:<\/strong> Customize separator by adjusting the following settings on hover:\n<ul>\n<li>Blur<\/li>\n\n\n\n<li>Brightness<\/li>\n\n\n\n<li>Contrast<\/li>\n\n\n\n<li>Saturation<\/li>\n\n\n\n<li>Hue<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Set Border Radius for separator using pixels (PX), percentage (%), or em (EM).<\/li>\n\n\n\n<li><strong>Advanced Border Radius:<\/strong> Apply custom radius values for Elementor Image separator widget. Get the radius value from&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/9elements.github.io\/fancy-border-radius\/\" target=\"_blank\">here<\/a>.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Insert border radius values.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwOCUyRmVsZW1lbnRvci1pbWFnZS1zZXBhcmF0b3Itd2lkZ2V0LXNlcGFyYXRvci1zdHlsZS5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Style Image for Elementor Image Separator\" class=\"wp-image-28638\"  \/><figcaption class=\"wp-element-caption\">Style Image for Elementor Image Separator<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Intro Premium Image Separator Widget for Elementor Page Builder adds the option to have an image, icon or lottie animation as a separator between 2 sections. This decorative element comes with many customization options. Click here to check Premium Image Separator Widget demo. Image Separator Widget for Elementor Key Features Image Settings Style Icon Image [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Elementor Image Separator Widget - Premium Addons for Elementor","_seopress_titles_desc":"A simple way to add a separator icon, image, Lottie animation or SVG shape between any two Elementor sections to create an attractive design.","_seopress_robots_index":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"docs_category":[521],"docs_tag":[],"_links":{"self":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/14549"}],"collection":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/comments?post=14549"}],"version-history":[{"count":1,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/14549\/revisions"}],"predecessor-version":[{"id":72528,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/14549\/revisions\/72528"}],"wp:attachment":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/media?parent=14549"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_category?post=14549"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_tag?post=14549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}