Divi’s Filterable Portfolio Module will give you two structure choices to choose between. Each choices have benefits and paintings nice for sure functions. On this submit, we’ll examine the fullwidth and grid layouts in Divi’s Filterable Portfolio Module to assist you make a decision which you wish to have to your website online. We’ll additionally taste each layouts to look how they paintings inside a Divi structure.

Let’s get began!

Preview of the Filterable Portfolio Module Structure Choices

First, let’s check out what we’ll construct on this instructional.

Grid Portfolio Merchandise Desktop

Grid Portfolio Merchandise Telephone

Fullwidth Structure Portfolio Merchandise Desktop

Fullwidth Structure Portfolio Merchandise Telephone

How you can Trade the Filterable POrtfolio Module Structure

By means of default, the Filterable Portfolio Module shows the structure in complete width. You’ll trade the structure to show the portfolio pieces in a grid. First, open the module’s settings as standard

Subsequent, choose the Design tab. The primary possibility is Structure. It has a dropdown field with a few alternatives. Make a selection it to choose from Fullwidth and Grid.

If you select the choice that isn’t lately decided on, the module will reload and show the portfolio pieces in that structure. The instance beneath displays the Grid structure.

How the Filterable Portfolio Module Layouts Evaluate

The 2 layouts are very other, however they do have some similarities. Each show the filter out on the best of the module, the identify and meta beneath the object pictures, and the pagination on the backside of the module.

Right here’s a take a look at how they’re other.

Fullwidth Structure

Fullwidth shows a big symbol with one portfolio merchandise taking the whole width of the portfolio space. This displays much more element as a result of the bigger symbol, however it could possibly get massive. The pictures show of their local form and increase to suit the to be had width. It doesn’t upload numerous house between the portfolio pieces. I like to recommend restricting the Put up rely to only some. The instance beneath displays the Fullwidth structure with a Put up Depend of two.

Grid Structure

The Grid structure shows as much as 4 pieces on a line. It provides extra space between the pieces. The pictures are cropped to create thumbnails which might be the similar dimension irrespective of the scale and form of the picture.

For this one, I’ve restricted the module to show 4 posts to turn the pagination.

When to Use Every Filterable Portfolio Module Structure

Each layouts have their benefits. Listed here are some tips about when to make use of every structure.

Fullwidth Structure

Use the Fullwidth structure if in case you have only some pieces to turn, or you wish to have to concentrate on a couple of pieces. Additionally, use this structure when you wish to have to focus on or draw consideration to the featured pictures.

Grid Structure

Use the Grid structure when you wish to have to turn a whole lot of pieces or when you wish to have a structure to turn extra pieces in a smaller house.

How you can Taste the Filterable Portfolio Module Layouts

Now that we’ve noticed how to make a choice the layouts, how they paintings, and when to make use of them, let’s see methods to taste each layouts. I’ll use the Portfolio web page from the free Painter Layout Pack that’s to be had inside Divi. Right here’s the unique web page.

I’ll exchange the portfolio with Filterable Portfolio Module and use the similar pictures and titles. I’ll create two variations: one with a fullwidth structure and one with a grid structure and elegance them.

How you can Taste a Grid Filterable Portfolio Module Structure Merchandise

We’ll get started with the Grid structure. I’ll use colours and fonts from the unique structure.

Content material

Open the module’s settings and input 4 for the Put up Depend. Make a selection the entire classes you wish to have to show within the module.

• Put up rely: 4
• Integrated Classes: every class

Structure

Subsequent, choose the Design tab and make a selection Grid from the Structure choices.

• Structure: Grid

Symbol

Scroll all the way down to Symbol and make a selection the 4^th Field Shadow possibility. Trade the Shadow Colour to rgba(0,0,0,0.05).

• Field Shadow: 4^th possibility
• Shadow Colour: rgba(0,0,0,0.05)

Textual content

Subsequent, scroll all the way down to Textual content and alter the Alignment to Heart. This facilities the filter out, identify, meta, and pagination.

• Alignment: Heart

Name Textual content

Subsequent, scroll to Name Textual content. Trade the Font to Merriweather and alter the Colour to black. Go away the opposite settings at their defaults.

• Font: Merriweather
• Colour: #000000

Trade the Font Measurement to 26px for desktops, 20px for pills, and 18px for telephones.

• Measurement: 26px desktop, 20px pill, 18px telephone

Filter out Standards Textual content

Subsequent, scroll all the way down to Standards Textual content. Trade the Font to Montserrat. Set the Weight to ambitious and the Taste to TT. Trade the Colour to #fd6927 and the Measurement to 12px.

