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.
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.
2- Click on “Import & Export” at the top of the page.
3- The portability pop-up will open, click on the Import tab.
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.
This code module contains all the custom CSS for the layout including the gradient colors.
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:
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.
Peace.
0 Comments