[Resolved] Make Content Section Clickable

Home Forums Support [Resolved] Make Content Section Clickable

Home Forums Support Make Content Section Clickable

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #364996

    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,

    GeneratePress 1.3.48
    GP Premium 1.4.2
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚


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

    Lead Developer
    Lead Developer

    Awesome, no problem! ๐Ÿ™‚


    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.

    Lead Developer
    Lead Developer

    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,

    Lead Developer
    Lead Developer

    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):

        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;

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.