How to add slider using blurb,team,testimonial modules

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 B1  

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

How to add slider using blurb,team,testimonial modules ST1

5. Click on “+” Icon see below image

How to add slider using blurb,team,testimonial modules ST2

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

How to add slider using blurb,team,testimonial modules ST3

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 ST4

How to add slider using blurb,team,testimonial modules tilt s4

– > 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 tilt s5


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 ST5

How to add slider using blurb,team,testimonial modules ST6

How to add tilt with particles js without any plugin in divi

How to add tilt with particles js without any plugin in divi

– You can use this tilt and Particles styles on your divi website.

Steps for Tilt + Particles JS Effect

1. Download  Tilt + Particles JS Effect File.

2. Unzip files

3.Import Tilt + Particles JS Effect.json file on on Divi -> Divi Library -> Import & Export Button

How to add tilt with particles js without any plugin in divi B1  

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

How to add tilt with particles js without any plugin in divi TPE

5. Add New Page and Click on “Add From Library” OR “+” Icon below section

New Divi Builder
How to add tilt with particles js without any plugin in divi TPE1

Old Divi Builder

How to add tilt with particles js without any plugin in divi TST4

7. After select layout,section then Publish Page and see on front end after done below point 8.

8. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found “DPDiviChild.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 enqueue script function “dp_tilt_scripts” 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” & “particles.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-particles.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 tilt with particles js without any plugin in divi tilt s4

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

See Image

How to add tilt with particles js without any plugin in divi tilt s5


For Simple Effect use class “dp-tilt-column” on module and add class on jquery
For Parallax Effect use class “dp-tilt-column-parallex” on module and add class on jquery.
For Glare Effect use class “dp-tilt-column-glare” on module and add class on jquery.

For Particles Effect

Note : ID must be unique and only one time we can use ID per page.

Have created below ID’s
particles-js
particles-js-1
particles-js-2
particles-js-3
particles-js-4

Note : You can add more Particles init code base your requirement and remove extra particles init code if not use.

Click here to more information about particle js

Click here to more information about tilt js

See Image

How to add tilt with particles js without any plugin in divi TPE2

How to change default slider arrow icon on divi slider modules via CSS

Change Default Slider Arrow Icon CSS for Post Slider , Slider, Full Width Slider,Full Width Post Slider Modules.

Post Slider Module

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

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

How to Create Creative Person or Team Design Using Divi Module

How to Create Creative Person or Team Design Using Divi Module

5 Free Style of Person or Team Designs.

How to Create Creative Service Designs Using Divi Module

You can Create Creative Service Designs using divi module. 5 Free Style of Service Designs.

Slider Module

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

Post Slider Code:
1. Add Class on post slider module "dp_tut_post_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_post_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_post_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}
.et_pb_slider.dp_tut_post_slider_arrow .et-pb-arrow-prev:before{content:"";}
.et_pb_slider.dp_tut_post_slider_arrow .et-pb-arrow-next:before{content:"";}
Slider Code:
1. Add Class on  slider module "dp_tut_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}
.et_pb_slider.dp_tut_slider_arrow .et-pb-arrow-prev:before{content:"";}
.et_pb_slider.dp_tut_slider_arrow .et-pb-arrow-next:before{content:"";}

FullWidthPost Slider

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

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

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

How to Create Creative Person or Team Design Using Divi Module Person Styles Mockup

How to Create Creative Person or Team Design Using Divi Module

How to Create Creative Person or Team Design Using Divi Module

5 Free Style of Person or Team Designs.

Services

How to Create Creative Service Designs Using Divi Module

You can Create Creative Service Designs using divi module. 5 Free Style of Service Designs.

FullWidthPost Slider Code:
1. Add Class on FullWidthPost Slider module "dp_tut_fw_post_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_fw_post_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_fw_post_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}
.et_pb_slider.dp_tut_fw_post_slider_arrow .et-pb-arrow-prev:before{content:"c";}
.et_pb_slider.dp_tut_fw_post_slider_arrow .et-pb-arrow-next:before{content:"d";}

FullWidth Slider

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. .

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

FullWidth Slider Code:
1. Add Class on FullWidth Slider  module "dp_tut_fw_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_fw_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_fw_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}
.et_pb_slider.dp_tut_fw_slider_arrow .et-pb-arrow-prev:before{content:"";}
.et_pb_slider.dp_tut_fw_slider_arrow .et-pb-arrow-next:before{content:"";}

Divi Icon Codes

——————————————————–
How to add slider using blurb,team,testimonial modules A1

CSS : 
content:""; (left icon)
content:""; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A2

CSS :
content:""; (left icon)
content:""; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A3

CSS : 
content:"c"; (left icon)
content:"d"; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A4

CSS : 
content:""; (left icon)
content:""; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A5

CSS : 
content:""; (left icon)
content:""; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A6

CSS : 
content:""; (left icon)
content:""; (right icon)

——————————————————–

——————————————————–
How to add slider using blurb,team,testimonial modules A7

CSS : 
content:"\e03b"; (left icon)
content:"\e03c"; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A8

CSS :
content:"\e045"; (left icon)
content:"\e046"; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A9

CSS : 
content:"\e049"; (left icon)
content:"\e04a"; (right icon)

——————————————————–
How to add slider using blurb,team,testimonial modules A10

CSS : 
content:"\e04d"; (left icon)
content:"\e04e"; (right icon)

——————————————————–

