how to create overlapping columns

Hey Madison,

Thank you for the inquiry.

Using the Advanced Layout Builder (ALB), try inserting a 4/5 and 1/5 column element. Place an Image element inside the 4/5 column and the text in the 1/5 column. Edit the smaller 1/5 column, go to the Advanced > Developer Settings panel, and in the Custom CSS Class field, enter the name av-overlap-right-text. Then add the following code in the Quick CSS field:

#top .av-overlap-right-text {
    width: 50%;
    position: absolute;
    right: 0;
    top: 30%;
    background: white;
    padding: 20px 40px;
}

The css code should adjust the width of the 1/5 column and its position so that it overlaps with the 4/5 column. To position the overlapping column on the left, reverse the order of the columns, replace the class name with av-overlap-left-text, and then add the following css code:

#top .av-overlap-left-text {
    width: 50%;
    position: absolute;
    left: 0;
    top: 30%;
    background: white;
    padding: 20px 40px;
    z-index: 2;
}

#top .av-overlap-left-text + .flex_column {
    margin-left: 20%;
}

Best regards,
Ismael