The usage of a Fullwidth Format vs Grid in Divi’s Filterable Portfolio Module

by | Aug 25, 2022 | Etcetera | 0 comments

Divi’s Filterable Portfolio Module provides you with two construction alternatives to choose from. Every alternatives have advantages and artwork great for certain purposes. In this put up, we’ll review the fullwidth and grid layouts in Divi’s Filterable Portfolio Module to help making a decision which you need in your web page. We’ll moreover style each and every layouts to look how they artwork within a Divi construction.

Let’s get started!

Preview of the Filterable Portfolio Module Structure Alternatives

First, let’s take a look at what we’ll assemble in this tutorial.

Grid Portfolio Products Desktop

Grid Portfolio Item Desktop

Grid Portfolio Products Phone

Grid Portfolio Item Phone

Fullwidth Structure Portfolio Products Desktop

Fullwidth Layout Portfolio Item Desktop

Fullwidth Structure Portfolio Products Phone

Fullwidth Layout Portfolio Item Phone

Tips about Exchange the Filterable POrtfolio Module Structure

By means of default, the Filterable Portfolio Module shows the construction in whole width. You’ll be capable to alternate the construction to turn the portfolio items in a grid. First, open the module’s settings as not unusual

How to Change the Layout

Next, select the Design tab. The principle chance is Structure. It has a dropdown box with a couple of choices. Choose it to choose between Fullwidth and Grid.

How to Change the Layout

If you choose the selection that isn’t just lately made up our minds on, the module will reload and display the portfolio items in that construction. The example beneath shows the Grid construction.

How to Change the Layout

How the Filterable Portfolio Module Layouts Read about

The two layouts are very different, then again they do have some similarities. Every display the filter out on the most efficient of the module, the establish and meta beneath the thing pictures, and the pagination at the bottom of the module.

Proper right here’s a check out how they’re different.

Fullwidth Structure

Fullwidth shows a large image with one portfolio products taking the entire width of the portfolio house. This shows a lot more component because of the larger image, then again it may be able to get large. The pictures display in their native shape and prolong to fit the available width. It doesn’t add a lot of space between the portfolio items. I love to suggest limiting the Submit rely to only some. The example beneath shows the Fullwidth construction with a Submit Depend of 2.

Fullwidth Layout

Grid Structure

The Grid construction shows up to 4 items on a line. It supplies more room between the items. The pictures are cropped to create thumbnails which may also be the equivalent size without reference to the scale and type of the image.

Grid Layout

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

See also  Download 4 FREE Blog Post Template Sets for Divi

Grid Layout

When to Use Each Filterable Portfolio Module Structure

Every layouts have their advantages. Listed below are some tips on when to use every construction.

Fullwidth Structure

Use the Fullwidth construction while you’ve were given only some items to show, or you need to pay attention to a few items. Moreover, use this construction when you need to focus on or draw attention to the featured pictures.

Grid Structure

Use the Grid construction when you need to show a large number of items or when you need a construction to show additional items in a smaller space.

Tips about Style the Filterable Portfolio Module Layouts

Now that we’ve spotted how to choose the layouts, how they artwork, and when to use them, let’s see find out how to style each and every layouts. I’ll use the Portfolio internet web page from the unfastened Painter Format Pack that’s available within Divi. Proper right here’s the original internet web page.

How to Style the Layouts

I’ll replace the portfolio with Filterable Portfolio Module and use the equivalent pictures and titles. I’ll create two permutations: one with a fullwidth construction and one with a grid construction and style them.

Tips about Style a Grid Filterable Portfolio Module Structure Products

We’ll get began with the Grid construction. I’ll use colors and fonts from the original construction.

Content material subject matter

Open the module’s settings and enter 4 for the Submit Depend. Choose all the categories you need to turn inside the module.

  • Submit rely: 4
  • Integrated Categories: every elegance

How to Style a Grid Portfolio Item

Structure

Next, select the Design tab and make a choice Grid from the Structure alternatives.

  • Structure: Grid

How to Style a Grid Portfolio Item

Image

Scroll all of the manner all the way down to Image and make a choice the 4th Box Shadow chance. Exchange the Shadow Color to rgba(0,0,0,0.05).

  • Box Shadow: 4th chance
  • Shadow Color: rgba(0,0,0,0.05)

How to Style a Grid Portfolio Item

Text

Next, scroll all of the manner all the way down to Text and change the Alignment to Center. This amenities the filter out, establish, meta, and pagination.

  • Alignment: Center

How to Style a Grid Portfolio Item

Establish Text

Next, scroll to Establish Text. Exchange the Font to Merriweather and change the Color to black. Cross away the other settings at their defaults.

  • Font: Merriweather
  • Color: #000000

How to Style a Grid Portfolio Item

Exchange the Font Size to 26px for desktops, 20px for tablets, and 18px for phones.

  • Size: 26px desktop, 20px tablet, 18px phone

How to Style a Grid Portfolio Item

Filter out Requirements Text

Next, scroll all of the manner all the way down to Requirements Text. Exchange the Font to Montserrat. Set the Weight to formidable and the Style to TT. Exchange the Color to #fd6927 and the Size to 12px.

  • Font: Montserrat
  • Weight: Bold
  • Style: TT
  • Color: #fd6927
  • Size: 12px
See also  Learn how to Configure WooCommerce Settings

How to Style a Grid Portfolio Item

Meta Text

Next, scroll all of the manner all the way down to Meta Text. Exchange the Font to Montserrat and the Color to #fd6927.

  • Font: Montserrat
  • Color: #fd6927

How to Style a Grid Portfolio Item

Set the Size to 12px, the Letter Spacing to 2px, and the Line Most sensible to no less than one.2em.

  • Size: 12px
  • Letter Spacing: 2px
  • Line Most sensible: 1.2em

How to Style a Grid Portfolio Item

Pagination Text

In any case, scroll all of the manner all the way down to Pagination Text and change the Font to Montserrat, and set the Font Color to black. Close the module and save your settings.

  • Font: Montserrat
  • Color: #000000

How to Style a Grid Portfolio Item

Tips about Style a Fullwidth Structure Portfolio Products

Now, let’s prepare a Fullwidth construction portfolio. We’ll use the equivalent design cues since the Grid construction, then again we’ll make some tweaks that artwork well for this construction. We’ll use some simple CSS to make some minor adjustments.

Content material subject matter

Open the module’s settings and change the Submit Depend to 2. This assists in keeping the internet web page smaller and easier to regulate with the large pictures. Choose all the categories you need to turn inside the module.

  • Submit rely: 2
  • Integrated Categories: every elegance

How to Style a Fullwidth Layout Portfolio Item

Parts

Scroll all of the manner all the way down to Parts and disable Show Categories. Cross away the others enabled. The kinds will however be enabled for the filter out, then again they won’t display with the establish.

  • Show Establish: Certain
  • Show Categories: No
  • Show Pagination: Certain

How to Style a Fullwidth Layout Portfolio Item

Structure

Choose the Design tab. Beneath Structure, pass away the Structure set to Fullwidth, which is its default surroundings.

  • Structure: Fullwidth

How to Style a Fullwidth Layout Portfolio Item

Image

Next, scroll all of the manner all the way down to Image. Select the 4th Box Shadow chance and change the Shadow Color to rgba(0,0,0,0.05).

  • Box Shadow: 4th chance
  • Shadow Color: rgba(0,0,0,0.05)

How to Style a Fullwidth Layout Portfolio Item

Text

Next, scroll all of the manner all the way down to Text. Exchange the Alignment to Center. The filter out, establish, and pagination it will likely be centered with the photographs.

  • Alignment: Center

How to Style a Fullwidth Layout Portfolio Item

Establish Text

Next, scroll to Establish Text. Exchange the Font to Merriweather and change the Color to black.

  • Font: Merriweather
  • Color: #000000

How to Style a Fullwidth Layout Portfolio Item

Exchange the Font Size to 40px for desktops, 20px for tablets, and 18px for phones.

  • Size: 40px desktop, 20px tablet, 18px phone

How to Style a Fullwidth Layout Portfolio Item

Filter out Requirements Text

Next, scroll all of the manner all the way down to Requirements Text. Exchange the Font to Montserrat, set the Weight to formidable, and the Style to TT. Exchange the Color to #fd6927. Cross away the Size at its default surroundings of 14px.

  • Font: Montserrat
  • Weight: Bold
  • Style: TT
  • Color: #fd6927
See also  The best way to Upload a Other CTA In step with Publish Class The usage of Divi’s Theme Builder

How to Style a Fullwidth Layout Portfolio Item

Pagination Text

Next, scroll all of the manner all the way down to Pagination Text. Exchange the Font to Montserrat, alternate the Weight to semi-bold, and set the Font Color to #fd6927. Close the module and save your settings.

  • Font: Montserrat
  • Color: #fd6927
  • Weight: Semi Bold

How to Style a Fullwidth Layout Portfolio Item

Establish Text CSS

In any case, I’m positive you’ve noticed that there isn’t so much space between the photographs in this construction. We will add padding to the photographs or titles. Let’s add some padding beneath the establish. This received’t most efficient give the establish more room, then again it’ll moreover assist you to know which of the photographs the establish belongs to.

Open the Complicated tab and scroll all of the manner all the way down to Portfolio Establish. Choose the device icon. We’ll add CSS for padding in keeping with the show size. We’ll add 40px Bottom Padding for desktops, 30px for tablets, and 20px for phones. Close the module and save your settings.

  • Portfolio Establish (desktop):
    padding-bottom:40px
  • Portfolio Establish (tablet):
    padding-bottom:30px
  • Portfolio Establish (phone):
    padding-bottom:20px

How to Style a Fullwidth Layout Portfolio Item

Results

Grid Portfolio Products Desktop

Grid Portfolio Item Desktop

Grid Portfolio Products Phone

Grid Portfolio Item Phone

Fullwidth Structure Portfolio Products Desktop

Fullwidth Layout Portfolio Item Desktop

Fullwidth Structure Portfolio Products Phone

Fullwidth Layout Portfolio Item Phone

Completing Concepts on Divi’s Filterable Portfolio Module Structure Alternatives

That’s our check out using a fullwidth construction vs grid in Divi’s Filterable Portfolio Module. It’s easy to choose between the two construction alternatives. Each chance has advantages and should be styled in a different way to artwork along side your web page. Merely making a few adjustments will probably be positive your Filterable Portfolio Module works well with any Divi construction.

We want to concentrate from you. Which do you use between the fullwidth and grid layouts in Divi’s Filterable Portfolio Module? Let us know inside the comments.

The put up The usage of a Fullwidth Format vs Grid in Divi’s Filterable Portfolio Module appeared first on Chic Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published.