Divi-Childthemes.com https://divi-childthemes.com Best Place To Find Creatuve Divi Layouts & Child Themes Tue, 18 May 2021 06:08:08 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://divi-childthemes.com/wp-content/uploads/2019/11/cropped-dct-favicon-32x32.png Divi-Childthemes.com https://divi-childthemes.com 32 32 Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi https://divi-childthemes.com/creative-10-divi-call-to-action-sections-design-for-your-next-project-with-divi-theme/ Mon, 17 May 2021 13:18:12 +0000 http://divi-childthemes.com/?p=4405903 The post Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi appeared first on Divi-Childthemes.com.

]]>

In this Divi tutorial, we’ll be showing you how to create a vibrant CTA section using Divi .

perfect for your Business Base Divi Theme design plans that just may surprise you.Today We are sharing a step by step tutorial Simple and Attractive Creative Divi Call To Actions Design Using Divi to anywhere on your Divi website .

CTA Style 1

Demo 1
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi

CTA Style 2

Demo 2
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 3
Demo 3
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 4
Demo 4
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 5
Demo 5
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 6
Demo 6
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 7
Demo 7
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 8
Demo 8
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 9
Demo 9
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
CTA Style 10
Demo 10
Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi
In this Divi tutorial, we’ll be showing you how to create a vibrant CTA section using Divi and Photoshop. You can use this design on any website by changing the images and colors that are being used.

This section can makes a different looking design which can really give your CTA Sections a unique view. Download the zip file and see yourself. You need to import it into Divi Library first.

[et_bloom_locked optin_id=”optin_4″]

Call To Action

10 Sections Design
Download Json File
View Full Demo

[/et_bloom_locked]
Following Steps To Create our the Progress bar Templates

Step 1. Download DCT_CTA_SECTIONS.zip File

Step 2. Unzip Zip Folder

Creative Divi Progress Bar Module Design Using Divi Bar Module

Step 3. After Unzip layout to Imports json files you can see in below steps

1. Using Divi Library Option

Click Here To check INSTALLING Divi Module THROUGH DIVI LIBRARY

If you want to installing Divi Module Through Divi Library Kindly Check this.

2. Using Divi Page Option

Click Here To check INSTALLING THROUGH PAGE OPTION

If you want to installing through page option Kindly Check this.

Step 4 Click on Save Changes

That’s It

The post Creative 10 Divi Call To Action Sections Design for Your Next Project with Divi appeared first on Divi-Childthemes.com.

]]> Creative Divi Progress Bar Module Design Using Divi Bar Module ( 6 Divi Progress Bar Designs) https://divi-childthemes.com/creative-divi-progress-bar-module-design-using-divi-bar-module/ Mon, 07 Sep 2020 04:40:18 +0000 http://divi-childthemes.com/?p=4394637 The post Creative Divi Progress Bar Module Design Using Divi Bar Module ( 6 Divi Progress Bar Designs) appeared first on Divi-Childthemes.com.

]]>

In this tutorial,We are going to show you Create Progress Bar Module Design

perfect for your web design plans that just may surprise you.Today We are sharing a step by step tutorial Simple and Attractive Creative Divi Progress Bar Design Using Divi Bar Module to anywhere on your Divi website .

Bar Counters Style 1

  • web devloper 35% 35%
  • Web Design 50% 50%
  • Software Developer 75% 75%
  • Android Developer 95% 95%

Bar Counters Style 2

  • Web Developer 35% 35%
  • Web Design 50% 50%
  • Software Developer 75% 75%
  • Android Developer 95% 95%

Bar Counters Style 3

  • Web devloper 35% 35%
  • Web Design 50% 50%
  • Software Developer 75% 75%
  • Android Developer 80% 80%

Bar Counters Style 4

  • Web Developer 35% 35%
  • Web Design 50% 50%
  • Software Developer 75% 75%
  • Android Developer 80% 80%

Bar Counters Style 5

  • Web Developer 35% 35%
  • Web Design 50% 50%
  • Software Developer 75% 75%
  • Android Developer 80% 80%

Bar Counters Style 6

  • Web Developer 35% 35%
  • Web Design 50% 50%
  • Software Developer 75% 75%
  • Android Developer 80% 80%
The Progress Bar adds beautiful progress bars or progress meter by divi module. FEATURES. Responsive Design Works with any divi Theme. Therefore, in this blog post, we’re going to look at how you can create the Progress Bar . But first, check out the preview of Divi Progress Bar created without any external CSS Or js.The Progress Bar adds beautiful progress bars or progress meter by divi module.

This section can makes a different looking design which can really give your Tab modules a unique view. Download the zip file and see yourself. You need to import it into Divi Library first.

The progress bar to show skills in percentage.Progress Bar is useful for an author for his/her website for showing skills. The Progress Bar adds beautiful progress bars or progress meter by divi module.
Download Json File
View Full Demo
Following Steps To Create our the Progress bar Templates

Step 1. Download DCT_Progress_Bar.zip File

Step 2. Unzip Zip Folder

Creative Divi Progress Bar Module Design Using Divi Bar Module

Step 3. After Unzip layout to Imports json files you can see in below steps

1. Using Divi Library Option

Click Here To check INSTALLING Divi Module THROUGH DIVI LIBRARY

If you want to installing Divi Module Through Divi Library Kindly Check this.

2. Using Divi Page Option

Click Here To check INSTALLING THROUGH PAGE OPTION

If you want to installing through page option Kindly Check this.

Step 4 Click on Save Changes

That’s It

The post Creative Divi Progress Bar Module Design Using Divi Bar Module ( 6 Divi Progress Bar Designs) appeared first on Divi-Childthemes.com.

]]> Vertical Tabs Hover Effects Design Using Divi Tabs Module ( 6 Divi Vertical Tabs Designs) https://divi-childthemes.com/vertical-tabs-hover-effects-design-using-divi-tabs-module/ Tue, 01 Sep 2020 04:32:03 +0000 http://divi-childthemes.com/?p=4396784 The post Vertical Tabs Hover Effects Design Using Divi Tabs Module ( 6 Divi Vertical Tabs Designs) appeared first on Divi-Childthemes.com.

]]>

In this tutorial,We are going to show you 6 Tabs Vertical Designs

perfect for your web design plans that just may surprise you.Today We are sharing a step by step tutorial Simple and Attractive Tabs Module Vertical Designs Using Divi Tabs module to anywhere on your website.

Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.

Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.

Style 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.

Style 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.

Style 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.

Style 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis mi varius, mi eros viverra massa.
By default, tabs in the Divi theme are placed at the top. There is no hidden option inside the tabs module settings that allows a user to make changes in the position of the Divi tabs. Therefore, in this blog post, we’re going to look at how you can create Divi vertical tabs. But first, check out the preview of Divi vertical tabs created without any external CSS Or js.

This section can makes a different looking design which can really give your Tab modules a unique view. Download the zip file and see yourself. You need to import it into Divi Library first.

Download Json File
View Full Demo

Install Divi Vertical Tabs VIEW USING Divi Tabs Module

Step 1. Download DCT_Vertical_Tabs.zip File

Step 2. Unzip Zip Folder

Vertical Tabs Hover Effects Design Using Divi Tabs Module ( 6 Divi Vertical Tabs Designs)

Step 3. After Unzip layout to Imports json files you can see in below steps

1. Using Divi Library Option

Click Here To check INSTALLING Divi Module THROUGH DIVI LIBRARY

If you want to installing Divi Module Through Divi Library Kindly Check this.

2. Using Divi Page Option

Click Here To check INSTALLING THROUGH PAGE OPTION

If you want to installing through page option Kindly Check this.

Step 4 Click on Save Changes

That’s It

[add_monarch_post]

The post Vertical Tabs Hover Effects Design Using Divi Tabs Module ( 6 Divi Vertical Tabs Designs) appeared first on Divi-Childthemes.com.

]]> Create Awesome 3 Classic Accordions Design in Divi https://divi-childthemes.com/create-awesome-3-classic-accordions-design-in-divi/ Mon, 22 Jul 2019 10:16:36 +0000 http://divi-childthemes.com/?p=4385476 The post Create Awesome 3 Classic Accordions Design in Divi appeared first on Divi-Childthemes.com.

]]>

