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

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

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 Detail Page Divi Feature & Rename/Remove Projects CPT Tutorial

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

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

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

Add Class on CSS Class Field

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

Edit Slider Setting Icon

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

Use Parallax Effect

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

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.

Add Class on CSS Class Field

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

Edit Slider Setting Icon

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

Use Parallax Effect

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

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  

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

How to add slider using blurb,team,testimonial modules

5. Click on “+” Icon see below image

How to add slider using blurb,team,testimonial modules

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

How to add slider using blurb,team,testimonial modules

7. Here two way possibility of use tilt .

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

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

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

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

How to add slider using blurb,team,testimonial modules

– > Same for CSS

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

See Image

How to add slider using blurb,team,testimonial modules


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


Click here to more information about owl js

Click here to more information about tilt js

See Image

How to add slider using blurb,team,testimonial modules

How to add slider using blurb,team,testimonial modules

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

Optimizing your website’s images is another crucial step in improving its overall performance. To ensure your images are web-ready, consider optimizing them before uploading them to your website. 

Large images can slow down your website’s load time, negatively impacting the user experience and search engine rankings. Many photo editing applications, such as Photoshop, allow you to optimize images for the web using the “Save for Web” option.

In addition to optimizing your images manually, you can also use one of the best WordPress image optimization plugins to automate the process. By reducing the file size of your images, these plugins can significantly improve your website’s load time and overall performance. WP Smush.it is a popular plugin that compresses and optimizes your images without sacrificing quality.

Another useful technique for optimizing your website’s images is to use Sprites for your themes. By combining multiple images into a single file, Sprites reduce the number of HTTP requests needed to load your website. When choosing a WordPress theme, look for one that utilizes Sprites to improve your website’s performance.

To learn more about optimizing your website’s images, check out Elegant Themes’ blog post on the best WordPress image optimization plugins. By incorporating these tips into your website optimization strategy, you can create a faster, more user-friendly website that ranks higher in search engine results.

 

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

One of the best ways to optimize your website’s performance is by enabling dynamic caching using the best WordPress cache plugins. Caching plugins can help to speed up your website by storing frequently accessed data and serving it up quickly without having to fetch it from the server every time a user requests it. By installing one of the best WordPress cache plugins, such as WP Rocket, W3 Total Cache, or WP Fastest Cache, you can reduce your website’s load time and improve its overall performance, which can lead to higher search engine rankings and better user engagement.

To ensure your website is running at its best, consider installing one of the best WordPress cache plugins and taking advantage of its dynamic caching capabilities. With the right cache plugin and configuration, you can give your website’s performance a significant boost. Check out Elegant Themes’ blog post on the best WordPress cache plugins to help you make an informed decision about which plugin to use for your website.

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  

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

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

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

Old Divi Builder

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

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

-> 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


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