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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.et_pb_portfolio_item .et_overlay { z-index: 6; } .et_pb_fullwidth_portfolio .et_pb_portfolio_image h3 { display: inline-block; position: relative; z-index: 6; } .et_pb_portfolio_item .et_pb_portfolio_image:hover:after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; display: block; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.et_pb_portfolio_item:nth-child(even) .et_overlay { z-index: 6; } .et_pb_portfolio_item:nth-child(even) .et_pb_portfolio_image h3 { display: inline-block; position: relative; z-index: 6; } .et_pb_portfolio_item:nth-child(even) .et_pb_portfolio_image:hover:after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; display: block; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<?php function override_parent() { remove_shortcode( 'et_pb_fullwidth_portfolio', 'et_pb_fullwidth_portfolio' ); add_shortcode( 'et_pb_fullwidth_portfolio', 'et_pb_fullwidth_portfolio_custom' ); } add_action('after_setup_theme','override_parent'); function et_pb_fullwidth_portfolio_custom( $atts ) { extract( shortcode_atts( array( 'title' => '', 'module_id' => '', 'module_class' => '', 'fullwidth' => 'on', 'include_categories' => '', 'posts_number' => '', 'show_title' => 'on', 'show_date' => 'on', 'background_layout' => 'light', 'auto' => 'off', 'auto_speed' => 7000, ), $atts ) ); $args = array(); if ( is_numeric( $posts_number ) && $posts_number > 0 ) { $args['posts_per_page'] = $posts_number; } else { $args['nopaging'] = true; } if ( '' !== $include_categories ) { $args['tax_query'] = array( array( 'taxonomy' => 'project_category', 'field' => 'id', 'terms' => explode( ',', $include_categories ), 'operator' => 'IN' ) ); } $projects = et_divi_get_projects( $args ); ob_start(); if( $projects->post_count > 0 ) { while ( $projects->have_posts() ) { $projects->the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_portfolio_item ' ); ?>> <?php $thumb = ''; $width = 320; $width = (int) apply_filters( 'et_pb_portfolio_image_width', $width ); $height = 241; $height = (int) apply_filters( 'et_pb_portfolio_image_height', $height ); list($thumb_src, $thumb_width, $thumb_height) = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), array( $width, $height ) ); $orientation = ( $thumb_height > $thumb_width ) ? 'portrait' : 'landscape'; $clickable = get_post_meta(get_the_ID(), 'nonclickable', true); if ( '' !== $thumb_src ) : ?> <div class="et_pb_portfolio_image <?php echo esc_attr( $orientation ); if ($clickable == 'true') { echo ' nonclickable';}?>"> <a href="<?php the_permalink(); ?>"> <img src="<?php echo esc_attr( $thumb_src ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>"/> <div class="meta"> <span class="et_overlay"></span> <?php if ( 'on' === $show_title ) : ?> <h3><?php the_title(); ?></h3> <?php endif; ?> <?php if ( 'on' === $show_date ) : ?> <p class="post-meta"><?php echo get_the_date(); ?></p> <?php endif; ?> </div> </a> </div> <?php endif; ?> </div> <?php } } wp_reset_postdata(); $posts = ob_get_clean(); $class = " et_pb_bg_layout_{$background_layout}"; $output = sprintf( '<div%4$s class="et_pb_fullwidth_portfolio %1$s%3$s%5$s" data-auto-rotate="%6$s" data-auto-rotate-speed="%7$s"> %8$s <div class="et_pb_portfolio_items clearfix" data-columns=""> %2$s </div><!-- .et_pb_portfolio_items --> </div> <!-- .et_pb_fullwidth_portfolio -->', ( 'on' === $fullwidth ? 'et_pb_fullwidth_portfolio_carousel' : 'et_pb_fullwidth_portfolio_grid clearfix' ), $posts, esc_attr( $class ), ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ), ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ), ( '' !== $auto && in_array( $auto, array('on', 'off') ) ? esc_attr( $auto ) : 'off' ), ( '' !== $auto_speed && is_numeric( $auto_speed ) ? esc_attr( $auto_speed ) : '7000' ), ( '' !== $title ? sprintf( '<h2>%s</h2>', esc_html( $title ) ) : '' ) ); return $output; } ?> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.et_pb_portfolio_item .nonclickable .et_overlay { z-index: 6; } .et_pb_fullwidth_portfolio .nonclickable h3 { display: inline-block position: relative; z-index: 6; } .et_pb_portfolio_item .nonclickable:hover:after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; display: block; } .et_pb_portfolio_item .nonclickable .post-meta { display: none !important; } |
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.
32 Comments
Perfect! Exactly what I was trying to do! Thank you!
April 27, 2015
Good deal Ferg! Glad it worked for you
April 28, 2015
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
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.
September 21, 2015
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
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.
September 21, 2015
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.
September 3, 2015
The CSS would go in the Custom CSS at the bottom of the ePanel. Dashboard->Theme Options->Custom CSS
September 21, 2015
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.
January 1, 2016
Does not work with Divi 2.5+
Does anyone have any idea how to make this work with the newer versions of Divi?
March 13, 2016
Same problem. Please help!
March 14, 2016
Can’t get this to work with Divi 2.6.
I would be willing to pay for a plugin that does this!
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!
March 21, 2016
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?
March 24, 2016
To hide the icons try this:
.et_pb_fullwidth_portfolio .et_pb_portfolio_image .et_overlay:before { display: none !important;}
May 19, 2016
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/
May 19, 2016
missing semicolon on display:inline-block
June 8, 2016
Thanks Quentin. I updated it recently and must have left it out.
June 15, 2016
Always the best content from these proiogdius writers.
April 5, 2017
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; }
June 14, 2016
Thanks Katie. For me this does nothing but hide the overlay. I am still able to click the post.
June 15, 2016
same here…any help would be appreciated
September 27, 2016
When I combine both of the code from you guys I get exactly what I wanted. Thanks guys
April 1, 2020
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?
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!
November 19, 2016
I really like the idea of overwriting the shortcode – seems to be the easyiest way to change the functionality of the portfolio.
January 20, 2017
Does anyone have any advice for using this solution in the filterable portfolio module? The CSS above doesn’t appear to work there.
Thanks!
February 28, 2017
Can apply this method to alternates blog elements?
Thanks
April 4, 2017
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
April 26, 2017
Thank U !!!
February 1, 2020
fixtures, results and live match commentaryHowever, Bild are claiming that his former club Borussia Dortmund are in the driving to land the 21-year-old.
June 10, 2020
Thanks so much. Works great but for me when you click an image it shoots you back to the top of the page. Is there any way to solve that so the click is disabled all together?
January 20, 2021