Page Featured Image using custom layout element

Hey,
I am trying to get the featured image of pages as full-width/size images on the top (in combination with the transparent header).
Your typical solution as far as I have seen is to use a full-width easy slider on the top with a single image; or a color section.

What I want is to make an element that I just drag into the layout editor and automatically uses the featured image.
So I started by copying the color section (I tried with others too) shortcode to a child theme and of course renaming file/class/shortcode (as well as the relevant code snippet for functions.php). That was the only change I made.

This is where things get interesting. When I use my renamed version of the color section (doesn’t matter if it’s in the child theme or if I move it to the enfold theme shortcode folder), the custom section is not full-witdh. It is added to the post-entry / entry-content-wrapper div (which of course is not full width) instead of in the “main” div like normal color section.
Being the funny guy I am, I tried to compare with a normal color section. If I drag the color section under the custom section in the editor, it is also added to the (not full width) post area.
If I drag the standard color section ABOVE my renamed section, suddenly both get added to the “main” div and are full-width.

Something else I sometimes observed which might me relevant: In the case of using my custom section (which is not full width), the shortcodes somehow seem to break, because suddenly the shortcodes are displayed in the page text. (But maybe that was just me moving around with the custom shortcode and trying some things)

Summary: Custom Element (direct copy of color section) gets added to the wrong area and is not full-width
Alternative suggestions on how to achieve my desired outcome are also welcome.

Thanks in advance,
Tom