404 Designs For Divi 5 (8 Free Sections)
Divi 5 makes it easy to build custom 404 pages that feel intentional, helpful, and on brand. In this free pack, you will get 8 different 404 Section designs in both styled and unstyled JSON files, so you can either use a ready-made design or start from a clean structure and apply your own presets and Design Variables. Drop one into your Divi Library, add it to a page or template, and you are ready to go.
Preview
Here is a quick look at all 8 404 Section designs included in the pack. The download is further down the post.
Download Eight 404 Designs For Divi 5
Get all 8 sections for free. Import them into your Divi Library and add them to any page or Theme Builder template in the Visual Builder.
What’s Included (18 Exports)
After you download and unzip the file, you will find two folders, each containing 8 individual exports, plus one file that includes all designs.
Styled 404 Sections (8) → Fully designed 404 layouts with typography, spacing, and visuals already in place. Use them as is, or quickly adapt them with your own presets and Design Variables.
Styled 404 Section (All) → Imports all styled designs to your Divi Library at once.
Unstyled 404 Sections (8) → Clean 404 layouts with structure and content blocks in place, ready for you to apply your own styling system.
Unstyled 404 Section (All) → Imports all unstyled designs to your Divi Library at once.
How To Use The 404 Sections
Keep your download folder handy. We will import the JSON files, then add a 404 Section to a page or template.
1. Import Sections Into The Divi Library
Go to Divi → Divi Library. Click Import & Export at the top of your screen.
In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON.
Choose any 404 layout JSON you want to use, then click Import Divi Builder Layouts.
2. Create A New Template In The Theme Builder
Navigate to the Divi Theme Builder. Click + Add New Template to create a new 404 template.
Select Build New Template.
When the Template Settings modal appears, scroll down and select 404 Page from the Other category. Click the Create Template button to assign the category in the Theme Builder.
Finally, click Add Custom Body to start building your template.
3. Add A 404 Section To The Template
When the Theme Builder loads, click the blue + icon to add a new Section to the page.
Select the Add From Library tab and choose a layout to import.
Finally, select Use This Section to load the layout into the Theme Builder.
4. Swap The Content
Once the Section is on the page, replacing the placeholder content takes just a few clicks.
Click directly on any Text Module to edit the headline, message, supporting text, or button text in real time. For best results, update the main message first (for example, “Page not found”), then add a short helpful line that tells visitors what to do next.
Buttons and CTAs are already set up in most designs. Update the link to direct people to a useful resource, such as your homepage, blog, or contact page.
To replace images or icons, open the Image settings by navigating to the Content tab of that module. Click Image → Upload or choose an image from your Media Library.
For Background Images or Gradients, go to Section settings → Content tab → Background tab and drop in your own image or adjust the Gradient Stops.
5. Adjust Styles (Optional)
If you are using an unstyled version, apply your own typography, spacing, and color system. If you are using a styled version, you can still make quick adjustments to better align with your brand.
To change fonts, open any Text or Heading module and go to the Design tab. Expand the Text or Heading dropdown menu to change the Heading Level, Font, Font Style, Text Alignment, or Text Color.
To adjust layout sizing, modify the Width and Max-Width values to control the width of the 404 message and CTAs on larger screens.
Use Divi’s Layout settings to adjust Flex properties, such as Horizontal and Vertical Gap, Layout Direction, or Layout Wrapping.
If you want motion, keep it subtle, such as a gentle fade or a small hover state on your CTA.
Tips For Effective 404 Designs
A 404 page is a dead end only if you let it be. These quick tips help you turn it into a helpful redirect.
Make The Message Clear
Say what happened in plain language, then immediately offer a next step. Visitors should be able to understand the situation at a glance. Avoid technical jargon like “404 not found” alone. Instead, pair it with something friendly, such as “Sorry, we couldn’t find this page,” to reduce frustration and set a reassuring tone.
Give A Useful Way Out
Include a strong CTA back to the homepage, along with one or two helpful links (such as popular pages, recent posts, or contact information). A prominent button or two can guide users quickly, preventing them from leaving your site altogether.
Stay On Brand
Match your site’s typography, colors, and voice. A consistent 404 page builds trust, even when something goes wrong. Using your brand’s colors, fonts, and tone makes the experience feel seamless and reinforces your identity.
Keep It Fast And Accessible
Ensure buttons have clear labels, maintain readable contrast, and avoid text over busy imagery without an overlay. A 404 page should be just as usable as the rest of your site. Optimize images for quick loading, follow accessibility guidelines for contrast, and test on mobile to help every visitor navigate easily.
Start Building In Divi 5 Today
These 8 404 Sections help you turn missing pages into a better user experience with clear messaging, helpful navigation, and on-brand design. Import the styled versions for instant results, or use the unstyled versions as a clean foundation for your own system in Divi 5.
The post 404 Designs For Divi 5 (8 Free Sections) appeared first on Elegant Themes Blog.
The Tech Zone
Comments
Post a Comment