How to customize 404 page and add all social icons on header and footer

How to customize 404 page and add all social icons on header and footer

—V 1.1—-
20 Styles of Header & 30 Styles of Footer Social Icon with color options,
5 Json Layout of 404 Page

For 404 Page

1. Go to Divi -> Theme Options

2. Now you can see “404 Page” Tab

3. Create Your 404 page design on “Divi Library” and select layout on “404 page” tab.

How to customize 404 page and add all social icons on header and footer

For Social Icons

1. Go to Divi -> Theme Options -> General

2. Just set “Enabled/Disabled” icon as per your need.

3. You can also set “Open Social URLs in New Tab” option

Footer

How to customize 404 page and add all social icons on header and footer

Header
How to customize 404 page and add all social icons on header and footer

Admin Setting

How to customize 404 page and add all social icons on header and footer

Our Favorite Top 5 Divi Child Themes

Our Favorite Top 5 Divi Child Themes

1 . Ally : Multipurpose Divi Child Theme

Our Favorite Top 5 Divi Child Themes

Features

– Fun tilt hover effects & gradient overlays
– Multiple Page Layouts
– Fullscreen background slider with image on top
– Fly-In Animations on scroll down and scroll up
– One click installation of demo content
– And more…

2 . Divi Ecommerce : Top eCommerce Child Theme for Divi

Our Favorite Top 5 Divi Child Themes

Features
– Select from two feature-rich home pages to create a lasting first impression
– Use the custom-designed WooCommerce sidebar to help products stand out
– Harness the power of content marketing to increase visibility in search
– Create an online store in rapid speed without touching a line of code.
– And more…

3 . RoyalCommerce : Divi eCommerce Child Theme

Our Favorite Top 5 Divi Child Themes
Features
Quick View
– Product Carousel/Slider
– Wishlist
– Product Image Zoom
– Ajax Product Filtering
– Sticky Shopping Cart
– Enhanced Header Icons
– Fixed Header on Mobile
– Product Zoom on Hover
– Gorgeous Banner
– And more…

4 .Elevate

Our Favorite Top 5 Divi Child Themes
Features
Includes 20 Templates
– Several Custom Project Layouts For Your Portfolio
– Custom Project Layout For Events
– Custom Project Layout For Services
– Footer Layout
– Fixed Mobile Menu Bar
– Several Custom Hover & Fly-in Animations
– And more…

5. Anthem Theme

Our Favorite Top 5 Divi Child Themes
Features
12+ page layouts
– Unique elements & fully responsive styles everywhere!
– WooCommerce integration
– Instagram Feed integration
– One-Click Migration process makes setup a breeze!
– Font Awesome integration
– And more…

How to add preloader on divi website without using any plugin

How to add preloader on divi website without using any plugin

Steps for setup  preloader on divi websiteNote : Compatible with 4.0+

1. Download DPPreChild.zip Child Theme File.

2. Install and Activate “DPPreChild Theme” Theme.

3. Unzip child Theme File.

How to add preloader on divi website without using any plugin

4. See all preloader on images folder

How to add preloader on divi website without using any plugin

You can download preloader on below links.It’s Free

https://icons8.com/preloaders/en/filtered-search/all/free/

https://loading.io/

5.  You can Change image and jquery parameter as per highlights on  below image

How to add preloader on divi website without using any plugin

– You can change “Image URL”.
– You can change “Delay” on Jquery
– You can change “fadeOut” Speed “fast” or “slow” on Jquery.

Plugin : DP Preloader

Add preloader to your website easily, responsive and made with CSS and minimal HTML markup.
Features

Enable/Disable Preloader
Display Only Home Page Option,
Hide On Mobile Preloader Option
35 Pre-define preloader and more coming soon
Custom Preloader upload option
Preloader color change option
Animation options
Use unlimited websites

How to add preloader on divi website without using any plugin

How to integrate Divi Extended Column Layouts – 5/6/7/8 Column into your child theme

How to integrate Divi Extended Column Layouts – 5/6/7/8 Column into your child theme

Steps for setup to integrate Divi Extended Column Layouts – 5/6/7/8 Column into your child theme

1. Download DPChild.zip Child Theme File.

2. Unzip file.

How to integrate Divi Extended Column Layouts – 5/6/7/8 Column into your child theme

3. Install and Activate “DP Child Theme” Theme.

How to integrate Divi Extended Column Layouts – 5/6/7/8 Column into your child theme

4. See Output

How to integrate Divi Extended Column Layouts – 5/6/7/8 Column into your child theme

How to integrate Divi Extended Column Layouts – 5/6/7/8 Column into your child theme

You can easily add this code into your child theme.

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Steps for setup Link Hover & Box Hover Effect & Pricing Table & Progress Bar

1. Download Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10.zip File.

2. Unzip file.

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

3. Import “Link Hove Effects Style 13.json”,”Box Hover Effect 19.json” , “Box Hover Effect 20.json”, “Pricing Table Style19.json” , “Pricing Table Style20.json”,”Progress Bar Style19.json”and “Progress Bar Style20.json” file on Divi -> Divi Library -> Import & Export Button

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

4. After import both layout you can see in below

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

5. Add New Page and Click on “Add From Library”

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

6.Select One of layout

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

7. After select layout

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

8. Add “part10.css” 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

9. Publish Page and see on front end.

Box Hover Effect 19
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Box Hover Effect 20
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Pricing Table Effect 19
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Pricing Table Effect 20
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Progress Bar Effect 19
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Progress Bar Effect 20
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Link Hover
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

9. Edit Content on Text Module

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part10

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Steps for setup Link Hover & Box Hover Effect & Pricing Table & Progress Bar

1. Download Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9.zip File.

2. Unzip file.

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

3. Import “Link Hove Effects Style 9.json”, “Link Hove Effects Style 10.json”, “Link Hove Effects Style 11.json”, “Link Hove Effects Style 12.json”,”Box Hover Effect 17.json” , “Box Hover Effect 18.json”, “Pricing Table Style17.json” , “Pricing Table Style18.json”,”Progress Bar Style17.json”and “Progress Bar Style18.json” file on Divi -> Divi Library -> Import & Export Button

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

4. After import both layout you can see in below

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

5. Add New Page and Click on “Add From Library”

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

6.Select One of layout

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

7. After select layout

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

8. Add “part9.css” 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

9. Publish Page and see on front end.

Box Hover Effect 17
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Box Hover Effect 18
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Pricing Table Effect 17
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Pricing Table Effect 18
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Progress Bar Effect 17
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Progress Bar Effect 18
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

Link Hover
Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9

9. Edit Content on Text Module

Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9Link Hover & Box Hover Effect & Pricing Table & Progress Bar Part9