TechnoCrackers, Author at TechnoCrackers

November 27, 2025December 11, 2025

How to Display Specific Category-Wise Post Listings in Divi Machine Using the Archive Loop

Learn how to create dynamic Loop Grid and Loop List layouts for your Custom Post Types using the Divi Machine plugin. This guide walks you through building custom archive templates, styling your loops, and enabling powerful features like pagination, “Load More,” or infinite scroll. Perfect for Divi users who want to display CPT content in a modern, flexible, and fully dynamic way—without writing custom code.

This guide walks you through a clean, step-by-step process to fetch and display CPT content in Loop Grid or Loop List Using Divi Machine with Pagination or Load More.

What You Need

Before getting started, make sure you have:

– Divi Theme

– Divi Machine plugin

– A Custom Post Type (CPT)

Step 1: Create Your Custom Post Type (CPT)

You can create a CPT with CPT UI plugin or by using custom code.

Example: Projects

Step 2: Add Projects

Go to: Projects → Add New

Add title, description, featured image then publish post.

Step 3: Create one Projects listing in Divi Library

Go to: Divi → Divi Library → Add New Layout

=> Add Layout name

=> Select Layout type

=> Then edit that layout in divi library.

=> Please include the Post Title module, Image module, and Post Content module in the listing layout, and specify which modules need to be added in the listing.

Step 4: Build Archive CPT Template in Divi

Go to: Divi → Theme Builder → Add Template → Assign to Projects.

Click Edit with Divi.

Add Post Title and Post Content using Divi Machine modules.
Design your layout as needed.

Step 5: Then Archive CPT Template

=> Add divi machine archive loop module

Then, in the Divi Archive Loop, select your post type (e.g., Projects) and choose the template you previously created in the Divi Library (e.g., Project List).

Next, go to the Archive Loop Module → Loop Options → Terms tab.

In this section, select the Taxonomy you created for your post type.

After selecting the taxonomy, enter your category (term) name in the Include Custom Taxonomy Values field. You can simply copy and paste the term name exactly as it appears in your taxonomy.

Then go to archive module Grid option and select grid option and select grid column.

If you select more than one in grid column it show grid view and select one it show list view.

Then, go to the Element Options in the Archive Loop module to enable Load More or Pagination.

Step 6: Save and Test

Open your Archive page to preview the results.

All posts displayed using the layout you configured, with Pagination or the Load More button working as expected.

Conclusion

Displaying category-wise post listings using the Divi Machine Archive Loop is one of the most effective ways to organize content and improve user experience on your WordPress website. With the right setup, you can build dynamic layouts that load smoothly, boost engagement, and keep your pages easy to manage—even as your content grows.

If you need help implementing this on your site or want a more advanced, fully customized WordPress solution, our team at TechnoCrackers is here to assist.

Ready to optimize your website’s functionality?

Book a Free Consultation and let our experts help you build a faster, smarter, and more scalable WordPress experience.

November 26, 2025December 10, 2025

Make Search Using Title and Meta Value in Crocoblock with jet smart filters

Implementing an efficient search system is one of the best ways to improve user experience and content accessibility on your WordPress website. If you’re using Crocoblock, you can easily build a search filter that scans post titles and returns accurate results—without writing complex code.

With the right combination of JetSmartFilters, JetEngine, and Elementor, you can create a clean, user-friendly search functionality tailored to your website’s needs.

This guide walks you through each step—from plugin setup to query configuration—so you can successfully implement a title-based search on any page, archive, or listing.

Step 1 — Install and Activate Required Plugins

Make sure the following plugins are installed and active:

Elementor Pro — required for theme builder & dynamic layouts
JetEngine — creates custom post types, custom fields & listings
JetSmartFilters — enables advanced search and filtering options

Once installed, confirm that JetEngine Listings are enabled in Crocoblock settings.

After installing the plugin, you can create a meta box using JetEngine and add meta fields to any post type you want.

