Blog Detail Page Divi Feature & Rename/Remove Projects CPT Tutorial

Blog Detail Page Divi Deafult Features

1. If you don’t want to display “Author” or “Date” or “Categories” or “Comments” On Blog detail page then Go to Divi -> Theme Options-> Layout -> Single Post Layout -> Choose which items to display in the postinfo section.

2. If you don’t want to display “Comments” section On Blog detail page then Go to Divi -> Theme Options-> Layout -> Single Post Layout -> Show comments on posts

Blog Detail Page Divi Feature & Rename/Remove Projects CPT Tutorial BlogDetail

3. If you want to display ad banner on post then Go to Divi -> Theme Options-> Ads

Blog Detail Page Divi Feature & Rename/Remove Projects CPT Tutorial Blog Details2 e1555403129875

Blog Detail Page Divi Feature & Rename/Remove Projects CPT Tutorial BlogDetail3

4. If you want to add HTML or tracking code on post then Go to Divi -> Theme Options-> Integration -> Code Integration.

Blog Detail Page Divi Feature & Rename/Remove Projects CPT Tutorial Blog Detail Page4

Projects CPT Features

How to rename Project,Project Category & Project Tag label and frontend slug

Download code and paste on your child theme functions.php file.

Blog Detail Page Divi Feature & Rename/Remove Projects CPT Tutorial Projects

How to Remove Project,Project Category & Project Tag

Download code and paste on your child theme functions.php file.

How to add Various Kenburns effects in divi fullwidth slider module part 2

How to add Various Kenburns effects in divi fullwidth slider module part 2

– You can use this Kenburns Effect on your divi website .

Steps for Kenburns Effect on Divi Fullwidth Slider Module

1. Download  CSS File.

2. Unzip file

3. Copy your Kenburns Effect css in kenburns.css file and paste on Divi -> Theme Options -> General -> Custom CSS

4. Below are classes which you have found in css
dp-kenburns-bottom
dp-kenburns-bottom-rev
dp-kenburns-bottom-left
dp-kenburns-bottom-left-rev
dp-kenburns-left
dp-kenburns-left-rev
dp-kenburns-top-left
dp-kenburns-top-left-rev

5.Add Full Width Section and Select Full Width Slider Module

6.Choose any one of class [ see point 4 ] & add on Advanced -> CSS Class and do others settings, see on images.

Select Advanced Tab

How to add Various Kenburns effects in divi fullwidth slider module part 2 KT1

Add Class on CSS Class Field

How to add Various Kenburns effects in divi fullwidth slider module part 2 KT2

Edit Slider Setting Icon

How to add Various Kenburns effects in divi fullwidth slider module part 2 KT3

Use Parallax Effect

How to add Various Kenburns effects in divi fullwidth slider module part 2 KT4

How to add Various Kenburns effects in divi fullwidth slider module part 2

How to add Various Kenburns effects in divi fullwidth slider module.

– You can use this Kenburns Effect on your divi website .

Steps for Kenburns Effect on Divi Fullwidth Slider Module

1. Download  CSS File.

2. Unzip file

3. Copy your Kenburns Effect css in kenburns.css file and paste on Divi -> Theme Options -> General -> Custom CSS

4. Below are classes which you have found in css
dp-kenburns-top
dp-kenburns-top-rev
dp-kenburns-top-right
dp-kenburns-top-right-rev
dp-kenburns-right
dp-kenburns-right-rev
dp-kenburns-bottom-right
dp-kenburns-bottom-right-rev

5.Add Full Width Section and Select Full Width Slider Module

6.Choose any one of class [ see point 4 ] & add on Advanced -> CSS Class and do others settings, see on images.

Select Advanced Tab

How to add Various Kenburns effects in divi fullwidth slider module. KT1

Add Class on CSS Class Field

How to add Various Kenburns effects in divi fullwidth slider module. KT2

Edit Slider Setting Icon

How to add Various Kenburns effects in divi fullwidth slider module. KT3

Use Parallax Effect

How to add Various Kenburns effects in divi fullwidth slider module. KT4

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

Best Way To Optimize Your Website Practice

Best Way To Optimize Your Website Practice

Steps

1. Choose the Right Hosting Plan