In this tutorial,We are going to show you FAQ in list view with Classic Design that just may surprise you.Today We are sharing a step by step tutorial for FAQ List view Using Divi Accordion module to anywhere on your website.

Style 1

Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,

Style 2

Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,

Style 3

Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at,
Download Json File
View Full Demo

HOw TO Install Classic Accordion Design in Divi

Step 1. Download DCT_ACCORDION_LISTVIEW.zip File

Step 2. Unzip Zip Folder

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

Create Awesome 3 Classic Accordions Design in Divi

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

Create Awesome 3 Classic Accordions Design in Divi

Step 5 : Create New Page > Click on “+” Icon see below image

Create Awesome 3 Classic Accordions Design in Divi

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

Create Awesome 3 Classic Accordions Design in Divi

Step 7. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found Child Theme folder “DCT_ACCORDION_LISTVIEW.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy enqueue script function “DCT_ACCORDION_LISTVIEW”  code and paste on your existing child theme functions.php file.
-> Copy “DCT_ACCORDION_LISTVIEW.css ” code and paste on your existing child theme style.css file.

DCT_ACCORDION_LISTVIEW In Function.php
function DCT_ACCORDION_LISTVIEW() { 
wp_enqueue_style( 'accordion-list-view', get_stylesheet_directory_uri() . '/DCT_ACCORDION_LISTVIEW.css' ); 
	
}
/* Add Front-Site Css 
-------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'DCT_ACCORDION_LISTVIEW' );

2. Without Child theme
-> Upload “DCT_ACCORDION_LISTVIEW.CSS”  file on your server or anywhere and add that path on Divi-> Theme Options -> GENeRAL Tab.
-> Copy CSS code from FOLDER file and paste on Divi-> Theme Options -> GENeRAL Tab -> Custom CSS.
Just PASTE CSS code in CUSTOM CSS TAB AND SAVE IT.

See image

DIVI accordion MODULE WITH LISTVIEW & classic design css 
/*---FAQ V1---------*/   
.dct_faq_v1 .et_pb_toggle{border:none;padding:0;margin-bottom:0!important;padding-bottom:10px}
.dct_faq_v1 .et_pb_toggle:before{content:"";display:block;height:100%;border:1px solid #999;top:25px;left:20px;
z-index:-1;position:absolute}
.dct_faq_v1 .et_pb_toggle:last-child:before{display:none}
.dct_faq_v1 .et_pb_toggle h5{padding:0;border:none;border-radius:0;position:relative}
.dct_faq_v1 .et_pb_toggle .et_pb_toggle_title{z-index:1;padding:27px 0 27px 60px}
.dct_faq_v1 .et_pb_toggle_open h5{margin-bottom:20px}
.dct_faq_v1 .et_pb_toggle h5:before,
.dct_faq_v1 .et_pb_toggle_close h5::before{font-size:30px;right:auto;left:0}
.dct_faq_v1 .et_pb_toggle_title::before{padding:5px;background:#da4b69;color:#fff!important;font-weight:400}
.dct_faq_v1 .et_pb_toggle_close{background:0,0}.dct_faq_v1 .et_pb_toggle_close h5:before{content:'L'}
.dct_faq_v1 .et_pb_toggle_open h5:before{content:"K"!important;display:block!important}
.dct_faq_v1 .et_pb_toggle_open h5{color:df8d12!important;padding-top:0!important;padding-bottom:0!important}
.dct_faq_v1 .et_pb_toggle_content{padding:40px 20px 30px;margin-left:40px;border-top:none;background:#da4b69;
font-size:15px;box-sizing:border-box;color:#fff;line-height:28px;letter-spacing:1px;
-webkit-clip-path:polygon(0 15%,15% 15%,15% 0,85% 0,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0 85%);
clip-path:polygon(0 15%,15% 15%,15% 0,85% 0,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0 85%)}
.dct_faq_v1 .et_pb_toggle_content p{text-align:center;letter-spacing:0;box-sizing:border-box;margin:0 0 10px}
@media only screen and (max-width:480px){.dct_faq_v1 .et_pb_toggle_content{padding:70px 10px}}	




/*---FAQ V2---------*/


.dct_faq_v2 .et_pb_toggle{border:none;padding:0;margin-bottom:0!important}
.dct_faq_v2 .et_pb_toggle h5{padding:0;border:none;border-radius:0;position:relative}
.dct_faq_v2 .et_pb_toggle .et_pb_toggle_title{display:block;margin-top:0;margin-bottom:0;font-size:16px;
color:inherit;padding:15px 20px 15px 60px!important;margin:0;background:#df8d12;font-size:18px;font-weight:700;
letter-spacing:1px;color:#fff;border:1px solid #000;border-radius:0;position:relative}
.dct_faq_v2 .et_pb_toggle_open h5{margin-bottom:20px}.dct_faq_v2 .et_pb_toggle h5:before,
.dct_faq_v2 .et_pb_toggle_close h5::before{font-size:30px;right:auto;left:0}
.dct_faq_v2 .et_pb_toggle_title::before{font-weight:900;width:30px;height:30px;line-height:30px;
background:#df8d12;border-radius:5px;border:1px solid #202526;text-align:center;font-size:20px;
color:#ffff;position:absolute;left:-20px!important;transition:all .3s ease 0s}
.dct_faq_v2 .et_pb_toggle_close h5:before{content:'45'}
.dct_faq_v2 .et_pb_toggle_open h5:before{content:"43"!important;display:block!important}
.dct_faq_v2 .et_pb_toggle_open h5{color:df8d12!important;padding-top:0!important;padding-bottom:0!important}
.dct_faq_v2 .et_pb_toggle_content{padding:20px;margin:0 30px;border-bottom:2px dashed#202526;background:#202526;
border-top:none;border-left:2px dashed #202526;border-right:2px dashed #202526;font-size:15px;color:#fff;
line-height:28px;letter-spacing:1px}.dct_faq_v2 .et_pb_toggle_content p{font-size:15px;color:#fff;letter-spacing:0;
line-height:28px}
@media only screen and (max-width:480px){.dct_faq_v2 .et_pb_toggle_content{font-size:14px;line-height:22px;margin:0 10px}}




/*---FAQ V3---------*/


.dct_faq_v3 .et_pb_toggle{border:none;padding:0}
.dct_faq_v3 .et_pb_toggle .et_pb_toggle_title{display:block;padding:10px 20px 10px 60px!important;background:#fe5f55;
border-radius:30px;border:2px solid #fe5f55;font-size:20px;font-weight:600;color:#fff;margin-bottom:0;position:relative}
.dct_faq_v3 .et_pb_toggle_open h5{margin-bottom:20px}
.dct_faq_v3 .et_pb_toggle_title::before{font-weight:900;width:60px;right:auto;left:0 height: 60px;line-height:60px;
border-radius:50%;background:#fe5f55;font-size:18px;color:#fff;text-align:center;top:-8px;margin-top:0;
border-right:3px solid #fff;position:absolute;left:-30px!important;z-index:1;
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.dct_faq_v3 .et_pb_toggle_close h5:before{content:'L'}
.dct_faq_v3 .et_pb_toggle_open h5:before{content:"K"!important;display:block!important}
.dct_faq_v3 .et_pb_toggle_open h5{color:df8d12!important;padding-top:0!important;padding-bottom:0!important}
.dct_faq_v3 .et_pb_toggle_content{padding:15px 20px 0;margin:0 0 0 30px;border:none;font-size:14px;
color:#333;line-height:28px;position:relative}
.dct_faq_v3 .et_pb_toggle_content:after{content:"";border-top:20px solid #fe5f55;
border-left:20px solid transparent;border-right:20px solid transparent;position:absolute;bottom:0;
visibility:visible;left:-48px;transition:all .3s ease 0s;-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;box-sizing:border-box}
.dct_faq_v3 .et_pb_toggle_content:before{content:"";display:block;width:5px;height:95%;background:#fe5f55;
position:absolute;top:0;left:-30px;transition:all .3s ease 0s;-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;box-sizing:border-box}
.dct_faq_v3 .et_pb_toggle_content p{font-size:14px;color:#333;line-height:28px;transition:all .3s ease 0s}
@media only screen and (max-width:480px){.dct_faq_v3 .et_pb_toggle_content{font-size:14px;line-height:22px;margin:0 10px}
.dct_faq_v3 .et_pb_toggle_title::before{top:0;margin-top:0!important}
.dct_faq_v3 .et_pb_toggle .et_pb_toggle_title{font-size:15px;padding-left:35px!important;padding-right:25px!important;
text-align:center}.dct_faq_v3 .et_pb_toggle_content{padding:10px;padding-left:25px}
.dct_faq_v3 .et_pb_toggle_content::before{left:-13px}
.dct_faq_v3 .et_pb_toggle_content::after{left:-30px}
.dct_faq_v3 .et_pb_toggle_title::before{width:50px;height:50px;line-height:50px}}

 

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

See Image

Create Awesome 3 Classic Accordions Design in Divi

FOR SIMPLE EFFECT USE CLASS “dct_faq_v1” ON accordion MODULE .

Create Awesome 3 Classic Accordions Design in Divi

[add_monarch_post]

The post Create Awesome 3 Classic Accordions Design in Divi appeared first on Divi-Childthemes.com.

]]> DIVI Person Module With List View And Creative Hover Effects https://divi-childthemes.com/divi-person-module-with-list-view-and-creative-hover-effects/ Tue, 04 Jun 2019 06:25:44 +0000 http://divi-childthemes.com/?p=4381883 The post DIVI Person Module With List View And Creative Hover Effects appeared first on Divi-Childthemes.com.

]]>

In this tutorial,We are going to show you Team members in list view with creative hover effects that just may surprise you.Today We are sharing a step by step tutorial for Team List view  USINg Divi Person module to anywhere on your website. 

Steve Thomas

Steve Thomas

Web Developer

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Miranda joy

Miranda joy

Web Designer

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

kristiana

kristiana

Web Developer

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages

Download Json File
View Full Demo

CREATE TEAM LIST VIEW USING PERSON MODULE WITH HOVER EFFETS

Step 1. Download DCT_TEAM_LISTVIEW.zip File

Step 2. Unzip Zip Folder

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

DIVI Person Module With List View And Creative Hover Effects

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

DIVI Person Module With List View And Creative Hover Effects

Step 5 : Create New Page > Click on “+” Icon see below image

DIVI Person Module With List View And Creative Hover Effects

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

DIVI Person Module With List View And Creative Hover Effects

Step 7. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found Child Theme folder “DCT_TEAM_LISTVIEW.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy enqueue script function “DCT_TEAM_LISTVIEW”  code and paste on your existing child theme functions.php file.
-> Copy “DCT_TEAM_LISTVIEW.css ” code and paste on your existing child theme style.css file.

DCT_TEAM_LISTVIEW In Function.php
function DCT_TEAM_LISTVIEW() { 
wp_enqueue_style( 'team-list-view', get_stylesheet_directory_uri() . '/DCT_TEAM_LISTVIEW.css' ); 
	
}
/* Add Front-Site Css 
-------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'DCT_TEAM_LISTVIEW' );
2. Without Child theme
-> Upload “DCT_TEAM_LISTVIEW.CSS”  file on your server or anywhere and add that path on Divi-> Theme Options -> GENeRAL Tab.
-> Copy CSS code from FOLDER file and paste on Divi-> Theme Options -> GENeRAL Tab -> Custom CSS.
Just PASTE CSS code in CUSTOM CSS TAB AND SAVE IT.

See image

DIVI PERSON MODULE WITH LISTVIEW & CREATIVE HOVER EFFETCS CSS
/* =======================    List view =========================*/
.dct_team_list{border:3px solid #d4434d;text-align:center;overflow:visible;position:relative;z-index:1}
.dct_team_list:after,.dct_team_list:before{background:#d4434d;width:17px;height:150px;
position:absolute;z-index:-1;content:""}
.dct_team_list:before{-webkit-transition:all .5s ease .2s;-moz-transition:all .5s ease .2s;
-ms-transition:all .5s ease .2s;-o-transition:all .5s ease .2s;transition:all .5s ease .2s;top:100%;left:0;margin-top:-150px}
.dct_team_list:after{-webkit-transition:all .5s ease .2s;-moz-transition:all .5s ease .2s;-ms-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;transition:all .5s ease .2s;visibility:visible;top:0;right:0}
.dct_team_list .clearfix::after{visibility:visible}.dct_team_list:hover:after,
.dct_team_list:hover:before{top:50%;margin-top:-75px}
.dct_team_list .et_pb_team_member_image{border:3px solid #d4434d;margin:30px;width:30%;position:relative;
-webkit-transition:all .5s ease 0s;-moz-transition:all .5s ease 0s;-ms-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;transition:all .5s ease 0s}
.dct_team_list:hover .et_pb_team_member_image{border-color:#d4434d}
.dct_team_list .et_pb_team_member_image:after{content:"";background:#33343e;width:100%;height:0;position:absolute;
top:50%;left:0;opacity:0;transform-origin:0 0 0;-webkit-transition:all .5s ease 0s;-moz-transition:all .5s ease 0s;
-ms-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s}
.dct_team_list:hover .et_pb_team_member_image:after{height:100%;opacity:.85;top:0}
.dct_team_list .et_pb_team_member_image img{width:100%;height:auto}
.dct_team_list .et_pb_team_member_description{width:60%;position:absolute;top:5%;right:0;opacity:1;
-webkit-transition:all .5s ease .2s;-moz-transition:all .5s ease .2s;-ms-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;transition:all .5s ease .2s}
.dct_team_list .et_pb_team_member_description .et_pb_team_short_description{text-align:justify}
.dct_team_list:hover .et_pb_team_member_description{opacity:1}
.dct_team_list .et_pb_team_member_description .et_pb_module_header{font-size:18px;font-weight:600;color:#000;
text-transform:uppercase;margin:0 0 5px;text-align:left}
.dct_team_list .et_pb_team_member_description .et_pb_member_position{font-size:14px;color:#000;text-transform:capitalize;
text-align:left}.dct_team_list .et_pb_team_member_description .et_pb_team_short_description{font-size:13px;color:#000;
overflow:hidden;text-overflow:ellipsis;padding-right:40px;text-align:justify}
.dct_team_list .et_pb_member_social_links{padding:0;list-style:none;text-align:right}
.dct_team_list .et_pb_member_social_links li{display:inline-block}
.dct_team_list .et_pb_member_social_links li a{background:#d4434d;display:inline-block;width:35px;height:35px;
line-height:35px;border:1px solid #d4434d;font-size:15px;color:#fff;-webkit-transition:all .5s ease 0s;
-moz-transition:all .5s ease 0s;-ms-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s}
.dct_team_list .et_pb_member_social_links li a:hover{color:#000;}

/* ======================= Single Row - Person module=========================*/
.dct_team_list.dct-list-1{min-height:300px}

/* =======================    Different Color=========================*/
.dct_team_list.orange{border:3px solid orange}
.dct_team_list.orange .et_pb_team_member_image{border:3px solid orange}
.dct_team_list.orange:after,.dct_team_list.orange:before{background:orange}
.dct_team_list.orange .et_pb_member_social_links li a{border:1px solid orange;background:orange;}
.dct_team_list.blue{border:3px solid #00bfff}
.dct_team_list.blue .et_pb_team_member_image{border:3px solid #00bfff}
.dct_team_list.blue:after,
.dct_team_list.blue:before{background:#00bfff}
.dct_team_list.blue .et_pb_member_social_links li a{border:1px solid #00bfff;background:#00bfff;}
.dct_team_list.pink{border:3px solid #ff1493}.dct_team_list.pink .et_pb_team_member_image{border:3px solid #ff1493}
.dct_team_list.pink:after,.dct_team_list.pink:before{background:#ff1493}
.dct_team_list.pink .et_pb_member_social_links li a{border:1px solid #ff1493;background:#ff1493;}
/* =======================    Responsive=========================*/
@media (max-width:1199px){.dct_team_list .et_pb_member_social_links li{margin-right:0}
.dct_team_list .et_pb_team_member_description{position:relative;top:0;width:100%}
.dct_team_list .et_pb_team_member_image{margin:0 auto;margin-top:20px;float:none}
.dct_team_list .et_pb_team_member_description .et_pb_module_header{text-align:center;margin-top:20px}
.dct_team_list .et_pb_team_member_description .et_pb_member_position{text-align:center}
.dct_team_list .et_pb_team_member_description .et_pb_team_short_description{padding-right:30px;padding-left:30px;
text-align:justify}}@media only screen and (max-width:980px){.dct_team_list{max-width:550px;margin:0 auto}}
@media only screen and (min-width:768px) and (max-width:1199px){
.dct_team_list .et_pb_team_member_image{width:280px;display:block}
.dct_team_list .et_pb_team_member_description{display:block}}

 

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

See Image

DIVI Person Module With List View And Creative Hover Effects

FOR SIMPLE EFFECT USE CLASS “dct_team_list” ON PERSON MODULE .

DIVI Person Module With List View And Creative Hover Effects
DIVI Person Module With List View And Creative Hover Effects

For SINGLE ROW USE CLASS “dct_team_list dct-list-1” on PERSON MODULE .

DIVI Person Module With List View And Creative Hover Effects
DIVI Person Module With List View And Creative Hover Effects

The post DIVI Person Module With List View And Creative Hover Effects appeared first on Divi-Childthemes.com.

]]> DIVI Button Module With 5 Creative Hover Effects https://divi-childthemes.com/divi-button-module-with-5-creative-hover-effects/ Tue, 21 May 2019 07:09:40 +0000 http://divi-childthemes.com/?p=4381659 The post DIVI Button Module With 5 Creative Hover Effects appeared first on Divi-Childthemes.com.

]]>

In this tutorial,We are going to show you some unique button hover effects that just may surprise you.Today I’m sharing a step by step tutorial for 5 custom Divi buttons with a nice hover effect  to Divi Button module to anywhere on your website. 

Style 1

Click Here
Click Here
Click Here
Click Here

Style 2

Click Here
Click Here
Click Here
Click Here

Style 3

Click Here
Click Here
Click Here
Click Here

Style 4

Click Here
Click Here
Click Here
Click Here

Style 5

Click Here
Click Here
Click Here
Click Here
Download Json File
View Full Demo

Steps for HOVER Effect with DIVI Button Module

Step 1. Download BUTTON_HOVER_EFFECTS.zip File

Step 2. Unzip Zip Folder

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

DIVI Button Module With 5 Creative Hover Effects

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

DIVI Button Module With 5 Creative Hover Effects

Step 5 : Create New Page > Click on “+” Icon see below image

DIVI Button Module With 5 Creative Hover Effects

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

DIVI Button Module With 5 Creative Hover Effects

Step 7. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found Child Theme folder “BUTTON_HOVER_EFFECTS.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy enqueue script function “DCT_BUTTON_HOVER_EFFECTS”  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.

DCT_BUTTON_HOVER_EFFECTS In Function.php
function DCT_BUTTON_HOVER_EFFECTS() { 
wp_enqueue_style( 'button-hover-effect', get_stylesheet_directory_uri() . '/DCT_BUTTON_HOVER_EFFECTS.css' ); 
	
}
/* Add Front-Site Css 
-------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'DCT_BUTTON_HOVER_EFFECTS' );

2. Without Child theme
-> Upload “DCT_BUTTON_HOVER_EFFECTS.CSS”  file on your server or anywhere and add that path on Divi-> Theme Options -> GENeRAL Tab.
-> Copy CSS code from FOLDER file and paste on Divi-> Theme Options -> GENeRAL Tab -> Custom CSS.
Just PASTE CSS code in CUSTOM CSS TAB AND SAVE IT.

See image

1. DIVI Button module hover STYLE 1


.dct_btn_v1{


z-index: 2;
background: #000000;
border:none;
border-radius:0;
color: #fff;
text-transform: uppercase;
text-align: center;
padding: 7px 30.5px;
position: relative;
outline: none;
font-weight: 600;
font-size: 15px;
transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}

.dct_btn_v1:hover{color: #fff;padding: 7px 30.5px !important;border:none !important;}

.dct_btn_v1.dark{background-color:#fff !important;color: #111 !important;}
.dct_btn_v1.dark:hover{color: #fff !important;}

.dct_btn_v1.et_hover_enabled:hover::after{transition: all 0.4s ease-out !important;z-index: -1;}



.dct_btn_v1::after{content: "";
width: 4px;
height: 100%;
position: absolute;
right: 0;
top: 0;
opacity:1;
z-index:-1;
background: #ffc300;
transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}

.dct_btn_v1:hover::after{width: 100%;transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}


.dct_btn_v1.pink::after{background: #eb3b5a;}

.dct_btn_v1.green::after{background: #20bf6b;}
  
  
  .dct_btn_v1.blue::after{background: #1b67a9;}
2. DIVI Button module hover STYLE 2
.dct_btn_v2.et_hover_enabled:hover::after{transition: all 0.4s ease-out !important;z-index: -1;}

.dct_btn_v2{
letter-spacing: 1px;
color: #fff !important;
text-transform: uppercase !important;
  padding: 7px 30.5px;
background-color: #000;display: inline-block;box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);overflow: 
  hidden;
  font-size: 15px;

font-weight: 600;
  backface-visibility: hidden;
  transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;
  
  }


.dct_btn_v2:hover{border: 2px solid transparent;padding: .3em 1em !important;padding: 7px 30.5px !important;}

.dct_btn_v2:after{line-height: 1.7em;
font-size: 1em !important;
content: attr(data-icon);
left: -100% !important;
top: 0%;
margin-left: 0em !important;
position: absolute;
height: 100%;
width: 100%;
background-color: #ffc300;
text-align: center;
  transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;
  
  }


.dct_btn_v2:hover:after{line-height: 3em !important;top: 0;left: 0 !important;transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}




.dct_btn_v2.up::after{background-color: #eb3b5a;left: 0 !important;top: -100%;	}
.dct_btn_v2.up:hover::after{top: 0;}

.dct_btn_v2.down::after{background-color: #20bf6b;left: 0 !important;bottom: -100%;top: auto;}
.dct_btn_v2.down:hover::after{bottom: 0% !important;}


.dct_btn_v2.right::after{background-color: #1b67a9;right: -100% !important;top: 0%;left: auto !important;}
.dct_btn_v2.right:hover::after{top: 0;right: 0 !important;}
3. DIVI Button module hover STYLE 3

.dct_btn_v3{background: linear-gradient(135deg,#8300e9 0%,#0c71c3 100%);
color: #fff;
font-weight: 600;
font-size: 16px;
border: 0;
border-radius: 0px;
padding: 7px 30.5px;
text-transform: uppercase;
overflow: hidden;}

.dct_btn_v3:hover{color: transparent;
background: linear-gradient(135deg,#8300e9 20%,#0c71c3 100%);
padding: 7px 30.5px !important;border: none !important;}


.dct_btn_v3:hover:before{width: 140%;}
.dct_btn_v3:hover:after{position: absolute;
opacity: 1;
left: 0%;
width: 100%;
margin: 0;
text-align: center;
bottom: .5em;}



.dct_btn_v3:before{content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
left: -20%;
width: 20%;
text-align: center;
background: #fff;
opacity: 0.1;
transform: skew(-10deg);
transition: .8s ease all;}

.dct_btn_v3:after{position: absolute;
color: #fff;
opacity: 1;
left: 0% !important;
width: 100%;
text-align: center;
margin: 0 !important;
bottom: -30px;}


.dct_btn_v3.green,.dct_btn_v3.green:hover{background: linear-gradient(135deg,#478212 0%,#74cc27 100%);}

.dct_btn_v3.red,.dct_btn_v3.red:hover{background: linear-gradient(135deg,#e02022 0%,#f35656 100%);}

.dct_btn_v3.blue,.dct_btn_v3.blue:hover{background: linear-gradient(135deg,#0149CC 0%,#00C6FF 100%);}
4. DIVI Button module hover STYLE 4

.dct_btn_v4{
    
    color: #ffc300;
    
   font-size: 16px;
    letter-spacing: 1px;
   text-transform: uppercase; padding: 12px 20px 7px;
    border-radius: 0;
    border: 1px solid #ffc300;
    box-shadow: inset 3px 4px 0 #ffc300, 4px 4px 0 #ffc300;
    transition: all 0.5s cubic-bezier(0.1, 0.7, 0.3, -0.1) !important;
}
.dct_btn_v4:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #ffc300, 0 0 0 #ffc300;
  padding: 12px 20px 7px !important;
}
.dct_btn_v4.blue{
    color: #3498db;
    border-color: #3498db;
    box-shadow: inset 3px 4px 0 #3498db, 4px 4px 0 #3498db;
}
.dct_btn_v4.blue:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #3498db, 0 0 0 #3498db;
}

.dct_btn_v4.green{
    color: #20bf6b;
    border-color: #20bf6b;
    box-shadow: inset 3px 4px 0 #20bf6b, 4px 4px 0 #20bf6b;
}
.dct_btn_v4.green:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #20bf6b, 0 0 0 #20bf6b;
}


.dct_btn_v4.pink{
    color: #eb3b5a;
    border-color: #eb3b5a;
    box-shadow: inset 3px 4px 0 #eb3b5a, 4px 4px 0 #eb3b5a;
}
.dct_btn_v4.pink:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #eb3b5a, 0 0 0 #eb3b5a;
}
@media only screen and (max-width: 767px){
    .dct_btn_v4{ margin-bottom: 20px; }
}
5. DIVI Button module hover STYLE 5

.dct_btn_v5{
    text-transform: uppercase;
    
    color: #ffc300;
    border-radius: 0;
	padding: 7px 30.5px;
  font-size: 16px;
    position: relative;
  font-weight: 600;
	border:none;
}
.dct_btn_v5:hover{ color: #ffc300;padding: 7px 30.5px !important;background-color:transparent !important;border: none !important; }
  
  
  
  
.dct_btn_v5:after{
    content: "";
    width: 100%;
    height: 100%;
	opacity:1;
    border: 2px solid #ffc300;
    position: absolute;
    bottom: 0;
    left: 0;
	font-size:0;	
	margin-left: 0;
    transition: width 0.2s ease 0s, height 0.2s ease 0.1s, border-top-width 0.1s ease 0.2s, margin 0.2s ease 0s !important;
}
.dct_btn_v5:hover:after{
    width: 60%;
    height: 0;
    border-width: 0 2px 2px;
    margin: 0 20%;
    transition: width 0.2s ease 0.2s, height 0.2s ease 0.1s, border-top-width 0.1s ease 0s, margin 0.2s ease 0.2s !important;
}






.dct_btn_v5.blue,
.dct_btn_v5.blue:hover{ color: #22ace3; }
.dct_btn_v5.blue:after{ border-color: #22ace3; }
  
  
  
  
  
.dct_btn_v5.pink,
.dct_btn_v5.pink:hover{ color: #eb3b5a; }
.dct_btn_v5.pink:after{ border-color: #eb3b5a; }
  
  
  
  
  
  
.dct_btn_v5.green,
.dct_btn_v5.green:hover{ color: #47cf77; }
.dct_btn_v5.green:after{ border-color: #47cf77; }
@media only screen and (max-width: 767px){
    .dct_btn_v5{ margin-bottom: 20px; }
}

 

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

See Image

DIVI Button Module With 5 Creative Hover Effects

For Simple Effect use class “dct_btn_v1” on bUTTON module .
See Images :

DIVI Button Module With 5 Creative Hover Effects

The post DIVI Button Module With 5 Creative Hover Effects appeared first on Divi-Childthemes.com.

]]> Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position https://divi-childthemes.com/create-client-logo-carousel-in-divi-using-owl-carousel-with-different-arrow-position/ Tue, 14 May 2019 05:50:21 +0000 http://divi-childthemes.com/?p=4381186 The post Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position appeared first on Divi-Childthemes.com.

]]>

In this tutorial, I’m going to go over Five different methods for adding company logos to your website with Divi. I’ll even show you different arrow positions in logo carousel !

Client Logo Carousel Arrow Position : Top Right

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

Client Logo Carousel Arrow Position : Center

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

Client Logo Carousel Arrow Position : Bottom Right

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

Client Logo Carousel Arrow Position : Left

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

Client Logo Carousel Arrow Position : Bottom Center

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
View Full Demo

Subscribe To Download

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

Once you scbscribe then download link will be available.it dose not take long to get left behind! Stay up to date with the latest news from us.Each week we share useful content, development news, WordPress tips, Divi tutorials and more.

[et_bloom_locked optin_id=”optin_3″]

View Full DemoDownload

[/et_bloom_locked]

Steps for Client logo carousel in divi with different arrow position :

Step 1.Download Logo_carousel.JSON File.

Step 2. Unzip files

Step 3. Import Logo_carousel.JSON file on on Divi -> Divi Library -> Import & Export Button

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

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

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

Step 5. Click on “+” Icon see below image

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

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

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

Step 7. Here Another way possibility of IMPLEMENT client logo divi carousel .

1. Using Child THEME :
On unzip folder you can found Child Theme folder “Logo_carousel_DIVI.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy “DCT_LOGO_CAROUSEL.js” File and paste on your existing child theme.
-> Copy “DCT_LOGO_CAROUSEL.css” File and paste on your existing child theme. -> Copy “DCT_LOGO_CAROUSEL.CSS” File and paste on your existing child theme.
-> Copy enqueue script function “DCT_LOGO_CAROUSEL_CSS” code and paste on your existing child theme functions.php file.

DCT_LOGO_CAROUSEL_CSS In Function.php
function DCT_LOGO_CAROUSEL_CSS() { wp_enqueue_style( 'DCT_LOGO_CAROUSEL_CSS', get_stylesheet_directory_uri() . 
'/DCT_LOGO_CAROUSEL.css' ); }
/* Add Front-Site Css And JS-------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'DCT_LOGO_CAROUSEL_CSS' );

2. USING THEME OPTIONS
-> Upload “DCT_LOGO_CAROUSEL.CSS” file on your server or anywhere and add that path on Divi > Theme Options > General > Custom CSS.
-> Copy js code from FOLDER file and paste on Divi-> Theme Options -> Integration Tab.
Just write Script tag before start code and end script tag after code finished.

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

See Image

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position
same as js code : Copy js code from FOLDER file and paste on Divi-> Theme Options -> Integration Tab.
Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

In Row Add class :”dct_logo_carousel_v1″

In Comun add CSS Class :”owl-carousel”

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

In Each Image Module Add class :”own-item”

Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position

The post Create Client Logo Carousel In DIVI Using Owl Carousel With Different Arrow Position appeared first on Divi-Childthemes.com.

]]> Custom Icons to Divi’s Social Media Follow Button With Different Hover Style https://divi-childthemes.com/custom-icons-to-divi-social-media-follow-button-with-different-hover-style/ Tue, 30 Apr 2019 06:50:33 +0000 http://divi-childthemes.com/?p=4380915 The post Custom Icons to Divi’s Social Media Follow Button With Different Hover Style appeared first on Divi-Childthemes.com.

]]>

In this tutorial,We are going to show you some unique Custom Icons to Divi’s Social Media Follow Button With Different Hover Style that just may surprise you. Divi Social Media Follow module allows you to easily style and add those important links to your social networks anywhere on your website. 

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Style 8

Style 9

Style 10

Download Json File
View Full Demo

Steps for HOVER Effect with DIVI SOCIAL MEDIA FOLLOW Custom icons

Step 1. Download Custom_Icons_to_Divi_Social_Media_Follow_Button_With_Different_Hover_Style.json File.

Step 2. Unzip files

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

Custom Icons to Divi’s Social Media Follow Button With Different Hover Style

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

Custom Icons to Divi’s Social Media Follow Button With Different Hover Style

Step 5. Click on “+” Icon see below image

Custom Icons to Divi’s Social Media Follow Button With Different Hover Style

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

Custom Icons to Divi’s Social Media Follow Button With Different Hover Style

Step 7. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found Child Theme folder “CUSTOM_ICON_HOVER_EFFECT.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy enqueue script function “DCT_CUSTOM_ICONS_HOVER_EFFECTS”  code and paste on your existing child theme functions.php file.
-> Copy DCT_CUSTOM_ICONS_HOVER_EFFECTS.css code and paste on your existing child theme style.css file.

DCT_CUSTOM_ICONS_HOVER_EFFECTS In Function.php
function DCT_CUSTOM_ICONS_HOVER_EFFECTS() { 

wp_enqueue_style( 'custome-icon-hover-effect', get_stylesheet_directory_uri() . '/DCT_CUSTOM_ICONS_HOVER_EFFECTS.css' ); 

}



/* Add Front-Site Css 
-------------------------------------------------------------- */

add_action( 'wp_enqueue_scripts', 'DCT_CUSTOM_ICONS_HOVER_EFFECTS' );

2. Without Child theme
-> Upload “DCT_CUSTOM_ICONS_HOVER_EFFECTS.CSS”  file on your server or anywhere and add that path on Divi-> Theme Options -> GENeRAL Tab.
-> Copy CSS code from FOLDER file and paste on Divi-> Theme Options -> GENeRAL Tab -> Custom CSS.
Just PASTE CSS code in CUSTOM CSS TAB AND SAVE IT.

See image

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

See Image

Custom Icons to Divi’s Social Media Follow Button With Different Hover Style

For Simple Effect use class “dct_SOCIAL_V1” on social medial follow module .
See Images :

Custom Icons to Divi’s Social Media Follow Button With Different Hover Style

Trackbacks / Pingbacks

Reference URL : How to Add Custom Icons to Divi’s Social Media Module

 

Download Json File
View Full Demo

The post Custom Icons to Divi’s Social Media Follow Button With Different Hover Style appeared first on Divi-Childthemes.com.

]]> DIVI Social Media Follow Button With 10 Creative Hover Effects https://divi-childthemes.com/divi-social-media-follow-button-with-10-creative-hover-effects/ Tue, 23 Apr 2019 07:20:19 +0000 http://divi-childthemes.com/?p=4380726 The post DIVI Social Media Follow Button With 10 Creative Hover Effects appeared first on Divi-Childthemes.com.

]]>

In this tutorial,We are going to show you some unique social media follow button hover effects that just may surprise you.Divi’s Social Media Follow module allows you to easily style and add those important links to your social networks anywhere on your website. 

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Style 8

Style 9

Style 10

Download Json File
View Full Demo

Steps for HOVER Effect with DIVI SOCIAL MEDIA FOLLOW BUTTON

Step 1. Download 10_Different_DIVI_SOCIAL_MEDIA_FOLLOW_BUTTON_HOVER_Effect.json File.

Step 2. Unzip files

Step 3. Import 10_Different_DIVI_SOCIAL_MEDIA_FOLLOW_BUTTON_HOVER_Effect.json file on on Divi -> Divi Library -> Import & Export Button

DIVI Social Media Follow Button With 10 Creative Hover Effects

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

DIVI Social Media Follow Button With 10 Creative Hover Effects

Step 5. Click on “+” Icon see below image

DIVI Social Media Follow Button With 10 Creative Hover Effects

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

DIVI Social Media Follow Button With 10 Creative Hover Effects

Step 7. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found Child Theme folder “SOCIAL_HOVER_effectS.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy enqueue script function “DCT_SOCIAL_HOVER_EFFECTs”  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.

DCT_Social_Hover_Effect In Function.php
function DCT_SOCIAL_HOVER_EFFECTS() { 
wp_enqueue_style
( 'social-hover-effect', get_stylesheet_directory_uri() . '/DCT_SOCIAL_HOVER_EFFECTS.css' ); 
	
}



/* Add Front-Site Css 

-------------------------------------------------------------- */

add_action( 'wp_enqueue_scripts', 'DCT_SOCIAL_HOVER_EFFECTS' );

2. Without Child theme
-> Upload “DCT_SOCIAL_HOVER_EFFECTs.CSS”  file on your server or anywhere and add that path on Divi-> Theme Options -> GENeRAL Tab.
-> Copy CSS code from FOLDER file and paste on Divi-> Theme Options -> GENeRAL Tab -> Custom CSS.
Just PASTE CSS code in CUSTOM CSS TAB AND SAVE IT.

See image

1. DIVI SOCIAL MEDIA Css Code STYLE 1
.dct_social_v1 li a.icon{
background-color: rgba(255,255,255,0.1) !important;
-webkit-transition: 

background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 13px;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;text-decoration: none;}


.dct_social_v1 li a.icon:hover{
background-color: rgba(255,255,255,1) !important;}

.dct_social_v1 li a.icon:hover::before{


color: #41ab6b;}



.dct_social_v1 li a.icon::before{

speak: none;
font-size: 20px;

line-height: 50px;
font-style: normal;
font-weight: normal;
font-variant: normal;
width: 50px;
height: 50px;
text-transform: none;}



.dct_social_v1 li a.icon::after{
top: -7px;
left: -7px;
padding: 7px;
box-shadow: 0 0 0 4px #fff;

-webkit-transition: -webkit-transform 0.2s, 
opacity 0.2s;

-webkit-transform: scale(.8);
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
-moz-transform: scale(.8);

-ms-transform: scale(.8);

transition: transform 0.2s, opacity 0.2s;

transform: scale(.8);

opacity: 0;pointer-events: none;

position: absolute;

width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;}


.dct_social_v1 li a.icon:hover::after{-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
2. DIVI SOCIAL MEDIA Css Code STYLE 2
.dct_social_v2 li a.icon{
display: inline-block;
background-color:#fff !important;
font-size: 0px;

cursor: pointer;


margin: 15px 13px;


width: 50px;

height: 50px;

border-radius: 50%;


text-align: center;

position: relative;

z-index: 1;

box-shadow: 0 0 0 3px #fff;


-webkit-transition: color 0.3s;

-moz-transition: color 0.3s;

transition: color 0.3s;}



.dct_social_v2 li a.icon:hover{
background-color:#eea303 !important;
}


.dct_social_v2 li a.icon::before{
width: 50px;
height: 50px;

speak: none;

font-size: 20px;

line-height: 50px;

font-style: normal;


font-weight: normal;

font-variant: normal;


text-transform: none;

display: block;
color: #eea303;}


.dct_social_v2 li a.icon::after{
pointer-events: none;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;


content: '';

-webkit-box-sizing: content-box;


-moz-box-sizing: content-box;


box-sizing: content-box;top: -2px;

left: -2px;

padding: 2px;

z-index: -1;

background: #fff;

-webkit-transition:
-webkit-transform 0.2s,

opacity 0.2s;

-moz-transition: 
-moz-transform 0.2s, 
opacity 0.2s;

transition: transform 0.2s,
 opacity 0.2s;}



.dct_social_v2 li a.icon:hover::before{

color: #eea303;}


.dct_social_v2 li a.icon:hover::
after-webkit-transform: scale(0.85);


-moz-transform: scale(0.85);


-ms-transform: scale(0.85);

transform: scale(0.85);}
3. DIVI SOCIAL MEDIA Css Code STYLE 3
.dct_social_v3 li a.icon{	box-shadow: 0 0 0 4px #fff;-webkit-transition: color 0.3s;-moz-transition: 
color 0.3s;transition: color 0.3s;display: inline-block;font-size: 0px;
cursor: pointer;margin: 15px 13px;width: 50px;height: 50px;  background-color:#fff !important;
border-radius: 50%;text-align: center;position: relative;z-index: 1;}
.dct_social_v3 li a.icon:hover{background-color:#f06060 !important;}
.dct_social_v3 li a.icon:before{color: #f06060;font-size: 20px;line-height: 50px;width: 50px;height: 50px;}
.dct_social_v3 li a.icon:after{	top: -2px;left: -2px;padding: 2px;z-index: -1;background: #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;pointer-events: none;position: absolute;width: 100%;height: 100%;
border-radius: 50%;content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.dct_social_v3 li a.icon:hover:after{-webkit-transform: scale(1.3);-moz-transform: scale(1.3);
-ms-transform: scale(1.3);transform: scale(1.3);opacity: 0;}
4. DIVI SOCIAL MEDIA Css Code STYLE 4
.dct_social_v4 li a.icon{background-color: #0e83cd !important;
display: inline-block;font-size: 0px;cursor: pointer;margin: 15px 13px;width: 50px;height: 50px;
border-radius: 50%;text-align: center;position: relative;box-shadow: 0 0 0 4px rgba(255,255,255,1);z-index: 1;}
.dct_social_v4 li a.icon:hover{box-shadow: 0 0 0 0 rgba(255,255,255,0);color: #fff;}
.dct_social_v4 li a.icon:before{width: 50px;height: 50px;line-height: 50px;font-size: 20px;color: #fff;}
.dct_social_v4 li a.icon:after{top: -4px;left: -4px;padding: 0;z-index: 10;
border: 4px dashed #fff;pointer-events: none;position: absolute;width: 100%;height: 100%;
border-radius: 50%;content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
5. DIVI SOCIAL MEDIA Css Code STYLE 5
.dct_social_v5 li a.icon{ display: inline-block; background-color: #702fa8 !important;
font-size: 0px;cursor: pointer;margin: 15px 13px;width: 50px;height: 50px;border-radius: 50%;
text-align: center;position: relative;z-index: 1;color: #fff;	
box-shadow: 0 0 0 4px rgba(255,255,255,1);overflow: hidden;-webkit-transition: background 0.3s, color 0.3s,
 box-shadow 0.3s;	-moz-transition: background 0.3s, color 0.3s,
 box-shadow 0.3s;	transition: 	background 0.3s, color 0.3s, box-shadow 0.3s;}
.dct_social_v5 li a.icon:after {display: none;}
.dct_social_v5 li a.icon:hover {background: rgba(255,255,255,1) !important;
color: #702fa8;	box-shadow:0 0 0 8px rgba(255,255,255,0.3);}
.dct_social_v5 li a.icon:before{width: 50px;height: 50px;font-size: 20px;line-height: 50px;}
.dct_social_v5 li a.icon:hover:before { color:#702fa8;	-webkit-animation: toRightFromLeft 0.3s forwards;
-moz-animation: toRightFromLeft 0.3s forwards;	animation: toRightFromLeft 0.3s forwards;}
@-webkit-keyframes toRightFromLeft {	49% {	-webkit-transform: translate(100%);	}	
50% {		opacity: 0;		-webkit-transform: translate(-100%);	}	
51% {		opacity: 1;	}}@-moz-keyframes toRightFromLeft {	
49% {		-moz-transform: translate(100%);	}	
50% {		opacity: 0;		-moz-transform: translate(-100%);	}
	51% {		opacity: 1;	}}@keyframes toRightFromLeft {	
49% {		transform: translate(100%);	}	
50% {		opacity: 0;		transform: translate(-100%);	}	
51% {		opacity: 1;	}}
/* =======================    Style 5-D=========================*/
.dct_social_v5.d li a.icon:hover:before{
-webkit-animation: toBottomFromTop 0.3s forwards;-moz-animation: toBottomFromTop 0.3s forwards;
animation: toBottomFromTop 0.3s forwards;color:#702fa8;}
@-webkit-keyframes toBottomFromTop {	
49% {		-webkit-transform: translateY(100%);	}	
50% {		opacity: 0;		-webkit-transform: translateY(-100%);	}	
51% {		opacity: 1;	}}@-moz-keyframes toBottomFromTop {	
49% {		-moz-transform: translateY(100%);	}	
50% {		opacity: 0;		-moz-transform: translateY(-100%);	}	
51% {		opacity: 1;	}}@keyframes toBottomFromTop {	
49% {		transform: translateY(100%);	}	
50% {		opacity: 0;		transform: translateY(-100%);	}	
51% {		opacity: 1;	}}
/* =======================    Style 5-C=========================*/
.dct_social_v5.c li a.icon:hover:before{
-webkit-animation: toTopFromBottom 0.3s forwards;-moz-animation: toTopFromBottom 0.3s forwards;
animation: toTopFromBottom 0.3s forwards;color:#702fa8;}
@-webkit-keyframes toTopFromBottom {	
49% {		-webkit-transform: translateY(-100%);	}	
50% {		opacity: 0;		-webkit-transform: translateY(100%);	}	
51% {		opacity: 1;	}}@-moz-keyframes toTopFromBottom {	
49% {		-moz-transform: translateY(-100%);	}	
50% {		opacity: 0;		-moz-transform: translateY(100%);	}	
51% {		opacity: 1;	}}@keyframes toTopFromBottom {	
49% {		transform: translateY(-100%);	}	
50% {		opacity: 0;		transform: translateY(100%);	}	
51% {		opacity: 1;	}}
/* =======================    Style 5-B=========================*/
.dct_social_v5.b li a.icon:hover:before{
-webkit-animation: toLeftFromRight 0.3s forwards;-moz-animation: toLeftFromRight 0.3s forwards;
animation: toLeftFromRight 0.3s forwards;color:#702fa8;}
@-webkit-keyframes toLeftFromRight {	
49% {		-webkit-transform: translate(-100%);	}	
50% {		opacity: 0;		-webkit-transform: translate(100%);	}	
51% {		opacity: 1;	}}@-moz-keyframes toLeftFromRight {	
49% {		-moz-transform: translate(-100%);	}	
50% {		opacity: 0;		-moz-transform: translate(100%);	}	
51% {		opacity: 1;	}}@keyframes toLeftFromRight {	
49% {		transform: translate(-100%);	}	
50% {		opacity: 0;		transform: translate(100%);	}	
51% {		opacity: 1;	}}
6. DIVI SOCIAL MEDIA Css Code STYLE 6
.dct_social_v6 li a.icon{  background-color:#64bb5d !important;display: inline-block;
font-size: 0px;cursor: pointer;margin: 15px 13px;width: 50px;height: 50px;border-radius: 50%;
text-align: center;position: relative;z-index: 1;color: #fff;	
box-shadow: 0 0 0 4px rgba(255,255,255,1);	
-webkit-transition: background 0.2s, color 0.2s;	
-moz-transition: background 0.2s, color 0.2s;	
transition: background 0.2s, color 0.2s;	
box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;}
.dct_social_v6 li a.icon:hover {background: rgba(255,255,255,1);	
color: #64bb5d;}
.dct_social_v6 li a.icon:before{width: 50px;height: 50px;font-size: 20px;line-height: 50px;}
.dct_social_v6 li a.icon:hover:before {	
-webkit-animation: spinAround 2s linear infinite;	
-moz-animation: spinAround 2s linear infinite;	animation: spinAround 2s linear infinite;}
@-webkit-keyframes spinAround{ 
0% {    -webkit-transform: rotate(0deg);}
100% {    -webkit-transform: rotate(360deg);}
0% {    -moz-transform: rotate(0deg);}
100% {    -moz-transform: rotate(360deg);}
0% {    transform: rotate(0deg);}
100% {    transform: rotate(360deg);}}
.dct_social_v6 li a.icon:after{pointer-events: none;position: absolute;width: 100%;
height: 100%;border-radius: 50%;content: '';
-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
7. DIVI SOCIAL MEDIA Css Code STYLE 7
.dct_social_v7 li a.icon{background-color:#d54f30 !important;display: inline-block;
font-size: 0px;cursor: pointer;margin: 15px 13px;width: 50px;height: 50px;
border-radius: 50%;text-align: center;position: relative;z-index: 1;
color: #fff;box-shadow: 0 0 0 4px rgba(255,255,255,1);
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;}
.dct_social_v7 li a.icon:before{font-size: 20px;line-height: 50px;width: 50px;
height: 50px;-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);-ms-transform: scale(0.8);transform: scale(0.8);
opacity: 0.7;-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;transition: transform 0.2s, opacity 0.2s;}
.dct_social_v7 li a.icon:hover:before{-webkit-transform: scale(1);-moz-transform: scale(1);
-ms-transform: scale(1);transform: scale(1);opacity: 1;}.dct_social_v7 li a.icon:after{
top: -8px;left: -8px;padding: 8px;z-index: -1;opacity: 0;pointer-events: none;position: absolute;width: 100%;
height: 100%;border-radius: 50%;content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;
box-sizing: content-box;box-shadow: 0 0 0 rgba(255,255,255,1);
-webkit-transition: opacity 0.2s, box-shadow 0.2s;-moz-transition: opacity 0.2s, 
box-shadow 0.2s;transition: opacity 0.2s, box-shadow 0.2s;}
.dct_social_v7 li a.icon:hover:after{opacity: 1;box-shadow: 3px 3px 0 rgba(255,255,255,1);}
8. DIVI SOCIAL MEDIA Css Code STYLE 8
.dct_social_v8 li a.icon{display: inline-block;font-size: 0px;cursor: pointer;margin: 15px 13px;
width: 50px;height: 50px;border-radius: 50%;text-align: center;position: relative;z-index: 1;color: #fff;
background-color: rgba(255,255,255,0.1) !important;-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;transition: transform ease-out 0.1s, background 0.2s;}
.dct_social_v8 li a.icon:before{width: 50px;height: 50px;font-size: 20px;line-height: 50px;}
.dct_social_v8 li a.icon:hover {	background: rgba(255,255,255,0.05);	-webkit-transform: scale(0.93);
	-moz-transform: scale(0.93);	-ms-transform: scale(0.93);	transform: scale(0.93);	color: #fff;}
.dct_social_v8 li a.icon:after {	pointer-events: none;position: absolute;width: 100%;height: 100%;
border-radius: 50%;content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;
box-sizing: content-box;top: 0;left: 0;padding: 0;z-index: -1;box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
opacity: 0;-webkit-transform: scale(0.9);-moz-transform: scale(0.9);	-ms-transform: scale(0.9);transform: scale(0.9);}
.dct_social_v8 li a.icon:hover:after {	-webkit-animation: sonarEffect 1.3s ease-out 75ms;	
-moz-animation: sonarEffect 1.3s ease-out 75ms;	animation: sonarEffect 1.3s ease-out 75ms;}
@-webkit-keyframes sonarEffect {	
0% {		opacity: 0.3;	}	
40% {		opacity: 0.5;	box-shadow: 0 0 0 2px rgba(255,255,255,0.1),		0 0 10px 10px #3851bc,
 0 0 0 10px rgba(255,255,255,0.5);	}	
100% {		box-shadow: 0 0 0 2px rgba(255,255,255,0.1),		0 0 10px 10px #3851bc, 
0 0 0 10px rgba(255,255,255,0.5);		-webkit-transform: scale(1.5);		opacity: 0;	}}
@-moz-keyframes sonarEffect {	0% {		opacity: 0.3;	}	
40% {		opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 
0 0 0 10px rgba(255,255,255,0.5);	}	
100% {		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 		0 0 10px 10px #3851bc, 
0 0 0 10px rgba(255,255,255,0.5);		-moz-transform: scale(1.5);		opacity: 0;	}}
@keyframes sonarEffect {	0% {		opacity: 0.3;	}	
40% {		opacity: 0.5;	box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 		0 0 10px 10px #3851bc, 
0 0 0 10px rgba(255,255,255,0.5);	}	
100% {		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 		0 0 10px 10px #3851bc,
0 0 0 10px rgba(255,255,255,0.5);		transform: scale(1.5);		opacity: 0;	}}
9. DIVI SOCIAL MEDIA Css Code STYLE 9
.dct_social_v9 li a.icon{ background-color:#96a94b !important;   display: inline-block;font-size: 0px;
cursor: pointer;margin: 15px 13px;width: 50px;height: 50px;border-radius: 50%;
text-align: center;position: relative;z-index: 1;color: #fff;-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;transition: box-shadow 0.2s;}
.dct_social_v9 li a.icon:hover{	box-shadow: 0 0 0 10px rgba(255,255,255,1);color: #fff;}
.dct_social_v9 li a.icon:before{width: 50px;height: 50px;font-size: 20px;line-height: 50px;}
.dct_social_v9 li a.icon:after{pointer-events: none;position: absolute;width: 100%;height: 100%;
border-radius: 50%;content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;
box-sizing: content-box;top: 0;left: 0;padding: 0;box-shadow: 0 0 0 3px #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;}.dct_social_v9 li a.icon:hover:after{	-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);-ms-transform: scale(0.85);transform: scale(0.85);opacity: 0.5;}
10. DIVI SOCIAL MEDIA Css Code STYLE 10
.dct_social_v10 li a.icon{display: inline-block;font-size: 0px;background-color:#f06060 !important;
cursor: pointer;margin: 15px 13px;border-radius: 50%;text-align: center;position: relative;z-index: 1;color: #fff;
width: 50px;height: 50px;box-shadow: 0 0 0 4px rgba(255,255,255,1);}
.dct_social_v10 li a.icon:before{font-size: 20px;line-height: 50px;height: 50px;width:50px;}
.dct_social_v10 li a.icon:hover{	-webkit-transition: box-shadow 0.2s;	-moz-transition: box-shadow 0.2s;	
box-shadow: 0 0 0 0 rgba(255,255,255,0);	transition: box-shadow 0.2s;}		
.dct_social_v10 li a.icon:after{pointer-events: none;position: absolute;width: 100%;height: 100%;border-radius: 50%;
content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;top: -4px;left: -4px;
padding: 0;z-index: 10;border: 4px dashed #fff;}.dct_social_v10 li a.icon:hover:after{
-webkit-animation: spinAround 9s linear infinite;-moz-animation: spinAround 9s linear infinite;
animation: spinAround 9s linear infinite;}@-webkit-keyframes spinAround {from {		-webkit-transform: rotate(0deg)	}	
to {		-webkit-transform: rotate(360deg);	}}
@-moz-keyframes spinAround {	from {		-moz-transform: rotate(0deg)	}	
to {		-moz-transform: rotate(360deg);	}}@keyframes spinAround {	
from {		transform: rotate(0deg)	}	
to {		transform: rotate(360deg);	}}

 

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

See Image

DIVI Social Media Follow Button With 10 Creative Hover Effects

For Simple Effect use class “dct_SOCIAL_V1” on social medial follow module .
See Images :

DIVI Social Media Follow Button With 10 Creative Hover Effects
Download Json File
View Full Demo

The post DIVI Social Media Follow Button With 10 Creative Hover Effects appeared first on Divi-Childthemes.com.

]]> Create TimeLine Using Divi Person Module https://divi-childthemes.com/create-time-line-using-divi-person-module/ Tue, 16 Apr 2019 09:18:11 +0000 http://divi-childthemes.com/?p=35049 The post Create TimeLine Using Divi Person Module appeared first on Divi-Childthemes.com.

]]>

In this post, we’ll be showing you how you can easily create a simple creative timeline with Divi’s your Person Modules with Css and without plugin

Timeline Demo

kristiana

kristiana

Web Developer

Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here ..

Williamson

Williamson

Web Designer

Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here ..

Steve Thomas

Steve Thomas

SEO Expert

Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here ..

Lorem Jeny

Lorem Jeny

Marketing

Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …Enter your Content Here …

Subscribe To Download

Create TimeLine Using Divi Person Module

Once you scbscribe then download link will be available.it dose not take long to get left behind! Stay up to date with the latest news from us.Each week we share useful content, development news, WordPress tips, Divi tutorials and more.

[et_bloom_locked optin_id=”optin_3″]

View Premium TimelineDownload

[/et_bloom_locked]

Steps for Craete Timeline using Person Module

Step 1. Download DIVI_TIMELINE_USING_DIVI_PERSON_MODULE.JSON File.

Step 2. Unzip files

Step 3. Import DIVI_TIMELINE_USING_DIVI_PERSON_MODULE.JSON file on on Divi -> Divi Library -> Import & Export Button

Create TimeLine Using Divi Person Module

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

Create TimeLine Using Divi Person Module

Step 5. Click on “+” Icon see below image

Create TimeLine Using Divi Person Module

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

Create TimeLine Using Divi Person Module

Step 7. Here Another way possibility of IMPLEMENT TIMELINE .

1. Using Child THEME :
On unzip folder you can found Child Theme folder “DIVI_TIMELINE.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy “DCT_Timeline_CSS.css” File and paste on your existing child theme.
-> Copy enqueue script function “DCT_Timeline_CSS”  code and paste on your existing child theme functions.php file.
->  Or Copy style.css code and paste on your existing child theme style.css file.

DIVI_Timeline_CSS In Function.php
function DCT_Timeline_CSS() { wp_enqueue_style( 'timeline-effect-style', get_stylesheet_directory_uri() . '/dcttimeline.css' ); }/* Add Front-Site Css And JS-------------------------------------------------------------- */add_action( 'wp_enqueue_scripts', 'DCT_Timeline_CSS' );

2. USING THEME OPTIONS
-> Upload “DCT_Timeline_CSS.CSS”  file on your server or anywhere and add that path on Divi-> Theme Options -> Integration Tab.
-> Copy js code from FOLDER file and paste on Divi-> Theme Options -> Integration Tab.
Just write Script tag before start code and end script tag after code finished.

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

See Image

Create TimeLine Using Divi Person Module

In Row Add class to Row :”dct-main-timeline”

Create TimeLine Using Divi Person Module

In Each Person Module Add class to Module :”dct-team-style-1″

Create TimeLine Using Divi Person Module

The post Create TimeLine Using Divi Person Module appeared first on Divi-Childthemes.com.

]]>