How to add slider using blurb,team,testimonial modules Slider3
How to add slider using blurb,team,testimonial modules Slider2
How to add slider using blurb,team,testimonial modules Slider4
How to add slider using blurb,team,testimonial modules Slider1

How to add css for visible default slider arrow icon on divi slider modules

Visible Default Slider Arrow Icon CSS for Post Slider , Slider, Full Width Slider,Full Width Post Slider Modules.

Post Slider Module

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

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

How to Create Creative Person or Team Design Using Divi Module

How to Create Creative Person or Team Design Using Divi Module

5 Free Style of Person or Team Designs.

How to Create Creative Service Designs Using Divi Module

You can Create Creative Service Designs using divi module. 5 Free Style of Service Designs.

Slider Module

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

Post Slider Code:
1. Add Class on post slider module "dp_tut_post_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_post_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_post_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}
Slider Code:
1. Add Class on  slider module "dp_tut_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}

FullWidthPost Slider

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

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

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

How to Create Creative Person or Team Design Using Divi Module Person Styles Mockup

How to Create Creative Person or Team Design Using Divi Module

How to Create Creative Person or Team Design Using Divi Module

5 Free Style of Person or Team Designs.

Services

How to Create Creative Service Designs Using Divi Module

You can Create Creative Service Designs using divi module. 5 Free Style of Service Designs.

FullWidthPost Slider Code:
1. Add Class on FullWidthPost Slider module "dp_tut_fw_post_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_fw_post_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_fw_post_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}

FullWidth Slider

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. .

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

FullWidth Slider Code:
1. Add Class on FullWidth Slider  module "dp_tut_fw_slider_arrow".
2. Add below CSS code on Theme option OR Child Theme CSS.
.et_pb_slider.dp_tut_fw_slider_arrow .et-pb-arrow-prev {opacity: 1;left: 22px;}
.et_pb_slider.dp_tut_fw_slider_arrow .et-pb-arrow-next {opacity: 1;right: 22px;}

How to add slider using blurb,team,testimonial modules Slider3
How to add slider using blurb,team,testimonial modules Slider2
How to add slider using blurb,team,testimonial modules Slider4
How to add slider using blurb,team,testimonial modules Slider1

How to add tilt with particles js without any plugin in divi

How to add tilt effect in divi

– You can use this tilt styles on your divi website.

Steps for Tilt Effect

1. Download  Tilt File.

2. Unzip files

3.Import Tilt Effects.json file on on Divi -> Divi Library -> Import & Export Button

How to add tilt effect in divi B1  

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

How to add tilt effect in divi tilt s3

5. Add New Page and Click on “Add From Library” OR “+” Icon below section

New Divi Builder
How to add tilt effect in divi tilt s1

Old Divi Builder

How to add tilt effect in divi TST4

7. After select layout,section then Publish Page and see on front end after done below point 8.

8. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found “DPDiviChild.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 enqueue script function “dp_tilt_scripts” 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” file on your server or anywhere and add that path on Divi-> Theme Options -> Integration Tab.
->Copy js code from init-tilt.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 tilt effect in divi tilt s4

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

See Image

How to add tilt effect in divi tilt s5


For Simple Effect use class “dp-tilt-column” on module and add class on jquery.
For Parallax Effect use class “dp-tilt-column-parallex” on module and add class on jquery.
For Glare Effect use class “dp-tilt-column-glare” on module and add class on jquery.

See Image

How to add tilt effect in divi tilt s6

Free 15 Styles of Divi Testimonial

Free 15 Styles of Divi Testimonial

– You can use any styles on your divi website.

– 15 Free Styles of Divi Testimonial

Steps for Divi Testimonial styles

1. Download  All Testimonial Styles File.

2. Unzip files

3.Import Testimonial json file on on Divi -> Divi Library -> Import & Export Button

Free 15 Styles of Divi Testimonial B1  

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

Free 15 Styles of Divi Testimonial TST1

5. Add New Page and Click on “Add From Library” OR “+” Icon below section

New Divi Builder
Free 15 Styles of Divi Testimonial TST2

Old Divi Builder

Free 15 Styles of Divi Testimonial TST4

7. After select layout,section then Publish Page and see on front end after done below point 8.

8. Add “styles” file on your child theme and Enqueue your style using wordpress function wp_enqueue_style

OR

Copy CSS from file and PASTE on Theme Option -> General -> Custom CSS

Optional


9. You can find “All Testimonial Styles.json” this is layout and include all styles.

How to load layout

New Builder

Free 15 Styles of Divi Testimonial TST3

Old Divi Builder
Free 15 Styles of Divi Testimonial BHP4

New Version is out of DP Preloader

Version 1.1

-Display Only Home Page Option
-Hide On Mobile Preloader Option
-20 preloader added

New Version is out of DP Related Articles of Any Custom Post Type Posts

Version 1.1

– Added Options Related Article By Tag
– Added Options Related Article By Any Taxonomy/Category
– Added 3 More style of Grid View
– Added 1 More style of Slider View
– Added option “Display Excerpt” content
– Added option “Display Read More” & “Read More Text”

New Version is out of DP Advanced Post Slider

Version 1.1

– 100% Visual Builder Compatible
– Add “Display Post By Tag” Option
– Add “Display Except” Option
– Fixed Issues

New Version is out of DP 404 Page & Header and Footer Social Icons

Version 1.1

-20 Styles of Header Social Icon with color options
-30 Styles of Footer Social Icon with color options
-5 Json Layout of 404 Page