Divi 5 makes it easy to build custom designed 404 pages that actually really feel intentional, helpful, and on style. In this loose pack, you’ll get 8 different 404 Section designs in every styled and unstyled JSON information, so that you’ll each use a ready-made design or get began from a clean building and apply your own presets and Design Variables. Drop one into your Divi Library, add it to a internet web page or template, and you’re ready to move.
Preview
Right here’s a quick take a look in any respect 8 404 Section designs included inside the pack. The download is further down the put up.
Download 8 404 Designs For Divi 5
Get all 8 sections without cost. Import them into your Divi Library and add them to any internet web page or Theme Builder template inside the Visual Builder.
@media only visual display unit and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous than { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous than { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
Download For Unfastened
Join the Divi Newsletter and we can piece of email you a reproduction of the ultimate Divi Landing Internet web page Structure Pack, plus tons of various glorious and loose Divi belongings, tips and techniques. Observe along and also you’ll be a Divi grab in no time. For those who’re already subscribed simply kind for your piece of email care for beneath and click on on download to get entry to the structure pack.
You should have successfully subscribed. Please check your piece of email care for to make sure your subscription and get get entry to to loose weekly Divi structure packs!
What’s Built-in (18 Exports)
After to procure and unzip the record, you’ll find two folders, each containing 8 particular person exports, plus one record that incorporates all designs.
Styled 404 Sections (8) → Completely 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 in your Divi Library at once.
Unstyled 404 Sections (8) → Clean 404 layouts with building and content material subject matter blocks in place, ready so to apply your own styling gadget.
Unstyled 404 Section (All) → Imports all unstyled designs in your Divi Library at once.
How To Use The 404 Sections
Keep your download folder to hand. We will be able to import the JSON information, then add a 404 Section to a internet web page or template.
1. Import Sections Into The Divi Library
Move to Divi → Divi Library. Click on on Import & Export at the top of your visual display unit.
Throughout the Import & Export Layouts modal, switch to the Import tab, then click on on Make a choice Report and make a choice your JSON.
Make a choice any 404 structure JSON you want to use, then click on on Import Divi Builder Layouts.
2. Create A New Template In The Theme Builder
Navigate to the Divi Theme Builder. Click on on + Add New Template to create a brand spanking new 404 template.
Make a choice Assemble New Template.
When the Template Settings modal turns out, scroll down and make a choice 404 Internet web page from the Other elegance. Click on at the Create Template button to assign the category inside the Theme Builder.
In any case, click on on Add Custom designed Body to start construction your template.
3. Add A 404 Section To The Template
When the Theme Builder so much, click on at the blue + icon to be able to upload a brand spanking new Section to the internet web page.
Make a choice the Add From Library tab and select a structure to import.
In any case, make a choice Use This Section to load the structure into the Theme Builder.
4. Transfer The Content material subject matter
As quickly because the Section is on the internet web page, converting the placeholder content material subject matter takes just a few clicks.
Click on on at once on any Text Module to edit the headline, message, supporting text, or button text in precise time. For very best results, exchange the main message first (for instance, “Internet web page not found out”), then add a short lived helpful line that tells visitors what to do next.
Buttons and CTAs are already prepare in most designs. Exchange the link to direct folks to a useful helpful useful resource, corresponding for your homepage, blog, or contact internet web page.
To modify images or icons, open the Image settings by the use of navigating to the Content material subject matter tab of that module. Click on on Image → Upload or select an image from your Media Library.
For Background Photos or Gradients, cross to Section settings → Content material subject matter tab → Background tab and drop for your non-public image or control the Gradient Stops.
5. Keep watch over Varieties (No longer mandatory)
For those who’re using an unstyled style, apply your own typography, spacing, and color gadget. For those who’re using a styled style, you’ll however make speedy adjustments to higher align along side your style.
To switch fonts, open any Text or Heading module and cross to the Design tab. Build up the Text or Heading dropdown menu to change the Heading Stage, Font, Font Style, Text Alignment, or Text Color.
To control structure sizing, adjust the Width and Max-Width values to control the width of the 404 message and CTAs on higher shows.
Use Divi’s Structure settings to control Flex properties, similar to Horizontal and Vertical Hollow, Structure Trail, or Structure Wrapping.
If you want motion, keep it subtle, similar to a gentle fade or a small hover state in your CTA.
Tips For Environment friendly 404 Designs
A 404 internet web page is a pointless end only if you let or no longer it’s. The ones speedy tips mean you can turn it proper into an invaluable redirect.
Make The Message Clear
Say what came about in plain language, then right away offer a next step. Visitors could have to be able to understand the site at a glance. Avoid technical jargon like “404 not found out” on my own. Instead, pair it with something delightful, similar to “Sorry, we couldn’t find this internet web page,” to scale back frustration and set a reassuring tone.
Give A Useful Way Out
Include a formidable CTA once more to the homepage, in conjunction with one or two helpful links (corresponding to trendy pages, recent posts, or contact information). A exceptional button or two can knowledge shoppers quickly, fighting them from leaving your internet website altogether.
Stay On Brand
Suit your internet website’s typography, colors, and voice. A continuing 404 internet web page builds imagine, even though something goes fallacious. Using your style’s colors, fonts, and tone makes the enjoy actually really feel seamless and reinforces your identity.
Keep It Speedy And Out there
Make certain that buttons have clear labels, take care of readable difference, and steer clear of text over busy imagery without an overlay. A 404 internet web page must be merely as usable as the rest of your internet website. Optimize images for quick loading, apply accessibility guidelines for difference, and test on cellular to be in agreement every buyer navigate merely.
Get began Construction In Divi 5 In recent times
The ones 8 404 Sections mean you can turn missing pages into a better particular person enjoy with clear messaging, helpful navigation, and on-brand design. Import the styled diversifications for quick results, or use the unstyled diversifications as a clean foundation for your non-public gadget in Divi 5.
The put up 404 Designs For Divi 5 (8 Loose Sections) gave the impression first on Sublime Issues Weblog.
Contents
- 1 Preview
- 2 Download 8 404 Designs For Divi 5
- 3 Download For Unfastened
- 4 You should have successfully subscribed. Please check your piece of email care for to make sure your subscription and get get entry to to loose weekly Divi structure packs!
- 5 What’s Built-in (18 Exports)
- 6 How To Use The 404 Sections
- 7 Tips For Environment friendly 404 Designs
- 8 Get began Construction In Divi 5 In recent times
- 9 How to Use Different Blog Post Templates for Different Categories with Divi
- 10 Divi Product Spotlight: Divi Headers Pack
- 11 WordPress Internet hosting Comparability Chart For Velocity And Efficiency – Rev…
0 Comments