I’m making a site for a friend, who provided me with PNGs with CTAs directly hard-written on them.
I would like to be able to fix real buttons above, above the “drawn buttons”, and that these do not move whatever the position of the screen. (Only on desktop, I would do otherwise on mobile)
Hi @Felixcitation, thanks for your post and for the good question.
Quick question, is your main goal to make the CTA buttons in the image clickable, like an image map link, or is there a specific reason you want to try to overlay button elements on top of the static image versus creating an clickable region of the image?
My goal is to make the 3 different buttons clickable, and that they each point to a specific link. Honestly, I have no preference on how to achieve this. Do you have a recommendation for me?
I do have a suggestion on how to make those three cta areas with the button clickable, it is just a suggestion, there may be other ways that like better.
First, I would give the Parent Div block a position relative:
Next give the image a position relative and a z-index of 1:
Create a Div called Link Block Wrapper and give it a position Absolute, with a full cover and a z-index of 5:
Create a Div block under Link Block Wrapper called Link Blocks and give it a position relative and width and height set to 100%:
Next add 3 link blocks to the Link Blocks div with a class name of Link block:
On the Link Block class, give width and height set to 50% and position absolute:
On each Link Block, you will add a combo class to each Link Block like:
etc…
Each link block will have a unique combo class as shown:
For each link block with the combo class set, you will set different positions and potentially different heights for each link block as follows:
Link Block 1:
Link Block 2:
Link Block 3:
After those structure, style changes have been made, you can select each link block and set the link settings each link block that corresponds to the CTA button in the image, which should be under each link block.
As an example, I added a little green hover color just to show what the click region looks like for each link, when someone clicks on the invisible link block, the link for that button in the image will be activated.
Here is what it looks like from Desktop to Mobile:
Here is where you can set the link for each link block: