Spend any amount of time online, and you’ll eventually encounter a 404 page.
Whether you type a URL incorrectly or click a broken link, a 404 is the Internet’s way of letting you know that the requested page does not exist.
Even the best website will throw a 404 error from time to time, so why not use this error to your advantage? In this tutorial, I’ll show you how to create a 404 page that helps you connect with your audience, provide a better user experience, and maybe even secures you a few additional sales!
We’ll be using the Elementor front-end page builder to create three custom 404 pages, using three different methods—and zero code.
Elementor has over 5 million active installs, but if you’re completely new to Elementor then I’ll also be covering all the background information you need, in order to build professional and compelling websites with Elementor.
What We'll Be Covering
Links don’t live forever!
Over time, you may need to move or delete certain pages, or decide to merge related posts into a single page that contains all the information your audience could possibly need.
Whenever the server cannot locate the requested webpage, it’ll display a 404 error. If you don’t add a custom 404 page to your website, then the server will display a stock 404 page—which isn’t exactly the nicest thing to look at.
In this tutorial, I’ll show you how to replace your website’s default 404 with a custom webpage, using Elementor. Since Elementor is a flexible tool, we’ll be creating a selection of 404 pages, using all of the following methods:
- Create a 404 page using Elementor's Theme Builder. I'll show you a quick and easy way to create a professionally-designed 404 page, using one of Elementor's ready-made templates.
- Design a completely custom 404 page. Have a specific design in mind? Or want to experiment with a few different potential designs? I'll show you how to build a completely custom 404 page from scratch, by adding text, images, and buttons to a blank template. By the end of this section, you'll have created the following design:
- Envato Elements Template Kits. Install a themed collection of templates that contain designs for all the pages your website could possibly need - including the following 404 template:
Why Your Website Needs a Custom 404 Page
Elementor’s user-friendly, drag-and-drop editor may take the pain out of webpage design, but creating a custom 404 page still requires time and effort.
Before we get stuck into Elementor, let’s look at some of the reasons why you should always consider creating your own 404 page.
404 Errors Are Inevitable
Sometimes, you may need to delete a piece of content, relocate a page to a new URL, or merge multiple posts into a single URL.
Ideally, you should perform regular content audits where you identify and rectify any broken links, but even if you’re proactive about checking your URLs, some 404 errors are completely out of your control.
Your website will throw a 404 error if a visitor misspells a URL, or a typo-prone third party links to a part of your website that never existed in the first place! While you can’t control other people’s mistakes, you can minimize their impact by creating an engaging 404 page.
Connect with Your Audience
A 404 page is an opportunity to express yourself and strengthen your relationship with your audience.
Simply type best 404 pages into Google and you’ll find countless round-ups of creative and unusual 404 pages. Why not follow in their footsteps and use your 404 page as an opportunity to show off your sparkling personality?
You might treat your visitors to a few 404-related puns, put your own spin on a popular meme, or even build something more elaborate, such as a 404 mini game. Although it’s technically not a 404 page, Google’s "No internet" dinosaur game is a good example of how you can transform an error page into something fun and engaging.
However, your 404 page should always be appropriate for your target audience and your wider website. A humorous 404 page may not be appropriate if your website covers sensitive topics, or if you’re trying to present yourself as a trusted authority.
Re-engage Disengaged Visitors
There are many different ways that a visitor can arrive at your 404 page, but the end-result is always the same: this person expected to access some interesting content, and now they’re staring at an error message. They’re likely to be frustrated and annoyed, and may even be on the verge of giving up on your website entirely.
A custom 404 page is an opportunity to re-capture this person’s interest before they navigate away from your website.
You can often re-engage a disappointed visitor, by featuring navigational controls that promote your website’s most interesting and relevant content. These controls might include menus, carousels, a list of your site’s most popular pages, or a list of recommended posts based on the content they've previously accessed.
By signposting your website’s most interesting content, your 404 page can encourage visitors to dive back into your website, rather than navigate away from it.
Drive Conversions and Close Sales
Why not use your 404 page as a tool to drive conversions and secure additional sales?
You could offer a discount, coupon code, or a free membership subscription as an apology, or even a reward for “finding” your 404 page!
Alternatively, if you operate an eCommerce store, then why not add some product recommendations to your 404 page? Bonus points if these recommendations are tailored for the individual visitor.
Build Trust with a Consistent Brand Image
Studies show that once you’re familiar with a company’s branding, you subconsciously start to trust that company. Consistency is the key to consumer confidence, which explains why every Apple store around the world looks eerily similar.
After investing so much time and effort into designing a website that perfectly reflects your band, the last thing you want is for a generic 404 page to pop up and completely ruin the mood.
By creating a custom 404 page, you can deliver a seamless user experience, reinforce your brand, and instill a sense of trust in your target audience.
Transform Lost Visitors into Invaluable Testers
When it comes to identifying and fixing broken links, why not enlist the help of your audience?
Simply add a contact form to your 404 page, and your visitors can give you a heads-up about any broken links they discover. You could even provide an incentive for visitors to report 404 errors, for example offering free subscription to your members-only content, or a discount code.
What Is Elementor?
Throughout this tutorial, we’ll be using Elementor to build advanced page layouts using a simple drag-and-drop editor.
The core Elementor plugin is free to download and provides access to over 40 basic Elementor widgets and over 30 templates. However, if you invest in a premium plan then you’ll also get access to Elementor’s:
- Theme Builder. This allows you to customize your entire WordPress theme, including its header, footer and archive pages.
- Popup Builder. Popups may get a bad reputation, but the occasional well-placed popup can be a great way to catch the visitor’s attention. Using the Popup Builder, you can design, test and publish custom popups via the familiar Elementor user interface.
- WooCommerce Builder. If you’re building an eCommerce store, then the WooCommerce builder provides eCommerce-themed widgets that you can drag and drop into your store, including Add to Cart, Product Rating and Related Products widgets.
In this tutorial, we’ll be using Elementor Pro, which at the time of writing was priced between $4.10 and $16.60 per month.
If you’re using the free Elementor plugin, then this tutorial will show you how to master the Elementor user interface and workflow. However, you will need an Elementor Pro subscription in order to complete all sections of this tutorial.
How to Install Elementor for WordPress
Elementor Pro requires the free version of Elementor, so first we need to install and activate this free plugin:
- Log into your WordPress account, if you haven’t already.
- In WordPress’s left-hand menu, select Plugins > Add New.
- Search for the Elementor plugin.
- When the plugin appears, select Install Now > Activate.
- The free version of Elementor has now been added to your WordPress account.
To upgrade to Elementor Pro:
- Head over to the Elementor website, and purchase Elementor Pro.
- On the Elementor website, log into your account using the details contained in your purchase confirmation email.
- Select Download plugin. Elementor Pro will now be downloaded as a ZIP file.
- Head over to your WordPress website.
- In the left-hand menu, select Plugins > Upload Plugin.
- Click Choose file and then select the ZIP file that you just downloaded.
- Select Install Now.
- When prompted, click Activate Now.
- You should now see a message asking you to activate your license; click Connect & Activate and select Activate.
- Log into your Elementor account, if prompted.
Elementor Pro is now setup and ready for you to use!
Custom 404 Pages Without the Hassle: Elementor's Ready-made Templates
Elementor comes with a selection of ready-made templates that you can use as the basis for your WordPress pages.
Since it’s the easiest way to create a 404 page, we’ll base our first 404 page around one of Elementor’s templates:
- In WordPress’ left-hand menu, select Templates > Theme Builder.
- Select the Single tab. In Elementor, a single page is usually an individual post.
- Select Add New Single.
- Open the Template type dropdown and select Single.
- Open the Select Post Type dropdown and select 404 page.
Give your template a descriptive name. When naming your template, don’t begin the name with 404 as the resulting permalink will redirect visitors to your homepage and not your 404 page.
Click Create template. Elementor Pro will now display all the available 404 templates; select the template that you want to use.
Whenever you choose a template, Elementor will prompt you to import the document settings for that page, which will override any previous settings for your 404 page. Unless you have a specific reason not to, you’ll generally want to import the document settings for your chosen template.
At this point, you have the 404 template open in the Elementor editor.
Since this is our first taste of Elementor, let’s take a few moments to master the editor’s fundamentals, before we start work on our 404 page.
Exploring the Elementor Page Editor
The Elementor live editor is divided into two sections:
1. Live Preview Canvas
To the right, is the live preview canvas where you can add widgets such as text, images and buttons. You can also edit your widgets by changing their size and position, or remove unwanted widgets from your layout.
You add widgets to a page by placing them inside a wrapped box called a section. If you select a section in the live preview canvas, then Elementor will outline that section using a blue border.
Each section contains one or more columns. If you click to select a column, then the live preview editor will outline that column in grey and display an icon in the column’s upper-left corner.
If you click to select a widget, then the live preview canvas will outline that widget using a solid blue border.
2. Elementor Panel
The Elementor Panel contains all the widgets that you can add to your page. Simply find the widget that you want to add, drag it from the Elementor Panel and then drop it onto the live preview canvas.
The Elementor Panel also contains various menus, sliders and other settings that you can use to edit your widgets, such as selecting a new font for your text, adding a border to an image, or adding a color overlay.
When you select a widget in the live preview canvas, the Elementor Panel will display all the settings that are relevant for the selected widget. For example, if I select the Title widget, then the Elementor Panel will display all the settings related to editing text.
Elementor Fundamentals: Building Your First Section
Let’s look at how you can use the live preview canvas and Elementor panel to create a simple section consisting of multiple columns and widgets:
Add a new section, by clicking the little + button.
Choose a structure for this section, which can either be a single column or multiple columns.
At this point, you have a new section and a column—let’s add some widgets!
- In the Elementor Panel, select the dotted icon in the upper-right corner.
- Make sure the Elements tab is selected. You should now see a list of all the available widgets.
- Find the widget that you want to use, and drag and drop this widget into your section.
- In the live preview editor, click to select your widget; the Elementor Panel will now display all the settings that you can use to customize this widget.
- Let’s add a second widget! In the Elementor Panel, click to select the dotted icon in the upper-right corner, and make sure the Elements tab is selected.
- Choose a second widget, and drop it into your section.
You now have a simple section consisting of two widgets. There’s a few ways that you can edit this section:
Drag-and-Drop to a New Location
You can move this section to a new location:
Just hover over the section, until the live preview canvas outlines the section in blue and displays three handles. Then grab the middle handle (circled in the following screenshot).
Drag this section to a new location and release.
Delete a Section
Made a terrible mistake? You can delete a section and all of its widgets, by control-clicking the section and then selecting Delete.
Delete a Column
To remove a column from your section:
-
Hover over the Column icon (circled in the following screenshot).
- Control-click the Column icon.
- Select Delete from the context menu that appears.
Add More Columns
Unhappy with a section’s layout? It’s easy to add more columns:
- Control-click the Column icon.
- Select Add New Column. A new column will now be added to this section.
When a section consists of multiple columns, you can resize your columns by dragging their dividing line.
Using these simple techniques, you can build complex page layouts—simply keep adding sections, columns and widgets, and tweaking their settings until you’re happy with the results.
How to Customize Elementor's Ready-Made Templates
At this point, we’ve created a 404 page using a template.
Depending on your chosen template, customizing this 404 page may be as simple as tweaking some of its text and hitting Publishing. However, to make things more interesting I’ll cover a few widgets that you may want to add to your 404 page, even when you’re using a ready-made template.
Help Visitors Navigate Your Site
If you've already created a few menus for your website, then adding these menus to your 404 page can help create a consistent look and feel.
Elementor provides a Navigation menu widget.
To setup a Navigation menu widget:
- In the Elementor Panel, select Navigation menu and drop this widget into a section.
- Click to select the navigation menu widget that you just created.
- In the Elementor Panel, open the Select Menu dropdown.
- You should now see a list of all the menus you’ve created for your website; select the menu that you want to use.
- In the Title textbox, give this menu an optional title.
- When you’re happy with how your menu is configured, click Apply.
Alternatively, you can use Elementor’s New menu widget.
Add a Search Bar
You can help visitors find exactly the content they're interested in, by adding a search bar to your 404 page.
You can create a basic search field, using Elementor’s Search widget.
In the Elementor Panel, find the Search widget, drop it onto the desired section and then click Apply.
Publishing Your First Custom 404 Page
Once you’re happy with the changes you’ve made to your template, it’s time to publish your 404 page:
- In the Elementor Panel, select Publish.
- In the subsequent popup, open the Include dropdown and make sure 404 page is selected.
-
Click Save and close.
You can now see your 404 page in action by purposefully entering an incorrect URL, or using the following URL: www.(your-website-url)/404
Designing a 404 Page with Elementor's Theme Builder
Perhaps you have a specific vision in mind; maybe you want to ensure your 404 page stands out from the crowd, or maybe you want to experiment with lots of different potential designs? In this section, we’ll build a 404 page from scratch, using Elementor’s Theme Builder.
Elementor Pro’s Theme Builder lets you customize every part of your WordPress theme, including areas that would normally require you to know CSS and PHP—or have a developer friend who’s willing to help you out!
Note that in the following screenshots I’m using the Donut Template graphic. This resource is free to download, although the designer has a PayPal donation link if you want to thank them for their hard work.
To create a 404 page using Elementor’s Template Builder, first head over to the main WordPress dashboard. In the left-hand menu, select Templates and click Add New.
Open the Template type dropdown and select Single. Then, in the Select post type dropdown, choose 404 page.
Give your template a descriptive name and click Create template. This will launch Elementor’s template library. Since we’re not using another template as a starting point, just close this window. You should now have a completely blank slate to work with.
Add your first section by clicking the little Add New Section icon. You can now choose a structure for this section; I’m using a single column.
Click to select the section that you just created and now, in the Elementor Panel, open the Content width dropdown and select Full width.
Open the Height dropdown, and select Fit to screen.
Next, select the Elementor Panel’s Style tab. Click to expand the Background section. You can now set the background for your 404 page. You can choose from an image, gradient, video, or a solid color. I’ve opted for a plain white background, by selecting Classic and then choosing white in the color picker.
Now that we have our background sorted, let’s add an image! In the live preview canvas, click the little + icon. Then, in the Elementor Panel, find the Image widget and drop it onto your section.
Select the Elementor Panel’s Content tab and click Choose image and select the image that you want to display as part of your 404 page. You can now use the Elementor Panel to resize your image (I’m using 2048x2048) and change where the image appears within your section.
Next, I want to add some text explaining that this is a 404 page. In the Elementor Panel, find the Heading widget and drag it towards the section that contains your image; a blue panel should appear, indicating where this widget will appear when dropped.
I’m adding the Heading widget directly below my image.
In the Elementor Panel, make sure the Content tab is selected, then in the Title textbox, enter the text that you want to use.
You can now use the the Style tab in the Elementor Panel to change the text’s appearance, including its size and alignment.In this tab, you can change the text’s color, font, add a shadow, and make other stylistic changes. Spend some time experimenting to see what effects you can create.
When you’re happy with your text, reset the Elementor Panel by selecting the dotted icon in its upper-right corner. In the Elementor Panel, find the button widget and drop this widget onto a section; I’m placing my button directly beneath my Heading widget.
In the Elementor Panel, select the Content tab. In Link, enter the desired location, for example I’m linking to my website’s homepage. You can add an optional label to your button, using the Text field; I’m using Go home.
You can now style your button, for example changing its size and where it’s positioned within the section. Select the Elementor Panel’s Style tab and make any subsequent stylistic changes. For example I’m changing the button’s color to compliment the rest of my 404 page.
Once you’re happy with your 404 page, it’s time to publish:
- In the Elementor Panel, select Publish.
- Open the Include dropdown and select 404 page.
- Click Save & Close.
Your 404 page is now live! You can see your 404 page in action, either by visiting a URL that you know doesn’t exist, or by heading over to www.(your-website-url)/404
Web Design Made Easier, With Template Kits
Why restrict yourself to one template, when you can install an entire template kit?
Elementor template kits, found on Envato Elements, are themed collections of templates that provide all the pages your website could possibly need, including the homepage, Contact Us page, blog, archive, About Us page, and much more.
If you want to mix and match, then template kits also provide stand-alone blocks that you can drag-and-drop into your page layouts, to create your own unique designs.
Template kits can take the pain out of designing and building a WordPress website. Simply choose your kit, generate all the required pages, make a few customizations, and then connect these pages together—and congratulations, you have a new website!
Alternatively, you can use template kits to enhance an existing website, by adding designs and layouts that give your website an entirely new look and feel, with minimal effort.
Envato Elements provides a wide range of professionally-designed template kits, ranging from flexible, multipurpose templates to industry-specific kits that were designed with your niche firmly in mind—whether that’s pet boarding, skin care, digital marketing, ice cream, or anything inbetween!
In my next post I’ll show you how to create a 404 page, using the Envato template kit of your choice. Since we’re working with a full template kit, after completing this section you’ll have access to a range of complimentary templates covering all the most common webpages—perfect, if you like your new 404 page so much that you decide to expand its design to other areas of your website!
Conclusion
In this tutorial I covered three ways that you can use Elementor to build a custom 404 page. If you’ve been following along, then you should now have everything you need to design and publish creative, unique 404 pages that perfectly reflect your website’s branding, help visitors locate interesting content, and maybe even earn you a few additional sales.
No comments:
Post a Comment