As a manner fashion designer or creative, it’s at all times a good idea to have a portfolio to show your art work online. Throughout the digital era that we’re living in, development a private emblem is an effective way to set yourself apart from the competition. Bearing this in ideas, the usage of Divi to create your portfolio website online is a great idea. Divi has two native modules that permit you to assemble your portfolio. We’ve were given the Portfolio Module, along with the Filterable Portfolio Module. Every permit you to show off your portfolio in two ways. While the Portfolio Module is a good way to show your art work, the Filterable Portfolio Module means that you can show off additional of your art work and comes with a clear out that can assist you to upper supply your art work in a additional organized method. By way of default, our portfolio modules show off your art work in each one or 4 columns, depending on the construction you choose. On the other hand, in this tutorial, we’ll be using CSS to change columns in Divi’s portfolio module.

In this tutorial, we’ll be using Divi’s Filterable Portfolio Module throughout the FREE Print Clothier Format Pack. Specifically, we’ll be using the Print Clothier Gallery Web page Template from the construction pack. There are two construction sorts inside Divi’s portfolio Modules. The Grid Layout comes with 4 columns. The Whole Width Layout is to be had in a single column. We’ll be using the Grid Layout and CSS to change columns in Divi’s portfolio module. With CSS, we’ll change the columns throughout the module to 2, 3, 5, and 6 columns. The module will also be mobile responsive for every tablet and mobile devices.

Examples of Different Columns inside the Filterable Portfolio Module

Proper right here’s the result of the art work that we’ll be doing in this tutorial:

Industry Divi’s Filterable Portfolio Module to 2 Columns

Keep an eye on Divi’s Filterable Portfolio Module to a couple of Columns

Substitute Divi’s Filterable Portfolio Module to 5 Columns

Edit Divi’s Filterable Portfolio Module to 6 Columns

Styling the Filterable Portfolio Module

Quicker than we observe CSS to change the collection of columns inside our Filterable Portfolio Module, we must first style it to test our template.

Changing the Layout

To start out out, we must change our module construction. To take a look at this, we click on on on the gear icon to enter the module settings for our Filterable Portfolio Module.

Next, we click on on on the Design tab. After we enter this tab, we will be able to now click on on on the Layout tab. Then, we will be able to change the construction of the module from Fullwidth to Grid.

Proper right here, we will see the default Grid Layout comprises 4 columns.

Style Portfolio Image Thumbnail

Now that we’ve were given our Grid Layout in place, let’s style the portfolio image.

Styling the Image Overlay

First, we start by way of styling the Overlay. Scroll down and click on on on the Overlay tab. Use the following settings as a way to upload a white, translucent overlay to the Image:

Overlay Settings:

• Zoom Icon Color: #000000
• Hover Overlay Color: RGB(255,255,255,0.9)
• Hover Icon Picker: Visit the screenshot underneath

Together with Image Border

After styling the Overlay, we will be able to add a border. To take a look at this, scroll appropriate right down to the Image tab. Use the following settings to style the border:

Image Settings:

• Image Border Width: 8px
• Image Border Color: #ffffff
• Image Border Style: Solid

Styling Establish Text

Next, we will be able to style the Establish Text throughout the module. Let’s scroll appropriate right down to the Establish Text tab. Next, we’ll use the following settings to style the determine:

Establish Text Settings:

• Establish Font: Inter
• Establish Font Weight: Mild
• Establish Text Color: #000000
• Establish Text Size: 28px

Remember that we’re using the identical font that is used all the way through the Print Designer Layout Pack.

Styling and Together with CSS for the Filter out Requirements Text

For the Filter out Requirements Text, we’ll be using a few strains of custom designed CSS throughout the Difficult tab of the module settings. Quicker than we add the CSS, let’s style the ambience. First, we’ll observe the identical font family and color to the Filter out Requirements Text.

Filter out Requirements Text Settings:

• Filter out Requirements Font: Inter
• Filter out Requirements Font Weight: Mild
• Filter out Requirements Font Size: 14px

