Our zen themes support the WordPress out-of-the-box blocks and include theme built-in Gutenberg blocks. In this article, we will look at the Text Over Image block.
The next step is to open for edit or create a new page or block with the WordPress editor.
First you’ll need the link of your image in the Image Library.
You can add in the Page some image block and with right click select “Edit as HTML” code to take the URL of the inserted image. After that Remove that block. (or if you have already added images in your Library, you can go to Media Library and see the Image URL you choose for you Text Over Image Block.
Here is HTML code you will need to customize for the new block:
<div style="display: grid;">
<div style="margin: auto; padding-left: 40px; ">
<div style="font-size: 40px; transform: translateY(170px); position: relative; z-index: 1; background: #8fd457; opacity: 0.8;" class="tish-animation-block-wrapper" data-animationtype="zoomIn" class="wp-block-tishonator-animation-block"><div class="tish-animation-block">
<span style="color:#fff;" class="has-inline-color"><strong>Animation Text</strong></span>
</div></div>
<div style="position:relative; z-index: 0; transform: translateY(-40px); transform: translateX(-40px);
opacity: 0.7;" class="tish-animation-block-wrapper" data-animationtype="zoomIn" class="wp-block-tishonator-animation-block"><div class="tish-animation-block"><img class="wp-image-3035" style="width: 600px;" src="https://zentemplates.com/themepreview/zenmacramepro/wp-content/uploads/sites/14/2013/06/zen-templates-product-image-01.jpg" alt="zen templates"></div></div>
</div>
</div>
Add from the + icon one new Custom HTML block. Insert the code above, replacing the image link with yours (the purple text).
You can customize and change the color background behind the text (the red bolded text). Replace with your own preferred style.
Then update to publish and see the result.
Hope this is helpful.