Have you ever found yourself needing to overlay text onto an image in the Editor? You're likely familiar with the method of placing a text module on top of a column. Or using an image as the background for a row.
But what if you want a layout where the text extends beyond the boundaries of the image? While you could create a background that accommodates both the image and text, allowing the text to float on top, there's a simpler solution!
By leveraging the 'container' functionality within the row, you can layer a background color (row), followed by an image (container), and then a column with a text module on top. This approach significantly enhances your flexibility when it comes to layering. Moreover, it eliminates the need to pre-design your background image using a separate design tool.
The finished result
How to create the above example using the 'container'
- Create a row with two columns.
- The left column will be empty.
- Set the right column background color to white. In this example, we have also added a shadow to the right column. It just makes it pop a bit more.
- In the right column, add a Text Module and insert your preferred text
- Open the row settings (by clicking the pencil icon in the top right corner when hovering your mouse over the row). Choose a background color for the row. In this case, we chose a burned orange.
- Keep the row settings open, and scroll down until you reach 'Container'.
- Choose a background image under 'Container'.
- To achieve the same effect as in the example, choose the smallest Size for the image (right under Image Repeat)
- Remember to tweak the padding on the different elements on all viewports, until they are aligned the way you want.