Divi’s Filterable Portfolio Module comprises a lot of taste changes, permitting Divi customers to customise the weather of the module independently. This comprises an overlay published when the person hovers over the undertaking’s pictures. The overlay is inconspicuous to taste, and you’ll be able to customise it additional with CSS. On this publish, we’ll display you methods to customise the undertaking overlay in Divi’s Filterable Portfolio that will help you create a singular design on your tasks.

Let’s get began.

Preview

Right here’s a take a look at what we’ll construct on this instructional. I’ve integrated telephone examples despite the fact that telephones don’t have a mouse to hover. Telephones will show the overlay when the person clicks, so it’s a good suggestion to design them with telephones in thoughts.

First Customized Challenge Overlay Desktop

First Customized Challenge Overlay Telephone

2d Customized Challenge Overlay Desktop

2d Customized Challenge Overlay Telephone

3rd Customized Challenge Overlay Desktop

3rd Customized Challenge Overlay Telephone

Find out how to Allow Overlays

Overlays aren’t enabled within the Filterable Portfolio Module by way of default. The cause of that is the overlays most effective paintings with the Grid format. The Fullwidth format is the default atmosphere. We’ll wish to allow the Grid format to look the overlay.

To allow overlays, make a selection Grid because the format possibility. To try this, move to the Design tab within the Filterable Portfolio Module. The primary possibility is Format. Click on the dropdown field and make a selection Grid. You’ll then see a brand new set of choices beneath Overlay. They come with the Zoom Icon Colour, Hover Overlay Colour, and Hover Icon Picker.

Divi Format Instance

First, let’s upload the Filterable Portfolio Module to a Divi format. I’m the usage of the Portfolio web page from the free Creative CV Layout Pack to be had inside Divi. For reference, right here’s a take a look at the format prior to including the Filtered Portfolio Module. This presentations the name and featured tasks. I’ll upload the module beneath the name above the featured tasks. We’ll use design cues from the format.

Upload a Filterable Portfolio Module

First, upload a new Segment beneath the hero Segment.

Subsequent, upload a single-column Row.

In any case, upload a Filterable Portfolio Module. We will be able to now make a selection the content material and magnificence the module.

Filterable Portfolio Content material

First, set the Publish Depend to eight. This shows 4 columns with two rows of tasks. Make a selection your classes from the checklist of Integrated Classes.

• Publish Depend: 8
• Integrated Classes: your selection

Filterable Portfolio Parts

Subsequent, scroll right down to Parts and disable Display Classes. We’ll depart the remainder at their default settings.

• Display Classes: No

Filterable Portfolio Format

Subsequent, make a selection the Design tab and make a selection Grid for the Format. This permits the Overlay possibility. We’ll depart the overlay at its default for now. We’ll create 3 other overlays within the subsequent segment.

• Format: Grid

Filterable Portfolio Textual content

Scroll right down to Textual content and set the Alignment to Middle.

• Alignment: Middle

Filterable Portfolio Identify Textual content

Scroll right down to Identify Textual content. Select Montserrat for the Font, set the Weight to Daring, and the Taste to TT.

• Font: Montserrat
• Weight: Daring
• Taste: TT

Subsequent, set the Colour to black. Exchange the Line Peak to at least one.6em. Depart the Font Dimension at its default settings.

• Colour: #000000
• Line Peak: 1.6em

Filterable Portfolio Clear out Standards Textual content

Subsequent, scroll right down to Clear out Standards Textual content. Exchange the Font to Montserrat, the Taste to TT, the Colour to black, and the Line Peak to at least one.6em.

• Font: Montserrat
• Taste: TT
• Colour: #000000
• Line Peak: 1.6em

Filterable Portfolio Pagination Textual content

In any case, scroll to Pagination Textual content and make a selection Montserrat for the Font. Set the Taste to TT and the Colour to black. Save your paintings. Subsequent, we’ll create 3 customized overlays.

• Font: Montserrat
• Taste: TT
• Colour: #000000

