A different way to layer content in the editor

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

floating-image-text 1.png


How to create the above example using the 'container'

  1. 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
  2. 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.
  3. Keep the row settings open, and scroll down until you reach 'Container'. 
  4. Choose a background image under 'Container'.
  5. To achieve the same effect as in the example, choose the smallest Size for the image (right under Image Repeat)
  6. Remember to tweak the padding on the different elements on all viewports, until they are aligned the way you want. 


Was this article helpful?
0 out of 0 found this helpful