• Home

How to add slider using blurb,team,testimonial modules

We Design Brands Experiences And Interfaces

How to add slider using blurb,team,testimonial modules

- You can use this slider on your divi website with child theme OR without child theme.

Steps for Blurb,Team,Testimonial Module with Slider using child theme OR without child theme

1. Download  Blurb,Team,Testimonial Module With Slider File.

2. Unzip files

3.Import Blurb,Team,Testimonial Module With Slider.json file on on Divi -> Divi Library -> Import & Export Button

How to add slider using blurb,team,testimonial modules  

4. After import layout json files you can see in below

How to add slider using blurb,team,testimonial modules

5. Click on "+" Icon see below image

How to add slider using blurb,team,testimonial modules

6. After click ,layout will be load then Publish Page

How to add slider using blurb,team,testimonial modules

7. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found Child Theme folder "DP Slider Layouts.zip" file so just upload and activate.

If child theme already exist then follow below step
-> Copy "js" folder and paste on your existing child theme.
-> Copy "css" folder and paste on your existing child theme.
-> Copy enqueue script function "dp_tilt_scripts" ,"divi_enqueue_assets" code and paste on your existing child theme functions.php file.
-> Copy style.css code and paste on your existing child theme style.css file.

2. Without Child theme
-> Upload "vanilla-tilt.min.js" & "owl.carousel.min.js" file on your server or anywhere and add that path on Divi-> Theme Options -> Integration Tab.
->Copy js code from init-tilt.js &init-owl.js file and paste on Divi-> Theme Options -> Integration Tab.
Just write Script tag before start code and end script tag after code finished.

See Image
How to add slider using blurb,team,testimonial modules

How to add slider using blurb,team,testimonial modules

- > Same for CSS

-> Copy style code from style.css file and paste on Divi-> Theme Options ->General -> Custom CSS .

See Image

How to add slider using blurb,team,testimonial modules


For Simple Effect use class "dp-tilt-column" on module and add class on jquery


Click here to more information about owl js

Click here to more information about tilt js

See Image

How to add slider using blurb,team,testimonial modules

How to add slider using blurb,team,testimonial modules

2 Comments

  1. Samiksha

    This was really helpful. Can you help me convert the blurb module slider to display 3 blocks at a time rather than 4? What can I do to reduce to 3 while it slides?

    • Divi Professional

      Go to js part [init-owl.js] and set slider 1000:{ items:4} to 1000:{ items:3}

Recent Post
Creative 4 Divi Modules Design And Footer Style

September 16, 2020

Another 5 Creative Service Designs Using Divi Module with stunning hover effects and 8 Awesome Footer Designs Using Divi Module

February 18, 2020

How to Create Creative Person or Team Design Using Divi Module

February 11, 2020

Services
How to Create Creative Service Designs Using Divi Module

February 3, 2020