[mizzou1530Participant]

I am wanting to create block grids with background images. Then I plan to place text over the image and the whole thing should click through to a new url. Is this something I can do with cornerstone? prologuecycling.com

[John EzraMember]

Hi there,

Thanks for writing in! It’s not as straight-forward as a drag and drop, but it is possible. You may need to code some parts using a text element. Would you mind telling us what you want to achieve exactly so we can tailor our response? How many items? How will the grid look like? etc. Thanks!

[mizzou1530Participant]

Basically I am going to end up with a page full of box elements, probably 3-4 wide. Each will basically just be a link to another page with information about a specific category (trails, shops, etc.). So each box would have a different picture representing that subject and text over the top with the category. So each box just needs an image that fills the box and links to the subject page. It will basically look like this but with a text element over the image and each box/picture/text will be a clickable link. http://theme.co/x/demo/renew/1/shortcodes/block-grid/

[ZeshanMember]

Hi there,

Regretfully this isn’t possible to add text over an clickable image. It could be possible to achieve with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[mizzou1530Participant]

But I assume the text could be clickable, I just can’t get the background image into the block. That is mainly what I need assistance with. Worse case scenerio I can create an image with the text on the image itself and just make the block clickable?

[ZeshanMember]

Hi there,

You could use inline CSS to add background image to your block grid item in this case. For example, add a class of bg-image to each of your targeted block grid item under Class field of its settings (see: http://prntscr.com/7qeolc) and then add following inline CSS under Style field (see: http://prntscr.com/7qeof1):

background-image: url(REPLACE_THIS_WITH_YOUR_IMAGE_URL);

Replace REPLACE_THIS_WITH_YOUR_IMAGE_URL with your image URL.

Then for global styling for block grid background image, add following CSS code under Custom > CSS in the Customizer:

.x-block-grid-item.bg-image {
   background: transparent no-repeat center center;
   -webkit-background-size: cover;
   background-size: cover;
}

If this doesn’t work well for you, then you could use the image with the text inside.

Thanks!

[Author]

Posts