Multiple Layers in Block
Permalink
Hi
I have a layout design where individual pages need to have a specific image for that page and the page title (h2 element) to be placed on top of the image.
I cannot seem to be able to add these two elements with correct layer order in one block when editing.
I would greatly appreciate any input on this matter.
V.
I have a layout design where individual pages need to have a specific image for that page and the page title (h2 element) to be placed on top of the image.
I cannot seem to be able to add these two elements with correct layer order in one block when editing.
I would greatly appreciate any input on this matter.
V.
To have text overlay on an image, in my example a banner image with the <h2> element over it I added two blocks. The first is the image container, the second is a simple content block where the <h2> text is set to a custom style (which will be available from the styles drop-down list in the editor after you created a custom class in the typography.css (which comes with default themes).
This class will need to use absolute positioning, top/right/bottom/left attributes for precise placement and a z-index to put it above the image block.
Of course in the editing mode you will see the two block separately but once you publish changes the text overlay should find itself on top of the image based on the class attributes.
Hope this can be useful to others.
V.