Make Entire Column With Image And Text Clickable

Beaver Builder
1

I have a 4 column row. Each column needs to have a background image with text that is centered vertically and horizontally. I then want to have the entire column be clickable.

Here’s a screenshot showing a 2-column version: http://screencast.com/t/ckoW29JtGa

How can I accomplish this in Beaver Builder?

I know how I can add a column image and add clickable text but I don’t see an easy way of making the entire column clickable. This is obviously important from a usability perspective as people expect to be able to click on an image in this situation.

Thanks

1 Like
2

Hi Lloyd,

This isn’t possible out-the-box. However, if you see this topic it has instructions on how you can achieve this with jQuery.

Thanks,
Danny

1 Like
3

Ok so I see how to make the column clickable when a Callout is used.

For my purpose, I need to have an image (likely as the background for the column) and then I need to have text that is centered both horizontally and vertically.

I don’t think the Callout module can do that. I’m thinking I just need to add an image as the background and then use an HTML module or text module.

Thoughts?

4

Hi Lloyd,

You can do this with with the Callout Module. However, it would require custom CSS to position the text and header on top of the image.

Alternatively, you could set the image option in the Callout module to none and set a background to the column instead or do what you suggested above.

I would have a play with your suggestion and the Callout module with no image and see what works best for you.

Let us know how you get on.

Thanks,
Danny

5

Solution is to use callout module with no image. Set image as the column background. Adjust the padding on the callout to make the picture larger and center the image. Finally add the jquery from the post you referenced.

Thanks

6

No problem, Lloyd. Happy to hear your issue has been resolved and thank you for informing us and sharing your solution.

Thanks,
Danny