Download FREE Elegant Dark Portfolio Layout For Divi

by | Dec 8, 2020 | Freebies, Free Divi Layouts | 0 comments

It is no doubt that dark themes are everywhere and are gaining popularity every day and for good reason, they look gorgeous. In today’s post, I’ll share with you guys a beautiful portfolio layout for Divi theme. It is an elegant dark layout with unique text colors.

Let’s have a look.

free divi layout, portfolio layout

The free portfolio layout has one section and 9 rows. Each row displays a core part of any successful portfolio. The first row has the menu and the website logo, followed by your photo and name. After that comes the about-me area, the experiences you have, the skills that make you better than others in what you do.

But you must prove you are that good by adding some examples of your own work, so here comes the portfolio section and your clients’ testimonials followed by a blog section if you write any posts or tutorials.

After that, the contact form and your social media links so your potential customers can reach out to you.

You can use this layout for your own portfolio or on your clients’ websites right now for absolutely free. You are free to use it for commercial and non-commercial projects.

How to import the free portfolio layout

After you download the layout, unzip the file. You will get the layout .json file.

1- Go to your admin dashboard -> Divi -> Divi Library.

Divi Library

2- Click on “Import & Export” at the top of the page.

Import & export

3- The portability pop-up will open, click on the Import tab.

Divi portability module

4- Choose the layout.json file.

5- Click the “Import Divi Builder Layouts” button.

Wait a few seconds and the layout will be imported and the page will reload and now you can see your layout in Divi Library.

Now with the layout saved in your Divi Library, you can go and create a new page to load the layout into it.

How to give the text a gradient background

Each H2 tag or section title in this free portfolio layout has some words with beautiful gradient color. Divi itself does not support gradient colors for the text, this is why I used custom CSS in this layout.

After you import the layout, open it in Divi Builder, I added a CODE module at the bottom of the layout (under the social icons). Enable the Wireframe Mode so you can spot it.

divi code module

This code module contains all the custom CSS for the layout including the gradient colors.

gradient color in a code module

As you can see in the previous screenshot, each h2 element has a span element inside it, this span element will get these gradient colors.

For example:

highlight text code module divi builder

And this is all that you need to do, create any h2 heading on this page and wrap the part you want to highlight with the span like so: <span>Text you want to highlight here</span>

So, this is the end of this post, I hope you guys liked the layout and if you did, please, consider sharing this post with your friends and if you have any questions, please, leave a comment below.


By Abdou

My name is Abdelfatah Aboelghit, a PHP developer from Egypt and my friends call me Abdou!
Here I write and develop products about Divi Theme.

More Article


Submit a Comment

Your email address will not be published. Required fields are marked *

All Access Bundle

Get ALL current & future products for $69/year instead of $327/year

Save Now →

Download The Most Powerful WordPress Theme

Pin It on Pinterest

Share This