-
AuthorPosts
-
September 13, 2024 at 5:57 pm #1466916
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’
- This topic was modified 3 weeks, 2 days ago by the_digital_manager.
September 14, 2024 at 10:30 am #1466967Hey Peter,
Could you post a link to where we can see the elements in question please?
Best regards,
RikardSeptember 14, 2024 at 10:44 am #1466970the 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- This reply was modified 3 weeks, 1 day ago by the_digital_manager.
September 16, 2024 at 5:06 am #1467047Hi,
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,
IsmaelSeptember 29, 2024 at 4:06 pm #1468059Hi 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 #1468072Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.