W3 Total Cache Settings

Many W3 Total Cache settings are preset (shown in the install tab), but not all. I’ll walk you through the performance tabs then help you setup Cloudflare (free) and MaxCDN ($90/year with my coupon or do a free 30 day trial). I have used the W3 + Cloudflare + MaxCDN + SiteGround combo to make multiple WordPress site load 400% faster – now let’s do yours!

Over 75,000+ people have used this tutorial to optimize their WordPress site. It can fix over 20 items in Pingdom: caching, minify, gzip, bad requests, cache validator, add expires headers, ETag, content delivery network, reduce DNS lookups, cookie-free domains, and plenty more. This tutorial is current with the latest W3 Total Cache version updated Jan. 17, 2017.

Here’s my Pingdom report with W3 Total Cache. My GTmetrix report is pretty good too. Of course if you want a nice report like this you NEED to be on fast servers, minimize plugins and external requests, optimize images, and ideally do everything in my WordPress speed guide.

W3 Total Cache Pingdom Test

Download my recommended W3 Total Cache settings here (you’ll need a Dropbox account). Upload under Performance → General Settings → Import / Export Settings. Check your site to make sure everything is OK (should be). You will still need to configure MaxCDN + Cloudflare.





1. General Settings


Here’s my 25% off MaxCDN coupon ($90/year annually) or sign up for a free trial. Then head to my MaxCDN section. This is recommended in the official WordPress optimization guide…


Here is how Google Page Speed Insights look in your W3 Total Cache “dashboard” tab once you’ve added an API (instructions provided in W3 Total Cache). I prefer Pingdom over GTmetrix and Google Page Speed Insights because it’s more accurate (WP Rocket says so too).



2. Page Cache


Enabling compatibility mode is highly recommended by plugin developer (in the install tab) and even though it may slightly reduce performance, problems are much less likely to exist with your site. He says this “optimizes the interoperability of caching; the tradeoff is that disk enhanced page cache performance under load tests will be decreased by ~20% at scale.”


3. Minify Settings

The plugin developer says the recommended settings for minify, database, and object cache are preset. You can find this in the install tab. Remember, if you’re using Cloudflare this will take care of minify for you, so just make sure minify is turned off in the General Settings tab.



4. Database Cache

  • Leave as is (recommended in install tab)


5. Object Cache

  • Leave as is (recommended in install tab)


6. Browser Cache


Leave everything else including ‘expires header lifetime’ which the developer says is preset.


7. CDN

MaxCDN mirrors your site on multiple data centers around the world which reduces the geographical distance between your server and visitor. Without a CDN, you only have 1 origin server which can be very far away for many people. MaxCDN is specifically good for improving items like reduce HTTP requests, use a content delivery network, reduce DNS lookups, reduce cookie size, cookie-free domains, and other items in Pingdom and other speed testing tools. And yes, you should get better results if you use both Cloudflare and MaxCDN.

MaxCDN W3 Total Cache General Settings

How To Setup MaxCDN With W3 Total Cache
1. Sign up for MaxCDN. My 25% off coupon + 2 free months for annual billing = $90/year, or do a free trial. Use the steps below or watch my video. MaxCDN also has their own tutorial.

Sign up for your plan…

MaxCDN Signup Page

2. Once signed up, go to your MaxCDN dashboard and go to Zones → Create Pull Zone:


3. Enter your website as the origin server URL, the other two are your site name. Click create.

MaxCDN Pullzone

4. Leave this window open (you will need your CDN URL for step 8).


5. Still in MaxCDN, go to the “Account” tab and go to API → View All  → Create Application:

MaxCDN Application

  • Name/description should be your sitename
  • Application URL and Callback URL should be empty

6. After creating an API, leave that window open too. So now you should have your pull zone info and API info (step 4 and 5) open in 2 tabs, which is the info we need for W3 Total Cache:



7. Head over to W3 Total Cache and navigate to the General Settings tab, scroll down and enable MaxCDN (remember when you’re using a CDN, database cache should be disabled):


8. Now go to the CDN tab and use these settings. You’ll need to enter your alias+key+secret and CDN URL (from step 6), then use the test button to make sure MaxCDN is working…


Here’s where you enter your MaxCDN info in the “CDN” tab…


9. Save changes, then go back to MaxCDN and Whitelist your hosting IP (W3 Total Cache should have a notification with that IP address). Copy and paste into MaxCDN’s IP Whitelist:



