How to Add an Image with Text Overlay to Your Posts Using the Cover Block
It's time for your daily dose of Wordpress Wisdom! In today's quick tutorial I'll show you how to add an image with a text or color overlay using a handy block called the Cover block. This would be great if you wanted to have a full width header image at the top of your post with a text overlay acting as a title. I'll show you how to use this and some of your customization options as well.
As always, feel free to share this video with anyone needing help with this. If you have any Wordpress related questions that you'd like to see me create a tutorial around feel free to send me a private message or leave me a message on my profile.
If you want to check out all my Wordpress Wisdom tutorials you can go to the WA smart search up top or just head over to my blog.
Be productive!
Get to work!
I'll see you next time!
Recent Comments
27
I like i get this link from help centre what also i want if can send me a training video how to apply my pictures multiple times and anywhere a need any the where a would like to see them.
Regards
jose
To add your images just choose an image block and then pick from any you have saved to your media library 👍🏼💯
Hello Eric, thanks for the tutorial. I have been trying to set the image full width but that option doesn´t appear to me on the editor, do you have any idea why? Thank you
I’m sure you’ll find it. Sometimes it just takes a couple times watching the video and then you realize where you overlooked it 😎👍🏼
Wow!! What a fantastic block that is Eric!
I will have fun playing around with this one over the weekend!
Much appreciated as always buddy and enjoy a wonderful weekend yourself!!
👍🍻
See more comments
Hi Eric,
Wordpress is killing me very slowly but surely. I cannot for the life of me get the heading overlay on the cover image to be responsive for mobile. I'm sure there's a quick and simple way to do it but I just cannot get it. Any ideas? If it helps, I'm using Generate Press (free version).
Thanks
Melissa
I've got a work around for this now. But how do you add margins or padding? I haven't used Wordpress in ages and forgot how much I dislike it!! Things that should be straight forward like spacing just aren't (at least they aren't to me). Say for example I have a paragraph and I want some padding underneath - I can't see how I achieve that?
You can tweak with margins and padding if you like or just use the spacer block if you want to add space under a paragraph
👍🏼.
It’s all easier and easier the more you work with it. For mobile responsiveness in the past when a title or heading was doesn’t look right on mobile I’ve just asked GPT for the CSS code to make it responsive.
GPT has helped me a million times with answers to design issues.
Thanks Eric. I'll give the spacer a try. For margins and padding generally, do you have to ask for the CSS code? Because I'm just not seeing it in the editor? Or is there a spot that I'm not looking in correctly?
Hi Melissa, do you still have trouble finding the spacing setting for block editor? Here's a screenshot of what it looks like.
I don’t have trouble anymore. Thanks for your response though, I appreciate it.