[Resolved] Make Content Section Clickable

[Delete]

Hey Tom,

I love GeneratePress!

Is it somehow possible to make a content section clickable. Look at https://www.zeromalist.de/ (in construction). I would like the sections with the images in the background be clickable. And when someone hovers over the section that the image gets an other opacity or something like that.

I saw that I can add a custom css to a section. But is it possible with only css to make this section clickable with a hover effect?!

Thank you,
Nate

[Tom]

Usually, you could wrap all of your content in a link element () and set that to display: block so it wraps around all of the content. Then you could use CSS to make it full height/width etc..

However, TinyMCE (the WP editor) strips block link elements. Unfortunately, this means you’d either need to:

a) Disable the visual editor
b) Use javascript to create the hover/link effect

Let me know if you need more info 🙂

[Delete]

I used jQuery for the click on the section and the rest I’ve done with CSS. Thank you!

[Tom]

Awesome, no problem! 🙂

[Annika]

Hi, I want to do the same: Link a whole section to another part of the website.
But unlike Nate, I would love to get more information on how to do so, as my knowledge in this area is quite limited.
Thanks,
Annika

[Tom]

Perhaps this will help?: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

[Annika]

Hi Tom,
as always very fast reply, thanks a lot for the link.
For you as a pro this probably is piece of cake, but I – as a beginner – am struggling a bit.

What I understand is:
Put the link to before the desired div (in my case this that would be the div with the id “generate-section-6”.
Is there a way of doing this in the wordpress frontend, or do i have to go into the source-code, modify it here and upload it again via ftp?

Thanks a heap,
Annika

[Tom]

You could try adding something like this into your section content:

<a href="#YOUR-URL" class="section-link"><!-- link --></a>

Then your jQuery would be something like (adding in the wp_footer hook):

<script>
    jQuery(".generate-sections-container").on( 'click', function() {
        var div_link = $(this).find("a.section-link").attr("href");

        if ( ! div_link ) {
            return false;
        } else {
            window.location = div_link;
        }

        return false;
    });
</script>

Totally untested, but should work in theory. I know some page builders out there have this kind of functionality baked in.

[Author]

Posts