As a fashion designer or ingenious, it’s all the time a good suggestion to have a portfolio to turn your paintings on-line. Within the virtual generation that we’re dwelling in, construction a non-public logo is a good way to set your self excluding the contest. Bearing this in thoughts, the usage of Divi to create your portfolio website online is a brilliant thought. Divi has two local modules that let you construct your portfolio. We’ve got the Portfolio Module, in addition to the Filterable Portfolio Module. Each let you exhibit your portfolio in two techniques. Whilst the Portfolio Module is a great way to turn your paintings, the Filterable Portfolio Module lets you exhibit extra of your paintings and springs with a filter out that may aid you higher provide your paintings in a extra arranged manner. Via default, our portfolio modules exhibit your paintings in both one or 4 columns, relying at the structure you select. Then again, on this educational, we’ll be the usage of CSS to switch columns in Divi’s portfolio module.

On this educational, we’ll be the usage of Divi’s Filterable Portfolio Module inside the FREE Print Clothier Format Pack. Particularly, we’ll be the usage of the Print Clothier Gallery Web page Template from the structure pack. There are two structure kinds inside of Divi’s portfolio Modules. The Grid Format comes with 4 columns. The Complete Width Format is available in one column. We’ll be the usage of the Grid Format and CSS to switch columns in Divi’s portfolio module. With CSS, we’ll alternate the columns inside the module to two, 3, 5, and six columns. The module can also be cellular responsive for each pill and cellular units.

Examples of Other Columns within the Filterable Portfolio Module

Right here’s the outcome of the paintings that we’ll be doing on this educational:

Trade Divi’s Filterable Portfolio Module to two Columns

Change columns in Divi's portfolio module to 2 columns

Regulate Divi’s Filterable Portfolio Module to a few Columns

Change columns in Divi's portfolio module to 3 columns

Replace Divi’s Filterable Portfolio Module to five Columns

Change columns in Divi's portfolio module to 5 columns

Edit Divi’s Filterable Portfolio Module to six Columns

Change columns in Divi's portfolio module to 6 columns

Styling the Filterable Portfolio Module

Sooner than we follow CSS to switch the choice of columns inside of our Filterable Portfolio Module, we should first taste it to check our template.

Converting the Format

To start out, we should alternate our module structure. To try this, we click on at the tools icon to go into the module settings for our Filterable Portfolio Module.

Edit the layout of the Filterable Portfolio Module

Subsequent, we click on at the Design tab. Once we input this tab, we can now click on at the Format tab. Then, we can alternate the structure of the module from Fullwidth to Grid.

Change the layout of the module from Fullwidth to Grid.

Right here, we will be able to see the default Grid Format incorporates 4 columns.

The default Grid Layout contains four columns

Taste Portfolio Symbol Thumbnail

Now that we’ve got our Grid Format in position, let’s taste the portfolio symbol.

Styling the Symbol Overlay

First, we commence via styling the Overlay. Scroll down and click on at the Overlay tab. Use the next settings so as to add a white, translucent overlay to the Symbol:

Overlay Settings:

  • Zoom Icon Colour: #000000
  • Hover Overlay Colour: RGB(255,255,255,0.9)
  • Hover Icon Picker: Consult with the screenshot beneath

Styling the Image Overlay

Including Symbol Border

After styling the Overlay, we can upload a border. To try this, scroll right down to the Symbol tab. Use the next settings to taste the border:

Symbol Settings:

  • Symbol Border Width: 8px
  • Symbol Border Colour: #ffffff
  • Symbol Border Taste: Cast

Let's style the portfolio image border

Styling Identify Textual content

Subsequent, we can taste the Identify Textual content inside the module. Let’s scroll right down to the Identify Textual content tab. Subsequent, we’ll use the next settings to taste the identify:

Identify Textual content Settings:

  • Identify Font: Inter
  • Identify Font Weight: Gentle
  • Identify Textual content Colour: #000000
  • Identify Textual content Measurement: 28px

Styling Title Text

Understand that we’re the usage of the similar font this is used throughout the Print Clothier Format Pack.

Styling and Including CSS for the Clear out Standards Textual content

For the Clear out Standards Textual content, we’ll be the usage of a couple of traces of customized CSS inside the Complicated tab of the module settings. Sooner than we upload the CSS, let’s taste the atmosphere. First, we’ll follow the similar font circle of relatives and colour to the Clear out Standards Textual content.

Clear out Standards Textual content Settings:

  • Clear out Standards Font: Inter
  • Clear out Standards Font Weight: Gentle
  • Clear out Standards Font Measurement: 14px

Styling for the Filter Criteria Text

For now, we’re going to save lots of our adjustments via clicking at the inexperienced checkmark of the Filterable Portfolio Module’s modal field. Then again, we’re now not completed with the Clear out Standards Textual content simply but. We’re going to navigate to the Web page Settings to begin construction the customized CSS for our venture. To try this, we click on at the red circle with the meatball menu within the middle of our display screen.

