Divi Blog Extras – Ultimate Solution to Showcase Your Divi Projects

We all know that the first impression is the last impression and when we talk about a website this thing proves to be correct. The businesses or companies must showcase their product, past projects, and services to win the trust and attract new clients. For that purpose, a portfolio is an invaluable tool. Now you would be excited to know that you can use a Divi project to showcase a portfolio of your past works. This can be easily done using the Divi Projects and the beautiful layouts of the Divi Blog Extras plugin. You need to upload some fantastic photos of your work and a little description.

In this article, we will learn how to use the Divi Blog Extras plugin to showcase your past works as projects on your Divi websites. We will cover the following steps involved in this process.

1. Create Projects and Project categories for your work.

• Create Projects
• Create Project Categories
• Assign Project Categories

2. Use Divi Blog Extras layouts to display portfolios

• Create an archived project template using Theme Builder
• Customize your Portfolio with some awesome designs
• Create a Menu to display the Portfolio on your website

Note: Before going through this post, ensure Divi is installed on your website.

1. Create Projects and Project categories before using Divi Blog Extras

First of all, let me introduce you to Divi Projects. Divi Projects is a custom post type(CPT) in Divi that opens a way to showcase your past works as portfolios on your website. You can easily display all your magnificent work to visitors interactively using the Divi projects. In this section of the article, we will cover everything related to the projects that would be essential to display portfolios on your website.

a. Create Projects

To showcase all your work in one place on your website Divi Projects is a smart way but before doing that you need to add your past work to projects. Now let’s create some projects that will be showcased as portfolios on your Divi website.  

For that, you need to navigate to the Projects option from the dashboard of your WordPress admin section. Click on the Add New option.

Put a suitable title of the project and start editing it using the Divi builder. Before clicking on the button you can also set the featured image of the project which is going to be showcased in the portfolio. For that reason use a clear image that can justify your outstanding work on the portfolio.

Place some content using the Text module which would be displayed as a short description of your project. The text description would also be helpful to give some valuable key information about a project to the visitors. Save it after adding the text content in the Text module.

b. Create Project Categories

Now the next important thing you should do while working on Divi projects is create project categories. Project categories will be helpful for visitors to get a quick idea about your works in the portfolio section of your website and these will be displayed along with the images.

Creating project categories is very simple and easy. Go to your WordPress dashboard and hover on the Projects option. The dropdown list with categories will appear. Click on Categories.

Add New Category will immediately appear. Name your category, insert a slug, choose the parent category, and fill in some relevant description. There are some additional options for choosing the text, hover, and background color. You can also utilize these options as per your requirements. Click on the Add New Category button to save your category. After clicking on the button, your added category will appear on the right side.

In this way, you can create project categories but the question arises “How to assign them to your Divi Projects”.

c. Assign Project Categories

After creating the projects and project categories you need to assign the categories to individual projects. These categories will help group projects into separate categories. Now when you use the Divi Blog extras module to showcase your portfolio you also have the option to select projects of a particular category. Just open All Projects from your WordPress dashboard. Quick Edit any project and select the Project category you want to assign. 

You can also insert a Project tag that will be displayed in the portfolios along with the category using the Divi Blog Extras plugin. Project Tags are useful when you want to tag or indicate a particular project of the same category. For example, if we assign a category as games then racing or action can be a Project tag. Click on Update and the selected category will be assigned to that project.

2. Use Divi Blog Extras layouts to display portfolios

The portfolio section needs to be displayed on any page of your website. For that, you don’t need to create a new separate page. You can create a custom template using the theme builder to display all the portfolios in an archived form. Before going through the following steps make sure you have installed Divi Blog Extras Plugin on your website.

a. Create an archived project template using Theme Builder

Divi Theme Builder is a wonderful element offered by Divi that can be used to utilize a custom or prebuilt template anywhere on the website. There are a lot of options available for a template such as posts, archive pages blogs, etc. From these options, we would use the Projects Archive Page which would enable us to showcase your projects anywhere on the website using its custom link. Now let us go through the steps to create a custom template using the Theme builder to display all the archived projects in one place on your website.

You can also select a project category to display projects from a certain category. There is also another option to filter down the projects using the project tags. Select the project tags that you want to display on your portfolio. This gives you additional flexibility to choose what you want to display.

1. Go to the Divi Theme Builder and click on Add New Template. Choose Build New template.
   
   

   

   
   

   

   
   
2. The Template settings dialogue box will open up. This gives you the convenience of using a template for specific Divi elements such as posts, pages, archive pages, and projects. Select the Projects Archive Page and click on Create Template. it will help you to display all your projects in an archived form on your website.  
   

   

   
   
3. A new Projects Archive Page template has now been created. Left-click on the Add Custom Body section and select Build Custom Body.
   

   

   
   
