Divi Blog Extras – Ultimate Solution to Showcase Your Divi Projects

Nov 24, 2023 | Divi Resources

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.

2. Use Divi Blog Extras layouts to display portfolios

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.

divi create projects

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.

divi create projects

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.

divi create projects

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.

divi create project 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.

divi create projects

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. 

divi assign project categories

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.

divi create projects

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.


    divi blog display portfolio

  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.  
    divi blog display portfolio

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

  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.
    divi blog display portfolio

  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.
    divi blog display portfolio

  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

divi blog extras craft portfolio

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;
divi blog extra settings
divi blog extra settings
divi blog extra settings
divi blog extra settings
divi blog extra settings

Design 2: Using the Classic layout

Perfect for fashion and Event websites

divi blog extras wedding portfolio

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
divi blog extra settings
divi blog extra settings
divi blog extra settings
divi blog extra settings
divi blog extra settings
Design 3: Using the Full Width Background layout

Perfect for Gaming websites

divi blog extras games portfolio

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
divi blog extra settings
divi blog extra settings
divi blog extra settings
divi blog extra settings
divi blog extra settings
Design 4: Using the Box Extended Layout

Perfect for Real Estate Websites

divi blog extras real estate portfolio

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
divi blog extras settings
divi blog extras settings
divi blog extras settings
divi blog extras settings
divi blog extras settings
divi blog extras settings

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.

divi blog extras create menus

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.

divi blog extras create menus

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.

divi blog extras create menus

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.

divi blog extras create menus
divi blog extras create menus

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.

divi blog extras showcase portfolio

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.  

Posted By:
Jagmohan
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Create a Member Exclusive Blog Using Divi Conditions

How to Create a Member Exclusive Blog Using Divi Conditions

If you are a content creator, you understand the importance of providing valuable information to the audience. What will you do, if you want to share your valuable content with the registered members only? In that case, you can create a member-exclusive blog with the...

Why You Should Use Prebuilt Theme for a Website | 7 Key Benefits

Why You Should Use Prebuilt Theme for a Website | 7 Key Benefits

For one who wants to build websites easily and quickly, there's always a battle of choosing to work with developers or do it on their own. One creates a loop of hundreds of email exchanges, so another saves you from it — just you and your design ideas.  But how...

Divi Agency Child Theme to Present Your Enterprise

Divi Agency Child Theme to Present Your Enterprise

When you are using Divi to create your agency website on WordPress, you need a Divi agency child theme. This is a perfect solution with 5 modern Divi agency layouts to introduce your services, portfolio, contact, and other essential things about your company. Display...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts