[Resolved] Easiest way to insert ‘image navigation’ in blocks?

[Tom]

Hi there,

I want to insert multiple blocks (or even beter: an additional menu) with a background image and a navigation text to guide my visitors with images in the page content.

you can see my try on https://www.dweildag.nl

[Ying]

Hi Tom,

You can use a Grid block, and set a background image for each container block of the Grid.

[Tom]

That works! Any ideas how to get the whole ‘grid block’ clickable? (And not only the inserted text)

[David]

Hi there,

are you using GenerateBlocks Pro ? or just the free version ?

[Tom]

There is no “pro” in the plugin name, so I assume it’s the free version.

[David]

Ok, so looking at that page you have Cover Block to display the image and the link. So:

1. Add this CSS to your site:

.has-link {
    position: relative;
}
.has-link a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

2. Select a Cover Block and in Advanced > Additional CSS Class(es) add: has-link
3. Repeat #2 for each cover block.

[Tom]

Very cool! Thanks!

[David]

You’re welcome

[Tom]

One more thing… It totally screws up on ‘mobile’ because wordpress wants to show 3x 33% blocks in a row. When the screen size is smaller, there should be one in a row…

Maybe the pro version???

[Leo]

Are you referring to the Grid and Container blocks?

If so you can customize the width on responsive view:
https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item
https://docs.generateblocks.com/article/responsive-controls/

[Author]

Posts