For now, we’re going to avoid wasting a variety of our changes by way of clicking on the green checkmark of the Filterable Portfolio Module’s modal box. On the other hand, we’re not finished with the Filter out Requirements Text merely however. We’re going to navigate to the Internet web page Settings to start development the custom designed CSS for our project. To take a look at this, we click on on on the crimson circle with the meatball menu inside the center of our visual display unit.

Once we now have now clicked this button, we’ll be capable of click on on on the gear icon. The gear icon will take us into the Internet web page Settings modal box.

Once inside the Internet web page Settings modal, click on on on the Difficult tab. Next, paste the following CSS into the Custom designed CSS box:

/* Industry background color 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;
color: #323741 !very important;
}

Remember that we’re commenting our CSS! Don’t omit to do so as we’ll be coming once more as a way to upload to our CSS as we enlargement via this tutorial. Save your changes by way of clicking on the green tick button at the bottom of the modal box. Now, let’s switch once more into bettering the Filterable Portfolio Module.

Styling Meta Text

We’ll now be styling the meta text that appears underneath the portfolio products’s determine. We wish to make it stand out relatively additional from the determine. To take a look at this, we’ll navigate to the Design tab of the Filterable Portfolio module and scroll appropriate right down to the Meta Text tab. As with the other text components of our module, we’ll be using the font family Inter. We’ll observe this up with the supporting design choices listed underneath:

Meta Text Environment:

• Meta Font: Inter
• Meta Font Weight: Not unusual
• Meta Font Color: #0102fa

Style Pagination Text

Next on the styling block will be the Pagination Text of our module. We’re going to call once more our Printer Designer Layout Pack by way of using the identical font. On the other hand, we’re going as a way to upload a slightly of our blue to the hover of this side of the module. Moreover, we’re going to create some interest by way of making the pagination text significantly more than its provide measurement.

To take a look at this, at first, we’re going to scroll appropriate right down to the Pagination Text tab and click on on on it. Next, we’re going to use the following styling settings:

Pagination Text Settings:

• Pagination Font: Inter
• Pagination Font Weight: Mild
• Pagination Text Alignment: Right kind
• Pagination Text Color: #000000
• Pagination Text Color (Hover): #0102fa
• Pagination Text Size: 28px

We’re going to go a step further with our Pagination Text. We wish to remove the default border that appears on top of the Pagination Text. To try this, we’re going to click on on on the Difficult tab inside our modal box. Then, we’re going as a way to upload the following line of CSS:

Portfolio Pagiation CSS:

border: none;

Each time you’ve completed this, we will now switch without delay to together with some custom designed CSS as a way to upload the finishing touches to our module. Click on on on the green checkmark button to avoid wasting a variety of your changes. You’ll be capable to move ahead and also save the internet web page as well, merely in the event you weren’t saving your art work along with the learning (don’t omit to do so!).

Customizing the Filterable Portfolio Module with CSS

Now that we’ve finished designing our Filterable Portfolio Module in Divi, we’ll now be using CSS to change the collection of columns that we’ll have in our module. Alternatively first, we’re going to make one minor tweak. We’re going to use CSS to remove the initial transition that comes default with the module.

To take a look at this, we’re going to switch into the Internet web page Settings to get right to use the Custom designed CSS tab.

Then, we’re going as a way to upload the following CSS to our Custom designed CSS:

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.lively {
transition: none;
}

.et_pb_portfolio_item {
animation: none!very important;
transition: none !very important;
}

We add this underneath the previous CSS that we added for the styling of the filters. That’s what our Filterable Portfolio now turns out like, with all our styling edits.

Now, let’s change the column amount from 4 to 2.

CSS Design Changes for Our Filterable Portfolio Module

In the beginning, one very important fact to remember when using this module, is to consider of the collection of posts that you wish to have to show off on each internet web page. For our CSS to art work as it should be, believe to show off quite a few posts that is divisible by way of the collection of columns that you simply’ve were given. For example, if you want to show your portfolio in 6 columns, you’ll need to show no less than 6 posts in your post rely. If you wish to flip additional posts, you’ll need to do 12, 18, 24, and plenty of others. posts throughout the module.

You’ll be capable to to seek out the post rely throughout the Content material subject material tab of the Filterable Portfolio and Portfolio Modules.

Quicker than we add our CSS, we want to attach a CSS class to our module. To take a look at this, we’ll re-enter the module settings, click on on on the Difficult tab and add our CSS class to our module. We’ll use the class column-portfolio. So that we don’t get at a loss for words as we switch via this tutorial, we’ll prefix this class with the collection of columns that we’ll be growing.

Changing the Filterable Portfolio Module to Two Columns

To modify the collection of columns in our module from 4 columns to 2 columns, we’ll once all over again, move to the Internet web page Settings. Then, we’ll add the following CSS:

Custom designed CSS for a Two Column Filterable Portfolio:

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

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

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

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

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

The width of our first selector (.two-column-portfolio .et_pb_grid_item) determines the width of the column. The margin-right property that we use all through this CSS snippet supplies some padding (or gutter) spherical our portfolio items. Proper right here’s what our new, two-column module turns out like.

Using CSS to Industry the Filterable Portfolio Module to a few Columns

Now, we’re going to change our module from 2 columns to a couple of columns. Proper right here’s a brand spanking new CSS snippet to check out this:

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

Consider, after together with this CSS, we’re going to have to change the post rely to a number that is divisible by way of 3. Let’s move with 9.

Industry the Number of Columns throughout the Filterable Portfolio Module to five Columns

That 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%!very important;
        margin-right: 5.5%!very important;        
    }
 
    .five-column-portfolio .et_pb_grid_item:nth-child(3n) {
        margin-right: 5.5%!very important;
    }
 
    .five-column-portfolio .et_pb_grid_item:nth-child(5n) {
        margin-right: 0!very important;
    }
 
    .five-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
        clear: none!very important;
    }
 
    .five-column-portfolio .et_pb_grid_item.first_in_row {
        clear: unset;
    }
}

All over again, believe to change the post rely! We’re going to go with the following amount appropriate right here… we’re going the entire method up to 15!

Edit the Number of Columns inside the Filterable Portfolio Module to Six Columns

In spite of everything, we’re going to change our portfolio to six columns. On the other hand, we want to make a small tweak when using the following CSS snippet. We’re going to go into the module settings one final time and add a line of CSS. This CSS will change the scale of the Portfolio Image. The reason we do this is to make sure that we will fit in our padding (gutter) and border throughout the six column construction.

To take a look at this, we’re going to navigate to the Difficult tab of our Filterable Portfolio module, and add the following line of CSS to the Portfolio Image chance:

Portfolio Image Custom designed CSS:

• Portfolio Image CSS: width: 90%;

Now that we’ve were given this CSS in place, we will go back to the Internet web page Settings and add 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%!very important;
        margin-right: 5px!very important;        
    }
 
    .six-column-portfolio .et_pb_grid_item:nth-child(3n) {
        margin-right: 5px!very important;
    }
 
    .six-column-portfolio .et_pb_grid_item:nth-child(6n) {
        margin-right: 0!very important;
    }
 
    .six-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
        clear: none!very important;
    }
 
    .six-column-portfolio .et_pb_grid_item.first_in_row {
        clear: unset;
    }
}

For this snippet, you’ll notice that we’ve changed the measurement of our right kind margin. The reason we do this is so that we will nevertheless handle the thick white borders that we carried out inside the design section of this tutorial. So, we reduced our margin to 5px. We also used 18 posts inside our post rely.

Let’s Wrap it All Up!

As we now have now come to the highest of your tutorial, I’m hoping that you simply’ve were given been able to appear how we will customize the default modules that come with Divi by way of using CSS. As we are living in an ever-growing digital age, it’s at all times a good idea to invest time in development an online presence. That will seem to be together with your art work online inside of the kind of a digital portfolio! We hope this tutorial will permit you to make your portfolio unique.

The post How one can Trade the Column Rely in Divi’s Filterable Portfolio Module gave the impression first on Chic Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more