4. A new blank template window for your Projects Archive page will appear. Now drop a new section and row in it. Add an H2 heading named “Portfolio” or “Our Work” using the Heading Module in Divi.
   

   

   
   
5. This is the most exciting step as we will use the Divi Blog Extras module here to display your portfolios. Add the Divi Blog Extras module and select the post type as Project. Now all your projects will be displayed as a portfolio here.
   

   

   
   
   
   You can also select a project category to display projects from a certain category. There is also another option to filter down the projects using the project tags. Select the project tags that you want to display on your portfolio. This gives you additional flexibility to choose what you want to display.

   

   
   
6. Now, you can use your creativity with the spectacular layouts and unlimited styling options offered in the Divi Blog Extras Module to create some awesome portfolio designs to give a breathtaking experience to the clients.
   

b. Customize your Portfolio with some awesome designs

Now is the time to show your creativity while crafting some magnificent designs for your portfolio using the Divi Blog Extras module. 

Divi Blog Extras offers you multiple stunning layouts that can be utilized to showcase your work portfolio. We have created some beautiful portfolio designs using the different layouts of Divi Blog Extras to showcase all your projects on your website in a wonderful way.

Design 1: Using the Box Extended Layout

Best for: Artistic websites, Interior design websites

Please follow the given steps to create the above portfolio design

1. Choose the Box Extended layout
2. Keep the Featured Image size full
3. Disable Show Author and Show Date
4. Keep Show Categories/ Terms enabled
5. Enable the Show Read More Link and edit the Read More Text as View
6. Make the title H2.
7. To maintain clear spacing between the links enter the below-mentioned CSS code in the Read More custom CSS section.
   

   margin-bottom: 10px;
   
   margin-top:30px;

Design 2: Using the Classic layout

Perfect for fashion and Event websites

Please follow the given steps to create the above portfolio design

1. Choose the Classic layout
2. Keep the Featured Image size Large
3. Modify the Read More text as Show in detail
4. Enable the Read More button and Enable the “Use custom styles for Read More Button”. Select a suitable text color and border color.
5. Enable Pick colors for category terms and select any category term background color.
6. Keep Show Categories/ Terms enabled. Disable Show Author and Show Date.
7. Enable social media icons
8. Select the category term color and category background color according to the color scheme of your website

Design 3: Using the Full Width Background layout

Perfect for Gaming websites

Please follow the given steps to create the above portfolio design

1. Choose Full width background layout
2. Featured Image position: Top
3. Enable Show excerpt and keep excerpt length 0
4. Featured image size: full
5. Disable Show Date, Show Read More Link, and Show Author
6. Enable Show Categories
7. Use Title H2 and its Font Size as18px
8. Keep Title Font Weight: Semi Bold
9. Use Box shadow spread length: -7px

Design 4: Using the Box Extended Layout

Perfect for Real Estate Websites

Please follow the given steps to create the above portfolio design

1. Choose layout: Box Extended
2. Featured Image size: Large
3. Use images of different sizes to create a masonry effect
4. Disable Show Date, Show Read More Link, and Show Author
5. Enable Show Categories
6. Enable Show Excerpt and Keep Excerpt Length 0
7. Use the H4 heading for the Title
8. Keep the Left margin 5px in 2nd column

Now, apart from these customizations, you can also try your creativity and imagination to create some stunning designs using the unlimited styling options of Divi Blog Extras. Now after creating these wonderful designs for the portfolio the next question that confuses our mind is ‘Where would this portfolio get displayed’. Keep reading this article to know further about that.

c. Create a Menu to display the Portfolio on your website

To display your portfolio on your website you can use the header menu. The header menu is the essential element that is helpful for the visitors in exploring a website. Place a menu item for the portfolio on the header menu and it would be pretty easy for the visitors to locate and view your portfolio designs from any page of your website.

Go to Appearance and click on the Menus option.

Navigate to the Custom Links. Two text fields are available there where you need to enter the URL and the Link Text. Link Text is the name of the menu item that would be displayed on the header menu. Use a suitable Link Text as per your design needs.

Now we need the URL of the project folder where all the projects of your website are saved. For that, we need to open All Projects from the Dashboard and click on the view option of any project.

Now copy the URL from your browser, paste it into the custom links text field of the Menu settings, and click on the Add to menu button.
Your Menu item will start appearing on the right-hand side Menu structure.

Congratulations you have successfully completed the whole process of adding your projects and showcasing them on your website. Just reload your website again and you will notice that the Portfolio is there on the menu. Now click on that and all your projects will get showcased on your website.

Hope you have liked this outstanding blog post where we have elaborated on the idea of using the Divi Blog Extras Module to showcase all your projects as portfolios on your Divi website. Apart from the prebuilt designs you can explore styling possibilities and color combinations to customize your portfolio the way you want.