Customized Challenge Overlay Examples

Now, let’s create our 3 overlay examples. The primary two use easy settings to get a distinct glance. The 3rd makes use of customized CSS. For reference, right here’s a take a look at the default overlay. It doesn’t supply a colour for the icon, so it shows within the default blue. The overlay makes use of rgba(255,255,255,0.9), which is white with 90% opacity. The icon is a cast turned around plus.

Overlay Instance One

We’ll darken the overlay for our first instance so the picture slightly presentations thru. This one has an orange overlay with a white icon.

Overlay

Select white for the Zoom Icon Colour. Set the Overlay Colour to rgba(254,90,37,0.9). For this one, we’ll use the default hover icon. Shut the module and save your settings.

• Icon Colour: rgba(254,90,37,0.9)
• Overlay Colour: #ffffff

Overlay Instance Two

For this case, we’ll opposite our route from the former instance and make allowance lots of the symbol to turn throughout the overlay. This one has a white overlay with an orange icon.

Overlay

Set the Zoom Icon Colour to #fe5a25 and the Overlay Colour to rgba(255,255,255,0.75). Within the Hover Icon Picker, make a selection the magnifying glass. Shut the module and save your settings.

• Icon Colour: #fe5a25
• Overlay Colour: rgba(255,255,255,0.75)
• Hover Icon: Magnifying Glass

Overlay Instance 3

For this case, we’ll use CSS to transport the icon’s location. As a substitute of revealing a colour overlay, we’ll use CSS to switch the picture to one thing from the format. Since this can be a CV format, we’ll use a picture of the website online proprietor. This may occasionally make the paintings extra private and enchantment to attainable shoppers or employers.

Overlay

Exchange the Zoom Icon Colour to white. Within the Hover Icon Picker, make a selection the appropriate arrow. We gained’t wish to make picks for the overlay colour this time. We’ll deal with the overlay within the Customized CSS box.

• Zoom Icon Colour: #ffffff
• Hover Icon: Proper Arrow

Customized CSS

Subsequent, we’ll use some easy CSS to exchange the featured symbol and transfer the icon. Make a selection the Complicated tab and scroll right down to Overlay and Overlay Icon.

Overlay

Upload this CSS within the Overlay box. This shows a picture out of your media library when a person hovers over the featured symbol. It’s set to no-repeat and heart. Exchange the URL with the picture you wish to have to show.

• Overlay CSS:

  background: url("") no-repeat heart;

Overlay Icon

Subsequent, we’ll transfer the icon’s place. Input this CSS into the Overlay Icon CSS box. We’ll additionally upload CSS for drugs and telephones. Drugs and telephones most often don’t show hover (since the person simply clicks with their finger as an alternative of soaring with a mouse). Alternatively, the hover overlay does show when the person clicks the picture. With this in thoughts, it’s more secure to incorporate settings for drugs and telephones than now not.

The icon will now transfer to the decrease proper nook, and the picture will exchange to turn the picture from our library.

• Desktop CSS:

  margin:50px 86px;

• Pill CSS:

  margin:40px 60px;

• Telephone CSS:

  margin:70px 100px;

Effects

First Customized Challenge Overlay Desktop

First Customized Challenge Overlay Telephone

2d Customized Challenge Overlay Desktop

2d Customized Challenge Overlay Telephone

3rd Customized Challenge Overlay Desktop

3rd Customized Challenge Overlay Telephone

Finishing Ideas

That’s our take a look at methods to customise the undertaking overlay in Divi’s Filterable Portfolio Module. The settings are easy however can considerably affect the module’s design. You’ll taste the overlay and the icon to check your website online and customise it even additional with CSS. A couple of easy settings or quick strains of CSS could make your undertaking overlay glance nice with any Divi format.

We wish to listen from you. Do you utilize customized undertaking overlays on your Filterable Portfolio Module? Tell us about it within the feedback.

The publish How to Customize the Project Overlay in Divi’s Filterable Portfolio Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more