How to Customise your 404 Error Page?

This blogpost outlines how to create a 404 error page that is customised to your business – that can include links to key pages on your site and a contact form plus much more.

The instructions require you to download and activate two plugins:

  • Page Builder by SiteOrigin and SiteOrigin Widgets Bundle
  • Plus 404page- your smart custom 404 error page
404page - your smart custom 404 error page

Download from WP Plugin Directory

 

The End Result – a fancy 404 Error Page

Below is a gallery of two images (click to enlarge) displaying the front end 404 page of my other website, while the second image is the back end view using the Page Builder editor. Admittedly this is probably over the top but I want to showcase the SiteOrigin Page builder.

What is a 404 error page?

This is the main paragraph text of my page

Sorry, but the page you have requested could not be found. This can happen if the web address was typed incorrectly, if the link you followed was set up incorrectly or if Donncha removed the page from the website.

If you typed in the web address please double check the spelling in the address bar of your browser. Click here to go Donncha’s homepage or check out the links on this specially prepared 404 error page – hope you like it. I do hope you find what you are looking for!

Quick overview of Site Origin Page Builder

YouTube is a fantastic resource for learning about WordPress, Themes and Plugins. There are plenty of videos about SiteOrigin Page Builder to include this one (5 minutes):

There are plenty of other videos to get up to speed with SiteOrigin – and there are several other page builder plugins for WordPress in case you want to Google them! (may work better with your selected theme for instance)

Step by step instructions

  1. Download the Plugins

Search for SiteOrigin in the WordPress Plugin directory and download the Page Builder and Widgets Bundle.

SiteOrigin Plugins

There are several other Siteorigin compatible plugins which add even more exciting and functional widgets to WordPress.

Page Builder Plugins

There are 5 plugins listed here – you will definitely need the first three – please activate the plugins.

 

2. Create a Page that will be your Error Page

>> Pages >>> Add New

 

3. Access settings for 404 Error Page via Appearance

Set the newly created Error page as your 404 Error Page in the settings of the Error 404 Plugin.

404 Error Page Settings via Appearance in WP Dashboard

Select your 404 ‘Oops’ page from the dropdown

Click Edit the Page to customise.

4. To create the Page, Site Origins Page Builder is used.

Please note that a Theme compatible with SiteOrigin Page Builder is required – if this is a new website it may be advisable to go with a SiteOrigin theme, to have a look at one like Vantage is recommended. In my case, my Theme was compatible and had the full page width page layout option which is centrally crucial in optimising the design of the page by removing the side bar i.e. makes it look nice!!

Full width Page Attributes WP

 

ABOUT ROWS

Rows are the starting point with Page Builders. The SiteOrigin video explains how to add rows and then widgets within rows.The start point in any page is to select Page Builder as the Visual Editor.

SiteOrigin PageBuilder Visual Editor

Clicking on the Page Builder Tab, circled in red, activates the Page Builder and allows Rows and Widgets to be added.

SiteOrigin PageBuilder Adds Rows and Widgets

There is also a ‘Prebuilt Layout’ option available. This can be very time effective. The prebuilt layouts can be previewed in advance. I find them very interesting in terms of design ideas and figuring out how to configure each of the available widgets. Because rows can be styled:

  • Page Attributes – add a Row ID
  • Layout – to configure margins, padding and row layout (Full Width v Stretched Full Width)
  • Design – to include background colour or image

5. Add Five Rows

For this particular 404 Error Page, 5 rows are needed. These can be moved using ‘drag and drop’. The rows can also be given titles as they are created. You can select how many columns you want in each row and decide on how space each one gets.

Row 1 = One column – A SiteOrigin Hero Image

Row 2 = Two columns – A SiteOrigin Editor and a WordPress Search Widget

Row 3 = One column – SiteOrigin Headline

Row 4 = One column – SiteOrigin Features Widget

Row 5 = One column with two widgets – A SiteOrigin Headline and a Post Carousel

 

Here is a screengrab of the dashboard screen after the page has been created (repeat of image above) showing the 5 rows and the widgets within each row.

 

Error 404 Site Origins Editor

Error 404 Site Origins Editor

 

6. Add Widgets to your Rows

Widgets are added to rows to provide the design – to save time these can be duplicated and then moved again using ‘drag and drop’.

SiteOrigin Rows and Widgets

Edit Row to change Row Colour (quick identification)

 

To add a widget click on the Row and then click Add Widget.

But first:

SITEORIGIN BUNDLE WIDGETS

After activating the SiteOrigin Widget Bundle Plugin, you may have to individually activate the Widgets that you want from the bundle – click on SiteOrigin Widget settings which will appear as a sub item within Plugins in the Dashboard.

As you can see there are lots of other Widgets which I did not use – so plenty of options for building functionality into any page or post within WordPress.

7. Add content (and style) to each Widget

The widgets are fairly self explantory but you do need your wits about you – and need to spend time figuring out all the settings and the impact of changes. The preview changes feature (part of Live Eidtor) is handy in this regard. Lets just take a look at the widget in the first row. It is a SiteOrigin Hero. It allows a background image with adjustable transparency to be displayed with Heading writing and buttons given prominence. It is actually a Slider but I have only added one Slide Image or Frame. Apparently, a video can also be played in the background of frames.

SiteOrigin Hero Widget with Image

Example of Call to Action with Two Buttons

CONFIGURING SITEORIGIN HERO

There are loads of settings within this widget to provide plenty of style customisation The three top level items are Hero Frames, Slider Controls and Design and Layout.

The starting point is to Add a Frame. This allows text to be added as a heading within the Visual Editor of the frame. To activate the buttons you have to include the [buttons] shortcode.

 

SiteOrigin Hero Widget Configuration

Clicking on Icon allows selection of the Icon which can then be styled in terms of colour, size and links. The section under Icon is Background where the image is set along with image opacity. I set the background image type to Cover from the drop down menu.  The final section as you scroll throught settings of this widget is design and layout where font type, size and colour can be selected. Lots of customisation and more than one button can be added.

8. Be careful with your Spacing

The final point in putting your page together is to pay attention to the layout settings in terms of padding around widgets and rows – this creates or removes the space between blocks of content. There is a very useful setting to make the Row Layout Full Width or Full Width Stretched. Worth experimenting with.

 

Finally, I really like Page Builders. SiteOrigins is a good one. Others particularly Elementor get very good reviews. As I mentioned above, SiteOrigins Widgets offer great functionality to include Contact Forms, Google Maps and Social Media icons – definfitley worth checking out. It allows new websites to be built with a lot less plugins.

Hope you enjoyed this post – comments and social shares welcome.

regards

donncha

p.s I get all my royalty free images from Pixabay – a superb website!!

About

Startup Web Training.com details my web creation training and design solutions. Feel free to contact me to discuss your requirements.

Tagged with: , , , , ,