Your advice - two columns of links

[minyona]

Hey there.

I am designing a homepage for a client and I have two columns of images that will eventually link to the pages they correspond to.

But…

Instead of a bunch of images with text embedded into the images (unreadable by spiders), I’d like to have a solid background with text on top (or maybe a photo in the background, but that’s not important yet).

The thing is, I want those blocks to remain the same size as one another no matter how the screen is sized down.

I know I can accomplish this by turning on marginless columns, but then there won’t be any space between the columns, and I like the space.

How do I accomplish this?

Here’s the homepage so far:

Summary

https://atlanticfence1.wpengine.com/

Thanks in advance!

[minyona]

Oh, and I also want the element to be clickable. Not just the text, but the whole block. And in the builder, adding a column background is easy. but you can’t make the whole column clickable and add interactions like borders that appear on scrollover, right?

[basanta]

Hi there,

Thanks for writing in!

You can use margin less column and padding for the space between the columns.
For the content you can use background in the anchor tag and height, width, padding in percent value so that it will adapt equal size for all sections.
use a custom class name and add css values in your customiser CSS.

Hope this clear to you.

Thanks

[minyona]

Thank you for the help, but I’m not 100% clear…

I understand using padding, but in the builder, the padding adds to the inside of the column. Adding a background image or color still fills the whole space and the columns don’t appear to be separated.

Do I have to add that padding in the CSS? Or can I do it via the builder?

[minyona]

see here: https://cl.ly/1N2q311Y0X1C

[basanta]

Hi There,

I have suggested you to put background to the anchor tag not to the column through a custom css class.

-HTML
<a href="#" class="custom-class-name">Your Text</a>

-CSS
.custom-class-name {
     background: url(image URL);
     -- other attribute like padding, width, height ---
}

Please check the reference HTML and CSS.

Thanks