The Divi Portfolio Module showcases your work by displaying WordPress projects in a visually appealing layout, ideal for Portfolio or Project pages.
Add The Divi Portfolio Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row to open the Divi Module Library. The library contains all the modules included with the Divi theme.Find the Portfolio module and click on it to load the module.
The module library is also searchable. To access it, type the module name you want in the search bar at the top.
{Gif here}
The Divi Portfolio Module Use Cases
Presenting Creative Work: Display design, photography, or video projects in a clean grid layout to showcase your skills and attract potential clients.
Building a Case Study Gallery: Organize detailed project case studies by category, allowing users to explore your portfolio based on their interests.
Highlighting Client Projects: Feature completed client work with descriptions and images to demonstrate your expertise and results.
Portfolio Module Settings Breakdown
Once you've added the Portfolio module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab allows you to choose the number of projects displayed per page, which project category to display them from, and more.
Content - Choose how many Projects the module will display and from which Project Categories.
Elements - Enable or Disable the visibility of the Project's title, Categories, and Pagination.
Link - Make the entire Portfolio module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Portfolio module's background styles.
Admin Label - Choose the Portfolio module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Portfolio module are in this tab.
Layout - Choose the Portfolio module's layout: Fullwidth (Default) or Grid layout.
Image - Choose the styles applied to each project's Featured Image.
Text - Choose the overall Portfolio module's text styles for this module.
Title Text - Choose the Portfolio module's title styles.
Meta Text - Choose the module's body text styles.
Pagination Text - Choose the module's pagination text styles.
Sizing - Choose the Portfolio module's sizing.
Spacing - Choose the Portfolio module's spacing.
Border - Choose the Portfolio module's border styles.
Box Shadow - Choose the Portfolio module's Box Shadow styles.
Filters - Choose the Portfolio module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Portfolio module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Portfolio module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Portfolio module, enabling advanced styling that perfectly aligns with your vision.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Portfolio's module visibility based on different devices.
Transitions - Choose how long Portfolio's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Portfolio's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Portfolio module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