Based on the meta field ID from that meta box, we can then create a search query using the meta ID.

Step 2: Create a Search Filter

Go to JetSmartFilter: Navigate to the WordPress Dashboard and go to Smart Filtersunder the JetPlugins section.
Add New Filter: Click on “Add New” to create a new filter.
Choose Filter Type: Select “Search” as the filter type to enable a search bar for entering keywords.
Choose Search by Custom Field: Set the search type to “By Custom Field (from Query Variable).”
Set Query Variable: In the “Query Variable” field, enter a custom variable name, such as p-title, artist_name. This variable will hold the search term.
Assign the Filter to Content: Under the “Filter for” section, select the post type or taxonomy you want to filter.
Save Changes: Click “Publish” to save your new filter.

Step 3: Add Created Search Filter in Archive Page

Open Your Page in Elementor or Gutenberg: Navigate to the page where the filter will be used.
Add the Smart Filter Widget: Drag and drop the Smart Filter widget onto the page.
Link the Filter to the Grid: Connect the filter to the Listing Grid or content display you want to filter.
Style the Filter: Customize the appearance of the filter to match your website’s design.

By leveraging JetSmart Filters and configuring query variables, you can easily implement a powerful title-based search feature on your WordPress site. This setup enhances content discoverability, enabling users to quickly find relevant posts or products. With proper styling and configuration, this feature not only improves functionality but also aligns with your website’s design for a cohesive user experience.

Using JetSmartFilters with Crocoblock to search by title and meta values can significantly improve your site’s usability and accuracy. If you need help implementing advanced WordPress features or custom development, Book a Free Consultation.

November 25, 2025December 10, 2025

How to Build a Custom Mega Menu in Divi Without a Plugin

Mega menus are a powerful way to organize large navigation structures in a clean, user-friendly way. Whether you’re managing an eCommerce website, an agency site, or a multi-service business, a mega menu helps users quickly access categories, services, or content without digging through multiple dropdown levels.

If you’re using the Divi Theme, here’s the best part — you don’t need a plugin to build a mega menu. Divi gives you enough flexibility to design a fully custom, responsive mega menu using its layout builder, CSS, and a small script.

In this guide, you’ll learn step-by-step how to build a fully functional mega menu in Divi without installing any external plugin.

Why Create a Custom Mega Menu?

Mega menus are useful when your site has layered or complex navigation such as:

Ecommerce stores with multiple product categories
Digital agencies showcasing services, portfolios, and resources
Learning platforms (LMS) with multiple courses
Corporate websites with deep service architecture

Benefits:

Improved user experience (UX)
Higher navigation engagement
Better structure for SEO and user flow
No extra plugins → faster performance

What You’ll Need

Before starting, make sure you have:

Divi Theme installed and activated
Basic understanding of Divi Builder and CSS

Step 1: Create Your Main Menu & Assign Trigger Classes

Go to: Dashboard → Appearance → Menus

Create or update your main navigation menu and add a parent menu item that will open the mega menu (example: Services, Products, Solutions, etc.)

Example menu structure:

Home
About Us
Mega Menu
Contact Us

Now click the parent item (Mega Menu) and add this class:

mega-trigger menu-item-has-children

Note: If you don’t see the CSS class field, enable it from Screen Options → CSS Classes (top-right corner of the screen).

This tells Divi that this item will control the mega menu display.

Step 2: Create Your Global Header

Next, go to: Dashboard → Divi → Theme Builder

Create a Global Header
Open it in Divi Builder
Add your logo, menu, and any design elements you’d like

This will act as your site’s main navigation area.

Step 3: Design Your Mega Menu Layout

Now create the mega menu area:

Add a new Section below your main menu inside the same header layout.
Give this section the following ID: mega-menu

Inside this section, design your mega menu content — for example:

Column 1: Icons + Title
Column 2: Menu Links
Column 3: Featured Posts + CTA Button

