Multi layered backgrounds with drag and drop

[r_levine]

Hey everyone, I need some help here.

SCENARIO

I’m building out a dnd template for a theme. I’d like to have a section that contains a multi-layer background. The background contains 3 gradient layers, an image layer, and a blend-mode for each layer.

CSS

background: linear-gradient(to right, rgba({{ bgColor|convert_rgb }}, 1), rgba({{ bgColor|convert_rgb }}, 0)),
            linear-gradient(to right, rgba({{ bgColor|convert_rgb }}, .5), rgba({{ bgColor|convert_rgb }}, .5)),
            linear-gradient(to right, #fff, #fff),
            url({{ bg.bg_image.src }});
background-position: {{ convert_position(bg_hor, bg_vert) }};
background-size: cover;
background-blend-mode: normal,
                       normal,
                       saturation,
                       normal;
background-repeat: no-repeat;

IDEAL SOLUTION

1. How can I build this type of background for a dnd section? I see dnd section options for “background_image,” “background_color,” and “background_linear_gradient,” but not for “background” or “background-blend-mode,” which are needed in order to get this effect. Is the effect possible?

POTENTIAL WORKAROUNDS

1. Build a custom module with the background and then create a dnd section that uses the module. A content editor can then add the section to any dnd area. How can I turn off the dnd section options (content alignment, padding, margin, background) after setting default values, since adjusting those will cause the module background to not fill the dnd section correctly?

2. Build a custom module that can be added to a flexible content area. How can I allow a content editor to add a module or a dnd section without designating specific dnd areas and flexible widget areas (so they can add a module or dnd section anywhere on the page)?

[Kevin-C]

Hey @r_levine

I've not done this but you might be able to use reusable sections with a template partial to build this out.

Hope this gets you going in the right direction!

[r_levine]

Thanks @Kevin-C . Unfortuantely, that's workaround #1 (the dnd section mentioned could be a section template), which could work, however I can't find a way to hide the dnd section options from the content editor.