Entering the Page Settings

As soon as we have now clicked this button, we’ll have the ability to click on at the tools icon. The tools icon will take us into the Web page Settings modal field.

Into the Page Settings modal box

As soon as within the Web page Settings modal, click on at the Complicated tab. Subsequent, paste the next CSS into the Customized CSS field:

/* Trade background colour of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
border: none
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
colour: #323741 !essential;
}

Understand that we’re commenting our CSS! Don’t disregard to take action as we’ll be coming again so as to add to our CSS as we growth thru this educational. Save your adjustments via clicking at the inexperienced tick button on the backside of the modal field. Now, let’s transfer again into enhancing the Filterable Portfolio Module.

Styling Meta Textual content

We’ll now be styling the meta textual content that looks beneath the portfolio merchandise’s identify. We need to make it stand out slightly extra from the identify. To try this, we’ll navigate to the Design tab of the Filterable Portfolio module and scroll right down to the Meta Textual content tab. As with the opposite textual content elements of our module, we’ll be the usage of the font circle of relatives Inter. We’ll apply this up with the supporting design alternatives indexed beneath:

Meta Textual content Surroundings:

  • Meta Font: Inter
  • Meta Font Weight: Common
  • Meta Font Colour: #0102fa

Taste Pagination Textual content

Subsequent at the styling block would be the Pagination Textual content of our module. We’re going to name again our Printer Clothier Format Pack via the usage of the similar font. Then again, we’re going so as to add a touch of our blue to the hover of this facet of the module. Additionally, we’re going to create some passion via making the pagination textual content considerably greater than its present dimension.

To try this, at the start, we’re going to scroll right down to the Pagination Textual content tab and click on on it. Subsequent, we’re going to make use of the next styling settings:

Pagination Textual content Settings:

  • Pagination Font: Inter
  • Pagination Font Weight: Gentle
  • Pagination Textual content Alignment: Proper
  • Pagination Textual content Colour: #000000
  • Pagination Textual content Colour (Hover): #0102fa
  • Pagination Textual content Measurement: 28px

Style Pagination Text

We’re going to head a step additional with our Pagination Textual content. We need to take away the default border that looks on most sensible of the Pagination Textual content. To do this, we’re going to click on at the Complicated tab inside of our modal field. Then, we’re going so as to add the next line of CSS:

Portfolio Pagiation CSS:

border: none;

Portfolio Pagiation CSS

Whenever you’ve achieved this, we will be able to now transfer directly to including some customized CSS so as to add the completing touches to our module. Click on at the inexperienced checkmark button to save lots of your adjustments. You’ll be able to cross forward and likewise save the web page as neatly, simply if you weren’t saving your paintings at the side of the educational (don’t disregard to take action!).

Customizing the Filterable Portfolio Module with CSS

Now that we’ve completed designing our Filterable Portfolio Module in Divi, we’ll now be the usage of CSS to switch the choice of columns that we’ll have in our module. However first, we’re going to make one minor tweak. We’re going to make use of CSS to take away the preliminary transition that comes default with the module.

To try this, we’re going to transfer into the Web page Settings to get right of entry to the Customized CSS tab.

Entering the page settings

Then, we’re going so as to add the next CSS to our Customized CSS:

/* Take away transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.energetic {
transition: none;
}

.et_pb_portfolio_item {
animation: none!essential;
transition: none !essential;
}

We upload this beneath the former CSS that we added for the styling of the filters. That is what our Filterable Portfolio now seems like, with all our styling edits.

Four column filterable portfolio, styled

Now, let’s alternate the column quantity from 4 to two.

CSS Design Adjustments for Our Filterable Portfolio Module

At first, one essential reality to keep in mind when the usage of this module, is to take into accout of the choice of posts that you need to exhibit on each and every web page. For our CSS to paintings accurately, consider to exhibit a variety of posts this is divisible via the choice of columns that you’ve got. As an example, if you wish to display your portfolio in 6 columns, you’ll want to display at least 6 posts for your put up depend. If you want to turn extra posts, you’ll want to do 12, 18, 24, and many others. posts inside the module.

You’ll be able to to find the put up depend inside the Content material tab of the Filterable Portfolio and Portfolio Modules.

Post Count and the portfolio modules

Sooner than we upload our CSS, we wish to connect a CSS magnificence to our module. To try this, we’ll re-enter the module settings, click on at the Complicated tab and upload our CSS magnificence to our module. We’ll use the category column-portfolio. In order that we don’t get perplexed as we transfer thru this educational, we’ll prefix this magnificence with the choice of columns that we’ll be developing.

Add our CSS class to our module

Converting the Filterable Portfolio Module to Two Columns

To switch the choice of columns in our module from 4 columns to two columns, we’ll as soon as once more, cross to the Web page Settings. Then, we’ll upload the next CSS:

Customized CSS for a Two Column Filterable Portfolio:

/* 2 Column Portfolio */
@media (min-width: 981px) {
.two-column-portfolio .et_pb_grid_item {
width: 47.25%!essential;
margin-right: 5.5%!essential;
}

.two-column-portfolio .et_pb_grid_item:nth-child(3n) {
margin-right: 5.5%!essential;
}

.two-column-portfolio .et_pb_grid_item:nth-child(2n) {
margin-right: 0!essential;
}

.two-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
transparent: none!essential;
}

