Getting started
Show your project, portfolio, or other custom post types with an informative & attractive look with the Divi custom post types grid module by DiviFlash. It consists of many exclusive features to place the CPT over an artistic appearance. The feature lists are split into three different categories. Features like child items, CPT setting, item background, alignment, layout, item inner & outer wrapper, and pagination styler make the module exceptional. However, today we will go through a detailed demonstration of all the feature capabilities and work processes.
Note: first of all, you need to select the post type and at least one element to display the module.
Child Item
Before jumping into the global feature of the CPT grid module, let’s understand all the child items first placed in the global content tab. The content tab of the divi CPT grid module contains 10 different child items with several stylish features.
Those are-
Image
Title
Content
Read More Button
Author
Publish Date
Taxonomy
Custom Text
Divider
ACF Fields ( Conditional )
All these features of the child items are divided into three categories, Content, Design & Advanced tabs.
Child Item Content Tab
The Content tab of the child items brings the essential features to start creating designs from scratch. Remember, the structure of the content tab properties varies depending on each item design requisition individually. So, without further ado, let’s get started to know each item’s features one by one.
To get started, you need to click on the plus icon and select element types from the list of 10. Each element comes with some unique features, which are described below. Some common parts were told afterward.
Element Type – Image
Here you need to select the image item to pull the featured images for every CPT post. A new feature will show after setting type as image, allowing you to put the image outside the inner wrapper.
Overlay & Scale
The overlay & scale feature lets you implement an overlay effect to the CPT image with two colors, the primary & secondary. Also, it defines the direction of the overlay gradient color. You can also add an icon while giving an overlay effect to the image. Nevertheless, the image scale feature implements various scale animation effects for the CPT image.
Element Type – Title
First, you need to select the title as a child item under the element feature. After that, the title element feature allows defining the heading tag of the CTP post title.
Element Type – Content
The content element feature gives the authorization to show post excerpt by activating the Use Post Excerpt setting. Also, the number of excerpt characters can be ordered with this setting. And don’t forget you have an option to determine whether a proportion of the main content or the excerpt would show for the CPT post.
Element Type – Read More Button
First, you need to select the read more button under the element feature as a child item. The read more button helps the designer to provide a custom name to the Read More Button based on the design’s requirement.
Icon Settings
The Icon settings allows you to add an image or icon after the read more button. Also, this feature can play over the icon size & color.
Element Type – Author
You can take the author element to the outside of the inner wrapper under the element feature. Also, it can define the author’s image size and receive facilities to hide the author’s text. Nevertheless, this setting allows displaying the CPT author box in three different ways, the inline-block, inline & block.
Icon Settings
The icon settings are introduced here for the designer to place an image or icon before the author’s box. You can precisely change the icon and image size. Remember, you can use one of them.
Element Type – Publish Date
The element feature is responsible for situating the publish date outside the inner wrapping and changing its exhibition format. Moreover, this setting allows displaying the publish date under three different styles, inline-block, inline & block.
Icon Settings
The icon settings are introduced here for the designer to place an image or icon before the publish date. You can precisely change the icon and image size. Remember, you can use one of them in this regard.
Element Type – Taxonomy
The element setting lets you call the custom post types based on taxonomies like category & tag of the CPT. Moreover, you can place the taxonomies outside the inner wrapper and display them among three different display styles.
Icon Settings
The icon settings are introduced here to place an image or icon before the taxonomy. You can precisely change the icon and image size. Remember, you can use one of them in this regard.
Element Type – Custom Text
The element setting allows you to take the item outside the inner wrapper. Also, you can add custom text to the module with this element. Nevertheless, this setting enables displaying the custom text under three different styles, the inline-block, inline & block.
Element Type – Divider
The divider child item of the divi CPT grid module has broad functionalities. This feature allows changing the divider height, primary & secondary color, and color direction. Moreover, the starting & ending point of the divider can be determined here.
Element Type – ACF Fields
ACF Field is a child item added for those who use the ACF plugin to show more information through the CPT grid module. Point to remark, this item is not for you until you install the ACF plugin to your divi website. Also, you have to go to the DiviFlash dashboard and activate the ACF support feature.
- Element
First, you need to define the post types for the ACF field under the element setting. However, the global post types and ACF post types should be the same to work perfectly. Also, you can add custom texts before & after the ACF fields. Nevertheless, the ACF field can be displayed in three different styles, inline-block, inline & block.
- Setting For ACF
Under the ACF setting, you can provide a custom text, Click Here Or Contact Us, for the link and email added in the ACF fields. However, if you apply an image inside the custom field, you can adjust the image size in this feature.
- Icon Settings
The icon settings are introduced here to place an image or icon before the ACF fields. You can precisely change the alignment and size of the image. Also, you get the privilege to modify the icon color & size accordingly. Remember, you can use whether the image or icon at a time.
Note: every individual child item can be used multiple times if it’s necessary for the design.
Common Features of Content Tab
The changes of the content tab based on child items have been explained above. Here, we will discuss the standard features available for every child item.
Background
The background features of the child Items have multiple attributes to apply for a better layout. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the entire item.
Admin Label
Admin Label of child item provides the opportunity to modify the item name as you wanted. So, it doesn’t have to be the child item’s actual name that generally shows on the wireframe view.
Child Item Design Tab
The design tab is responsible for embellishing all the child items with a gripping look. This tab contains many supportive features like image setting, alignment, body-text, before & after text, spacing, sizing, border, box-shadow, and more. So, let’s discover how all these features help you design promptly and creatively.
Alignment
The alignment feature of the design tab allows you to play and define the suitable alignment for the child item.
Image Setting
The image setting of the design tab has an intention to compress the image into different sizes. Besides that, you get the opportunity to activate the force full-width attribute for the image. This feature is only available for the image item.
Body-Text
Under this feature, you can style the text font, alignment, weight, style, color, size, letter spacing, and line-height of an element that contain text ingredient. Moreover, you get the text-shadow effect under this feature.
Before & After Text
The before & after text feature modifies the before & after text font, weight, and color. Further, you can control text size, letter spacing & line-height, and different text-shadow effects. However, this feature only works with ACF fields that contain before-after texts.
Spacing
You get the facility to provide the margin & padding to all the elements under the spacing feature. However, the spacing options (Icon) vary depending on the element types.
Sizing
As a designer, you would love to control the child item’s alignment, width, and height, right? Here, the sizing feature stands in your favor to increase or decrease the item width and height. Even you can set a min or max-height & width for the item.
Border
The Border feature of the child item can provide a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it.
Box-shadow
This Box shadow affects the entire child item. This feature consists of distinct shadow effect styles with all the necessary settings.
Filter
The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for a particular child item. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to the item. So, increase or decrease the value of these effects as you want them to your design.
Note: This feature applies to each child item separately, consisting of an image or an image ingredient.
Transform
The transform feature of the child item design tab provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your items will give you better control over the design.
Child Item Advanced Tab
All you want to achieve is possible under the Content and Design tab, so take advantage as much as you can. However, the Child Item Advanced tab has an innovative intention to create something extraordinary for items. Here, designers can precisely play with each element added to the object by implementing Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.
Note: All the features and effects you get here apply individually to each child item of the divi CPT grid module.
Global Features of Divi CPT Grid Module
Now it’s time to discover the design procedure of the divi CPT grid global features. The global features should be in your concern that they impact the entire module at once. like any other divi module, the structure of the divi CPT grid module global features is divided into three categories,
+ Content Option
+ Design Option
+ Advanced Option
Divi CPT Grid Module Content Tab
The content tab is counted as the pillar of the CPT grid module. It has the power to build a CPT grid from scratch. Features like CTP setting & item background helps to organize and enhance the beauty of the module. However, a few supportive features are available in the content tab to acquire a premium design. Let take a look at all these features with a detailed demonstration.
CPT Setting
The CPT setting is an imperative feature in the content tab. It carries all the pro features deployed to determine several components of the module.
Post Type
Under the post type, you will find all the CPT you created for your website. So, you can call a specific type of post that you want to present under the module.
Post Count
The post count attribute of the CPT setting determines the number of posts displayed on the viewport. So, the rest of the posts will be displayed accordingly on the next page. Finally, clicking over the pagination button will take you to the next page.
Order By
If you select the default option of the Display Post By feature, you can display CPT posts under three matrics; the newest to oldest, oldest to most recent, or randomly.
Display Post By
On the other hand, select the Display post by taxonomy if you conceder showing posts based on different taxonomy like category & tag.
Post Offset Number
The post offset number is a crucial feature considering a few designing prospects. Under this attribute, you can define a numeric value for which CPT posts would be left behind from the first position on the viewport. To be specific, when you seek to hide the first 2 or 3 posts from the viewport, you can provide that numeric value as a post offset number.
Show Pagination
Activating the show pagination feature of the module brings pagination older & next buttons with custom text facility. In addition, you can call posts based on their numeric values by activating the Use Number Pagination attribute.
Use Image As Background
Activating the Use Image As Background feature brings the post featured image as the background of that post. Consider removing the image element from the module if you use this feature.
Item Background
The item background feature of the divi CPT grid module decorates the background of each post at a time. Here, you can implement new color, gradient & image as the post background.
Background
The background features of the Content tab have multiple attributes to apply for a better layout view. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the entire module.
Admin Label
Admin Label of the divi CPT grid module provides the opportunity to modify the module name as you want. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi CPT Grid Module Design Tab
The design tab of the CPT grid module conveys the responsivity to style the module with a great look. It has several top-notch features such as alignment, layout, item outer & inner wrapper, pagination button styles, active pagination number, and more. Now, it’s time to explore all the feature’s design abilities & possibilities in detail.
Alignment
The Alignment feature of the divi CPT grid module is deployed to make alignment for the entire container. This feature lets you create an alignment for every element in the module with one click.
Layout
Under the layout feature, you can apply two different layout models for the CPT posts, the grid & masonry layouts. Moreover, you can display up to 5 columns in the viewport at a time. Finally, you can apply a compatible space between columns and make each column’s height equal for the grid layout.
Item Outer Wrapper
This feature is applicable for the child items taken outside of the inner wrapper. It adds a border coroner rounding effect to the items placed outside the wrapper. Also, you can modify the wrapper border style, width & color over several shadow effects.
Item Inner Wrapper
Every customizing feature is included in the Item Outer Wrapper, also available for the Item Inner Wrapper setting. But there is a big difference between these two features; the inner wrapper adds a border to the child items taken inside the wrapper, while the outer wrapper does the opposite.
Pagination Button Styles
This feature allows changing the alignment, next & previous icon, and background of the pagination button. Also, it defines the pagination button font weight, style, alignment & color, text size, line height & letter spacing alongside text-shadow effects. You can also modify the button border style, width & color with corner rounding & box-shadow effects.
Active Pagination Number
Under the active pagination number attribute, you achieve all the customizing properties available in the pagination button style attribute. Remember, this feature affects the active page number. Let me clarify when you click on the next page, the existing page numeric value lost the active style, and the next one got it.
Sizing
As a designer, you would love to control the alignment, width, and height of the divi CPT grid module, right? Here, the sizing feature stands in your favor to increase or decrease the module width and height. Even, you can set a min or max-height & width for the module.
Spacing
The spacing feature provides the privilege to apply margin & padding over the entire container, item inner wrapper, and module pagination. Further, it implements padding over the blog item’s outer wrapper. First, however, you get the general margin and padding for the entire module.
Transform
The transform feature of the divi CPT grid module provides five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions gives you better control over the section.
Animation
Animation setting exists in all the Divi modules works as a default feature. It has seven different effects and other options to adjust the beauty of the animated section.
Divi CPT Grid Module Advanced Tab
The greatness you seek to bring in your design is possible under the content and design tab. However, the advanced tab opens the door for developers to have excellent control over the CPT grid module. Under the advanced tab, you can precisely play with each module element by implementing CSS ID & Classes and other Custom CSS code. Further, the visibility, transitions, position, and scroll effects settings are included to work fluently.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or style the module.
CSS Class: Assign any CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
Custom CSS
The Custom CSS section has three distinct CSS implementing areas in the Divi CPT grid module. You have access to all the areas to write down any CSS Code and target any particular location.
Visibility
The visibility option of the advanced setting offers designers to conceal the CPT grid module on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Position
Here you can take complete control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you want to provide a scroll effect to your module, you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other Divi module.
NOTE:
Mobile: Any setting with a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
Find the breakdown of all the features available on the divi CPT grid module. Then, understand the module well and utilize this to its optimal.
