Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 13, 2024 at 5:57 pm #1466916
    the_digital_manager

    Hi Enfold team, sometimes I’m struggling with the backend editor to achieve something.
    I’m trying to achieve an image with overlapping content field (with white background) which contains a title, text and button. insofar my attemps have been very unsuccesfull. It doesnt seem very complicated to me, so I’m hoping you have a concrete advice on how to achieve this. sometimes this will be in columns, sometimes ‘stand alone’
    desired outcome

    September 14, 2024 at 10:30 am #1466967
    Rikard

    Hey Peter,

    Could you post a link to where we can see the elements in question please?

    Best regards,
    Rikard

    September 14, 2024 at 10:44 am #1466970
    the_digital_manager

    the element in question is made in powerpoint, I have not managed to get even close to this in enfold..
    so i’m looking for an advice on how to get the image overlapping with a white contenf field (with leaving some space on the sided, so it doesnt overlap completely), which contains the elements that you see

    September 16, 2024 at 5:06 am #1467047
    Ismael

    Hi,

    Thank you for the update.

    Add three 1/3 columns in a row. In each column, place an Image element and a Text Block, one below the other. Then, edit each Text Block, navigate to Advanced > Developer Settings, and in the Custom CSS Class field, add the class name av-overlap-text-block. After that, add the following css code to pull the text block upwards and make it overlap the image.

    .av-overlap-text-block {
   margin-top: -100px;
}

    Best regards,
    Ismael

    September 29, 2024 at 4:06 pm #1468059
    the_digital_manager

    Hi Ismael/Rikard, if use this CSS the text dissapears behind the image. how do I fix that?

    also, the original question is a bit more extensive than just adding text in front of an image, i’d like a white content block to overlap an image partly, which contains a titel, text and button.. is that possible to achieve?

    September 30, 2024 at 3:37 am #1468072
    Ismael

    Hi,

    Thank you for the update.

    We’ve modified the css code to apply a white background color to the text block and position it in front of the image. Please try it again.

    .av-overlap-text-block {
   margin-top: -100px;
   z-index: 999;
   position: relative;
   background: white;
   padding: 18px;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.