Box over image
Use case:
Text box overlapping your image in various places. Great to highlight a benefit, feature, or important piece of information with a large image and a few words. Alternate multiple modules with opposite image position for greater visual impact and a sense of discovery while the user is scrolling.
Page speed impact:
Low with lazy-loading enabled and not above-the-fold, unless you add heavy resources (large images without lazy loading, videos, call-to-action, etc) in the module's rich-text field.
May be medium in the above-the-fold section on mobile. It depends a lot on the size and level of optimization of your image.
Use TinyPNG to optimize your image as best as possible without losing in quality, or consider using a vector image (SVG) whenever possible, which is usually very little in size compared to a JPG or PNG file.
Available in pages:
Yes
Reserved block class:
box-over-imageResources:
css/components/box-over-image.css