Home » WordPress Plugins » Ultimate Divi Carousel » Create “Taxonomy Image Carousel” In Divi

Create "Taxonomy Image Carousel" In Divi

Taxonomy is a way to categorize post type items in groups. Terms is the name given to groups.

Create carousel using taxonomy terms as carousel items. Ideal for highlighting post type categories.

Create a carousel for categories of a post, for example, “Projects” to showcase project categories.

With Taxonomy Carousel Divi module you can

Select & filter taxonomy terms as carousel items.
Use a Slide or Coverflow effect.
Enable dot & arrow navigation.
Add text overlay to carousel item.
Style all elements of the carousel with styling controls.

The “Taxonomy Carousel” divi module is available for regular and full-width sections.

Pre-requisites

Tools

Computer

Total Duration : 9 minutes

Start your FREE trial. No credit cards required.

Step 1 - Term Meta Fields - Thumbnail & Order

We add Thumbnail & Order term meta fields to each term/category form.
The fields are present on the add and edit forms for the term/category.
Thumbnail field stores an image. It represents the taxonomy carousel item's image
Order field stores a numeric value. Sort the carousel items with this field and it's value. Create custom sort order.

Start your FREE trial. No credit cards required.

Step 2 - Insert "Taxonomy Carousel" Divi Module

Steps to insert the "Taxonomy Carousel" divi module on a regular or full-width section
- Edit a page in divi's visual builder.
- Within a divi row click on the plus icon for Add New Module
- Search for Taxonomy Carousel, click and add the divi module.

Start your FREE trial. No credit cards required.

Step 3 - Select & Filter Taxonomy Terms

Fetch taxonomy terms by setting filters in the divi module.
- In the divi module, goto the Content tab.
- Select the Taxonomy Terms toggle accordion.
- Below is description of each field.
  - Post Type - A dropdown field of all the post types available in your website.
  - Taxonomy - A dropdown field of the taxonomies belonging to the above selected Post Type
  - Order By - A dropdown field to select the option using which the sort happens. Options ares
    - No Order - Ignore sorting
    - Term Name - Sort by name of the term.
    - Term Slug - Sort by slug of the term
    - Term ID - Sort by ID of the term
    - Term Description - Sort by description of the term.
    - By Total Items In Term - Sort by total items belonging to the term.
    - Match Order As Per "Include" Field - Sort the terms as entered in Include Terms By IDs field.
    - Order - Term Meta Field - Sort with Order term meta field. Refer to Term Meta Fields - Thumbnail & Order section for details.

Start your FREE trial. No credit cards required.

Step 4 - Set "Content Types" For Carousel Item

Enable/disable data elements for a carousel item.
- Each carousel item can have
  - Image
  - Title
  - Description
  - Button
- To select/de-select these go to Content tab of divi module
- Click on the Content toggle accordion. Options are
  - Show Image - Toggle switch. Select ON to use the post image. Select OFF for not showing image.
  - Show Title - Toggle switch. Select ON to use the post title. Select OFF for not showing title.
  - Show Description - Toggle switch. Select ON show description. Select OFF for not showing description.
    - Description Type - A drop-down to select the description of a post. Options are
      
      Post Excerpt - Excerpt of the post item
      
      Post Content - Post content of the post item
  - Show Button - Toggle switch. Select ON to show a button. Select OFF for not showing button.
    - The permalink of the post item is the button url
    - Button Text - Field to set the text for the button.
    - Link Target - Set the browser target to open the button link. Options are
      
      Same Window - Open link in the same window
      
      New Tab - Open link in a new tab.

Start your FREE trial. No credit cards required.

Step 5 - Carousel Settings

Setup the carousel the way you want. This divi module offers a versatile options of carousel settings.
- Effect - The transition effect between slides. Options are
  - Slide - A linear slide.
  - Coverflow - An effect to show the arrange of slides in 3-D space. When selected extra fields are available.
    - Enable Coverflow Slide Shadow - Toggle switch to enable shadow for the coverflow item.
      
      Set Shadow Color when enabled.
    - Coverflow Rotate - Set the rotation angle of the non-active slides
    - Coverflow Depth - Set depth of the slides in coverflow effect.
  - Slides Per View - Set the number of slides visible on the carousel.
    - Click on the mobile icon to set the values for desktop, tablet and mobile
  - Space Between Slides - Set the distance between slides (in pixels)
    - Click on the mobile icon to set the values for desktop, tablet and mobile
  - Initial Slide - Set the index number of the initial slide. First slide's index at 0
  - Centered Slides - Toggle switch. Set YES to center the active slide.
  - Enable Loop - Toggle switch. Set YES to enable continuous loop mode.
  - Autoplay - Toggle switch. Set YES to set autoplay for the carousel.
    - Autoplay Delay - Autoplay delay between transitions (in milliseconds)
    - Pause On Hover - Toggle switch. Set YES to pause the carousel transitions on hover.
  - Transition Duration - Set the transition duration between slides (in milliseconds).
  - Show Arrows - Toggle switch. Set YES to enable next and previous arrow navigation.
    - Show Arrows On Hover - Toggle switch. Set YES to show arrows on carousel mouse hover.
  - Show Dots Pagination Toggle switch. Set YES to enable dot pagination.

