How To Place A Button And/Or Text Over An Image In Divi
Вставка
- Опубліковано 7 вер 2024
- In this tutorial I will show you how to add a button module or text module positioned centered over an image module in Divi.
www.peeayecrea...
Add Modules Over The Image Module
When you first think of adding text or a button over an image, you may think this would be easy - just use the Call-To-Action module, right? Wrong! There are at least two problems with that method. One, the image would need to be a background image, which means it will get cropped. Secondly, background images are decorative and do not contribute to SEO. So unfortunately that option is out.
Our Past Okay Solution
If you are a long time follower or good Googler you may recall I created a tutorial in the past about this same topic. However, in that tutorial the approach was okay but not great. We used a pseudo class to add text over the image and then style it to look like a button. It worked, but had problems any time the text got too long and it was just an awkward way to do it.
A Great New Solution
So here we are again and this time we will deliver the best solution possible using actual Divi Button modules that you can style in the builder and actual Text modules and even get this - the Call-To-Action module (for text AND a button). So let's get started with this tutorial and show you how to add text or a button or both centered over a Divi Image module!
Become a member of our Divi Adventure Club!
www.peeayecrea...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecrea...
Thanks for watching!
Thank you, every video on this channel is a golden coin. 😊👍🔝
You're welcome, it's my pleasure! 🙂
Just thank you a lot. This was a perfect solution to something I was trying to do. Really appreciated.
That's great to hear, you're welcome!
Thanks for your helpful videos! Please keep up the good work!🔥
You're welcome! I will keep it up 😊
Great tutorial, I agree it’ll be most popular one👍🏽 Thanks
Yes my previous one was very popular about this topic and this one is better.
Thanks! Really appreciate the effort. Made the changes to a couple of images on my new site and it works and looks great.
Great to hear!
Brilliant and efficient! Nicely done. Love the video! Thanks for sharing these nuggets of wisdom.
Glad you like it, I really enjoy sharing each week!
you are a God-sent again!!!! Thank you so much! you are helping me so much!
I'm so glad to hear that!
Excellent. You always deliver amazing content.
I'm so glad you like it!
Thanks again for a great video totally agree with Mr. Mirko Mancini is a golden coin.
You're welcome! So happy you like them!
Super helpful! Thank you so much
You're welcome, so glad it was helpful!
super - thanks very much - love your style
That's great, I'm glad 😊
Hi- thank you for this. I am struggling to get it corret - when you put the custom CSS in, the button didnt move. You then said you will show us another way with your user-friendly css - which then worked. How do you get that extra side tab CSS ? otherwise how do you make it work just the usual custom css way?
I will add some media-queries so the hover will be only on desktop and not on mobil or tablet.
Very good point there!
I need to do the same thing, how did you do it?
This is great, thank you!
You're very welcome!
Thanks for the great tutorial!
We just have one question, would this work if you have multiple images in a column, with multiple buttons?
Cool 🎉
😊
the code for "Add The CSS Snippet To Your Website" does not work, the first two yes
can I do this on the product in the shop page? and please if I could how can I do it I wanna add the add-to card on the product image to show on hover
Everything looks great on PC and I adjusted my relative position to be in the bottom left of the image. This is exactly what I wanted. However, the issue I am having is if I scale the window down the button does not keep its relative position and does not scale down, rather, it stays the same size and pushes off to the left of the image. Any suggestions as I try to make this work for mobile and tablet or smaller chrome windows?
Why is so complicated to have a simple button over an image like all sites? Thought Divi was an advanced theme when I bought it.
I made the image as background and added the button over it and used position to change its position to the middle of the image with the Vertical positioning. When I did that it became a layer behind the image and not clickable! Any simple solution?
I'm not sure, if something isn't working with the tutorial please leave a comment on the post.
Wow! Awesome! 👍
😅 another question how can I show the code tap that you're using it's nicer than "inspect"
Thanks - so useful
Great👍👌
Glad you like it!
I have tried this and the button does not move - just like it didn't move on the video before you used the Chrome code extension. Please help. Thank you.
I'm not sure what you mean.
Hmm this didn't work for me. The text height moved up one line but didn't go anywhere near centre of the image.
Not sure why, keep adjusting?
@@PeeAyeCreative this happened for me also, the top percentage adjustment doesn't work for me, but the left one does. any ideas? cheers
Same here
Whilst this works yes. It messes up the rest of my entire homepage :( I have tried to put the CSS everywhere to just the column to just the image it self but it doesn't work. The only way it works is by adding it to the page CSS and that roots all other aspects of what I have on my home page but the image with button on them looks fine. Also altering the spacing within the CSS moves it where I want in a preview however once saved it goes to the center. Again that's not as important as this screwing up the entire rest of the page, but do you have any tips or suggestions how to apply this method to just the bloody image column I want? Cause this is exactly wat I'm looking for but it doesn't work with the rest of my site. Thanks.
It's not clear to me what issue you are facing, as the tutorial does not cause any issues. You can try leaving your comment on the blog post.
Hi, I tried this tutorial it worked great for what I need but I've noticed that its not responsive on tablet size - specifically iPad mini. Is there any code for this? thanks!
Responsiveness is not relevant to this code, as far as I know. But you can certainly adjust what it is within the modules.
what is the extension's name to do the css on googgle chrome ?
User CSS
Does it work if the layout is 2 columns?The text on the left but the big image on the right that goes far under the left column
I'm not sure what you mean. Should work fine with any number of columns.
thanks help
You are most welcome
can I do this with a full length image?
I'm not sure what a full length image is, but why not?
It's realy work when I use that extension but not work when I apply it to my wordpress child
I don't know what you mean.
what is the css writer chrome extension name ??
User CSS
Is there a reason not to use Negative margin to place the button on the image in the column above it ?
It would work, but it would always be wrong depending on screen size/aspect ratio.
does everything involve CSS?
I'm not sure what you mean, but if you are asking about my tutorials specifically then yes typically my customizations are intermediate.
Hello ! Thank you very much ! I would to know you test the code to web developper in front.
I am using a Chrome extension called User CSS
@@PeeAyeCreative tks
What is the name of the chrome extension.thanks🙏
User CSS
Tried. Does not work. SAd.
It does work, so try again or share more details in the blog post.