[Resolved] Make Content Section Clickable

Home Forums Support Make Content Section Clickable

This topic contains 7 replies, has 3 voices, and was last updated by  Tom 3 months, 2 weeks ago.

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

    Nate

    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

    GeneratePress 1.3.48
    GP Premium 1.4.2
    #365022

    Tom 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 🙂

    #365061

    Nate

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

    #365241

    Tom Lead Developer
    #537976

    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

    #538245

    Tom Lead Developer
    #538290

    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

    #539289

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

    <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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.