Useful modules:

💠 Blurb Module (icons + title)
🔗 Menu Module (show submenu)
🖼 Image or Icon module
🚀 Button module for CTA

Tip: Keep spacing consistent and avoid too many elements. Clean layout = better usability.

Step 4: Add CSS & JavaScript

Now we’ll enable hover functionality.

Add CSS:

Go to: Dashboard → Divi → Theme Options → Custom CSS

Paste this under Custom CSS

header {
    z-index: 9;
    position: relative;
}

#mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9999;
    opacity: 0;
    transition: 0.3s all ease;
    pointer-events: none;
}

#mega-menu.active {
    opacity: 1;
    pointer-events: all;
}

Add JavaScript

Now go to: Dashboard → Divi → Theme Options → Integration

Paste this under Add code to the <head> of your blog:

<script>
    jQuery(document).ready(function($) {
        $('.mega-trigger, #mega-menu').hover(function() {
            $('#mega-menu').addClass('active');
        },
        function() {
            $('#mega-menu').removeClass('active');
        });
    });
</script>

This script controls the hover behavior so the mega menu appears only when the user interacts with the designated menu item.

Step 5: Test Your Mega Menu

Now visit your website and hover over the trigger menu item (e.g., Mega Menu).

Test the following:

Appears on hover
Disappears when not hovered
Looks good on desktop

Conclusion

Building a custom mega menu in Divi without a plugin gives you full creative control while keeping your website lightweight and fast. With just a few steps — layout design, basic CSS, and a small script — you can create a professional, dynamic mega menu suitable for any business or website style.

Whether you’re designing a product catalog or showcasing services, a mega menu improves navigation flow and enhances user experience — making your website feel more polished and premium.

A well-designed mega menu can improve user flow, showcase services clearly, and elevate your entire WordPress website. Want a high-performing site built the right way? Book a Free Strategy Call.

November 25, 2025December 11, 2025

How to Create a Timeline in Divi Without Any Plugin

Timelines are a great way to visually display progress, project stages, process steps, achievements, or company milestones. They help users quickly understand the flow of information, and they make your content more engaging.

If you’re using the Divi Theme, you don’t need any third-party plugin to create a stylish vertical timeline. With Divi’s layout controls, animation effects, and positioning tools, you can build a fully custom timeline in just a few steps.

In this tutorial, you’ll learn how to create a responsive, animated timeline layout in Divi — from scratch — using only Divi modules and a little styling.

Step-by-Step Guide

Step 1: Create the Layout

Open the page using Divi Builder
Add a New Section
Insert a Row with Two Columns (50/50 layout)

This will allow left and right alternating card placements.

Step 2: Configure the Row Settings

Go to: Row Settings → Design → Sizing

Enable the following options:

Gutter Width: 1
Equalize Column Heights: ✔️ Enabled

This ensures each timeline section stays aligned and structured.

Step 3: Add Your Content Module

Inside right column:

Add a Blurb Module or Text Module
Add your content title and description

This will serve as the timeline content blocks.

Step 4: Add and Position the Icon

Add an Icon Module under the same column.

Then go to: Icon Settings → Advanced → Position

Apply the following:

Setting	Value
Position	Absolute
Location	Center Left
Horizontal Offset	-30px (adjust based on design)
Z-index	10+

This makes the icon overlap the center timeline line.

Use round, minimal icons for a cleaner timeline look.

Step 5: Add Animations to same column where you added blurb (eg. content)

To make the timeline feel alive:

Go to: Column Settings → Design → Animation

Recommended setup:

Option	Value
Animation Style	Slide
Direction	Down
Duration	900–1200ms
Intensity	50%

You can add animation timing with delays for a professional feel.

Step 6: Create the Vertical Line

Select the Column on the LEFT — whichever contains the line.

Go to: Column Settings → Design → Border

Apply:

Right Border Width: 3–4px
Border Color: A visible brand accent (e.g., gold, navy, etc.)