Start your FREE trial. No credit cards required.

Step 6 - Style Carousel Elements

This divi module offers a ton of styling options for carousel elements.
- Content Tab
  - Background Section - Set the background of entire carousel.
- Design Tab
  - Carousel Wrapper - This wrapper, wraps the entire carousel
    - Set margin and padding.
  - Slide - Styles for each slide.
    - Equal Height - Toggle switch. Set YES to make the height of all carousel items equal
    - Background - Set background color/gradient/image
    - Border and border radius
    - Box shadow
  - Title - Style the title for the carousel item.
    - Set heading levels like h1, h2 .. h6
    - Set title typography and style text
  - Description - Style the description for the carousel item.
    - Set description typography and style text
  - Button - Button styling options
    - Use Custom Styles For Button - Toggle switch. Set "YES" to add custom style. Set "NO" to use default button style.
    - On selecting "YES", you can
      
      Set button text typography and text styles
      
      Set button background.
      
      Set border
      
      Set border radius
      
      Add and style button icon.
    - Button Alignment - Set the button to align either left, right or center.
    - Box Shadow - Set the box shadow for the button.s
  - Content Wrapper - It wraps the text content of a carousel item
    - Content Vertical Alignment - Vertically align title, description and button to the top, center or bottom
    - Overlay Content Over Image - Select YES to overlay the text content on top of the image.
      
      Content Visibility - Visibility of the content when set as an overlay. Options are
      
      Show Always - Show the text content always.
      
      Show Only On Hover - Show text content on hover.
    - Content Padding - Set padding for the wrapper
    - Content Background - Set color, gradient or image background for the wrapper
  - Arrow Navigation - Make sure to set Show Arrows to YES in carousel settings.
    - Arrow Size - Size of the arrow icon
    - Arrow Color - Set color for the arrow icon
    - Arrow Background - Set the background for arrow icon
    - Arrow Position - Pre-defined options for arrow positioning. Options are
      
      Middle & Enclosed
      
      Middle & Outside
      
      Middle & Overlapping
      
      Top & Right
      
      Top & Center
      
      Top & Left
      
      Bottom & Right
      
      Bottom & Center
      
      Bottom & Left
    - Border radius
    - Border
  - Dot Navigation - Make sure to set Show Dots to YES in carousel settings.
    - Dot Position Set the layout for the dot pagination. Options are
      
      Center
      
      Left
      
      Right
    - Active Dot Color - Set color of the dot representing the active slide.
    - Inactivate Dot Color - Set color of the dots representing the inactive slides.
    - Inactive Dot Opacity - Set the opacity of the dots representing inactive slide.
    - Dot Width - Width of the dot element
    - Dot Height - Height of the dot element
    - Dot Border Radius - Set the border radius (in percentage)
    - Individual Dot Margin - Set margin for the individual dots
    - Container Margin - Set margin for dot pagination container
    - Container Padding - Set padding for dot pagination container
Pro Tip : Combine Dot Width, Dot Height and Dot Border Radius to create circle, square, rectangular or line shapes.

Pro Tip - Use the border radius for the arrow navigation to make a square or a circle

Start your FREE trial. No credit cards required.

Step 7 - Setup Demo Data

Divi page layouts for the Taxonomy Carousel need post type items data with categories.
For our demo page layouts, we use "Product Categories" taxonomy of product post type from WooCommerce.
To setup product data
- Install & activate woocommerce.
- Import sample product data. Refer to the following tutorial for details https://docs.woocommerce.com/document/importing-woocommerce-sample-data/
  - Copy of sample_products.csv
  - Copy of sample_products.xml

Start your FREE trial. No credit cards required.

Step 8 - Demo Page Layouts

To import the demo page layouts follow the instruction the below.
Once the process is clear, download the demo page layouts and import them
To Import A Demo Page Layout
- Create/edit a page in the divi visual builder.
- To show the page settings toolbar at the bottom, click on the ellipsis icon.
- Click on the portability icon.
- A modal window to export/import the page shows up
- Click on Import tab.
- Click on NO FILE SELECTED
- Check Replace existing content if you wipe off existing content after import.
- Select the divi builder layout json file from your file manager.
- Click on Import Divi Builder Layout button to start the import.
- Once imported, page reloads with the imported layout.
- Save the page.
Download - Taxonomy Image Card Carousel
Image Card Carousel - Divi Taxonomy Carousel

Download - Coverflow Image Card Carousel
Coverflow - Divi Taxonomy Carousel

Download - Image With Text Overlay
Image With Text Overlay On Hover - Divi Taxonomy Carousel

Start your FREE trial. No credit cards required.