Divi 5 makes it simple to construct customized 404 pages that really feel intentional, useful, and on model. On this unfastened pack, you’ll get 8 other 404 Segment designs in each styled and unstyled JSON recordsdata, so you’ll both use a ready-made design or get started from a blank construction and observe your personal presets and Design Variables. Drop one into your Divi Library, upload it to a web page or template, and you are prepared to head.
Preview
Here’s a fast have a look at all 8 404 Segment designs incorporated within the pack. The obtain is additional down the submit.
Obtain 8 404 Designs For Divi 5
Get all 8 sections totally free. Import them into your Divi Library and upload them to any web page or Theme Builder template within the Visible Builder.
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}
Obtain For Loose
Sign up for the Divi Publication and we will be able to electronic mail you a replica of without equal Divi Touchdown Web page Format Pack, plus heaps of different wonderful and unfastened Divi assets, guidelines and methods. Apply alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely sort to your electronic mail deal with underneath and click on obtain to get right of entry to the format pack.
You could have effectively subscribed. Please test your electronic mail deal with to verify your subscription and get get right of entry to to unfastened weekly Divi format packs!
What’s Integrated (18 Exports)
After you obtain and unzip the document, you’ll in finding two folders, each and every containing 8 person exports, plus one document that comes with all designs.
Styled 404 Sections (8) → Totally designed 404 layouts with typography, spacing, and visuals already in position. Use them as is, or temporarily adapt them with your personal presets and Design Variables.
Styled 404 Segment (All) → Imports all styled designs for your Divi Library without delay.
Unstyled 404 Sections (8) → Blank 404 layouts with construction and content material blocks in position, waiting so that you can observe your personal styling machine.
Unstyled 404 Segment (All) → Imports all unstyled designs for your Divi Library without delay.
How To Use The 404 Sections
Stay your obtain folder at hand. We can import the JSON recordsdata, then upload a 404 Segment to a web page or template.
1. Import Sections Into The Divi Library
Cross to Divi → Divi Library. Click on Import & Export on the peak of your display screen.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Select Record and make a selection your JSON.
Select any 404 format JSON you need to make use of, then click on Import Divi Builder Layouts.
2. Create A New Template In The Theme Builder
Navigate to the Divi Theme Builder. Click on + Upload New Template to create a brand new 404 template.
Make a selection Construct New Template.
When the Template Settings modal seems, scroll down and make a selection 404 Web page from the Different class. Click on the Create Template button to assign the class within the Theme Builder.
In the end, click on Upload Customized Frame to begin development your template.
3. Upload A 404 Segment To The Template
When the Theme Builder a lot, click on the blue + icon so as to add a brand new Segment to the web page.
Make a selection the Upload From Library tab and make a choice a format to import.
In the end, make a selection Use This Segment to load the format into the Theme Builder.
4. Switch The Content material
As soon as the Segment is at the web page, changing the placeholder content material takes only a few clicks.
Click on without delay on any Textual content Module to edit the headline, message, supporting textual content, or button textual content in actual time. For easiest effects, replace the primary message first (as an example, “Web page no longer discovered”), then upload a brief useful line that tells guests what to do subsequent.
Buttons and CTAs are already arrange in maximum designs. Replace the hyperlink to direct other people to an invaluable useful resource, corresponding to your homepage, weblog, or touch web page.
To switch photographs or icons, open the Symbol settings by means of navigating to the Content material tab of that module. Click on Symbol → Add or make a choice a picture out of your Media Library.
For Background Pictures or Gradients, pass to Segment settings → Content material tab → Background tab and drop to your personal symbol or regulate the Gradient Stops.
5. Regulate Types (Not obligatory)
If you’re the usage of an unstyled model, observe your personal typography, spacing, and colour machine. If you’re the usage of a styled model, you’ll nonetheless make fast changes to raised align along with your model.
To modify fonts, open any Textual content or Heading module and pass to the Design tab. Increase the Textual content or Heading dropdown menu to switch the Heading Degree, Font, Font Taste, Textual content Alignment, or Textual content Colour.
To regulate format sizing, alter the Width and Max-Width values to keep watch over the width of the 404 message and CTAs on better displays.
Use Divi’s Format settings to regulate Flex homes, corresponding to Horizontal and Vertical Hole, Format Path, or Format Wrapping.
If you need movement, stay it delicate, corresponding to a steady fade or a small hover state for your CTA.
Guidelines For Efficient 404 Designs
A 404 web page is a useless finish provided that you let or not it’s. Those fast guidelines allow you to flip it right into a useful redirect.
Make The Message Transparent
Say what took place in undeniable language, then in an instant be offering a subsequent step. Guests will have to have the ability to perceive the location at a look. Keep away from technical jargon like “404 no longer discovered” by myself. As an alternative, pair it with one thing pleasant, corresponding to “Sorry, we couldn’t in finding this web page,” to cut back frustration and set a reassuring tone.
Give A Helpful Method Out
Come with a powerful CTA again to the homepage, at the side of one or two useful hyperlinks (corresponding to fashionable pages, fresh posts, or touch data). A outstanding button or two can information customers temporarily, combating them from leaving your web site altogether.
Keep On Logo
Fit your web site’s typography, colours, and voice. A constant 404 web page builds consider, even if one thing is going flawed. The use of your model’s colours, fonts, and tone makes the revel in really feel seamless and reinforces your identification.
Stay It Rapid And Obtainable
Ensure that buttons have transparent labels, handle readable distinction, and keep away from textual content over busy imagery with out an overlay. A 404 web page will have to be simply as usable as the remainder of your web site. Optimize photographs for fast loading, observe accessibility tips for distinction, and check on cell to lend a hand each customer navigate simply.
Get started Development In Divi 5 Lately
Those 8 404 Sections allow you to flip lacking pages into a greater person revel in with transparent messaging, useful navigation, and on-brand design. Import the styled variations for fast effects, or use the unstyled variations as a blank basis to your personal machine in Divi 5.
The submit 404 Designs For Divi 5 (8 Loose Sections) seemed first on Sublime Issues Weblog.
WordPress Web Design