#404 sample page for free#
#404 sample page how to#
#404 sample page download#
#404 sample page free#

We hope you’re enjoying all the Divi Theme Builder tutorials! If you have any questions or suggestions, feel free to leave a comment in the comment section below. Divi’s theme builder and built-in design options allow you to touch every page of your website using customized templates.

#404 sample page how to#

In this post, we’ve shown you how to set up and create a 404 page template. Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes. Once your design is done, you can save all the template’s settings. Make sure you change the duplicate module’s content. Once you’ve completed the Text Module and all its settings, you can clone the entire module and place the duplicate in column 2. Bottom Padding: 2vw (Desktop), 3vw (Tablet), 4vw (Phone)Ĭlone Text Module & Place Duplicate in Column 2.Top Padding: 2vw (Desktop), 3vw (Tablet), 4vw (Phone).

Then, go to the spacing settings and apply some custom top and bottom padding values across different screen sizes.

Text Size: 0.8vw (Desktop), 2vw (Tablet), 3vw (Phone).

Once you’ve completed the row and column settings, add a Text Module to column 1 with some paragraph content of your choice. Then, go to the transform scale settings and make sure the default values remain ‘100%’.Ĭhange the transform scale values on hover: Move on to the box shadow settings and apply the following changes: Once you’ve completed the general row settings, you can open each column individually and make some changes, starting with the background color.

Top Margin: 7vw (Desktop), 22vw (Tablet), 59vw (Phone)Ĭolumn 1 & 2 Settings Default Background Color.

Width: 32vw (Desktop), 50vw (Tablet & Phone).

Open the row settings and adjust the sizing settings as follows:

Text Size: 1.2vw (Desktop), 2.6vw (Tablet), 3vw (Phone)Ĭomplete the module’s settings by adding some custom top and bottom margin.Ĭontinue by adding a new row using the following column structure:.

Add some content of your choice.Ĭhange the module’s text settings accordingly: On to the next module, which is another Text Module.

Text Size: 24vw (Desktop), 35vw (Tablet & Phone).

Move on to the module’s design tab and change the text settings as follows: Insert some paragraph content of your choice. Time to start adding modules! The first module we’ll need is a Text Module. Modify the row’s top and bottom padding values next. Without adding any modules yet, open the row settings and allow the row to take up the entire width of the screen. Once you’ve completed the section settings, you can add the first row.

Bottom Padding: 4.6vw (Desktop), 13vw (Tablet), 11vw (Phone).Top Padding: 4.6vw (Desktop), 23vw (Tablet), 25vw (Phone).Divider Arrangement: Underneath Section ContentĪdd some custom padding values across different screen sizes next.Divider Height: 25vw (Desktop), 77vw (Tablet), 90vw (Phone).Move on to the section’s design tab and add a bottom divider: Open this section and add a white background color. Once you’re inside the template editor, you’ll notice a section on your page. Start Building 404 Page Body Add New Section Background Color Once you’ve gone through all previous steps, you can start building the 404 page body by selecting ‘Build Custom Body’.Ģ. To start creating the 404 page template, go to the Divi Theme Builder in your Divi settings.Ĭlick on ‘Add New Template’ and set up a new template for your 404 page.Ĭontinue by hiding the custom header and footer of your 404 page by clicking on the eye icon. Go to Divi Theme Builder & Create New Template Go to Divi Theme Builder Please check your email address to confirm your subscription and get access to free weekly Divi layout packs! You will not be “resubscribed” or receive extra emails. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download.

#404 sample page download#

To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. To lay your hands on the free 404 page template, you will first need to download it using the button below. We hope this tutorial inspires to get creative with your next 404 page design.īefore we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

#404 sample page for free#

We’ll only use Divi’s built-in options and you’ll be able to download the template JSON file for free as well. In this tutorial, we’ll show you how to create a beautiful 404 page template and have it apply to your website right away. More than ever before, you’re now able to customize every single page your customers land on. Divi’s Theme Builder and the built-in design options have opened a ton of new doors.