{"id":187426,"date":"2025-01-10T08:29:16","date_gmt":"2025-01-10T02:59:16","guid":{"rendered":"https:\/\/theplusaddons.com\/?post_type=documents&#038;p=187426"},"modified":"2026-04-09T16:15:14","modified_gmt":"2026-04-09T10:45:14","slug":"create-a-multi-layer-elementor-background","status":"publish","type":"documents","link":"https:\/\/theplusaddons.com\/docs\/create-a-multi-layer-elementor-background\/","title":{"rendered":"How to Create a Multi Layer Elementor Background?"},"content":{"rendered":"\n<p>Adding a multi-layer background can add depth and dimension to your site, making it more visually dynamic and engaging.&nbsp;<\/p>\n\n\n\n<p>With the Row Background widget from The Plus Addons for Elementor, you can easily create different types of multi-layer backgrounds in Elementor.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/theplusaddons.com\/elementor-widget\/row-background\/\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor plugin<\/a> installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, and you need the <a href=\"https:\/\/theplusaddons.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n<li>Make sure the Row Background widget is activated, to verify this visit The Plus Addons \u2192 Widgets \u2192 and Search for Row Background and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial <\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Ultimate Row Background (Multi Layer(3) | Power packed | Responsive) for Elementor - The Plus Addons\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/2uIMQCIfjlM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Row Background Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Addons <\/strong>\u2192<strong> Widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name and<strong> turn on the toggle.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-activate-1024x485.png\" alt=\"from\" class=\"wp-image-187450\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-activate-1024x485.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-activate-300x142.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-activate-768x364.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-activate-1536x728.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-activate-600x284.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-activate.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Multi Layer <\/strong>&#8211; You can easily create a multi-layer background.<\/li>\n\n\n\n<li><strong>Gradient Background<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-gradient-background-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a gradient background.<\/a><\/li>\n\n\n\n<li><strong>Animated Color Background<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-an-animated-color-background-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create an animated color background.<\/a><\/li>\n\n\n\n<li><strong>Video Background<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/create-an-elementor-video-background\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a video background.<\/a><\/li>\n\n\n\n<li><strong>Background Slideshow<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/create-an-elementor-background-slideshow\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a background slideshow.<\/a><\/li>\n\n\n\n<li><strong>Image Segmentation Background<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/\/create-a-segmented-background-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add an image segmentation background.<\/a><\/li>\n\n\n\n<li><strong>Animated Gradient Background<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-an-animated-gradient-background-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create an animated gradient background.<\/a><\/li>\n\n\n\n<li><strong>Change Background On Scroll<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/change-background-on-scroll-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">change the background on scroll.<\/a><\/li>\n\n\n\n<li><strong>Carousel Background<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/change-carousel-background-on-slide-change-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">change the carousel background with slide change<\/a>.<\/li>\n\n\n\n<li><strong>Parallax Background<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-a-parallax-background-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a parallax background.<\/a><\/li>\n\n\n\n<li><strong>Particle Background<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/add-an-elementor-particle-background\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a particle background.<\/a><\/li>\n\n\n\n<li><strong>Moving Image Background<\/strong> &#8211; You can <a href=\"https:\/\/theplusaddons.com\/docs\/add-a-moving-image-background-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a moving image background.<\/a><\/li>\n\n\n\n<li><strong>Background Overlay<\/strong> &#8211; You can easily <a href=\"https:\/\/theplusaddons.com\/docs\/\/create-an-elementor-background-overlay\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a background overlay with different elements.<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use the Row Background Widget in Elementor?<\/h2>\n\n\n\n<p>Add the Row Background widget from The Plus Addons for Elementor to the container you want to add the background.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Deep Layer<\/h3>\n\n\n\n<p>The Row Background widget has three layers, this is the deep or last layer.<\/p>\n\n\n\n<p>From the <strong>Select Option<\/strong> dropdown, you have to select a background type for the last layer. Here you\u2019ll find 10 options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Carousel Background<\/strong> &#8211; To change the carousel background with slide change.<\/li>\n\n\n\n<li><strong>Solid Color<\/strong> &#8211; To create a solid background color.<\/li>\n\n\n\n<li><strong>Gradient Color<\/strong> &#8211; To create a gradient background color.<\/li>\n\n\n\n<li><strong>Animated Background Color<\/strong> &#8211; To create an animated color background.<\/li>\n\n\n\n<li><strong>Creative Background Image<\/strong> &#8211; To create a parallax background.<\/li>\n\n\n\n<li><strong>Creative Background Video<\/strong> &#8211; To create a video background.<\/li>\n\n\n\n<li><strong>Creative Background Galler<\/strong>y &#8211; To create a background image slideshow.<\/li>\n\n\n\n<li><strong>Image Segmentation<\/strong> &#8211; To create an image segmentation background.<\/li>\n\n\n\n<li><strong>Gradient Animate Color<\/strong> &#8211; To create an animated gradient background.<\/li>\n\n\n\n<li><strong>On Scroll Background Animation<\/strong> &#8211; To change the background on scroll.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"905\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-deep-layer.gif\" alt=\"from\" class=\"wp-image-187452\" title=\"\"><\/figure>\n\n\n\n<p>Select the option as per your requirements, let\u2019s select Solid Color here.<\/p>\n\n\n\n<p>In the <strong>Background Color<\/strong> section, you have to set the background color.<\/p>\n\n\n\n<p>Then from the <strong>Border Radius<\/strong> slider, you can set a different border radius for the background for different devices.&nbsp;<\/p>\n\n\n\n<p>From the <strong>Layout<\/strong> dropdown, you can select different layout types for your taxonomy. Here you\u2019ll find four options &#8211;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Middle Layer<\/h3>\n\n\n\n<p>This is the middle or second layer.<\/p>\n\n\n\n<p>From the <strong>Select Option<\/strong> dropdown, you have to select a background type for the middle layer. Here you\u2019ll find 5 options &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Canvas Effect<\/strong> &#8211; To create a particle background.<\/li>\n\n\n\n<li><strong>Modern Mouse Hover Parallax<\/strong> &#8211; To create an image mouse hover parallax effect on the background. This will keep the image as an object over the background and the images will have a parallax effect on mouse hover.<\/li>\n\n\n\n<li><strong>Auto Moving Layer<\/strong> &#8211; To create a moving image background.<\/li>\n\n\n\n<li><strong>Modern Image Effect<\/strong> &#8211; To add different effects on images over the background.<\/li>\n\n\n\n<li><strong>Multi Layer Parallax<\/strong> &#8211; To create a multi-layer parallax background.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"901\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-middle-layer.gif\" alt=\"from\" class=\"wp-image-187453\" title=\"\"><\/figure>\n\n\n\n<p>Select the option as per your requirements, let\u2019s select Modern Image Effect here.<\/p>\n\n\n\n<p>By default, you\u2019ll see one repeater item open it &#8211;&nbsp;<\/p>\n\n\n\n<p>In the <strong>Upload Image<\/strong> section, you have to add your image.<\/p>\n\n\n\n<p>You can adjust the image position from the <strong>Left (Auto \/ %)<\/strong>, <strong>Right (Auto \/ %)<\/strong>, <strong>Top (Auto \/ %)<\/strong>, <strong>Bottom (Auto \/ %)<\/strong> toggles for desktop, tablet and mobile separately.<\/p>\n\n\n\n<p>From the <strong>Width<\/strong> field, you can set the image width.<\/p>\n\n\n\n<p>Then from the <strong>Opacity Image<\/strong> section, you can set the opacity of the image.<\/p>\n\n\n\n<p>From the <strong>Border Radius<\/strong> section, you can set the image border-radius.<\/p>\n\n\n\n<p>Then from the <strong>Image Effects<\/strong> dropdown, you can add different effects.<\/p>\n\n\n\n<p>From the <strong>Duration Time<\/strong> section, you can manage the animation speed.<\/p>\n\n\n\n<p>By enabling the <strong>Magic Scroll<\/strong> toggle, you can <a href=\"https:\/\/theplusaddons.com\/docs\/magic-scroll-effect-in-elementor\/\">add a scrolling effect to the image<\/a>.<\/p>\n\n\n\n<p>From the <strong>Responsive Visibility<\/strong> toggle, you can select to show or hide the image for responsive devices.<\/p>\n\n\n\n<p>In the <strong>z-index<\/strong> field, you can set the z-index of the image.<\/p>\n\n\n\n<p>You can click on the <strong>+ Add Item<\/strong> button to add more images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Top Layer<\/h3>\n\n\n\n<p>This is the top layer which can act as an overlay background.<\/p>\n\n\n\n<p>From the <strong>Select Option<\/strong> dropdown, you have to select a background type for the top layer. Here you\u2019ll find 3 options &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Solid Color<\/strong> &#8211; To add a solid color overlay background.<\/li>\n\n\n\n<li><strong>Gradient Color<\/strong> &#8211; To add a gradient color overlay background.<\/li>\n\n\n\n<li><strong>Texture Image<\/strong> &#8211; To add an image overlay background.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"422\" height=\"653\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-top-layer.gif\" alt=\"from\" class=\"wp-image-187454\" title=\"\"><\/figure>\n\n\n\n<p>Select the option as per your requirements, let\u2019s select Solid Color here.<\/p>\n\n\n\n<p>From the <strong>Overlay Color<\/strong> section, you can add a solid color but make sure to add some transparency in the color to create an overlay effect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Extra<\/h3>\n\n\n\n<p>By enabling the <strong>Overflow Hidden Section<\/strong> toggle you can hide the section overflow.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"408\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-extra.png\" alt=\"from\" class=\"wp-image-187455\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-extra.png 298w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2025\/01\/row-background-extra-219x300.png 219w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/advanced-tab\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":2115,"featured_media":189605,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[683,527],"class_list":["post-187426","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-row-background","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/187426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/users\/2115"}],"replies":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/comments?post=187426"}],"version-history":[{"count":0,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/187426\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media\/189605"}],"wp:attachment":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media?parent=187426"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/docs?post=187426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}