• Font: Montserrat
• Weight: Daring
• Taste: TT
• Colour: #fd6927
• Measurement: 12px

Meta Textual content

Subsequent, scroll all the way down to Meta Textual content. Trade the Font to Montserrat and the Colour to #fd6927.

• Font: Montserrat
• Colour: #fd6927

Set the Measurement to 12px, the Letter Spacing to 2px, and the Line Top to one.2em.

• Measurement: 12px
• Letter Spacing: 2px
• Line Top: 1.2em

Pagination Textual content

In any case, scroll all the way down to Pagination Textual content and alter the Font to Montserrat, and set the Font Colour to black. Shut the module and save your settings.

• Font: Montserrat
• Colour: #000000

How you can Taste a Fullwidth Structure Portfolio Merchandise

Now, let’s arrange a Fullwidth structure portfolio. We’ll use the similar design cues because the Grid structure, however we’ll make some tweaks that paintings smartly for this structure. We’ll use some easy CSS to make some minor changes.

Content material

Open the module’s settings and alter the Put up Depend to two. This assists in keeping the web page smaller and more uncomplicated to regulate with the massive pictures. Make a selection the entire classes you wish to have to show within the module.

• Put up rely: 2
• Integrated Classes: every class

Components

Scroll all the way down to Components and disable Display Classes. Go away the others enabled. The kinds will nonetheless be enabled for the filter out, however they gained’t show with the identify.

• Display Name: Sure
• Display Classes: No
• Display Pagination: Sure

Structure

Make a selection the Design tab. Below Structure, go away the Structure set to Fullwidth, which is its default atmosphere.

• Structure: Fullwidth

Symbol

Subsequent, scroll all the way down to Symbol. Select the 4^th Field Shadow possibility and alter the Shadow Colour to rgba(0,0,0,0.05).

• Field Shadow: 4^th possibility
• Shadow Colour: rgba(0,0,0,0.05)

Textual content

Subsequent, scroll all the way down to Textual content. Trade the Alignment to Heart. The filter out, identify, and pagination shall be focused with the photographs.

• Alignment: Heart

Name Textual content

Subsequent, scroll to Name Textual content. Trade the Font to Merriweather and alter the Colour to black.

• Font: Merriweather
• Colour: #000000

Trade the Font Measurement to 40px for desktops, 20px for pills, and 18px for telephones.

• Measurement: 40px desktop, 20px pill, 18px telephone

Filter out Standards Textual content

Subsequent, scroll all the way down to Standards Textual content. Trade the Font to Montserrat, set the Weight to ambitious, and the Taste to TT. Trade the Colour to #fd6927. Go away the Measurement at its default atmosphere of 14px.

• Font: Montserrat
• Weight: Daring
• Taste: TT
• Colour: #fd6927

Pagination Textual content

Subsequent, scroll all the way down to Pagination Textual content. Trade the Font to Montserrat, trade the Weight to semi-bold, and set the Font Colour to #fd6927. Shut the module and save your settings.

• Font: Montserrat
• Colour: #fd6927
• Weight: Semi Daring

Name Textual content CSS

In any case, I’m certain you’ve spotted that there isn’t a lot house between the photographs on this structure. We will upload padding to the photographs or titles. Let’s upload some padding below the identify. This won’t most effective give the identify extra space, however it is going to additionally assist you know which of the photographs the identify belongs to.

Open the Complex tab and scroll all the way down to Portfolio Name. Make a selection the software icon. We’ll upload CSS for padding in keeping with the display screen dimension. We’ll upload 40px Backside Padding for desktops, 30px for pills, and 20px for telephones. Shut the module and save your settings.

• Portfolio Name (desktop):

  padding-bottom:40px

• Portfolio Name (pill):

  padding-bottom:30px

• Portfolio Name (telephone):

  padding-bottom:20px

Effects

Grid Portfolio Merchandise Desktop

Grid Portfolio Merchandise Telephone

Fullwidth Structure Portfolio Merchandise Desktop

Fullwidth Structure Portfolio Merchandise Telephone

Finishing Ideas on Divi’s Filterable Portfolio Module Structure Choices

That’s our take a look at the use of a fullwidth structure vs grid in Divi’s Filterable Portfolio Module. It’s simple to make a choice between the 2 structure choices. Every possibility has benefits and must be styled otherwise to paintings together with your website online. Simply making a couple of changes will be certain your Filterable Portfolio Module works smartly with any Divi structure.

We need to listen from you. Which do you utilize between the fullwidth and grid layouts in Divi’s Filterable Portfolio Module? Tell us within the feedback.

The submit Using a Fullwidth Layout vs Grid in Divi’s Filterable Portfolio Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more