Opacity rate of 30 to 60% is a proper value. Besides, I can also change the opacity (the transparency level) of the overlay: I just picked a sweet pink color for my overlay. You can pick a color in the palette or insert a color code. Choose a color from the suggested menu.First, let’s try the Solid color overlay. It gives you two color options that are Solid and Gradient to overlay your cover image: The block settings menu now should be ready on the right of your screen. Next, you will proceed with the block settings to make an overlay.Ĭlick on the block > click the Options button (display as a three-dotted button) > choose Show more settings. Step 2: Customize the cover block overlay In default, the Cover block already has an overlay of black color, so we will see how we can edit it in the next part: Now my cover block is ready with a background picture and text. In my case, I will choose this beanie as the background and write some random text on it as well.Īlso, I can set the width of my image in the settings below. Click the image, choose Change block style or type, and choose Cover: You can also change an image you added previously into a cover image if needed. You can upload an image or choose an image from your library. Next, choose a background picture to display on that cover block. Step 1: Insert an Image Using Cover Block.Ĭlick Add block and choose the block type as Cover. While using Gutenberg helps you to build a post/page that includes an image with overlay even from an empty sheet, using CSS will help you to quickly customize images on a pre-built post/page.īoth these two methods are easy to use in some ways, and we will show you how to use them one by one. There are two methods you can try to overlay an image over in WordPress: using Gutenberg’s cover block and using CSS. Got excited yet? Let’s get started! How to Overlay an Image in WordPress In this post, we will show you how to do it within simple steps. You can add an image with text and overlay on posts/pages like that with ease and use it for different purposes. More importantly, the overlay on the image helps to highlight the text while keeping the background picture visible. It looks much more stylish and attractive compared to the normal, right? Still wondering what it is? Just take it slow, and let us take you out!Īs you can see, I used an image with text and overlay as the heading that made a big difference from writing a simple text heading.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |