Hello Laurent,

Great questions! Let’s go one by one:

1. Watermark image behind text addon For this, the most reliable and clean solution is to use CSS background rather than margins or custom positions. You can:

• Add a CSS class to your text addon’s row/column.
• Use background-image (with background-size, background-position, and background-repeat) to place the watermark behind the text.

That way the image stays flexible, doesn’t interfere with content flow, and is easier to maintain than negative margins. You can follow these steps:

1. Open the Row/Column/Add-on → assign a custom class, for example: watermark-text.
2. Add this CSS:

.watermark-text {
  position: relative;
  background-image: url('path-to-your-watermark.png'); /* replace with your image URL */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* or cover, depending on style */
}

👉 This will keep your watermark always behind the text, responsive, and clean. But if you really want the watermark as a separate image element, then you can use custom position and CSS position: absolute; z-index; to place it behind. But generally, background is simpler and cleaner.

2. Overlapping rows/columns If you want the left column of Row 1 to overlap Row 2:

• Give that column a custom CSS class.
• Apply something like:

.my-column {
  position: relative;
  margin-bottom: -50px; /* adjust overlap amount */
  z-index: 2;
}

Alternatively, you can use position: absolute; inside a wrapper with position: relative; if you want precise control. Follow this process:

1. Go to Row 1, Left Column → add a custom class, for example: overlap-col.
2. Add this CSS:

.overlap-col {
  position: relative;
  margin-bottom: -50px; /* adjust the number to control overlap depth */
  z-index: 2;
}

If you need stronger control (for example, a big overlap), you can also do:

.overlap-col {
  position: relative;
  top: 30px;  /* pushes it downward over the next row */
  z-index: 2;
}

The key is to use z-index and positioning, rather than forcing layout with margins only. Negative margin works but can get messy, so it’s better to combine it with relative/absolute positioning for stability.

Best regards

this code does not work too :

.overlap-col {
  position: relative;
  margin-bottom: -50px; /* adjust the number to control overlap depth */
  z-index: 2;
}

I get this => https://imgur.com/aScDbJw

Okay, I will try to make the second layout. Do you have any design mockup? How do you want to overlap the row 1 column 1 with row 2 column 1?

prnt.sc/7BjLHNx_oe2Y

regarding your layout here https://prnt.sc/7BjLHNx_oe2Y I need to do this :

• row 1 column 2 overlap row 2 column 1

I have tried this and works :

• https://imgur.com/Mvson02
• https://imgur.com/vaerRWo

Please check the screencast. You can use Custom Position to achieve your layout.

Screencast Link:

files.fm/u/c4cr2xvsty