Divi CPT modules plugin contains three modules, each of which serves a specific purpose. Check the module overview guide to get an idea of what each module has to offer.
This article will describe the elements that can be used in the module and the features each element possesses.
Before adding an element, please make sure you have the post type selected. You can select post types from here –
CPT Module > Content Tab > CPT settings > Post type> Select a post type.
To add an element, navigate to
CPT module > Content > Plus Icon (Add New Item)
After clicking add a new item, you will be navigated to the child item, where you can select the element type from the drop-down list.
Here are the elements you can select from–
- Image
- Title
- Content
- Read More Button
- Author
- Publish Date
- Taxonomy
- Custom Text
- Divider
- ACF Fields (Conditional)
Element Type- Image
Once the image is selected, the visual builder will show all your featured images.
A new feature will also be revealed named “Outside inner wrapper.” This option will allow you to put the image outside the inner wrapper.
Overlay & Scale
Overlay
Turning ON the overlay will allow you to add a color overlay over your image on hover. You can add a gradient, solid, or other color combination here.
If you would like to add an icon over your image overlay. Turn ON the “Use Icon” option.
This will allow you to select the icon of your choice and an option to choose the color and size for the icon.
There are ten different animation options to choose from for the icon reveal.
Scale
Select the image scale type if you would like to show image scale animation on hover. There are six animations to choose from.
Image Settings
Image settings allow you to set different resolutions for your image. You will find three options here-
- 400X250
- 1080X675
- & Original
You will find this setting-
CPT module > Content > Plus Icon (Add New Item) > Element Type > Image> Design Tab > Image Settings.
If your image is smaller, you can turn on the “Force Full Width” feature to make them the same size.
Note: if your image size is larger than the selected it will decrease the resolution of the image and will show a lighter version. Dimension of the images controlled from the column structure and proportionally. For example, if You are using three columns without any space in between and your row size is 1080px, then the image size will be 33.33% or 359.99px.
Other Features
You will find those under the design tab if you want to change the size, add some spacing, or any color filter. There is also an advanced tab for customization options like any other divi module.
Element Type- Title
Now, we have our second element. If you would like to add a second element. You need to navigate to the same path as the image element.
If you are inside another element, you need to click the back icon (top left corner), click “add new item” and select the desired element.
Once you select the title as your element, the “Title Tag” option appears immediately after the element type.
Title tag: Here is a drop-down list of HTML tags.
Now, you can use background or other common features that will be applied to the item only. We will explain those as a whole afterward. Now, let’s move on to the dedicated features.
Alignment
Change the alignment of your title vertically in four different positions. You will find this feature-
CPT module > Content > Plus Icon (Add New Item) > Element Type > Title > Design Tab > Alignment.
Body Text
Here, you have the control to change the typography for your title. You can change the font, weight, font style color, and sizing. All the typography features you usually see in Divi’s text module are available here. This setting is located immediately after the alignment option in the design tab.
Other Features
You can change those from here if you want to add custom spacing, border, shadow, or any other design option. Also, there is an advanced tab for each element if you want to add a class, code, or other advanced features.
Element Type- Content
Here, our content element will eventually show the post excerpt or content.
Once the content type is selected as an element, you will find some options immediately afterward.
Post content: You have two options to choose from. One is “Show Content” which will show all the content from the post. Another one is “show excerpt.” This will show the first couple of lines from the content.
Use Post Excerpt: If you have a post excerpt and want to show that. Then turn this option ON.
Excerpt Length: Set the length from here. By default, it’s 270 Characters.
If you want to add background color, you can do this using the background option.
Alignment
Set the alignment for the content from-
CPT module > Content > Plus Icon (Add New Item) > Element Type > Content > Design Tab > Alignment.
Body Text
You can control how your content looks by tweaking its typography. This includes the font, boldness, style, color, size, etc.
Other Features
Unlike any other element, this one has other features like spacing, sizing, border, shadow, and many more.
Element Type- Button
The next element we have here is the button. Once a button is added as an element. You will find the Read More Text field option.
Read More Text: You can set a custom text for the button here.
Icon Setting
- Use Icon: If you want to add an icon inline with button text, turn the “Use Icon” option ON. This will open some other options related to Icons.
- Icon: List of icons to choose from.
- Icon Color: Set the color for the icon.
- Icon Size: Set the size of an icon.
- Caution: Link by default set to each post. So you don’t need to put it.
Background
Each element has a background color option, but for the button, it’s crucial. You can set solid color, gradient, image, and others for the button from here.
By default, the button is full-width.
Now, let’s move to the design tab.
Alignment
This option allows you to align the content or button text to horizontal positions.
Body Text
This option will design the text of your button. You get the same settings like title or content.
Spacing
Set spacing all around your item or element. We have additional margin padding for this particular element, excluding the regular margin padding. You can set the button’s margin or padding also margin for the icon.
Sizing
Sizing is available for each element, but for the button is essential, especially when you want smaller buttons. From here, you can define the width of your button and align it according to your needs.
Other Features
All the other features here can also play a big part in designing a button. So check those out if it’s required for you.
Element Type- Author
You can add author information using the element type called “Author.” Once added, this will show the author’s name in your post. Here are some associate settings that come with it.
- Outside Inner Wrapper: You can put this element outside the wrapper by turning ON this feature. This will put the image on top of everything. Now, you move this over the image using the position option.
- Show Author Image: To make visible the author image, you can turn ON this feature.
- Author Image Size: Change the size of the author image from predefined sizes.
- Hide the Author Text: Hide the author’s name and show only the image.
- Display: You can set the display option for the author element. This can be specified inline, block, or inline-block.
- Align: Change the position to the right using the align option. It’s only available while the display condition is inline-block or inline only.
Icon Setting
Use Icon: If you want to add an icon inline with the author element, turn the “Use Icon” option ON. This will open some other options related to Icons.
- Icon: List of icons to choose from.
- Icon Color: Set the color for the icon.
- Icon Size: Set the size of an icon.
- Image: If you want to use an image instead of an icon. You can upload a shot here.
- Image Width: Set the width for the image.
- Vertical Align: Set the vertical alignment for the image in three different positions.
Here, background plays the same role as any other element.
Let’s move on to the style option-
Alignment
While the display condition is set to block, only then alignment will work.
Body Text
This option will design the text of your author’s name. You get the same settings like title or content.
Spacing
This author’s element has a regular margin & padding. It also has an author image margin and icon margin.
Other Features
Unlike any element, this one also has all the features like sizing, border, box-shadow, advanced options, etc.
Element Type- Publish Date
The next element we have is called “Published Date,” which shows the date the post was published.
Some features that come with it exclusively-
- Outside Inner Wrapper: Set this element to the inner wrapper, allowing it to move anywhere within the post.
- Date format: Set the date format using the standard WordPress date formatting option.
- Display: Set the display option for the date element. This can be set inline, block, or inline-block.
- Align: Change the date position to the right using the align option. It’s only available while the display condition is inline-block or inline only.
Icon Setting
- Use Icon: To use the icon before the date turn this ON. and it will allow some more settings like-
- Icon: List of icons to choose from.
- Icon Color: Set the color for the icon.
- Icon Size: Set the size of an icon.
- Image: You have the option to add an image as an icon. (Keep “Use Icon” OFF)
- Image Width: Set the width for the image.
- Vertical Align: Set the vertical alignment for the image in three different positions.
We have some other features like background, which work the same as any other element.
Let’s move on to the design tab for some styling options-
Alignment, Body Text, and Spacing
All of the mentioned features act the same way the other author elements work. The only thing that needs to be added in the spacing option is the margin option for the author image, which makes sense.
Other Features
Unlike any element, this one also has all the features like sizing, border, box-shadow, advanced options, etc.
Element Type- Taxonomy
Taxonomy is one of the most used elements for post types. After adding this element to your item list, this will not show anything because it will require you to select post type again.
Once the post type is selected, you will find another option: Select taxonomy. You can select the taxonomy from the dropdown list.
Afterward, things will go straightforward like any other element, like date or author.
You can change things like element position to the outside wrapper, display type, alignment, icon settings, etc.
The same goes for the design tab. The body text option is for customizing the typography option.
Element Type- Custom Text
The Next element we have is the custom text option. Once added, you will see a custom text field appear. You can type any text here, and this text will be shown on all selected posts. This feature is convenient if you want to show something like this-
- By [Author Element]
- On [Pubished date]
The rest of the setting for this element is the same as any other element. One note, though: this doesn’t have an icon option.
Element Type- Icon
Another exciting element we do offer is the icon. You can set custom icons anywhere you want. You can place this before the custom text. You can use this as a separator between taxonomy. The use case is enormous.
After you add this element, you need to move on to the icon settings, where you can choose an image as your icon or turn on the icon option.
And the rest of the settings are the same.
Element Type- Divider
Our last element of the list is the divider. You add this the same way you add any other elements. This will add a new divider line feature option afterward.
Divider line
Inside here, you will find all the divider line settings.
- Divider Line Height: Set the divider line width.
- Divi Color and settings: Set the color. You can make a gradient as well.
Spacing and Sizing
Spacing and sizing are crucial parts of this element. Adding spacing in between, you can use the spacing option, and if you need to resize this, you can use the sizing option.
Other Features
Unlike other elements, you have borders, shadow transforms, and more for your design customization.
Element Type- ACF Fields
This conditional field depends on the “Advanced Custom Fields ” plugin by WP Engine. You can download the plugin from the WordPress repository.
This plugin allows you to create custom fields for your post type, and we support some basic field types from this particular plugin.
So, if you create some fields with the help of this plugin, you can showcase those fields with our modules.
Adding this element is the same as our module’s other element.
Once added, you must select the post type again to match the parent post type.
- Select ACF Field: Here, you will see a list of all the fields you created.
- Before Text: You can add a text before the field value.
- After Text: You can add a text after the field value.
- Display: Set the elements display condition from the dropdown list.
- Alignment: Set the alignment for the element to the right, or keep this as it is.
Settings for ACF
Here are some customization options for ACF.
- Link Text: If you use a URL field from ACF, it usually shows the URL. Here, you can change this by providing an anchor text.
- Email: Using the Email field from ACF will show the email address. We can set a text from here.
- Image Max-Width: If using an image field, you can adjust the image width from here.
The rest of the settings, like icon settings or designing options from the design tab, are identical to any other element. You will find another option to customize the before and after the text.
Those are all the elements you will find on each module this plugin has.