This border acts as the main timeline line.

Step 7: Duplicate and Alternate

Now duplicate the entire row for additional timeline steps.

To make the layout visually balanced:

For Row 1 → Content on right
For Row 2 → Move content to left
For Row 3 → Back to right
…repeat…

This creates a zig-zag storytelling design And make setting reverce for border and icon of columns to make smooth effect.

Step 8: Preview and Test

Test your animated timeline:

Animation timing
Icon alignment
Mobile responsiveness
Text spacing and readability

Once satisfied — you’re done!

A well-structured timeline can elevate your WordPress website’s user experience, improve navigation, and make your content more engaging — all without relying on plugins. If you’re looking to build a high-performing, custom-designed WordPress website that’s optimized for both speed and conversions, our team can help. Book a Free Consultation today and let TechnoCrackers create a smarter, more powerful WordPress experience for your business.

November 21, 2025December 11, 2025

How to Create Relationships Between Two Custom Post Types and Display Related Items with Crocoblock

Connecting content types is essential when building dynamic WordPress websites—whether you’re creating a directory, real estate portal, course platform, portfolio site, or any advanced content system. With Crocoblock’s JetEngine, you can easily create relationships between two Custom Post Types (CPTs) and display related data anywhere on your site.

In this guide, you’ll learn exactly how to create CPT relationships, assign related items, and display them using Elementor, Gutenberg, or JetEngine listings.

What Are Relationships in JetEngine?

A relationship defines how two different post types connect to each other. JetEngine supports:

1. One-to-One

Each item from the first CPT relates to exactly one item from the second CPT.

2. One-to-Many

One post can connect to multiple items from another CPT.

3. Many-to-Many

Both CPTs allow multiple connections—useful for complex relational data.

Example:

Projects ↔ Team Members
Courses ↔ Instructors
Agents ↔ Properties
Books ↔ Authors

JetEngine makes it easy to build these relations visually, without writing any code.

Step 1 — Create the Custom Post Types

You need two post types:

Go to JetEngine → Post Types → Add New
Enter:
- Post Type Name: Projects
- Slug: projects
Click Add Post Type
Repeat the same steps to create:
- Post Type Name: Team Members
- Slug: team-members

Step 2 — Create the Relationship

Now you will link Projects → Team Members.

Steps:

Go to JetEngine → Relations → Add New
Enter a Relationship Name:
Project to Team Members
Choose:
- Parent: Projects
- Child: Team Members
Under Relationship Type, choose:
One-to-Many (One project has many team members)
Leave other options as default
Click Add Relation

Step 3 — Add Team Members and Projects

Now you will add some content.

Add Team Members:

Go to Team Members → Add New
Add Name, Photo, Role, Description
Click Publish

Add Projects:

Go to Projects → Add New
Add Project Title, Description, and Featured Image
Scroll down to the Related Team Members box
Select the team members who worked on the project
Click Publish

Step 4 — Create the Team Members Card (Listing Template)

This is the design for each team member shown on the project page.

Steps:

Go to JetEngine → Listings → Add New
Choose:
- Listing Source: Posts
- Post Type: Team Members
Design the card:
- Add Team Member Photo
- Add Name
- Add Role
- Add Description or Link
Click Publish

Step 5 — Display Related Team Members on the Project Page

You will now show the connected Team Members on each single Project page.

Steps (Elementor):

Go to Templates → Theme Builder → Single Project
Edit with Elementor
Drag Listing Grid widget onto the page
Settings:
- Listing: Add listing which you created
- Use Custom post types: Team Members
- Post Query: select Posts & Author Parameters and use Marcos
Save the template
View any Project — you will now see the Team Members listed beautifully.

Conclusion

Setting up relationships between custom post types with Crocoblock helps you build smarter, more dynamic WordPress websites. If you’re planning a new site or want expert development for advanced CPT features, Book a Free Consultation.

