Remove the link from Divi Projects modules

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

This tweak will make the Fullwidth Portfolio images unclickable for both the carousel and the grid layouts. I’ll show you how to achieve this using just CSS and also how to do it by overwriting the module.

Method One – CSS

You can actually do this pretty easily using the :after pseudo class. We’re basically creating a ‘fake’ container that fills the same space as that of the image. Then we use z-index stacking and give it a higher priority than the link tag, basically stacking it on top of the image and link, making it unclickable. And finally we give the title an even higher z-index priority so that it sits on top of our new container.

I have also receive a lot of requests to only apply this to certain images within the grid. You can achieve this by adding a child selector to the .et_pb_portfolio class. The example below would do the exact same thing as above, but only affect every other image starting with the second image.

There are lots of ways to manipulate the child selector so it meets your needs. Here is a really good guide to help you configure it. But what if you want to add unclickable projects and not have to worry about the order in which you add them? What if you could just add a custom field to each project that you wanted unclickable. Here’s how you do it.

Method Two – PHP

This isn’t going to be easy if you’re not familiar with PHP, but definitely doable. In a previous tweak, I showed you how to change the Divi Page Builder modules in a child theme. I would highly recommend you read that first and come back to this post. The rest of this tweak will assume you have done so.

Now that you know how to change the module, we just need to customize it and add a class to each project that we want to remove the link to. Then we will add CSS similar to above and then add the custom field to those projects. To add our special class, copy and paste the following into your child functions.php file:

All we did is add a class to the projects that have the custom field ‘nonclickable’ set to true. Save and exit the functions.php file.

Add the following CSS:

Here we just adjusted the original CSS to only apply to the .nonclickable class we added in the function.php file.