10. Finally, view pull zones in MaxCDN and go to Manage → Settings. Make sure you ‘strip all cookies’ and follow the same settings I use, which were configured by MaxCDN themselves.


All done!

If you see “cookie-free domains” in your Pingdom report, you may want to contact MaxCDN’s support to see if they will help you with this – they were able to fix this for me.


Be sure to contact MaxCDN support as they were able to tweak my settings to further improve my performance grade. They have one of the best support teams ever – definitely utilize it.

CDN pointers from the plugin developer (found in Install tab) – if you do not use the Media Library, import your images etc into the default locations. Use the Media Library Import Tool on the “CDN” tab to do this. If you do not have a CDN provider, you can still improve your site’s performance using the “Self-hosted” method. On your own server, create a subdomain and matching DNS Zone record; e.g. static.domain.com and configure FTP options on the “Content Delivery Network” tab. Be sure to FTP upload the appropriate files, using the upload buttons.


8. Fragment Cache

You will need to upgrade to W3 Total Cache Pro to use fragment cache (which can make your site faster), but to be honest I don’t use it… so I can’t say whether it’s worth upgrading. If you do they have recommendations on that page I linked to which helps with fragment cache and making the plugin aware you’re grouping transients. You’ll need have some coding experience.


9. Extensions


Cloudflare – activate and see step 10.

Genesis Framework – if you’re using the Genesis Framework you can click the ‘upgrade’ button in W3TC to buy W3 Total Cache Pro for $99/year. This will enable additional speed features like fragment cache and the Genesis Framework extension which can improve site speed. Once purchased, it should say “the plugin is enabled in community mode.” Alternatively, your license key will be sent to you via email which you can enter in the General Settings tab.

WordPress SEO by Yoast – activate if using Yoast (ps. my Yoast tutorial is just as good as this).


10. Cloudflare

1. In the W3 Total Cache ‘Extensions’ tab, activate CloudeFlare and click the settings:


Configure these Cloudflare settings:


Caching Levels – I use the aggressive caching level which includes query strings.

Hotlink protection – prevents spammy sites from hosting your images on their site (sucking up your bandwidth) which can cause CPU overages with your hosting company. This was a HUGE problem for me and I suggest monitoring links to your site in Google Search Console to make sure there aren’t a crapload of spammy sites doing this. Hotlink protection prevents this.

2. Now sign up for Cloudflare. You will be prompted to add your website and begin scan…


3. Click ‘continue setup’ then scroll down through the rubbish and click continue…

Cloudflare missing records

4. Choose ‘free website’ then continue. Cloudflare will provide you with 2 nameservers:


5. Do a Google search for “how to change nameservers on SiteGround” (only search for your host), then follow their instructions. You will likely copy Cloudflare’s nameservers and paste them into a custom nameservers option in your hosting cPanel (screenshot below is for SiteGround). Then go back to Cloudflare and click ‘I’ve added all missing records, continue.’ You can also use whois.net to double check that your nameservers have been changed.


6. Now login to Cloudflare and go to your speed settings. You definitely want to enable auto minify for ALL items and Rocket Loader


7. Now go to your page rules settings. There are 3 page rules I recommend creating:




Once you’re done configuring W3 Total Cache, MaxCDN and Cloudflare, purge all caches in W3 Total Cache (below). If you don’t see this, there may be an ’empty all caches’ option in the dashboard tab. Then retest your site in Pingdom. It can take up to 72 hours for Cloudflare nameservers to propagate, but you should receive a confirmation email when it’s complete.



Source: Online Media Masters

Tools We Use And Recommend

Managed WordPress Hosting

Engineered for speed, built for security, crafted for WordPress. Feature-rich managed WordPress hosting with premium support, starting at just $3.95/month.

Elegant Themes with Visual Builder

WordPress Themes That Empower 401,632 Customers.  Get The Ultimate WordPress Toolkit For Web Design Professionals And Business Owners

Constant Contact

With Constant Contact, you can create effective email marketing and other online marketing campaigns to meet your business goals


Whitespark builds tools and provides services that help businesses and agencies with local search marketing. We live and breathe local SEO and we’re known far and wide for writing and speaking on it.


Be Able. From programming to photography, take in-depth online courses and meet any challenge with skill.

At TJ-WEBS, our goal is to provide awesome & affordable web design to individuals, small businesses and non-profits. We love the little guys, the newbies, the novices… the up-and-comers, the mom and pops and the have nots. We believe beautiful websites can be affordable and accessible to everyone. From basic blogs to full blown e-Commerce sites, we offer affordable websites to all.

Remove Query string of css/js files

Most of the time we found that WordPress use the query string like ?ver= 2.3.7  for all the js and css files of wp-content and wp-includes files. So, when we check the performance of our site with gtmetrix.com or any other online tool, it shows some instruction to reduce that overload.

Resources with a “?” in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:

You can simply put the below mentioned code in your current theme’s function.php file.

function rtp_rssv_scripts() {
    global $wp_scripts;
    if (!is_a($wp_scripts, 'WP_Scripts'))
    foreach ($wp_scripts->registered as $handle => $script)
        $wp_scripts->registered[$handle]->ver = null;

function rtp_rssv_styles() {
    global $wp_styles;
    if (!is_a($wp_styles, 'WP_Styles'))
    foreach ($wp_styles->registered as $handle => $style)
        $wp_styles->registered[$handle]->ver = null;

add_action('wp_print_scripts', 'rtp_rssv_scripts', 999);
add_action('wp_print_footer_scripts', 'rtp_rssv_scripts', 999);

add_action('admin_print_styles', 'rtp_rssv_styles', 999);
add_action('wp_print_styles', 'rtp_rssv_styles', 999);


And You are done.

Clear the cache of your site/server and cross check site performance on gtmetrix.com.

Source: Easy Engines


At TJ-WEBS, our goal is to provide awesome & affordable web design to individuals, small businesses and non-profits. We love the little guys, the newbies, the novices… the up-and-comers, the mom and pops and the have nots. We believe beautiful websites can be affordable and accessible to everyone. From basic blogs to full blown e-Commerce sites, we offer affordable websites to all.

Tools We Use And Recommend

Managed WordPress Hosting

Engineered for speed, built for security, crafted for WordPress. Feature-rich managed WordPress hosting with premium support, starting at just $3.95/month.

Elegant Themes with Visual Builder

WordPress Themes That Empower 401,632 Customers.  Get The Ultimate WordPress Toolkit For Web Design Professionals And Business Owners

Constant Contact

With Constant Contact, you can create effective email marketing and other online marketing campaigns to meet your business goals


Whitespark builds tools and provides services that help businesses and agencies with local search marketing. We live and breathe local SEO and we’re known far and wide for writing and speaking on it.


Be Able. From programming to photography, take in-depth online courses and meet any challenge with skill.

How to Create a Complete WordPress Backup for Free with BackWPup

First thing you need to do is install and activate BackWPup plugin. Upon activation, the plugin will display a welcome page. It will also add a BackWPup menu item in your WordPress admin sidebar.

BackWPup Menu

Creating Backup Jobs with BackWPup

Click on Add New Job to create an automated backup job for your WordPress website. Under General tab, provide a name for this job. This name will be used internally and will help you identify each backup instance. Under the Job Tasks section, select the type of tasks you want this to perform. Available tasks include database backup, file backup, WordPress XML export, Installed plugins list, optimize database tables and check database tables. If you just want to create backup of your website, then you can select all options except for optimize and check database tables.

Create a new backup job in BackWPup

Under backup file creation section, choose an archive type. The default option is tar.gz, however you can choose zip archive if you want. Below this, you will see Job Destination section. This is where your backups will be stored. BackWPup provides multiple options to store your backup files. It can store backup file on your server, send it via email, backup to FTP, backup to dropbox, amazon S3, Windows Azure, Rackspace, and Sugarsync. Whatever you do, DO NOT store the backups on your server. For the sake of this WordPress tutorial, we will be using DropBox.

Choose backup destination and compression

Scheduling Automated Backup in WordPress using BackWPup

Click on Schedule tab and choose how often do you want to backup your site. You can schedule it to run monhtly, weekly, or daily basis by choosing WordPress Cron option. Alternatively, you can choose to manually run the job, so that you can create on-demand backups of your site. For advance level users there are more choices like using a URL to start the job externally using some other software or starting the job using WP-CLI, a command line interface for WordPress. For beginner level users we would highly recommend scheduling a daily or weekly backup by choosing WordPres Cron option.

Scheduling automatic backups in WordPress using BackWPup

What to Backup?

Click on DB Backup tab to select which tables you want to be included in the backup. Sometimes WordPress plugins create their own tables into your database, most of the time this data is not crucial and you may not need it. Unchecking these tables will reduce your backup size. However if you don’t know what you are doing, then keep all tables selected.

Select or exclude tables from backup job

Under the Files tab you can select which directories and files you want to include in the backup job. We would recommend that you do not backup core WordPress files. Instead, only backup your wp-content/uploads folder. Uncheck Backup root folder. Exclude any folders in wp-content folder that you don’t want. For example, sometimes plugins will create their own directories inside wp-content folder to store plugin data. You can exclude these folders if you want.

Select or Include files and directories from backup job

Saving WordPress Backups To Dropbox

Depending on what you chose as destination for your backup, you will see a tab for it. In this tutorial we will show you how to automatically upload your WordPress backup to Dropbox using BackupWP plugin. So click on Dropbox tab and then click on Reauthenticate (full Dropbox).

Authenticate with Dropbox to save your backups to Dropbox

This will take you to the Dropbox website where you will be asked to provide your username and password. After signing in, DropBox will ask for your permission to grant BackWPup access to your DropBox account.

Giving BackWPup Access to your Dropbox account

After that, the plugin will take care of the rest.

Creating Multiple WordPress Backup Jobs using BackWPup

You can create multiple backup jobs with BackWPup. For example, you can create a scheduled job to run on a daily or weekly basis to backup your WordPress Database and another job to run manually for backing up your WordPress files only. You can see all jobs created by you on BackWPup » Jobs page. You can run any of the backup jobs by clicking on Run Now link below the job, even for scheduled jobs. You can also edit settings for a job or delete it entirely.

Creating and managing multiple Backup Jobs

Running a Backup Job

When you execute a Backup Job manually by clicking on Run Now link, BackWPup will display the backup progress. Clicking on display working log, you can see what is going on in the background. If for some reason the backup job fails, then this log will also display the reason. You can also abort a job during the progress by clicking on abort button.

Running a manual backup job in BackWPup

Troubleshooting WordPress Backup Jobs in BackWPup

Running a backup job may cause extra load on your hosting server. This may result in unfinished backup jobs. Also on most shared hosting services, there is a limit on how much time or memory a script can consume. When your server stops BackWPup for crossing the time or memory limit, it waits for 5 minutes and then resumes the process. In this case, it would take a while for a backup job to finish.

The first thing you should do is increase your PHP memory limit, then go to BackWPup » Settings and click on the Jobs tab. Increase Maximum number of restries for job steps option. The default value is 3, you can increase it to 5 and see if this works for you. After that scroll down to Reduce server load option and select medium or minimum server load options.

Increasing memory and reducing server load for BackWPup

Final Thoughts

You are probably wondering if a good free plugin like BackWPup exist, then why do people pay for plugins like BackupBuddy or VaultPress. One of the reason is support. When you pay for a product, then you are guaranteed to get support. Another thing that we notice with both BackupBuddy and VaultPress is that they offer malware scanning. We use VaultPress because it is a 100% managed service. The backup is stored in their cloud server, and it is a pretty fool-proof setup.

We can not stress this enough that you need to back up your site regularly. Do not wait for your WordPress site getting hacked or infected with malware, start backing up now, so that you can swiftly restore WordPress from backup when the time comes. We hope that this guide helped you automate your WordPress backups. Let us know which WordPress backup solution you use by leaving a comment below.

Source: WP Beginner

6 Steps to Building a WordPress Maintenance Business

By Stephen Altrogge

Pro Ebook group

Recurring revenue is the Shangri-La for business owners. Rather than scrapping and fighting and hunting for new clients, you have the same clients coming to you again, providing you with a steady stream of income. It takes away the stress of having to dig up new streams of revenue and allows you to start planning ahead.

But if you’re a WordPress designer or developer, you may be a bit perplexed about this whole “recurring revenue” thing. You make your money when clients need something new, like a website refresh for a site that looks like it was designed when MySpace was hot. You essentially have to wait for them to decide they want to change things. The whole idea of regular income feels like a mystery.

We’ve got some good news. Using the WordPress skills you already have, you can add WordPress maintenance to your business model. Building a WordPress maintenance business gives you the steady income you need while also allowing you to continue the development or design you’re already doing (if you desire).

In this article, we’re going to take a deep dive into the what, why, and how of building your own WordPress maintenance business. Buy the end, you’ll have a firm grasp on how to launch yours.

Step #1: Choose Which Services You’ll Offer

First, you’ll want to choose which services you’re going to offer clients. Before you can offer maintenance services to your clients, you need to know what you’re going to offer. The options here are numerous, including:

  • Website registration and hosting: They need to have this anyway, so why not incorporate this into the services you offer?
  • Security: You know what can happen when a site gets hacked. This is a huge problem that’s only going to get bigger.
  • Backups: Every site should be backed up on a regular basis. If something goes terribly wrong, the only way to restore it is from a backup.
  • Ongoing design and development tweaks to the site: Your clients will want things to be changed. You can offer these changes as part of a monthly package rather than needing to start a new project every time.
  • Content changes and creation. Some of your clients won’t be comfortable creating and uploading their own content. You can charge them to do so.
  • Social media management. Your clients probably know they need a social media presence but some may not know now to do it.

There are numerous other options you can offer, such as analytics, email marketing, online advertising, and consultation. Choose the services that will generate the most revenue while requiring the least additional work to what you’re already doing.

If you choose to offer only maintenance services, you have the option of partnering up with other designers and developers who aren’t interested in the maintenance side of things.

Step #2: Determine Your Pricing Model

The next step is to determine how much you’ll charge for your maintenance services. Before you can do this, there are several factors you need to take into consideration.

What are your monthly expenses? You must be able to cover your monthly and annual expenses, allow space for slow periods and client acquisition, as well as take into account your own margin. Don’t underestimate this or you’ll end up charging too little, which is difficult to back out of once you’ve offered it to clients.

How much does your competition charge? Evaluate your competition and then determine how you’ll stack up. Don’t necessarily try to offer the lowest price, especially if you’re offering superior services.

What service tiers will you offer? Creating several tiers of services at different price points allows you to take advantage of higher paying customers who want superior services while also offering a less expensive option to those with budget restrictions. Additionally, if you start a client at a lower tier you can slowly nudge them toward choosing more services.

As you negotiate with your clients, don’t let them determine the price. They probably don’t have a true understanding both of what you offer and what services like yours normally cost. Plus, there is always someone will to offer bad service at a lower price. Don’t engage in a race to the bottom.

Also, always ensure you plan for things going bad. You will encounter problems that take an inordinate amount of time, so factor those events into your price.

Step #3: Promote Your Services

Now that you’ve established what you’re going to offer and how much you’re going to charge, it’s time to start telling the world. The first step is to create a detailed “Services” page on your website. This is going to be the primary place you send potential clients who are interested in hiring you.

Here are some key things to consider when crafting your services page:

It’s all about the benefits. While you certainly want to describe the specific services you offer, you should spend far more time focusing on how your services will massively improve the lives of your customers. Remember, ultimately you’re selling peace of mind. Your backup, security, optimization, and other services allow the customer to know that everything will keep working smoothly. Paint a picture of the good life when discussing services you offer.

Set yourself apart. You need to be able to set yourself apart from your competitors, either through price, number of services, quality of service, attention to detail, or some other factor. Don’t be afraid to explicitly say why you’re a better choice.

Press in on the pain. Acknowledging specific customer pain points allows you to offer the solution to the pain. It shows customers that you have very pointed solutions to their difficult issues.

Make it easy to contact you. This should be obvious, but it’s neglected far too often. You want new clients, so don’t make it difficult to contact you. Put your contact form front and center.

Another simple way to advertise your services is to begin promoting them to your circles on social media. There’s a significant chance that at least one of your contacts will want or know someone who wants WordPress maintenance services.

Step #4: Explain The Importance Of Maintenance To Your Existing Clients

Unless your clients are particularly tech savvy, they’re probably not going to understand why they need someone to perform maintenance on their website. After all, this is a website we’re talking about, not a high performance car engine. They’re already paying you to create something nice for them, so why should they have to pay you to maintain it as well?

A big step in building a WordPress maintenance business is taking the time to explain to your clients why they need maintenance in the first place. Some simple talking points here include:

  • Site Optimization – Few things create problems like sites that aren’t optimized. If a site takes too long to load, visitors will leave quickly and Google can even penalize it, resulting in lower search rankings.
  • Peace of Mind – It’s highly likely that if your clients tried to change settings on the site, they would completely screw up the site. By entrusting all those functions to you, they ensure that their site continues functioning properly and that all necessary updates get made.
  • Your Expertise – Your clients don’t want to spend countless hours trying to figure out things you can handle in a matter of moments. You are offering expert services to them which will dramatically cut down on the amount of time they must spend on maintaining their website.

The arguments in favor of regular maintenance aren’t complicated or difficult to understand, but they’re probably not obvious to those who aren’t tech savvy. Patiently take the time to explain these things to them and help them see that this truly is a worthwhile investment.

There are some relatively ways to get existing clients into a maintenance contract.

  • Offer discounts for a limited time. Offering the first month, or several months at a discounted rate are a great way to entice customers to buy in to the idea of maintenance. Plus, once they see the value of what you offer, they’re more likely to stay on at the higher price. Just be very clear about when the price will increase and how much it will increase.
  • Include maintenance in project budgets. If you’re doing a design or development project, include a year of maintenance in the initial proposal. This takes care of the project support that most developers offer.
  • Offer a limited trial. Similar to above, offering a trial period of maintenance support in place of standard post-launch support is a simple ways to get customers in the maintenance mindset.

We don’t recommend free support for clients. They’ll latch on to that and be resistant to paying for maintenance services when the time comes.

Step #5: Select Your Tools

Once you’ve gotten some clients, you’ll need a set of tools to help you perform the maintenance tasks. Those tools should include:

Customer Relationship Management (CRM): A CRM system allows you to track your clients, as well as a variety of data associated with those clients. This can be done in a simple spreadsheet, although you may want to use something more sophisticated as your business grows.

Support System: You need to have a way to process help requests from clients, and that’s where a ticketing system comes into place.

Local Desktop Environment: When making changes to a site, you want to be able to test those changes before making them live. That happens in the local desktop environment. DesktopServer is built specifically for WordPress.

Reliable Editor: You’re going to need a full Integrated Development Environment to allow you to make changes to any code on the back end.

Browser Developer Tools: You’ll be using these for inspecting the sites you manage. Chrome and Firefox come with their own set of tools.

FTP: When uploading and download files to the sites, you’ll rely heavily on an FTP client.

Uptime Monitoring: Your clients can’t afford to have their sites go down, and this tool will allow you to monitor the uptime of those sites.

Security: No explanation needed. If one of your clients sites get hacked, you’ll need to act quickly to determine where the hack occurred and how to fix it.

Analytics: Google Analytics allows you to monitor key stats about who is visiting the site, where they’re coming from, etc.

Step #6: Demonstrate Your Value To Your Clients

To keep clients returning month after month, you’re going to want to show them the value of what you’re doing. A simple way to do this is to generate regular reports for them that show what you’ve done for them and how it has helped them. These reports can include:

  • Monthly traffic (include SEO generated traffic to show the value of your optimizations)
  • Top content (especially content you’ve created or promoted)
  • Security hacks thwarted
  • Mobile traffic as well as mobile optimizations you’ve made
  • Uptime reports (demonstrates your reliability)

These types of reports show your clients the value of the services you offer.

Conclusion: What Are You Waiting For?

Running a WordPress maintenance business isn’t all kittens and pots of gold at the end of rainbows. You will have support issues to handle and irate clients who don’t understand what you’re doing. Demonstrating patience, grace, and humanity in these scenarios allows you to handle these problems without burning bridges unnecessarily.

But in spite of these challenges, a maintenance business is an outstanding way to generate recurring revenue and get out of the typical feast or famine cycle that afflicts most freelancers. It also allows you to add additional value to clients and extend the length of business relationships.

Source: Site Point

This article was sponsored by GoDaddy. Thank you for supporting the sponsors who make SitePoint possible.

How to Change Slider Height on Divi Theme

Today I’m going to give you a quick tip on how to change the height of the Divi slider module. You may have come into a situation when you created a Divi website with a slider and the size of your slider was just not right. It might be too low or too high. To modify this, just add the following code into the Divi custom CSS field (in your WP admin panel: Divi > Theme Options) or to your child theme’s style.css file:

.et_pb_slider, .et_pb_slider .et_pb_container {
height: 600px !important;
.et_pb_slider, .et_pb_slider .et_pb_slide {
max-height: 600px;

This code will take care of it. Change the “600px” values with your preferred slider height.


How to Change Divi Slider Height


Pretty simple, isn’t it? Are you looking for more Divi quick tips? Feel free to email me and let me know about what would you like me to write the next time. Also, don’t forget to opt-in for my email newsletter and I will notify you every time when I publish a new article on this blog.


Source: Divi Theme

How To Make Divi Blog Grid Posts The Same Height

I love Divi’s blog module, and I think that the grid layout is fantastic out-of-the-box. And with a little styling, the grid can look extremely flash and provide an awesome user experience to your visitors. If you haven’t checked out my Blog Grid tutorial then take a look here!


However, the Divi’s blog grid layout does have a limitation. When you have featured images of different sizes, and post titles/excerpts which are different lengths, it can cause the grid to look uneven – even with the ‘Equalize Column Heights’ option checked. For example:

blog grid heights

OCD NIGHTMARE. Fortunately, it only takes a short amount of CSS to fix this.

Click here for a live example of a blog grid with equalized heights.

Setting The Blog Grid Posts Heights


Firstly, let’s assume you’re using a single column layout with one Blog Module (below), set to a Grid layout.



Go to Blog Module Settings > Custom CSS and give the module the CSS Class “custom_blog”.



Update your page, and then head to Divi > Theme Options in your Dashboard.


Custom CSS


Add the following code to your Custom CSS box:

@media only screen and (min-width: 768px) {
.custom_blog .et_pb_post {
min-height: 580px;


(The media query is set so that the CSS kicks in on desktops only. The grid layout displays vertically on mobiles anyway, and setting min/max heights can look strange on mobile devices)

Experiment with the values, as these can differ depending on your excerpt lengths, title lengths, font sizes, etc.

Save, and then check your blog layout. Your blog grid should now have equal heights!

blog grid heights

Awesome! We have equal heights, and our Divi designer OCD can be calmed. Simples!

Source: Inline Creative

Changing the Divi Header Top Header Styles

The Divi Theme allows you to set a phone number and email address to be shown at the top of the header, as well as a number of social media icons. Here’s how to change the look of these top header text and icons.

Changing the Top Header Bar Font Size

You can adjust the font size of the icons with the following CSS:

#top-header #et-info-phone, 
#top-header #et-info-email, 
#top-header .et-social-icon a { 

Note that the default font-size is 100% so anything bigger than this will increase the font size and anything smaller will decrease it.

Changing the Top Header Text and Icon Color

To change the color of the top header icons and text, you can use this CSS:

#top-header #et-info-phone, 
#top-header #et-info-phone a, 
#top-header #et-info-email, 
#top-header .et-social-icon a { 
	color: yellow !important; 

Changing the Top Header Hover Color

To change the hover color of the top header icons and text you can do:

#top-header #et-info-phone a:hover, 
#top-header #et-info a:hover span#et-info-email, 
#top-header .et-social-icon a:hover { 
	color: red !important; 

Changing the Top Header Bar Background Color

To change the background of the whole top header bar, you can use the following CSS:

#page-container #top-header { background-color: red !important; }

Source: Divi Booster

Divi Theme Social Icons

How To Add a Social Icon in Divi WordPress Theme From Elegant Themes

Divi WordPress Theme from Elegant Themes is probably the most advanced, yet most easy to use WordPress Themes available today. It lets you create any type of layout within minutes using its advanced page builder and theme options.

There are some things, like social icons, which cannot be changed from theme options. This is fine since most people will use standard social options like Facebook, Twitter, Google+ and RSS, so that is no point bloating the theme with extra theme options.

But if you use want to add Divi Theme Social Icons Pinterest, Instagram, Linedin etc. in Divi WordPress theme, here’s the procedure.

• Here’s the list of codes for the social icons available in Divi style.css file.

.et-social-facebook a.icon:before { content: \e093; }
.et-social-twitter a.icon:before { content: \e094; }
.et-social-google-plus a.icon:before { content: \e096; }
.et-social-pinterest a.icon:before { content: \e095; }
.et-social-linkedin a.icon:before { content: \e09d; }
.et-social-tumblr a.icon:before { content: \e097; }
.et-social-instagram a.icon:before { content: \e09a; }
.et-social-skype a.icon:before { content: \e0a2; }
.et-social-flikr a.icon:before { content: \e0a6; }
.et-social-myspace a.icon:before { content: \e0a1; }
.et-social-dribbble a.icon:before { content: \e09b; }
.et-social-youtube a.icon:before { content: \e0a3; }
.et-social-vimeo a.icon:before { content: \e09c; }
.et-social-rss a.icon:before { content: \e09e; }

This list shows all the available social network icons in Divi theme.

• Now open the includes/social_icons.php file and find the code for social icons,

<ul class=”et-social-icons”>

<?php if ( ‘on’ === et_get_option( ‘divi_show_facebook_icon’, ‘on’ ) ) : ?>
<li class=”et-social-icon et-social-facebook”>
<a href=”<?php echo esc_url( et_get_option( ‘divi_facebook_url’, ‘#’ ) ); ?>” class=”icon”>
<span><?php esc_html_e( ‘Facebook’, ‘Divi’ ); ?></span>
<?php endif; ?>
<?php if ( ‘on’ === et_get_option( ‘divi_show_twitter_icon’, ‘on’ ) ) : ?>
<li class=”et-social-icon et-social-twitter”>
<a href=”<?php echo esc_url( et_get_option( ‘divi_twitter_url’, ‘#’ ) ); ?>” class=”icon”>
<span><?php esc_html_e( ‘Twitter’, ‘Divi’ ); ?></span>
<?php endif; ?>
<?php if ( ‘on’ === et_get_option( ‘divi_show_google_icon’, ‘on’ ) ) : ?>
<li class=”et-social-icon et-social-google-plus”>
<a href=”<?php echo esc_url( et_get_option( ‘divi_google_url’, ‘#’ ) ); ?>” class=”icon”>
<span><?php esc_html_e( ‘Google’, ‘Divi’ ); ?></span>
<?php endif; ?>
<?php if ( ‘on’ === et_get_option( ‘divi_show_rss_icon’, ‘on’ ) ) : ?>
$et_rss_url = !== et_get_option( ‘divi_rss_url’ )
? et_get_option( ‘divi_rss_url’ )
: get_bloginfo( ‘comments_rss2_url’ );
<li class=”et-social-icon et-social-rss”>
<a href=”<?php echo esc_url( $et_rss_url ); ?>” class=”icon”>
<span><?php esc_html_e( ‘RSS’, ‘Divi’ ); ?></span>
<?php endif; ?>


• To add a social icon, for example LinkedIn, add a code section like following, just before the closing </ul> in the social icons code above.

<li class=”et-social-icon et-social-linkedin”>
<a href=”http://in.linkedin.com/in/mayursomani‎” class=”icon”>
<span><?php esc_html_e( ‘LinkedIn’, ‘Divi’ ); ?></span>

To add YouTube, you’ll add something like,

<li class=”et-social-icon et-social-youtube”>
<a href=”http://youtube.com/u/yourusername‎” class=”icon”>
<span><?php esc_html_e( ‘YouTube’, ‘Divi’ ); ?></span>

To add a Pinterest icon, you’ll add,

<li class=”et-social-icon et-social-pinterest”>
<a href=”http://pinterest.com/yourusername‎” class=”icon”>
<span><?php esc_html_e( ‘Pinterest’, ‘Divi’ ); ?></span>

You see the pattern.

You can add any new network from the list posted above.

That’s it. You just added a new social icon to Divi WordPress Theme. You can also remove a social icon by simply removing its section from the includes/social_icons.php file.


Source: AgentWP

Modify The Copyright Line and Tag Lines in the Divi Footer

If you’re a website developer modify the Copyright Line and Tag Lines in the Divi Footer to help get more traffic to your website.

Begin by modifing the footer.php file for your theme.  This is best done by first creating a child theme.  There are many ways to create a child theme but I prefer using the Child Theme Configurator plugin from Liliaea.

In the Footer.php file replace the footer-info code with the following:

<!-------- CUSTOM TAGLINE -------->
<p id="footer-info"><center>
Copyright &copy; 2015-<?php echo date('Y'); ?> &nbsp; | &nbsp; Designed by <a href="http://tj-webs.com/">TJ-WEBS</a> &nbsp; | &nbsp; 
Powered by <a href="http://www.wordpress.org">WordPress</a> and <a href="http://www.elegantthemes.com" title="Premium WordPress Themes">
Elegant Themes</a></center> </p>
<!-------- CUSTOM TAGLINE -------->

You’ll want to change the starting year for the copyright from 2015 to the appropriate year for your site. Also change the name and link for the designed by coding I have.

Next, add the following CSS code snippet in the Divi Theme option General page:

/*Bottom Footer Section*/
#footer-info a {
color: #aaaaaa;
font-size: 15px;
text-align: center;

a {
color: #2ea3f2;
text-decoration: none;

This CSS code will center the copyright line and color the external links a cyan color.

Change the Divi Read More button into outline button

Change the read more button into outline button on next line in Divi

/*Change the read more button into outline button on next line in Divi using this custom CSS in a child theme or your ET theme options panel*/

a.more-link {    border: 2px solid;    border-radius: 3px;    display: inline-block;    margin-top: 10px;    padding: 3px 10px;    text-transform: uppercase;}