Divi 404 page

  1. Forside
  2. Supportcenter
  3. WordPress
  4. Divi
  5. Divi 404 page
  1. Forside
  2. Supportcenter
  3. WordPress
  4. Divi 404 page

To create a 404 page that can be designed and edited with the Divi visual builder, you need to create a Divi section or layout, and then create a simple child theme, and add a small 404.php file in the child theme.

You can create a new layout from scratch, or simply create a new page from a Divi premade layout, edit as you please and then save the section (blue block) to the library. You can then delete the page, you only need the design in the library.

You then use the post ID of your block in the Divi library, in the 404.php file, to use the Divi section/layout for all 404’s. If you need to edit your 404 design again, you simply edit your section/layout in the Divi library.

Divi designed 404:

  1. Create the Divi section/layout in the library.
    1. Divi Library ⇢ Add new
    2. Name: 404 layout
      Template type: Layout
  2. While editing the section/layout, copy the post ID from the URL. The post ID is the number in this part “post=1234”.
  3. Add a child theme, if you do not have one already.
  4. Use FTP/scp or the file manager at your hosting company to create an empty file /wp-content/themes/child-theme/404.php
  5. Edit the 404.php file
    1. Go to Appearance ⇢ Editor (/wp-admin/theme-editor.php)
    2. Select your child theme in the top-right corner, and click on 404.php below.
    3. Copy the code from below, change 1234 to the correct post ID, save the file – and browse a non-existing link on your site to view your new 404.
<?php get_header(); ?>
<?php echo do_shortcode('[et_pb_section global_module="1234"][/et_pb_section]'); ?>
<?php get_footer(); ?>

Divi designed section as footer, single post, category etc.

The same way as you can Divi design your own 404 page, you can also design all other sorts of special WordPress pages using Divi. Common examples are:

  • Single post pages – ex. adding a custom header section with a nicer presentation of the featured image and a menu with other posts from the same category.
  • Redesigning all archive pages at once, using a Divi Library Header Section.
  • Redesigning author pages, search result pages etc.

The method for other pages are exactly the same, but instead of creating a new empty file like we did with the 404, copy the file from your main Divi theme. Then add the same et_pb_section line to the right place in your copied file, with the correct post ID.

These are the files you should copy and add your et_pb_section line into:

  • single.php (a single post from the blog)
  • category.php (the overview of posts from the blog)
  • search.php (the search page)
  • author.php (the page for an author)
  • footer.php (the footer, usually build using widgets)
  • header.php (the header)

Advanced options

If you use Divi’s widget options, to create a new sidebar and add widgets to it, you can easily use the new sidebar in your xxx.php files. If you create a new sidebar for your support section named Sidebar support, you can include this sidebar with this code:

<?php dynamic_sidebar( ‘sidebar-support’ ); ?>

WordPress hierarchy files

Var denne artikel nyttig?

Ja Nej

Relaterede artikler