Did you know that optimizing your images before uploading to WordPress can have a huge impact on your website speed?

When starting a new blog, many beginners simply upload images without optimizing them for the web. These large image files make your website slower.

You can fix this by using image optimization best practices as part of your regular blogging routine.

In this article, we will show you how to optimize your images for faster web performance without losing quality. We will also share automatic image optimization plugins for WordPress that can make your life easy.

Since this is a comprehensive guide on image optimization for the web, we have created an easy-to-follow table of content:

What Is Image Optimization?

Image optimization is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality.

While the process sounds complex, it’s actually quite easy these days. You can use one of the many image optimization plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.

Here’s an example of an optimized vs unoptimized image:

As you can see, when optimized properly the same image can be up to 80% smaller than the original without any loss in quality. In this example, the image is 52% smaller.

How Does Image Optimization Work?

In simple terms, image optimization works by using compression technology.

Compression can be ‘lossy’ or ‘lossless’.

Lossless compression reduces the overall file size with absolutely no loss of image quality. With lossy compression, there may be a minor loss in quality, but ideally, it won’t be noticeable to your visitors.

What Does It Mean to Optimize Images?

You may have received a recommendation to optimize images from your WordPress hosting support or a speed test tool and wonder what you need to do.

You will need to reduce the file size of your images by optimizing them for the web. We’ll show you how to do that step-by-step.

What Are the Benefits of Image Optimization?

While there are many benefits to optimizing your images, here are the top ones that you should know:

Faster website speedImproved SEO rankingsHigher overall conversion rate for sales and leadsLess storage and bandwidth (which can reduce hosting and CDN costs)Faster website backups (which can reduce the cost of backup storage)

Images are the second heaviest item on a web page after video. According to the HTTP archive, images make up 21% of an average webpage’s total weight.

Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.

Now you might be wondering how big a difference image optimization can really make.

According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and a 16% decrease in customer satisfaction.

If these aren’t enough reasons to speed up your website, then you should know that search engines like Google also give preferential SEO treatment to faster-loading websites.

This means that by optimizing your images for the web, you can both improve website speed and boost WordPress SEO rankings.

Video Tutorial

If you’d prefer written instructions, then just keep reading.

How to Save and Optimize Images for Web Performance

The key to successful image optimization for web performance is to find the perfect balance between the lowest file size and acceptable image quality.

The three things that play a huge role in image optimization are:

Image file format (JPEG vs PNG vs GIF)Compression (higher compression = smaller file size)Image dimensions (height and width)

By choosing the right combination of the three, you can reduce your image size by up to 80%.

Let’s take a look at each of these in more detail.

1. Image File Format

For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization.

To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIFs for animated images only.

For those who don’t know the difference between each file type, the PNG image format is uncompressed which means it is a higher-quality image. The downside is that file sizes are much larger.

On the other hand, JPEG is a compressed file format that slightly reduces image quality in order to provide a significantly smaller file size.

Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.

On WPBeginner, we use all three image formats based on the type of image.

2. Compression

The next thing is image compression which plays a huge role in image optimization.

There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use.

Most image editing tools like Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.

You can also save images normally and then use a web tool like TinyPNG or JPEGmini for easier image compression.

Although they require some manual effort, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on WPBeginner.

There are also several popular WordPress plugins like Optimole and EWWW Image Optimizer that can automatically compress images when you first upload them. This is convenient, and many beginners and even large corporations prefer to use these image optimization plugins.

We will share more about using WordPress plugins later in the article.

3. Image Dimensions

Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions (height and width).

Typically, these photos have a resolution of 300 DPI and dimensions starting from 2000 pixels and more. While high-quality photos are well-suited for print or desktop publishing, their large size makes them unsuitable for websites.

Reducing the image dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using image editing software on your computer.

For example, we optimized a photo with a resolution of 300 DPI and image dimensions of 4900×3200 pixels. The original file size was 1.8 MB.

We chose the JPEG format for higher compression and changed the dimensions to 1200×795 pixels. The file size was reduced to just 103 KB. That’s 94% smaller than the original file size.

Now that you know the three important factors in image optimization, let’s take a look at various image optimization tools for website owners.

Best Image Optimization Tools and Programs

As we mentioned earlier, most image editing software comes with image optimization and compression settings.

Outside of the image editing software, there are also several powerful free image optimization tools that you can use to optimize images for the web (with just a few clicks).

We recommend using these tools to optimize images before you upload them to WordPress, especially if you are a perfectionist.

This method helps you save disk space on your WordPress hosting account, and it guarantees the fastest image with the best quality since you manually review each image.

Adobe Photoshop

Adobe Photoshop is a premium image editing application that lets you export images with a smaller file size for the web.

Using the export dialog, you can choose an image file format (JPG, PNG, GIF) that gives you the smallest file size.

You can also reduce image quality, colors, and other options to further decrease file size.

GIMP

GIMP is a free and open-source alternative to Adobe Photoshop. It can be used to optimize your images for the web. The downside is that it is not as easy to use as some other solutions on this list.

First, you need to open your image in GIMP and then select the File » Export As… option. This will bring up the Export Image dialog box where you can give your file a new name. Next, you need to click the ‘Export’ button.

You will now see the image export options. For JPEG files, you can use the ‘Quality’ slider to select the compression level and reduce file size.

Finally, you should click on the ‘Export’ button to save the optimized image file.

TinyPNG

TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG and JPEG files. All you have to do is go to their website and upload your images using simple drag and drop.

They will compress the image and give you a download link.

They also have an extension for Adobe Photoshop which is what we use as part of our image editing process because it lets you access TinyPNG from inside Photoshop.

For developers, they have an API to convert images automatically, and for beginners, they have a WordPress plugin that will do it for you. More on this later.

JPEGmini

JPEGmini uses a lossless compression technology that significantly reduces the size of images without affecting their perceptual quality. You can also compare the quality of your original image and the compressed image.

You can use their web version for free, or purchase the program for your computer. They also have a paid API to automate the process for your server.

ImageOptim

ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles.

A Windows alternative to this is Trimage.

Best Image Optimization Plugins for WordPress

We believe that the best way to optimize your images is by doing it before uploading them to WordPress. However, if you run a multi-author site or need an automated solution, then you can try a WordPress image compression plugin.

Here is our list of the best WordPress image compression plugins:

Optimole, a popular plugin by the team behind ThemeIsleEWWW Image OptimizerJPEG, PNG & WebP Image Compression, a plugin by the TinyPNG team mentioned aboveImagify, a plugin by the popular WP Rocket teamShortPixel Image OptimizerSmushreSmush.it

These WordPress image optimization plugins will help you speed up your website.

Final Thoughts and Best Practices for Image Optimization

If you’re not saving images optimized for the web, then you need to start doing so now. It will make a huge difference in your site speed, and your users will thank you for it.

Not to mention, faster websites are great for SEO, and you will likely see an increase in your search engine rankings.

Outside of image optimization, the two things that will significantly help you speed up your website are using a WordPress caching plugin and using a WordPress CDN.

Alternatively, you can use a managed WordPress hosting company because they often offer both caching and CDN as part of the platform.

We hope this article helped you learn how to optimize your images in WordPress. You may also want to see our guide on how to improve your WordPress security and the best WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Optimize Images for Web Performance without Losing Quality first appeared on WPBeginner.

Do you want to add rotating testimonials to your WordPress website?

Testimonials are a great way to show social proof and boost your credibility. That’s why so many online businesses proudly display customer testimonials across their websites.

In this article, we’ll show you how to easily add rotating testimonials in WordPress.

Why Add Rotating Testimonials to WordPress?

Many businesses use rotating testimonials to help them win new customers, get more sales and signups to their email list, and more.

If you’re running an online store, then testimonials are a powerful form of social proof that can help turn visitors into customers, and boost your conversion rates.

When it comes to social proof, positive reviews from multiple people are far more credible than a single five-star review. With that in mind, rotating testimonials are a great way to show lots of positive comments in a small space.

Rotating testimonials also add some animation to your WordPress website, which can make your site more eye-catching and engaging.

With that said, let’s see how you can add rotating testimonials to WordPress. Simply use the quick links below to jump to the method you want to use.

Method 1. Adding Rotating Testimonials to WordPress Using WP Testimonials Rotator (Quick and Simple)

If you want to create a simple rotating testimonials section, then you can use a free plugin such as WP Testimonials Rotator.

The first thing you need to do is install and activate the plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to WP Testimonials » Add New in your WordPress dashboard.

To get started, type in the title that will appear above the testimonial quote.

You can then add the testimonial in the main text editor.

To help organize your testimonials, you may want to add some categories, in the same way that you add categories and subcategories in WordPress.

After that, scroll to the ‘Testimonial Details’ box and add information such as the person’s name, job title, and company.

You can also add a featured image, which will appear above the testimonial title. For example, you might use the person’s headshot or the product logo.

When you’re happy with the information you’ve entered, click on ‘Publish’ to make it live.

You can now add more testimonials by repeating the same process described above. Once you’ve created all your customer testimonials, it’s time to show them on your website.

Simply open up the post or page where you want to add your rotating testimonials. Then, click the ‘Plus’ icon to open the WordPress block editor. You can then type in ‘Shortcode’ and select the right block when it appears.

After that, you’ll need to add the following shortcode to the box: [sp_testimonials_slider]

Then, click the ‘Update’ or ‘Publish’ button to save your changes.

Now your visitors can see all your positive customer testimonials. These testimonials will automatically rotate after each one displays for a few seconds.

Method 2. Adding Custom Rotating Testimonials to WordPress Using SeedProd (More Customizable)

If you want to create a beautiful, fully-customizable testimonials section, then we recommend using a page builder plugin.

SeedProd is one of the best drag and drop WordPress page builder in the market used by over 1 million websites.

It comes with ready-made blocks and more than 180 templates that allow you to create custom pages in WordPress and easily add rotating testimonials to your website.

First, just install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd available, but we’ll be using the Pro version since it has a ready-made testimonial block. It also integrates with all of the best email marketing services you may already be using to promote your products and services.

Upon activation, you need to visit SeedProd » Settings and enter your license key.

You can find this information under your account on the SeedProd website. After entering the key, click on the ‘Verify Key’ button.

After that, go to SeedProd » Pages and then click on the ‘Add New Landing Page’ button.

On the next screen, you’ll be asked to choose a template. SeedProd has dozens of professionally designed templates organized into different campaign types such as ‘lead,’ ‘squeeze,’ and ‘coming soon.’ 

To choose a template, hover over it and then click the ‘Checkmark’ icon.

If you want to start from scratch, then SeedProd also has a blank template that you can use. We’ll be using the ‘Juicy Sales Page’ template in all our images, but you can use any design you want.

Next, go ahead and type in a name for the custom page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

A descriptive URL will help search engines understand what the page is about, so they can show it to the right users. With that in mind, you may want to add some relevant keywords to the URL.

For more information, please see our guide on how to do keyword research for your WordPress blog.

After entering this information, click on the ‘Save and Start Editing the Page’ button.

This will load the SeedProd page builder interface.

It is a simple drag-and-drop builder that shows a live preview of your page to the right. You will also see block settings on the left.

The left-hand menu has blocks that you can add to your page using drag and drop.

First, we’ll add a customer testimonial block. Simply drag the ‘Testimonials’ block onto the page where you want it to appear.

You can now customize the testimonial by adding images, changing the text, adding the customer’s name, and more.

To make these changes, simply click to select the testimonials block and then use the settings in the left-hand menu.

To create a rotating section, you’ll need to create two or more testimonials by clicking the ‘Add Testimonial’ button.

You can then customize the testimonial. For example, you can type the quote into the text editor or upload an image.

Next, you can change how the rotating testimonials will look and act, by clicking on ‘Carousel Settings’ to expand that section.

Here you can change the color scheme, the slider speed, and whether the slider will scroll through the different customer testimonials automatically.

You can continue to customize the page by adding more blocks and changing the settings in the left-hand menu.

When you’ve finished customizing your page, it’s time to publish it by clicking the dropdown arrow next to ‘Save’ and then selecting the ‘Publish’ option. 

Now if you visit your WordPress blog or website, you’ll see the page with your rotating testimonial live.

Method 3. Adding Rotating Social Media Testimonials to WordPress Using Smash Balloon

If your users are already leaving fantastic reviews on Facebook and Twitter, then you can create a testimonials section using a social media plugin.

Smash Balloon is one of the best WordPress testimonial plugins in the market and supports all of the major social networks. This means you don’t have to copy and paste new testimonials to your WordPress website since they’ll show up automatically.

For example, Smash Balloon’s Facebook Social Reviews Feed lets you display reviews from your Facebook Page on your site. Visitors can see that these reviews come from real Facebook users, which makes them more credible.

Setting up your social networks is simple, and if you want to add rotating Twitter testimonials to your site, then see our guide on how to embed tweets in WordPress. For Facebook, see our guide on how to create a custom Facebook feed.

Once you activate, set up, and connect your social media accounts, your social media testimonials will update automatically every time you get a new review. This can save you a lot of time and effort, and is a great way to keep your website fresh.

Smash Balloon also has plenty of options for filtering and moderating which reviews show up on your website, so you still have complete control.

We hope this article helped you add rotating testimonials to your WordPress website. You may also want to see our expert picks of the best virtual business phone number apps and our beginner’s guide on how to run a giveaway in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Rotating Testimonials in WordPress (3 Ways) first appeared on WPBeginner.

Do you want to add browser tab notifications for your website?

Adding browser tab notifications can be a great way to recapture a user’s attention, can lower the rate of cart abandonment, and increase sales and revenue.

In this article, we will show you how to add browser tab notifications in WordPress.

What is Browser Tab Notification?

A browser tab notification is when you change something on the tab for your website when the user is focusing on a different site in their browser.

By adding a browser tab notification feature on your WordPress website, you can grab the user’s attention the moment they open another tab to leave your page.

For instance, you can change the favicon of your website, animate it, write a custom message, or just flash the tab.

If you have an online store, browser tab notifications can really help you out. These notifications will bring back distracted customers, lower cart abandonment rates, and increase customer engagement.

Using this feature, you can alert your customers about cart abandonment or even offer a discount if they return their attention to your site.

Here is an example of a browser tab notification.

With that being said, we will show you how to add three different types of browser notifications to WordPress.

Install WPCode to Add Browser Tab Notifications

You can easily add browser tab notifications on your site by adding custom code in WordPress. Usually, you have to edit your theme’s functions.php file, but that can break your website with even a small error.

That’s why we recommend using WPCode, the safest and most popular code snippet plugin, used by over 1 million websites.

First, you will need to install and activate the free WPCode plugin. For more details, you can see our step to step guide on how to install a WordPress plugin.

Once you’ve activated the plugin, simply go to Code Snippets » All Snippets in your WordPress admin panel.

Just click on the ‘Add New’ button, which will then bring you to the ‘Add Snippet’ page.

Now, hover over the ‘Add Your Custom Code (New Snippet)’ option and click on the ‘Use Snippet’ button below it.

The plugin will then take you to the ‘Create Custom Snippet’ page.

No matter which type of browser tab notification you use, you will enter the code below using this page.

Type 1. Showing New Updates as a Browser Tab Notification

If you use the code below, your users will be alerted about any new updates that are being posted on your site. A number will appear in the tab to tell them how many new items they are missing.

For example, if you have an online store and you just added some new products to the inventory, the user will see the browser tab notification as a number that indicates how many new products were added.

You can see this in the image below:

Once you’re on the ‘Create Custom Snippet’ page, you need to name your snippet. You can choose anything that helps you identify the code. This is only for you.

Next, you’ll select the ‘Code Type’ from the drop-down menu on the right. This is JavaScript code, so simply click on the ‘JavaScript Snippet’ option.

Then, all you have to do is copy and paste the following code snippet into the ‘Code Preview’ area.

Once you’ve pasted the code, scroll down to the ‘Insertion’ section. You will find two options: ‘Auto Insert’ and ‘Shortcode.’

Simply choose the ‘Auto Insert’ option, and your code will be automatically inserted and executed on your site.

You can use the ‘Shortcode’ method if you only want to show new updates on specific pages where you add the shortcode.

Once you’ve chosen your option, return to the top of the page.

Click the switch from ‘Inactive’ to ‘Active’ in the top right corner, and then simply click the ‘Save Snippet’ button.

With that finished, your custom code snippet will be added to your site and start working.

Type 2. Changing Favicons as a Browser Tab Notification

With this method, you will show a different favicon on your site’s browser tab when users navigate away to another tab.

A favicon is a small image that you see on web browsers. Most businesses will use a smaller version of their logo.

Now, to change favicons on your browser tab, we will be using the WPCode plugin.

First, go to Code Snippets » All Snippets in your WordPress admin panel and then click on the ‘Add New’ button.

Next, simply hover over the ‘Add Your Custom Code (New Snippet)’ option and click on the ‘Use Snippet’ button below it

This will take you to the ‘Create Custom Snippet’ page. You can start by entering a title for your code snippet.

Now simply choose a ‘Code type’ from the dropdown menu at the right. For this code snippet, you need to select the ‘HTML Snippet’ option.

Once you’ve done that, simply copy and paste the following code in the ‘Code Preview.’

After you’ve pasted the code, simply remove the example favicon links from the code and replace them with your own images.

Remember, the images you choose as favicons should already be uploaded to the media library of your WordPress site.

Otherwise, the code will not work, and your favicon will display as normal.

Once you’ve pasted the links to your new favicons, scroll down to the ‘Insertion’ section. Here, you’ll find two options: ‘Auto Insert’ and ‘Shortcode.’

You can choose the ‘Auto Insert’ option if you want to automatically embed the code on every page.

To change the favicon on only specific pages, select the ‘Shortcode’ option and paste it into any shortcode-enabled area, such as sidebar widgets or at the bottom of the content editor.

Then, simply go to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’ in the top right corner, and then click the ‘Save Snippet’ button.

After that, your favicon will start changing as a browser tab notification.

Type 3. Changing Site Title as a Browser Tab Notification

If you want to change the site title to recapture your visitor’s attention, then you can use this method.

By using this code snippet, your site title will change to show an eye-catching message when users switch to another tab in the browser.

We will be using the WPCode plugin to change your site title as a browser tab notification.

To get to the ‘Create Custom Snippet’ page, go to Code Snippets » All Snippets and simply click on ‘Add New’ button.

Then, simply select the ‘Add Your Custom Code’ option as shown in the examples above.

Now that you’re on the ‘Create Custom Snippet’ page, start by entering a title for your code snippet.

Next, you’ll have to select the ‘Code Type’ from the dropdown menu on the right. As this is JavaScript code, simply click on the ‘JavaScript Snippet’ option.

After that, scroll down to the ‘Location’ option and click on the dropdown menu beside it.

From the dropdown menu, simply click on the ‘Site Wide Footer’ option.

Then, all you have to do is copy and paste the following code snippet in the ‘Code Preview’.

Once you’ve pasted the code, you can now edit it and simply write whatever message you want to display on your browser tab in the code.

To write your desired message, simply go to the var altTitle = ‘Return to this page!’; line and remove the placeholder text with the message for your browser tab notification.

Next, scroll down to the ‘Insertion’ section, where you will find two insertion methods: ‘Auto Insert’ and ‘Shortcode.’

If you click on the ‘Auto Insert’ option, your browser tab notification will be active on every page. However, if you only want your eye-catching message on specific pages, you can choose the ‘Shortcode’ option.

For example, you might only want to add this code on the ‘Add to Cart’ page so that it can lower cart abandonment rates on your website.

If that is the case, you can choose the Shortcode option.

All that’s left after that is to go to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’, then click the ‘Save Snippet’ button.

That’s it! Now, your browser tab notification will alert users who leave your site.

We hope this article helped you learn how to add browser tab notifications in WordPress. You may also want to see our tutorial on how to add web push notifications to your WordPress site and check out our top picks of must-have WordPress plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Add Browser Tab Notification in WordPress first appeared on WPBeginner.

Are you looking for the best 404 error page design examples?

The right 404 page will keep visitors on your site for longer and encourage them to convert. By creating an engaging, helpful, and entertaining 404 page, you can give visitors a great experience, even when they see an error.

In this article, we’re sharing some of the best 404 error page designs.

Why You Need to Optimize Your 404 Design

A 404 error happens when the server can’t reach the page someone is trying to visit. Instead of showing them a blank screen, the server displays a 404 page instead.

Most WordPress themes come with a basic 404 template, but these designs are usually basic and simple.

They also won’t show any content from your website, such as popular posts that the visitor may want to read, or your site’s navigation menu.

If you show visitors a boring, unhelpful 404 page then they’re more likely to leave your WordPress website, which will increase your bounce rate and hurt your WordPress SEO.

With that in mind, it’s smart to create a custom 404 page that has your own branding and content. You can also help visitors find what they’re looking for by adding search bars, menus, links, and other helpful content.

The easiest way to create a custom 404 design is by using the SeedProd plugin. It is the most popular drag and drop landing page builder, so you can create a custom 404 page without writing any code.

SeedProd also has lots of professionally-designed 404 templates to help you create a beautiful error page, fast.

Once you’ve installed SeedProd, it’s a good idea to turn to your competitors for inspiration. With that in mind, we’ve collected the best 404 error page designs for you to look at.

1. DFY

Many websites use countdown timers to create a sense of urgency and get more conversions using FOMO. However, DFY had made the unusual decision to add a countdown timer to their 404 page.

This timer counts down the seconds until the visitor is automatically redirected to the homepage. By creating a time limit, DFY immediately makes their 404 page more engaging and pushes visitors to make a decision before time runs out. It’s also an unusual design choice, so it’s guaranteed to grab the visitor’s attention.

The 404 page’s messaging adds to this sense of urgency, making this a very dramatic and compelling page design.

For more information about using time limits on your site, please see our guide on how to add a timer widget in WordPress.

2. OptinMonster

OptinMonster is one of the best email capture plugins for WordPress used by over 1.2 million websites. It has everything you need to turn visitors into subscribers and customers.

Unsurprisingly, OptinMonster uses their 404 page as a lead generation tool with an eye-catching animation and clear call to action.

Even better, their pitch relates to the visitor’s situation.

When someone lands on a 404 page, there’s a big chance they’ll give up and abandon your website, since they can’t find what they’re looking for.

OptinMonster’s pitch plays into this, by asking: ‘Did you know that over 70% of visitors who abandon your website will never return?’

Since the visitor is already thinking about website abandonment, they’re more likely to act on this statistic. The call to action then offers visitors a free ebook that promises to convert abandoning website visitors into subscribers.

Clicking on the ‘Download Now’ button opens a popup where the person can type in their email address and get their free download.

As we can see, OptinMonster uses the 404 error to their advantage by creating a pitch that feels very relevant and timely.

If you want to use your own 404 page for lead generation, then you can collect email addresses using SeedProd’s Giveaway, Contact Form, and Optin Form blocks.

3. Kualo

Many websites use gamification to build customer loyalty and keep people coming back to their site.

Kualo have taken this one step further and gamified their 404 page.

Instead of helping visitors find their way back to the main Kualo website, the 404 page challenges them to a space invaders game.

This turns a frustrating error message into a fun surprise.

Even better, when you run out of lives Kualo gives you an incentive to carry on playing.

The popup offers players a discount on hosting if they manage to score over 1000 points. This is a perfect example of a 404 page that keeps visitors on your website for longer, and adds value to the user experience.

4. TripAdvisor

TripAdvisor’s 404 page is fun and functional, and opens with a joke that’s specific to the travel industry.

When someone lands on your 404 page, they may be frustrated with their experience. Humor can be a great way to re-engage these people.

Even better, the jokes always tie into the TripAdvisor brand.

Branding is one of the major benefits of replacing the standard WordPress 404 page with a custom design, and TripAdvisor’s page shows that branding isn’t just custom logos and images. The words on your 404 page are just as important as the graphics.

The 404 page also highlights all the major areas of the TripAdvisor website, which helps visitors find what they’re looking for.

Since navigation is so important, we recommend looking at SeedProd’s Nav Menu block as it lets you build all kinds of menus directly inside the page editor.

5. Brett Terpstra

At first glance, Brett Terpstra’s 404 page may look basic but the real power lies in its list of suggested posts.

Brett Terpstra’s 404 page shows a list of posts containing keywords related to the link the visitor was trying to access when they got the 404 error.

It’s a simple trick that adds a lot to the visitor experience.

Personalized content can make your site more useful, engaging, and appealing so it makes sense to extend this to your 404 page.

To learn more about targeted content, please see our guide on how to show personalized content to different users in WordPress.

6. Constant Contact

Constant Contact is another 404 page that uses humor to win over frustrated visitors. The email service provider uses informal language to appeal to their target audience, while also giving visitors an easy route back to the homepage.

If you scroll down the page, then you’ll find links to some other important areas of the Constant Contact website.

However, what we really like is the short hover animation that plays every time you move the mouse over one of the blue blocks.

Animation can make a page more engaging, and the multiple hover animations creates a storytelling element as the visitor moves around the 404 page.

There are a few different ways to animate your 404 page, including highlighting and rotating your text using the SeedProd Animated Headline block. For more information, please see our guide on how to add CSS animations in WordPress.

7. IMDB

Most people will encounter your 404 page when looking for something else entirely. Since the 404 error is unexpected, it’s important to reassure visitors that they’re still on your site by maintaining brand familiarity.

IMDB do this in a very subtle and light-hearted way, by showing a famous quote from a movie or TV show.

They also include a link to learn more about the TV show or movie that they’re quoting.

In this way, IMDB’s 404 page reinforces their brand while also giving visitors a fun way to explore their content.

Showing random quotes on your 404 page can be fun and engaging. However, it’s still a good idea to provide links to your site’s most important content, just in case the visitor isn’t interested in the link that you’ve chosen at random.

IMDB shows this doesn’t have to be complicated, by including a link to their homepage.

8. Steve Madden

Steve Madden tries to turn an error message into sales by showing their best selling products on the 404 page.

Even better, they’ve added filters so customers can browse the different products directly from the 404 page.

If you run an online store, then you can easily display your most popular products, products that are on sale, your newest products, and more. Simply add the ‘Best Selling Products’ block to your 404 page and SeedProd will find these products and then add them to your 404 page automatically.

When designing your own 404 page, it’s a good idea to use the same header and footer as the rest of your website. This will reinforce your branding and stop visitors from wondering whether they’re in the right place.

This is exactly what we see with Steve Madden’s 404 page, but we particularly like how much content they manage to fit into these two small areas.

The header and footer helps visitors jump straight to any part of the Steve Madden store, or even third-party sites such as the company’s Twitter and Facebook page.

They even provide access to interactive areas, including a smart product search bar.

9. Apartment Therapy

This 404 design from Apartment Therapy immediately catches the visitor’s attention with a big hero image.

Apartment Therapy also uses this space to reinforce their brand identity, by showing a stylish photo of a kitchen along with a joke about washi tape.

If you want to add a hero image to your design, then SeedProd has lots of ready-made hero sections. These are collections of images, call to actions, and even simple lead collection forms that you can add to your 404 design with a click of a button.

There’s even a section that would look right at home on the Apartment Therapy website.

10. Screaming Frog

Similar to some of the other 404 pages on this list, Screaming Frog uses humor to try and engage with visitors.

However, unlike the other businesses on this list, Screaming Frog creates a tool that helps website owners find and fix broken links. Their 404 page wastes no time pointing out the irony of the Screaming Frog website having a broken URL.

By poking fun at themselves, Screaming Frog delivers a memorable 404 page that doesn’t take itself too seriously.

The animated background also helps this 404 design stand out from the crowd.

Videos and animations are a great way to make your 404 page more engaging. However, they can add to the 404 page’s loading times so we recommend following our tips to speed up WordPress performance, particularly if you’re using lots of large or high-resolution videos in your 404 design.

11. MonsterInsights

MonsterInsights is the best WordPress plugin for Google Analytics. It allows you to easily install Google analytics in WordPress and shows helpful reports in the WordPress dashboard.

The MonsterInsights is a good example of a branded page. As soon as visitors arrive on this page, they’ll see a unique graphic based on the MonsterInsights logo.

This is a fun way to let visitors know that they’re still on the MonsterInsights website, even if they’ve followed a broken link.

This page also explains what a 404 error is and suggests some things the visitor can do to fix the error. Helping people solve the 404 error themselves can improve the visitor experience, so it’s a good idea to include this information on your own 404 page.

Even if you encourage visitors to fix the problem themselves, it’s still important to include links to your site’s most important content. The MonsterInsights 404 page gives people a few options by including links to the support page, the MonsterInsights documentation, and the pricing page.

12. MAD

MAD has created a simple but highly interactive page by using toggles to create a 404 error message. You can remove this message by turning all the toggles off, or even create your own message by activating the toggles.

It’s a very straightforward but enjoyable experience that’s designed to get lots of interaction from visitors. It’s also a very unique 404 page that visitors will remember, and perhaps even share with other people.

This striking design proves that you can build a memorable and entertaining 404 page from a simple idea.

13. Southwest

Southwest’s 404 page tries to help visitors get back on track by explaining what a 404 is and why they may be seeing the error. They even suggest some possible fixes, which might be helpful if your target audience isn’t very familiar with 404 errors.

Where this design really stands out is the sheer number of links it manages to display and how neatly these URLs are organized.

If you scroll to the bottom of the screen, then you’ll notice social media links, contact information, a link to join their email list, and dozens of other links all arranged in clear and user-friendly categories.

The Southwest 404 page is a great example of how much information you can pack into a page without overwhelming the visitor.

Here, the right layout is key and Southwest does a great job of using categories, lists, and different sections to create a 404 page that’s information-packed but still easy to read.

We hope this article has helped you find the best 404 error page design examples. You may also want to check out our guide on the best WordPress page builder plugins and our comparison of best email marketing services to turn potential leads into paying customers.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 13 Best WordPress 404 Error Page Design Examples first appeared on WPBeginner.