For numerous WordPress enthusiasts, the ability to add a button over an image is essential to make content more interactive and attractive. Their motivations may stem from the desire to enrich user interactions, leverage WordPress’s capabilities, or address constraints in themes or plugins. Whether it’s to improve user navigation, overcome layout challenges, or simply to embrace modern web design trends, this feature might help users tackle layout challenges or adopt modern design trends without requiring advanced skills.
Fortunately, WordPress’s built-in Cover block makes the process simple and accessible. In this guide, we’ll show you how to achieve this step by step.
Step 1: Add a Cover Block
To get started, open the page or post where you want to place your preferred image with button. In the WordPress editor, click the “+” button to add a block and search for “Cover.” Once you find it, select the Cover block.
Step 2: Insert an Image
Once you’ve added the block, you need to upload your chosen image or pick one from the Media Library. This image will now serve as the background for your design.
Step 3: Add a Title on the Image (Optional)
Once your Cover block is in place, you’ll notice a placeholder text that says “Write title…” within the image. Click on this text and type the title or heading you want to display over the image.
Step 4: Add a Button Over the Image
Once the Cover block is ready, click the image, and the block inserter will appear. Now click the ‘+’ sign, search for “Buttons” and add the block.
Step 5: Customize the Design
In order to fine-tune every detail, we’ve separated this section into 3 parts. We’ll start with the title, then the buttons, and end with the overall cover block to obtain a professional look.
5.1 Customize the Title Text
Click on the text you put as the Title within the Cover block to select it. Use the block toolbar to adjust the text style—bold, italic, or alignment. If you want additional customization, head to the block settings in the right-hand sidebar to change the font size, color, and typography.
5.2 Customize the Button
Select the button block, type the text you want to display, and link it to the relevant page or URL by clicking the chain icon (1) in the toolbar. Use the block toolbar to align the button and adjust its style.
Now, navigate to the block settings panel on the right side. The General tab (1) allows you to adjust the button’s width relative to its container, and the Styles tab (3) lets you customize the button’s styles, colors, typography, dimensions, and border.
5.3 Customize the Overall Cover Block
Click on the Cover block to access its settings in the General tab. From there, adjust the Layout settings to constrain nested blocks, enable the Fixed Background to keep the background stationary as you scroll or the Repeated Background if your image is smaller than the block and needs to be tiled to fill the space, and set the Focal Point to keep important areas of the image visible.
Next, switch to the Styles tab. From there, you can adjust the overall color, opacity, typography, dimension, aspect ratio, border, and more.
Step 6: Preview and Publish
Go through the whole page again to ensure both the button and the image appears as intended. When everything looks alright, publish or update your content to make it live.
Conclusion
The ability to add a button on an image in WordPress opens up creative possibilities for making your content more interactive and visually compelling. The Cover block in WordPress allows you to overlay buttons on images and create interactive, visually appealing designs without the need for extra tools or coding. It offers complete flexibility for customizing titles, buttons, and layout details to make it easy to align your content with modern design trends. By following this guide, you can achieve a professional result that enhances both the design and functionality of your website. By following this guide, your site’s design can stand out with better navigation and a refined finish.