Choose a hosting plan that can handle traffic spikes efficiently.

2. Use a Fast WordPress Theme

A design that has been coded badly, or uses images throughout the design, will add unnecessary weight to your page.Such a design could add a few seconds to your page loading time.

3. Monitor Your Plugins

– Before you install any plugin on your website, ask yourself “Is this plugin necessary?”.
Plugins are one of the biggest causes of WordPress websites being slow. The more plugins you install without research, the more likely you will face performance issues.Many plugins can bottleneck your CPU due to persistent processes. If this happens, your whole server could go down.

– One plugin I highly recommend you use is P3 Profiler. Developed by GoDaddy, the plugin will show you exactly how much load time your plugins are adding. A breakdown is given which displays exactly how much load each plugin adds. It is the most effective way of seeing what plugins are slowing down your website.

4. Empty Your Trash

– WordPress 2.9 introduced the WordPress trash system. Whenever content is deleted, be it a comment, post, page, media etc; it is sent to trash.

– Trash can take up a lot of unnecessary room in your website’s database. The bigger the database, the longer it is to retrieve information from it.

– By default, WordPress will automatically delete trash after thirty days. This can be reduced by modifying the wp-config.php file.

– For example, you could reduce this to seven days by adding the following:
define (‘EMPTY_TRASH_DAYS’, 7);

– You can completely disable the trash system by adding this to your wp-config.php file.
define (‘EMPTY_TRASH_DAYS’, 0);

5. Reduce Post Revisions, Drafts, Spam, Pingbacks and Trackbacks

– It is not just trash that can needlessly increase the size of your database. All post types populate table rows with data. Therefore, it is important to regularly delete spam comments and unwanted pingbacks and trackbacks.

– In addition to one autosave of your posts and pages, revisions will be generated each time you save your articles. This means that an article with ten revisions with take up ten times as much room on your database than the actual article that was published. As you can imagine, this increases the size of your database considerably.

– By default, WordPress will save an unlimited number of revisions, however this is generally not needed. It is better to reduce this limit to something more practical such as two or three.

– You can do this by adding the following code to your wp-config.php file:
define( ‘WP_POST_REVISIONS’, 3 );

– You can completely disable the post revision system by adding this to your wp-config.php file.
define (‘WP_POST_REVISIONS’, 0);

6. Optimize Your Images for the Web

– It is therefore in your best interests to optimise your images for the internet before you upload them to your website. Most photo editing applications, such as Photoshop, allow you to do this via the “Save for Web” option.

– Smush your images with WP Smush.it plugin.

– If possible, use Sprites for your themes so in this way we can make fewer http reuqest. So always look for themes that utilise sprites

7. Enable Gzip Compression

– To decrease the size of data that’s being transferred between your server and your visitors, you can enable the gZIP compression for your images, CSS and JavaScript files

– By doing this, the web server will compress (like creating a ZIP file for example) this content before it’s transferred over the Internet to your browser. On the other side, your browser decompresses the content before rendering it and so it will lowering the loading times of your pages..

– Gzip compression allows a website page to be transferred to a browser at up to 70% of its original size.

– Gzip can be enabled via the WordPress options page. You can find this page at www.yourwebsite.com/wp-admin/options.php. To enable Gzip, simply change the value of the Gzip field from 0 to 1.

– Also it can be possible to add some small code into your .htaccess file

8. Make sure your theme loads nothing more than just a few JavaScript files, one CSS file

Minify and Combine CSS and Javascript so this greatly reduces the number of HTTP requests

9. Always optimize your PHP code so make fewer database queries and use fewer PHP functions.

10. Enable Browser Caching

11. Enable Dynamic Caching by using install a Cache Plugin

12. Add expires headers for caching

13. Use a Content Delivery Network

14. Optimize your WordPress Database

15. Respect WordPress Coding Standards so for that used below standards from wordpress

– WordPress coding standards for HTML
– WordPress standards for CSS code
– PHP coding standards in WordPress
– Javascript code standards for WordPress

View More

16. Properly enque scripts and styles

Top Cache Plugins

– WP Fastest Cache
– WP Rocket
– WP Super Cache
– W3 Total Cache

Top Speed Checking Tools

Google PageSpeed Insights
Gtmetrix
pingdom

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