The last step is to go into every project you want to make unclickable, go down to the Custom Fields section, add a new custom field and name it nonclickable and give it the value true. Save the project and you should now see you can no longer click on that project from within the Fullwidth Portfolio module.

    28 Comments

  1. Perfect! Exactly what I was trying to do! Thank you!

    Ferg

    April 27, 2015

    • Good deal Ferg! Glad it worked for you

      Brad (admin)

      April 28, 2015

  2. Hi,
    Thanks for the tip I think it will be useful for one of my next project using Divi !

    Currently, I’m trying to achieve something close, maybe you can help me.
    I love the look of the fullwidth portfolio (grid), and I would like to have my gallery displayed like it.
    So I uploaded all my photos and make one new project for each one of it. The only thing I need is that the porfolio + button would open the featured image in a lightbox, and not in a new page with all the project.

    Do you think it’s possible ?

    The page is here : http://www.melges24european2016.com/gallery/

    Best,

    Bastien

    Bastien

    May 28, 2015

    • I have had similar requests Bastien. I currently have a plugin that lets you use the project module layout with posts and gives you the option to open the image in a lightbox. http://www.diviplugins.com/plugins/portfolio-layout-posts/ . I’ll see if I can add “open gallery” as an option.

      Brad (admin)

      September 21, 2015

  3. Hi Brad,

    Thank you for this awesome tweak! Do you have a hint on how to achieve the same since Divi 2.7? Elegant Themes have completely recoded the modules from scratch, and the remove_shortcode/add_shortcode trick doesn’t work anymore. I’ve initially used your code to add another image element to the portfolio module in divi 2.6:


    if ( '' !== $thumb ) : ?>
    <a href="">
    <img class="snb-cl-logooverlay" src="" />


    retrieves the url from a Custom Field, which works perfectly. Any advice on how to reproduce this in Divi 2.7 would be very much appreciated.

    Best,

    Will

    Will

    August 6, 2015

    • Hi Will. I definitely need to update my tutorial for that process. I know the modules have moved to /includes/builder/main-modules.php. For now you could find the code in that file and change it. I’ll do my best to update the tutorial as soon as I can.

      Brad (admin)

      September 21, 2015

  4. Hi Brad, I was happy to find this tweak. However, it doesn’t do anything on my site. To apply METHOD ONE – CSS, do I paste the CSS snippet into the Custom CSS / After: section of the portfolio?

    Thanks.

    Dieter Reuther

    September 3, 2015

    • The CSS would go in the Custom CSS at the bottom of the ePanel. Dashboard->Theme Options->Custom CSS

      Brad (admin)

      September 21, 2015

  5. Hello, I tried adding the code above but it didn’t work for you.

    I would like to make the portfolio unclickable.

    I don’t want them to goto there respective project pages.

    Brenda

    January 1, 2016

  6. Does not work with Divi 2.5+

    Does anyone have any idea how to make this work with the newer versions of Divi?

    Matt

    March 13, 2016

    • Same problem. Please help!

      Fracisco

      March 14, 2016

  7. Can’t get this to work with Divi 2.6.

    I would be willing to pay for a plugin that does this!

    Alan

    March 21, 2016

    • My mistake, this tweak *does* work if you paste it at the end of the DIVI style sheet at Appearance -> Editor.

      I was previously pasting it into the “After” pseudo-tag box in the settings for the Portfolio module itself.

      Thank you for the tweak!

      Alan

      March 21, 2016

  8. Works great! Only thing is that the icon is still visible. It doesn’t go anywhere, but it is quite distracting. Is there a way to hide that via css as well?

    Jackie

    March 24, 2016

    • To hide the icons try this:

      .et_pb_fullwidth_portfolio .et_pb_portfolio_image .et_overlay:before { display: none !important;}

      Brad (admin)

      May 19, 2016

  9. The CSS solution still works in Divi 2.7.5!!! Place the CSS in your child theme’s style.css or in Divi -> Theme Options -> General tab and at the bottom in the Custom CSS box. The solution is for the fullwidth carousel but you can change the class names to match for any of the modules.

    Or you could download my plugin and open the images in a lightbox:
    http://www.diviplugins.com/plugins/portfolio-posts-pro/

    Brad (admin)

    May 19, 2016

  10. missing semicolon on display:inline-block

    Quentin

    June 8, 2016

    • Thanks Quentin. I updated it recently and must have left it out.

      Brad (admin)

      June 15, 2016

      • Always the best content from these proiogdius writers.

        Cathleen

        April 5, 2017

  11. Ummmmm…… This was the easiest CSS Trick that I found:

    .et_pb_fullwidth_portfolio.et_pb_bg_layout_dark .et_pb_portfolio_image .et_overlay { display: none; }
    .et_overlay:before { display: none; }

    Katie

    June 14, 2016

    • Thanks Katie. For me this does nothing but hide the overlay. I am still able to click the post.

      Brad (admin)

      June 15, 2016

      • same here…any help would be appreciated

        Lesley

        September 27, 2016

  12. Thank you for your help which is definitely needed. I tried to put the CSS code at the bottom of the Divi Style sheet as well as on the bottom of the ePanel and as well in the modules CSS section itself.
    But unfortunately it does not work at all.

    Can you please tell me what I’m doing wrong?

    Elisabeth

    November 18, 2016

    • Hi Elisabeth. I just tried this on the latest version of Divi and the CSS solution still works. I placed it in the ePanel and I was no longer able to click on the carousel/grid images in layouts created using the Fullwidth Portfolio module. If you’re trying to use a different module, you’ll have to modify the CSS selectors accordingly. Let me know if you’re still having issues. Thanks!

      Brad (admin)

      November 19, 2016

  13. I really like the idea of overwriting the shortcode – seems to be the easyiest way to change the functionality of the portfolio.

    Alexander Herzog

    January 20, 2017

  14. Does anyone have any advice for using this solution in the filterable portfolio module? The CSS above doesn’t appear to work there.

    Thanks!

    Amelia

    February 28, 2017

  15. Can apply this method to alternates blog elements?

    Thanks

    riccardo

    April 4, 2017

  16. Hi,

    Thanks for the code, it works well. I was hoping to modify this tweak to connect each picture in a full width carousel to a unique anchor on another page within my website. I am guessing it would be possible to create a custom field to project the anchor data, but I am less sure how to get the links to work with the pictures.

    Thanks in advance

    Eric Safai

    April 26, 2017

Post a Reply

Your email address will not be published. Required fields are marked *