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.

DIVI DISCOUNTS
20% Lifetime Access Discount 10% Annual Access Discount

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.

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

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

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

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

<?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;
}
?>

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();

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

<?php if ( 'on' === $show_title ) : ?>

<?php endif; ?>

<?php if ( 'on' === $show_date ) : ?>

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

%2$s

</div>

</div> ',

( '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:

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

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

Reply

Ferg
April 27, 2015
- Good deal Ferg! Glad it worked for you
  
  Reply
  
  Brad (admin)
  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

Reply

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.
  
  Reply
  
  Brad (admin)
  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

Reply

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.
  
  Reply
  
  Brad (admin)
  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.

Reply

Dieter Reuther
September 3, 2015
- The CSS would go in the Custom CSS at the bottom of the ePanel. Dashboard->Theme Options->Custom CSS
  
  Reply
  
  Brad (admin)
  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.

Reply

Brenda
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?

Reply

Matt
March 13, 2016
- Same problem. Please help!
  
  Reply
  
  Fracisco
  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!

Reply

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!
  
  Reply
  
  Alan
  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?

Reply

Jackie
March 24, 2016
- To hide the icons try this:
  
  .et_pb_fullwidth_portfolio .et_pb_portfolio_image .et_overlay:before { display: none !important;}
  
  Reply
  
  Brad (admin)
  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/

Reply

Brad (admin)
May 19, 2016
missing semicolon on display:inline-block

Reply

Quentin
June 8, 2016
- Thanks Quentin. I updated it recently and must have left it out.
  
  Reply
  
  Brad (admin)
  June 15, 2016
  - Always the best content from these proiogdius writers.
    
    Reply
    
    Cathleen
    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; }

Reply

Katie
June 14, 2016
- Thanks Katie. For me this does nothing but hide the overlay. I am still able to click the post.
  
  Reply
  
  Brad (admin)
  June 15, 2016
  - same here…any help would be appreciated
    
    Reply
    
    Lesley
    September 27, 2016
- When I combine both of the code from you guys I get exactly what I wanted. Thanks guys
  
  Reply
  
  turyagyenda
  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?

Reply

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!
  
  Reply
  
  Brad (admin)
  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.

Reply

Alexander Herzog
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!

Reply

Amelia
February 28, 2017
Can apply this method to alternates blog elements?

Thanks

Reply

riccardo
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

Reply

Eric Safai
April 26, 2017
Thank U !!!

Reply

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

Reply

rs82.asp
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?

Reply

Benjamin Howe
January 20, 2021

Remove the link from Divi Projects modules

If you find this tweak helpful:

Beginners

Method One – CSS

Method Two – PHP

32 Comments

Post a Reply Cancel reply

Create your own Divi Modules!

Weekly Tweaks

Recent Divi Tweaks

Popular Divi Tweaks

20% Discount!

Tired of GoDaddy?

Pin It on Pinterest