November 19, 2025December 8, 2025

How to Fetch Custom Post Type Data Using Divi Machine and Convert It into a Slider

If you’re building dynamic WordPress websites with Divi + Divi Machine, one of the most powerful features you can use is the Post Carousel (Divi Machine Setting) module. This module lets you fetch data from any Custom Post Type (CPT) and display it in a stylish, responsive slider — without writing a single line of code.

Why Use Divi Machine for Custom Post Type Sliders?

Divi Machine makes it incredibly easy to:

Display any CPT (Projects, Events, Courses, Portfolio, Services…)
Build custom loop layouts
Control the query, design, filtering, and links
Show custom fields (ACF) inside your layout
Turn any layout into a carousel/slider

Step-by-Step Guide

1. Create Your Custom Post Type

You can create CPTs using CPT UI or custom code.

2. Create Your Custom Loop Layout (Required by Divi Machine)

Go to Divi > Divi Library → Add New → Choose Section or Row layout → Design your CPT item.

3. Add the Post Carousel (Divi Machine Setting) Module

Open any page or archive template where you want to add slider.
Edit with Divi Builder → Add module → “Post Carousel – Divi Machine Setting”.
Configure the Carousel to Fetch Custom Post Type Data

Main Options:

Select Post Type: Choose your CPT (e.g., Projects)
Custom Loop Layout: Select the layout created in Divi Library

Loop Options:

Post Status: Publish
Post Count: 10 (use -1 for all)

Extra Options:

– Equal Heights
– Link Item Layout

Select Carousel Settings:

– Slides Per View (Desktop/Tablet/Mobile)
– Arrows / Dots
– Autoplay
– Speed / Delay

4. Style Your Slider and test

Customize spacing, card backgrounds, borders, typography, arrows, dots, shadows, etc.

Conclusion

Fetching custom post type data and converting it into a slider is extremely simple using Divi Machine. Create a loop layout, select your post type inside the carousel module, configure your options, and you’re done!

November 19, 2025December 10, 2025

How to Fetch Custom CPT and It’s ACF Repeater/Relationship Data Using Divi Machine

If you’re building dynamic WordPress websites with Divi + ACF + Divi Machine, you already know the power of these three tools. But many users get stuck when trying to display Custom Post Types, ACF Repeater, and Relationship fields inside Divi layouts.

Using Divi Machine, you can easily fetch and display Custom Post Types, ACF Repeater fields, and Relationship data—without writing any PHP code.

This guide walks you through a clean, step-by-step process to fetch and display CPT content and ACF fields using Divi Machine.

What You Need

Before getting started, make sure you have:

Divi Theme
ACF Plugin ( Need ACF PRO to create repeater field)
Divi Machine plugin
Advanced Custom Fields (ACF) Pro
A Custom Post Type (CPT)
ACF Repeater and Relationship fields

Step 1: Create Your Custom Post Type (CPT)

You can create a CPT with CPT UI plugin or by using custom code.

Example: Projects

Step 2: Add ACF Repeater & Relationship Fields to Your CPT

Go to: ACF → Field Groups → Add New

Field Group Name: Project Details

Create Repeater Field:

Field Name: Project Notes
Field Type: Repeater
Subfields: Title, Description

Create Relationship Field

Name: Related Projects
Return Format: Post Object
Filter By Post Type: Project

Assign this field group to CPT: Project.
Go to: Location Rules → Post Type → Is equal to → Project

Step 3: Add Projects

Go to: Projects → Add New

Add title, description, featured image, repeater data, and select related projects.

Step 4: Build a Single CPT Template in Divi

Go to: Divi → Theme Builder → Add Template → Assign to Projects.
Click Edit with Divi.
Add Post Title and Post Content using Divi Machine modules.
Design your layout as needed.

Step 5: Display ACF Relationship & Repeater Data

Part A — Fetch Relationship Field Data

1. Create a Custom Loop Layout

If you want to show only titles:

Add Post Title module
Save it to the library
Name it: Related Project Title Module

2. Insert Relationship Loop Module

Add: Archive Loop – Divi Machine Module

Main Options Tab

Select Post Type → Projects
Loop Style → Custom Loop Layout
Custom Loop Layout → Select your saved layout (e.g., Related Project Title Module)

Loop Options Tab

Post Status → Publish
Post Count → 10 (or -1 to show all)
Post Display Type → Related
Related Count → Post Object
Post Object ACF Name → Related Projects

This will dynamically display all selected related projects for each item.

Part B — Fetch Repeater Field Data

1. Create a Single Repeater Item Layout

Inside Divi Builder:

Add Section > Row
Insert ACF Item – Divi Machine module
- ACF Name → Project Notes Title
Add another ACF Item – Divi Machine module
- ACF Name → Project Notes Description

Save this layout to Library and name it:
Project Repeater Layout – Row

2. Add the Repeater Loop Module

Add:
Repeater / Table / Tabs – Divi Machine Settings

Main Settings

Repeater Type → ACF Repeater (ACF Pro)
Repeater Name → Project Notes
ACF Field From → Default (Current Post)
Repeater Field Style → Loop Layout

Loop Layout Settings

Repeater Loop Layout → Select your saved layout
(e.g., Project Repeater Layout – Row)

Grid Options Settings

Choose your grid columns for:

Desktop
Tablet
Mobile

Example: 1 column to display repeaters vertically

Step 6: Save and Test

Open any project to see dynamic repeater and related project data.

You will now see:

All related projects pulled dynamically
All repeater fields displayed beautifully
Full Divi control over layout and styling

Using ACF and Divi Machine together lets you build smarter, more flexible WordPress websites. If you’re planning a custom web project and need experienced developers, Book a Free Consultation Call.

November 19, 2025December 10, 2025

How to Create a Mega Menu in Divi Using the “Divi Pixel Balloon” Module

Mega menus are one of the best ways to display large navigation structures in a clean, organized, and visually appealing layout. They make it easy for users to browse multiple categories, products, and services without confusion.

If you’re using Divi, the Divi Pixel Balloon Module provides a powerful and code-free way to build fully customizable mega menus. In this guide, you’ll learn how to create a beautiful mega menu using Divi and Divi Pixel Balloon, step by step.

Overview

With Divi + Divi Pixel Balloon Module, you can create:

Multi-column mega menus
Product category menus
Image-based dropdowns
Service menus with icons
Custom link panels
Fully responsive and animated mega menus

Step-by-Step Guide to Create a Mega Menu in Divi Using Divi Pixel Balloon

1. Install & Activate the Divi Pixel Plugin

If Divi Pixel is not installed yet:

Go to Plugins → Add New
Upload your Divi Pixel ZIP file
Click Activate
Go to Divi Pixel → Modules
Make sure the Balloon Module is enabled

This module is required for creating the mega menu dropdown.

2. Create the Mega Menu Layout in Divi Library

This layout will act as your mega menu’s content.

Go to Dashboard → Divi → Divi Library
Click Add New
Enter a layout name (e.g., Practice Mega Menu)
Select Layout Type → Layout
Click Submit
Design your mega menu using rows, columns, icons, text, images, buttons, and any Divi modules you need
Save Your Layout

3. Create or Edit Your Global Header in Divi

If you already have a global header, skip to the next step.

To create one:

Go to Dashboard → Divi → Theme Builder
Click Add Global Header
Open it with Divi Builder
Add a Menu Module and design your header as needed

This is where the Balloon Module will be attached.

4. Add the Divi Pixel Balloon Module and Configure It

Inside your Global Header layout:

Click + Add New Module
Select Divi Pixel Balloon

Configure the following options:

Balloon Settings

Selector: .dp-practice-mega-menu
(Add any class name you prefer, but remember it for later.)
Balloon Placement: Bottom
(You may also choose Top, Left, or Right based on design.)
Balloon Animation: Fade In, Fade In Left, Fade In Top, Fade In Right
Content Type: Divi Library
Divi Library Layout: Select the layout you created in Step 2 (e.g., Practice Mega Menu)

Save your settings.

5. Attach the Mega Menu to a Menu Item

Now choose which menu item will trigger your mega menu.

Go to Dashboard → Appearance → Menus
Select the menu you want to modify
Click Screen Options (top right)
Enable CSS Classes
Expand the menu item where you want the mega menu to appear
In the CSS Classes field, enter the same selector used earlier: .dp-practice-mega-menu
Save Menu

This links your menu item to the Balloon mega menu.

6. Test Your Mega Menu

Once everything is configured:

Save your Global Header
Visit your website
Hover or click the menu item
The mega menu should appear smoothly with your chosen animation

Conclusion

Creating a mega menu in Divi is incredibly easy and flexible using the Divi Pixel Balloon Module. You can visually design your mega menu in Divi Builder, customize triggers, select animations, and create a modern, user-friendly navigation experience without writing code.

Transform your site with expert Divi website development. From custom menus to full-featured designs, we build websites that deliver results. Book a Free Consultation now.

White Label Services

Design & Development

Address

Phone

Email

Step 1: Create Your Custom Post Type (CPT)

Step 2: Add Projects

Step 3: Create one Projects listing in Divi Library

Step 4: Build Archive CPT Template in Divi

Step 5: Then Archive CPT Template

Step 6: Save and Test

Conclusion

Step 1 — Install and Activate Required Plugins

Step 2: Create a Search Filter

Step 3: Add Created Search Filter in Archive Page

Why Create a Custom Mega Menu?

Benefits:

What You’ll Need

Step 1: Create Your Main Menu & Assign Trigger Classes

Step 2: Create Your Global Header

Step 3: Design Your Mega Menu Layout

Step 4: Add CSS & JavaScript

Add CSS:

Add JavaScript

Step 5: Test Your Mega Menu

Conclusion

Step-by-Step Guide

Step 1: Create the Layout

Step 2: Configure the Row Settings

Step 3: Add Your Content Module

Step 4: Add and Position the Icon

Step 5: Add Animations to same column where you added blurb (eg. content)

Step 6: Create the Vertical Line

Step 7: Duplicate and Alternate

Step 8: Preview and Test

What Are Relationships in JetEngine?

1. One-to-One

2. One-to-Many

3. Many-to-Many

Step 1 — Create the Custom Post Types

Step 2 — Create the Relationship

Steps:

Step 3 — Add Team Members and Projects

Add Team Members:

Add Projects:

Step 4 — Create the Team Members Card (Listing Template)

Steps:

Step 5 — Display Related Team Members on the Project Page

Steps (Elementor):

Conclusion

Why Use Divi Machine for Custom Post Type Sliders?

Step-by-Step Guide

1. Create Your Custom Post Type

2. Create Your Custom Loop Layout (Required by Divi Machine)

3. Add the Post Carousel (Divi Machine Setting) Module

Main Options:

Loop Options:

Extra Options:

Select Carousel Settings:

4. Style Your Slider and test

Conclusion

What You Need

Step 1: Create Your Custom Post Type (CPT)

Step 2: Add ACF Repeater & Relationship Fields to Your CPT

Step 3: Add Projects

Step 4: Build a Single CPT Template in Divi

Step 5: Display ACF Relationship & Repeater Data

Part A — Fetch Relationship Field Data

1. Create a Custom Loop Layout

2. Insert Relationship Loop Module

Main Options Tab

Loop Options Tab

Part B — Fetch Repeater Field Data

1. Create a Single Repeater Item Layout

2. Add the Repeater Loop Module

Main Settings

Loop Layout Settings

Grid Options Settings

Step 6: Save and Test

Overview