The Divi Post Content module is a versatile and essential tool for website design. It’s highly customizable and integrates with other modules to create dynamic content in templates that use the Custom Body section.
Add The Divi Post Content Module
The Post Content module is only available in Theme Builder Templates. It dynamically displays content from other single post types, such as WordPress Posts, Pages, Projects, Woo Products, or custom post types.
Go to Divi → Theme Builder.
Create or edit a template's Custom Body area.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row to show the list of all available Divi modules.Find the Post Content module and click on it to load it. Alternatively, you can use the Search option to find it.
The Divi Post Content Module Use Cases
Display content dynamically: The Post Content module allows you to display content from any WordPress post type, such as Posts, Pages, Projects, Woo modules, or any other post type.
Create a single template to apply to all posts: Due to its dynamic nature, it can be used to create a single Theme Builder template for all published Posts.
Unify the design and layout: Setting all the design options on the Post Content module will ensure that each single post/page/custom post type will display its content in the same design and layout.
Post Content Module Settings Breakdown
Once you've added the Post Content module, the module's 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 add the module's text content, change its background styles, and more.
Background - Choose the Post Content module's background styles.
Admin Label - Choose the Post Content 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 Post Content module are in this tab.
Image - Choose the Image styles that are being displayed by the Post Content module.
Heading Text - Choose the Post Content module's title styles.
Body Text - Choose the module's body text styles.
Sizing - Choose the Post Content module's sizing.
Spacing - Choose the Post Content module's spacing.
Border - Choose the Post Content module's border styles.
Box Shadow - Choose the Post Content module's Box Shadow styles.
Filters - Choose the Post Content module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Post Content module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Post Content 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 Post Content 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 Post Content's module visibility based on different devices.
Transitions - Choose how long the Post Content's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Post Content's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Post Content 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.
