The most effective method to Make a Negligible Portfolio Landing page with Divi

Posted on December 27, 2016 by Nathan B. Weller in Divi Assets 33 Remarks
The most effective method to Make a Negligible Portfolio Landing page with Divi
Blog/Divi Assets/How to Make an Insignificant Portfolio Landing page with Divi

Welcome to post 1 of 5 in our miniseries How to Make a Straightforward and Viable Portfolio Site with Divi. In this series we'll cover all that you want to do to make your own portfolio site without any preparation. We'll likewise go over how to utilize our A/B testing framework Divi Prompts ensure your site is compelling at drawing in new clients.

Recorded as a hard copy this series my essential objective is to tell you the best way to make a very basic portfolio site in which the main two things a guest can do is check out at imaginative tasks or contact the craftsman. That is the general purpose of a portfolio site all things considered, correct? So why confuse it!

To start this series, I will tell you the best way to make a negligible portfolio landing page. As the series advances, we'll fan out and add a couple of additional choices invitations to take action, a filterable portfolio, project page designs, and A/B tests-however the center idea of straightforwardness and viability won't ever change.

How about we get everything rolling!
The present End-product: A Negligible Portfolio Landing page

To accomplish this end-product on your own Divi site you'll need to complete three things: Modify your essential menu styles (as well as add social symbols to it), make a custom footer, and appropriately design the Divi Portfolio module. These are the three things I'll be going over in the instructional exercise underneath.

The Idea and Motivation

I've had this thought for quite a while. Since we distributed this post on portfolio sites to demonstrate your own later. In particular, I thought the portfolio site of Mike Kus was especially great. It was just what it should have been and that's it. Maybe much more critically, its negligible methodology placed the guest's all's consideration on his work-which is the general purpose!

I realized immediately that this was the sort of thing Divi clients could do also thus I arranged this miniseries to show everybody how. We'll begin by copying his landing page and afterward in the accompanying posts grow out from that point (never neglecting to focus on the straightforwardness of the center plan) yet additionally exploiting the high level usefulness Divi gives to increment adequacy.

Portfolio-Motivation
Setting up the Plan Components

For this instructional exercise you'll need to have the option to populate your landing page with portfolio projects. In all out I utilized a little more than 100 pictures from unsplash.com to make 20 tasks with no less than five pictures each. Notwithstanding, for this instructional exercise you will just need 20 pictures to use as highlighted pictures on 20 ventures which I prescribe re-estimating to a width of 1920px. I'd likewise suggest utilizing scene pictures as your task highlighted pictures since that will look best down the line when we plan our venture pages utilizing the Divi Manufacturer.
Executing the Plan with Divi

Buy into Our Youtube Channel

As I referenced above, there are three segments to this instructional exercise: Header/Route, Footer, and Portfolio Module. In the three segments beneath I'll walk you bit by bit through every one. However, before we do that, we should deal with a couple of all inclusive settings that need designing.

Explore in your WordPress Administrator to Divi > Subject Customizer. Under Broad Settings > Foundation set your site foundation to white (#ffffff). Then, at that point, under Broad Settings > Typography set your Header Text Style to striking (B) and all covers (TT). Then, at that point, set your Header Textual style to Open Sans and your Body Text style to Georgia. With regards to our negligible theme, set your body connect variety to dark (#000000) and your body text tone as well as your header text tone to dim (#666666).

Click the blue "Save and Distribute" button at the highest point of the customizer prior to continuing on.
Making Your Negligible Header/Route

To get everything rolling how about we tackle the insignificant header I've made. We'll begin with the simplest pieces and progress to the social symbols, which require a limited quantity of code.

In the first place, go to Pages > Add New and make/distribute two pages: Portfolio and About. You can leave them clear until further notice since we'll fill them in with content later. Then, explore in your WordPress Administrator to Divi > Subject Customizer.

The principal thing we want to do is ensure that your menu is showing the two pages you recently made. So explore in your Subject Customizer to Menus > Essential Menu. In the event that the essential menu choice isn't accessible, click the blue "Add Menu" button and make a menu called "Essential Menu".

Inside the menu called Essential Menu click the blue "Add Things" button. Select your portfolio page and about page from the Pages area. Click on your about page thing in the Essential Menu and change the route name to say "About and Contact".

Essential Menu-1

At last, under "Show Area" ensure that the actually look at box close to "Essential Menu" is ticked. Click the "Save and Distribute" button at the top prior to continuing on.

Presently we can start to style our new essential menu. Explore from the principal customizer menu to Header and Route > Essential Menu Bar.

Essential Menu-1.5

Roll out the accompanying improvements:

    Menu Level: 66
    Logo Max Level: 54
    Text Size: 24
    Letter Dispersing: 0
    Text style: Open Sans Light
    Text Tone: rgba(0,0,0,0.55)
    Dynamic Connection Tone: #000000
    Foundation Tone: #ffffff
    Dropdown Menu Foundation Tone: #ffffff
    Dropdown Menu Line Tone: #000000
    Dropdown Menu Text Tone: rgba(0,0,0,0.55)

At the point when these progressions are made, click the blue "Save and Distribute" button prior to continuing on.

Presently we need to arranging the Decent Menu settings to match our new Essential Menu settings so things look equivalent to your site guests look down the page. To do this, explore back to your Header and Routes submenu and select Fixed Route Settings.

Essential Menu-2.5

Roll out the accompanying improvements:

    Fixed Menu Level: 40
    Text Size: 24
    Essential Menu Foundation Tone: #ffffff
    Essential Menu Connection Tone: rgba(0,0,0,0.55)
    Dynamic Essential Menu Connection Tone: #000000

At the point when these progressions are made, click the blue "Save Changes" button.

Essential Menu-2

You ought to now have an essential menu that seems to be the picture above. The last touch we're going make is adding our social symbols. Naturally, Divi is intended to show the social symbols in its optional menu, however we need to put everything in one menu to keep things as basic and negligible as could be expected.

Achieving this is simple and requires no external assets or pictures. Divi accompanies a symbol textual style family called "ETmodules" that we will use to show our social symbols as menu things.

To do this we must make a beeline for Menus > Essential Menu in the subject customizer. Click the blue "Add Things" button and snap on the Custom Connections choice in the subsequent jump out menu.

Essential Menu-3

In the URL field put your twitter record's url. In the Connection Text field compose the accompanying html length:
01

<range class="divi-twitter"></span>

At the point when you're done, click the "Add to Menu" button. Presently rehash this cycle for Instagram utilizing this html length in that custom's Connection Message field:
01

<range class="divi-instagram"></span>

Once both of these custom connections have been added to your essential menu click the blue "Save and Distribute" button prior to leaving the subject customizer.

Presently we really want to add some custom css. To do this explore to Divi > Subject Choices and look down to the Custom CSS board.

Add the accompanying css:
01
02
03
04
05
06
07
08
09
10
11
12
13
14

/*Essential Menu*/
.divi-instagram:after {
    content: "\e09a";
    show: block;
    textual style family: "ETmodules";
   textual style weight: ordinary;
}

.divi-twitter:after {
    content: "\e094";
    show: block;
    textual style family: "ETmodules";
   textual style weight: ordinary;
}

At the point when completed click the green "Save Changes" button at the lower part of the subject choices page. You ought to now have a negligible header that seems to be this.

Assuming you might want to utilize different informal organizations, you can basically change the css class to mirror the social symbol and utilize one of the accompanying substance codes:

Facebook = content: "\e093";
Google In addition to = content: "\e096";
Pinterest = content; "\e095";
LinkedIn = content: "\e09d";
Tumblr = content: "\e097";
Skype = content: "\e0a2";
Flikr = content: "\e0a6";
Myspace = content: "\e0a1";
Dribbble = content: "\e09b";
YouTube = content: "\e0a3";
Vimeo = content: "\e09c";
RSS = content: "\e09e";

Remember to change the css class in both the custom connection length and the custom css.
Making Your Negligible Footer

Presently we will make our negligible footer. On the whole, we want to dispose of the default Divi footer. To do that go to Divi > Subject Choices and look down to the Custom CSS board.

Place the accompanying piece of CSS inside:
01
02
03
04

/*Footer*/
#primary footer {
show: none;
}

At the point when you save your progressions and invigorate you site it ought to seem to be the picture underneath.

insignificant footer-1

Presently we will supplant the old footer with another worldwide footer area. To do this, initiate the visual developer on your portfolio page.

negligible footer-2

Add a solitary segment column to your default area. Then, add a text module inside.

negligible footer-3

Change the text direction to Center. What's more, add your footer credits in the substance region.

insignificant footer-4

Add a second text module underneath the first. This is where we will add our social symbols in the footer utilizing similar strategy we utilized for the essential menu.

negligible footer-5

Change the text direction to Center and compose the accompanying html in the substance segment:
01

<a style="color: #737373;" href="http://twitter.com/"><span class="divi-twitter-2"></a><a style="color: #737373;" href="http://instagram.com"></span><span class="divi-instagram-2"></span></a>

C