Divi Blurb modules are incredibly useful because they combine an image (or icon), a title (the header) and some text (the body) into a single object. This can then be easily styled or moved around within Divi pages using the Page Builder.

Notice though, that the default behaviour is for only the image and header to be clickable. The body text is not clickable. Now, we often use a boundary or a drop shadow or some sort of micro-interaction to provide feedback on clickable areas. But these apply to the whole blurb, not simply the image and header. In fact, they all make the blurb appear more like a single object. You can see this in the blurb on the right where we have added a border and drop shadow on hover.

In this tutorial we are going to describe how you can have clickable body text in Divi Blurbs, by extending the clickable area to cover all of the text.

Header

Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body

Header

Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body

The Blurb Structure

If you use Google Chrome Inspect (or equivalent) to look at the structure of the blurb module, you can see that div.et_pb_blurb_content is the name of the container within the blurb that holds the image and the header and body text –

In fact, div.et_pb_blurb_content holds two child objects; the image container (called div.et_pb_main_blurb_image) and a container for the blurb text (called div.et_pb_blurb_container and containing the header and body text). Here is what the image container looks like when highlighted using Chrome Inspect –

Extending the Clickable Area

We are going to extend the clickable area by changing the size of the link attached to the header text, so that it covers all of the text in the blurb beneath it. The image link and the ‘extended’ header link will sit next to each the other, covering almost all of the blurb. We can see from the code that the h4 link can be targeted with .et_pb_blurb_container h4 a, but to make sure that we target only the specific blurbs we want to make clickable, rather than all blurbs, we are going to use a new class called clickable-blurb to ‘mark’ them.

You need to attach the new class name, clickable-blurb, to each blurb you want to be made clickable. You do this by entering the class name into each blurb’s Blurb Module Settings -> Advanced -> CSS Class field.

We are now going to use some CSS to extend the link to cover the lower half of the blurb. We strongly recommend using a child theme for this but you can instead put your CSS into Divi->Theme Options->Custom CSS if you want.

So the first thing we have to do before we can extend the anchor is to make it a block level item. Links are inline items, and this means that they are only as big as they need to be in order to contain whatever is inside them. They ‘shrink-wrap’ themselves to their children. Block level items, on the other hand, are as big as they can be.  They expend to take up all the space they can.

Let’s try this then –

.clickable-blurb .et_pb_blurb_container h4 a {
    display:block;
    width:100%;
    height:100%;
}

This has worked but not achieved what we wanted 🙂 If you use Chrome Inspect or simply hover the mouse on the blurb you will see that the width of the link on the header text has been expanded to that of the blurb but the height has not changed at all. As we said, the CSS has behaved perfectly…. it has expanded the link to the height and width of its parent. Of course, it’s parent is the h4 element and only contains the header! We want the area covered by the link to be expanded not to the height and width of its parent (the h4 element) but to the height and width of another of its ancestors…. the div.et_pb_blurb_container.

Header

Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body

To do this we can make use of a trick. If we were to position the link absolutely and position the .div.et_pb_blurb_container relatively, the link would get its width and height from the .div.et_pb_blurb_container. This is because absolutely positioned items are positioned using their nearest positioned ancestor. We have effectively ‘flagged’ the .div.et_pb_blurb_container as the object to be used. The intervening elements are not positioned (strictly speaking, they are position:static). Of course, we are not actually positioning any of these ojects, but that does not matter. It’s the width and height of the .div.et_pb_blurb_container that we are trying to use.

So, this is what the final code looks like –

 

.clickable-blurb .et_pb_blurb_container {
    position:relative;
}

.clickable-blurb .et_pb_blurb_container h4 a {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
}

.clickable-blurb .et_pb_blurb_container h4 {
    padding-bottom:1.4em;
}

 

Header

Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body Body

It now works. The extra padding-bottom just helps with the layout.

Interestingly, if you comment out the position:relative on the .et_pb_blurb_container, the size of the link then becomes much bigger and it extends down below the blurb itself. This is because, without the position:relative, the first ancestor of the link to have its position set then becomes the div.et_pb_blurb_content itself, which is basically the same size as the blurb. Try this and take a look at the results with Chrome Inspect 🙂

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!