.two-column-portfolio .et_pb_grid_item.first_in_row {
transparent: unset;
}
}

The width of our first selector (.two-column-portfolio .et_pb_grid_item) determines the width of the column. The margin-right assets that we use right through this CSS snippet provides some padding (or gutter) round our portfolio pieces. Right here’s what our new, two-column module seems like.

Two column filterable portfolio

The use of CSS to Trade the Filterable Portfolio Module to 3 Columns

Now, we’re going to switch our module from 2 columns to a few columns. Right here’s a brand new CSS snippet to try this:

/* 3 Column Portfolio */
@media (min-width: 981px) {
    .three-column-portfolio .et_pb_grid_item {
        width: 29.66%!essential;
        margin-right: 5.5%!essential;  
    }
 
    .three-column-portfolio .et_pb_grid_item:nth-child(3n) {
        margin-right: 0!essential;
    }
 
    .three-column-portfolio.et_pb_grid_item:nth-child(4n) {
        margin-right: 5.5%!essential;
    }
 
    .three-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
        transparent: none!essential;
    }
    .three-column-portfolio .et_pb_grid_item.first_in_row {
        transparent: unset;
    }
}

Bear in mind, after including this CSS, we’re going to have to switch the put up depend to a bunch this is divisible via 3. Let’s cross with 9.

Change the post count for 3 columns

Trade the Choice of Columns inside the Filterable Portfolio Module to 5 Columns

This is the snippet for making our module have 5 columns.

/* 5 Column Portfolio */
@media (min-width: 981px) {
    .five-column-portfolio .et_pb_grid_item {
        width: 15.6%!essential;
        margin-right: 5.5%!essential;        
    }
 
    .five-column-portfolio .et_pb_grid_item:nth-child(3n) {
        margin-right: 5.5%!essential;
    }
 
    .five-column-portfolio .et_pb_grid_item:nth-child(5n) {
        margin-right: 0!essential;
    }
 
    .five-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
        transparent: none!essential;
    }
 
    .five-column-portfolio .et_pb_grid_item.first_in_row {
        transparent: unset;
    }
}

Once more, consider to switch the put up depend! We’re going to head with the next quantity right here… we’re going all of the manner as much as 15!

Change the post count for 5 columns

Edit the Choice of Columns within the Filterable Portfolio Module to Six Columns

After all, we’re going to switch our portfolio to 6 columns. Then again, we wish to make a small tweak when the usage of the next CSS snippet. We’re going to enter the module settings one ultimate time and upload a line of CSS. This CSS will alternate the dimensions of the Portfolio Symbol. The explanation we do that is to be sure that we will be able to are compatible in our padding (gutter) and border inside the six column structure.

To try this, we’re going to navigate to the Complicated tab of our Filterable Portfolio module, and upload the next line of CSS to the Portfolio Symbol possibility:

Portfolio Symbol Customized CSS:

  • Portfolio Symbol CSS: width: 90%;

Portfolio Image Custom CSS

Now that we’ve got this CSS in position, we will be able to return to the Web page Settings and upload this CSS snippet to make the module have six columns:

/* 6 Column Portfolio */
@media (min-width: 981px) {
    .six-column-portfolio .et_pb_grid_item {
        width:16%!essential;
        margin-right: 5px!essential;        
    }
 
    .six-column-portfolio .et_pb_grid_item:nth-child(3n) {
        margin-right: 5px!essential;
    }
 
    .six-column-portfolio .et_pb_grid_item:nth-child(6n) {
        margin-right: 0!essential;
    }
 
    .six-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
        transparent: none!essential;
    }
 
    .six-column-portfolio .et_pb_grid_item.first_in_row {
        transparent: unset;
    }
}

For this snippet, you’ll realize that we’ve modified the dimension of our correct margin. The explanation we do that is in order that we will be able to nonetheless deal with the thick white borders that we applied within the design segment of this educational. So, we diminished our margin to 5px. We extensively utilized 18 posts inside of our put up depend.

Post count for 6 columns

Let’s Wrap it All Up!

As we have now come to the top of your educational, I’m hoping that you’ve got been in a position to look how we will be able to customise the default modules that include Divi via the usage of CSS. As we live in an ever-growing virtual age, it’s all the time a good suggestion to speculate time in construction a web-based presence. That would appear to be including your paintings on-line within the type of a virtual portfolio! We are hoping this educational will let you make your portfolio distinctive.

The put up How one can Trade the Column Rely in Divi’s Filterable Portfolio Module seemed first on Chic Subject matters Weblog.

WordPress Web Design

[ continue ]