Solved

How do I create this section in Elementor?

  • 10 June 2021
  • 5 replies
  • 36 views

I designed a section in Figma but am having a hard time creating it in elementor. Can anyone tell me how do I go about making this?
 

 

icon

Best answer by Mohammad Abdullah 23 June 2021, 16:14

Hi @Susan Hope. I’m only now seeing all the replies, didn’t get notified for some reason. Thanks to everyone who took the time to answer, but I just played around in Elementor and got it looking exactly as I wanted it to be. I used Icon Lists for the text and negative margins for the yellow box. If the box is appearing behind the image, increase its Z-index until it comes to the front.

That’s all, thank you!

View original

5 replies

Im not at my computer, but I think you’d us two columns. The image is obviously in the right.  In the left Colin, you can use a list (might be called an icon list.  I’d have to look). Below that, you can use a text widget with a yellow background and add a radius to the corners.  To get it to overlap over the image, you can use a negative margin, on the right I’d the text widget.  
 

when I get to my computer, I can confirm. I’m need to this forum, so if you di t hear back, from me, it’s because I can’t find you and I’m responding from my phone.  I’ll try to bookmark this or activate notifications!  

Userlevel 3
Badge

Im not at my computer, but I think you’d us two columns. The image is obviously in the right.  In the left Colin, you can use a list (might be called an icon list.  I’d have to look). Below that, you can use a text widget with a yellow background and add a radius to the corners.  To get it to overlap over the image, you can use a negative margin, on the right I’d the text widget.  
 

when I get to my computer, I can confirm. I’m need to this forum, so if you di t hear back, from me, it’s because I can’t find you and I’m responding from my phone.  I’ll try to bookmark this or activate notifications!  

That should work. The text with a yellow can also be an inner section. Here is an alternative method if you dont want to use negative margins… not exactly the same effect, but perhaps it will be useful: https://www.youtube.com/watch?v=9hKnT_ahRxg&t=0s

Im not at my computer, but I think you’d us two columns. The image is obviously in the right.  In the left Colin, you can use a list (might be called an icon list.  I’d have to look). Below that, you can use a text widget with a yellow background and add a radius to the corners.  To get it to overlap over the image, you can use a negative margin, on the right I’d the text widget.  
 

when I get to my computer, I can confirm. I’m need to this forum, so if you di t hear back, from me, it’s because I can’t find you and I’m responding from my phone.  I’ll try to bookmark this or activate notifications!  

That should work. The text with a yellow can also be an inner section. Here is an alternative method if you dont want to use negative margins… not exactly the same effect, but perhaps it will be useful: https://www.youtube.com/watch?v=9hKnT_ahRxg&t=0s

Yeah, I think inner sections would be better.  However, Ooooh Boi is a) a great plugin.  You’re right, it might do something similar. B.) I think it’s free!  Lol

 

 

Userlevel 5
Badge +3

Hello @Mohammad Abdullah did you find your answer here? If so, please consider clicking “ Best answer” to help out others. If you found a solution somewhere else, please share it here so we can mark your answer as the best one, thanks!

Hi @Susan Hope. I’m only now seeing all the replies, didn’t get notified for some reason. Thanks to everyone who took the time to answer, but I just played around in Elementor and got it looking exactly as I wanted it to be. I used Icon Lists for the text and negative margins for the yellow box. If the box is appearing behind the image, increase its Z-index until it comes to the front.

That’s all, thank you!

Reply