Adding " Call to Action" button on top of an image


#1

Hello. I have some images on my homepage where I would like to add a customizable Call to Action button, but Elementor does not seem allow for that to happen as it adds the button underneath the image and I cannot move it around. I would like to add a button in the open space on each image, i.e. on the “Do You DIY” image it will be underneath the tagline “Be. Prepared. Always.”

Here is the homepage: https://jupiterx.socketroll.com/

Please advise.


#2

Well, this is against the HTML because image tag itself takes up the block space and you cannot place anything over it normally.

Though there are workarounds like absolute positioning the CTA on the image but that requires custom CSS.

How this actually happens is using the background image option. You will have to add a background image to the column or the section/row and then you can easily add the CTA which will look like positioned on the image.


#3

Would you have any code for this?


#4

Hello??? Can anyone answer this? Please help. Thanks.


#5

Hi Chris, you won’t need any code for this. Just use a column with a background image and add your button into that column. You can also use minus margin values to overlap the button on the image if you don’t want to use a background image.

Regards


#6

Perfect. Thank you for clarifying.


#7

Hi, so now the CTA button doesn’t adjust with different screen sizes. Can you please take a look and advise.

jupiterx.socketroll.com

Thanks.


#8

I recommend you to use the Raven button instead because this way you can adjust the size of the button in different screen sizes.


#9

It’s not so much the size of the button, which is still an issue, as much as it goes all over the place when the screen size changes. I’ll look into it though and make some further adjustments. Thanks.


#10

So, I switched the buttons to the RAVEN style and set them where they were supposed to be in the Desktop Version, THEN I spent an HOUR arranging everything in the Mobile version to find out that the desktop version changed along with it and on top of that some of my images got trimmed when I went to place the button in the mobile version.

Can someone please help me with this? The pitch on your video to buy this product totes how easy this all is, but honestly it is more of a pain in the ass than anything else. If your product is NOT REALLY, FULLY responsive, please don’t say it is.

Can someone please help so I can move on to the next thing. Thank you.