A great way to showcase your visual goodies: artwork, photography, theme designs or any other visual data, is to use Portfolios.
In order to set up a Portfolio you can choose a dedicated WordPress portfolio theme, which would do the job but may be a bit limited in its other functions, or you can choose a theme that has dedicated Portfolio Modules… and a whole lot more.
The Divi theme by Elegant Themes doesn’t have just one Portfolio Module, it has three… the Standard Portfolio Module, the Fullwidth Portfolio Module and the Filterable Portfolio Module.
Having three Portfolio modules allows you to add variety and additional functionality to your Portfolios and because they are Modules, you can add them anywhere you want on your pages.
Drag & Drop Page Builder
At the heart of the Divi theme is the drag and drop Divi Pagebuilder. The Builder allows you to create beautiful layouts with ease and control over every part of your site.
Before you create your Portfolios… set up your Projects
Portfolio pages display the featured images from Projects so you have to create Projects before you can create Portfolios.
When you enable Divi a ‘Projects’ menu item is added to the left hand side of your WordPress Admin Panel just below the “Comments” menu item. This allows you to create Projects as well as Posts and Pages.
You can also create Categories for your Projects, which are separate to your Post Categories and you can create your Projects using the default WordPress editor or the Divi Builder if you want to create more extensive and dynamic Projects.
This video runs you through the full process of creating Projects.
This video is part of the Divi Theme Documentation, which include videos and text documents to cut down the Divi theme learning time and get you online quickly.
Divi makes building a project fun and easy. A ‘Projects’ menu item has been added right inside of your Admin Panel so you can create projects as if you were creating a Post or Page. You also have the option to use the basic project structure, or to use the builder to create truly amazing project layouts.
The Standard Portfolio Module… grid or tiled layout
The standard Portfolio Module allows you to display your work in a gallery format as either a grid or a tiled layout.
The module can be added anywhere on your pages using the Divi Pagebuilder and this video walks you through the setup process.
The Standard Portfolio Module has a number of Settings, which you can configure as below:
- Layout – choose how to display your Projects i.e. in a grid or a full width layout.
- Post Number – the number of Projects that you wish to display per page. Don’t forget, you must have created Projects for them to show inside this Module.
- Include Categories – select the Categories that you would like to include in the Project feed. Any Project Categories that you have created will show up here.
- Title – choose whether or not you would like to display Project titles.
- Categories – choose whether or not you would like to display Project categories.
- Pagination – choose whether or not you would like to display pagination for this feed.
- Text Colour – if your portfolio is being placed onto a light background the Text Colour should be set to ‘Dark’ and vice versa.
- Admin Label – the default name for the Portfolio Module in the Divi Builder is ‘Portfolio’. This setting allows you to change that name to whatever you like for easy identification.
Stunning Projects & Portfolios
With Divi’s Portfolio Modules, you can show off your work anywhere on your site in a variety of new ways. You can even build your Project pages with the Builder!
The Fullwidth Portfolio Module… grid or carousel layout
The Fullwidth Portfolio Module works just like the normal Portfolio Module, except that it displays your Projects in an impressive fullwidth fashion in either a grid or carousel layout.
This video walks you through the setup process
The Fullwidth Portfolio Module has much the same settings as the Standard Portfolio Module but with two additional CSS settings:
- Portfolio Title – this title will be displayed above the portfolio – leave blank if you don’t want to show a title.
- Layout – choose the layout you would like to use from Grid or Carousel. “Grid” will display all of your items in a multi-column and multi-row layout. “Carousel” will display your items in a single row of tiled images that slide to reveal additional items in the list.
- Include Categories – define which Categories you would like to display. Projects from Categories that are not selected will not appear in the list of Projects.
- Title – choose whether or not the title of each Project is displayed when you hover over the Project item.
- Date – choose whether or not the publish date of each Project is displayed when you hover over the Project item.
- Text Colour – if your portfolio is being placed onto a light background the Text Colour should be set to ‘Dark’ and vice versa.
- Automatic Carousel – If you’ve chosen the carousel layout option and you would like the carousel to slide automatically, without your visitors having to click the next button, enable this option and then adjust the rotation speed below if desired.
- Automatic Carousel Speed – define how fast the carousel rotates if ‘Automatic Carousel Rotation’ option has been chosen. The higher the number, the longer the pause between each rotation. (Ex. 1000 = 1 sec)
- Admin Label – the default name for the Portfolio Module in the Divi Builder is ‘Portfolio’. This setting allows you to change that name to whatever you like for easy identification.
- CSS ID – enter a CSS ID if you want to create custom CSS styling, or to create links to particular Sections of your page.
- CSS Class – enter CSS classes if you want to create custom CSS styling. You can add multiple classes, separated with a space.
Fullwidth Portfolio
Now your portfolios take advantage of Divi’s Fullwidth Sections. Your fullwidth portfolios can be displayed in a fluid grid, or horizontal carousel.
The Filterable Portfolio Module… browse Projects by Category
The Filterable Portfolio Module allows you to display your Projects in either a Grid or Standard fashion and it includes an option to display filterable toggles for particular Categories.
When a Category is selected, the list of Projects is regenerated with a new list of Projects from the selected Category.
This video runs you through the setup and demonstrates the filter toggle feature.
The options and settings for the Filterable Portfolio Module are similar to the Standard and Fullwidth Modules, but there are a few which are specific to this Module.
- Layout – choose your portfolio layout style. “Fullwidth” displays one Project per row, “Grid” displays your Projects in a tiled grid with multiple Projects per row.
- Posts Number – choose how may Projects you would like to display before the list is paginated.
- Include Categories – select which Categories you would like to display. Projects in Categories that are not selected will not appear in the generated list of Projects.
- Title – enter a title, which will be placed above the list of Projects.
- Categories – choose whether or not you would like to display the Category below each Project in the Project meta area.
- Pagination – this option enables/disables pagination. If pagination is disabled, only a single page of Projects will be displayed for each Category.
- Text Colour – if your portfolio is being placed onto a light background the Text Colour should be set to ‘Dark’ and vice versa.
- Admin Label – this will change the label of the Module in the Builder for easy identification.
- CSS ID – enter a CSS ID if you want to create custom CSS styling, or to create links to particular sections of your page.
- CSS Class – enter CSS classes if you want to create custom CSS styling. You can add multiple classes, separated with a space.
Filtered Portfolio
With the filterable portfolio, users can view a grouping of projects from a selected category.
If you’re new to Divi check out my other Divi posts
An introduction to the Divi theme: An overview of the awesome Divi Builder
Save, import and export Divi layouts: Saving, importing and exporting Divi layouts
An introduction to Divi Sections: The creative power of Divi Sections
The Parallax effect in Divi Sections: Divi Sections and how to use the parallax effect like a pro
Divi Modules and how to use them: the complete guide to Divi Modules
Hope you find them useful when building your Divi website.
Create your Projects and Portfolios… Standard, Fullwidth or Filterable
The Divi theme Project and Portfolio Modules allow you to display your artwork throughout your pages, present them in a variety of formats and filter the results by Category.
If you think that your next website would benefit from adding Portfolios then sign up with Elegant Themes, download your copy of the Divi Pagebuilder theme and start creating your stunning Portfolios.
We offer no-questions-asked refunds to all customers within 30 days of your purchase. If you are not satisfied with our product, then simply send us an email and we will refund your purchase right away. Our goal has always been to create a happy, thriving community. If you are not thrilled with the product or are not enjoying the experience, then we have no interest in forcing you to stay an unhappy member.
Nick Roach – Elegant Themes
I hope that you enjoyed the post and that I’ve shown you the advantages of using the Divi theme to create your Portfolios.
If you have any thoughts about Divi please leave a comment and if you’d like to spread the word about this fabulous theme please use the social icons below.
Credits:
My thanks and gratitude to Elegant Themes for the graphics, videos and details of the Divi Project and Portfolio features used in this post.
