10. Let's Celebrate!

Nu firar vi!You are a star!


7.4 Create a Beautiful 404 Error Page with the Divi Theme Builder

  • Your progress:

The 404 error code occurs when you attempt to access a URL that doesn’t exist. When this happens, it’s a good idea to provide a friendly 404 error page for your visitors. This has become a trend, with many websites adding playful and creative touches to their 404 pages. They often incorporate a bit of nerdy humor, highlighting the technical aspect of the error code.

Now, let’s build our own 404 page using Divi. Here’s how to do it:

1. Start by accessing your WordPress dashboard and navigate to Divi > Theme Builder.

2. Create a new template for the 404 page. Assign this template to the 404 page, as indicated in the Theme Builder.

3. In the template, you’ll need to create a custom body from scratch. This body will include two columns. The left column will hold text content, and the right column will feature an illustration. You can select a 2-column layout for the row.

4. Begin by adding a Text module to the left column. Enter the heading “404 Error” and style it as a Heading 4. Add another Text module below and use a Heading 1. You can make this heading slightly larger to create a playful effect. Use dynamic sizing based on viewport width (e.g., 5vw) to make the text size responsive.

5. Include a message like “I’m sorry for this inconvenience.” Beneath that, add a Button module that links to the home page.

6. Adjust the spacing and column widths as needed. Make sure the row’s gutter width is set to your desired value.

7. Add an Image module to the right column, and apply a slide-in animation from the right.

8. Now, the trick to vertically center these columns responsively is to make them equal in height and then use CSS to align them. First, go to the row settings and select “Equalize Column Heights.”

9. Then, go to the content tab and choose the column with the least height, typically the left one. Access its settings, navigate to the Advanced tab, and enter the following custom CSS in the Main Element: `margin: auto;`

10. This will center-align the content vertically, ensuring it’s responsive as well.

This approach ensures that your 404 page is both fun and user-friendly, and it provides an easy way for visitors to navigate back to the home page.

All links, files and code snippets mentioned in the chapter is available below.

This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.


Feel free to ask questions and leave feedback on the tutorial here.


Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo