Créer une page d’erreur 404 avec le Divi Builder sans plugin

par | 7 mai 2018 | Tutoriels Divi | 41 commentaires

Créer une page d’erreur 404 avec le Divi Builder sans plugin

La page d’erreur 404 est la page affichée par défaut par un thème WordPress lorsque la requête d’un visiteur n’aboutit à rien. Elle remplace une page inexistante (ou supprimée, donc attention aux redirections).

Si on ne la modifie pas, elle ressemble à ceci sur Divi (si vous voulez tomber sur une 404, tapez n’importe quoi après l’URL du site) :

404 divi

Oui, on ne s’en était pas encore occupé sur Divi Community 😉

Avouez que quand on tombe sur une page comme ça lorsque l’on visite un site, ça ne fait pas super pro, et c’est assez moche.

On va donc s’atteler à en faire une jolie, et en utilisant le Divi Builder.

On va donc commencer par…

Créer le layout de notre page 404 dans la bibliothèque Divi

On va donc se rendre dans la bibliothèque pour y créer et enregistrer notre modèle de page.

Cliquez sur Divi -> Bibliothèque Divi -> Add New

Une boîte de dialogue s’ouvre :

layout 404 divi community

Les deux choses à paramétrer sont :

  • le nom de votre layout : j’ai mis “404” mais vous pouvez le nommer comme vous voulez
  • Choisir “Modèle” dans Type de mise en page

Validez.

Vous allez maintenant pouvoir créer votre page avec le Divi Builder :

404 divi builder

Pour faire simple on a juste inséré une phrase de texte et une image sur notre page 404, mais n’hésitez pas à faire une page beaucoup plus complexe ou renvoyant vers différentes catégories de votre site.

Gardez cette page ouverte, nous allons avoir besoin de son identifiant (ID) dans la partie suivante.

L’identifiant est visible dans l’URL de la page ici :

id 404 divi community

On va ensuite…

Créer le fichier 404.php dans notre thème enfant Divi

Rien de bien compliqué ici.

Ouvrez votre éditeur de code habituel (ou même le bloc-note) et enregistrez le fichier sous le nom 404.php.

Il va falloir y coller 3 lignes de code :

<?php get_header(); ?>

<?php echo do_shortcode('

				
				
				
				
				
				
				

				
				
				
				
				

					

					

						
						
TUTORIELS DIVI

						
						
 

						
					

				

					
				

				

				

			

				
				

			

				
				
				
				
				
				
				

				

				
				
				
				
				

				
				
				
				
				
Découvrez nos tutoriels en français pour vous aider à réaliser facilement vos sites avec le thème Divi.
 Ajoutez des fonctionnalités, personnalisez vos mises en pages et démarquez-vous des autres.

			

				
				
				
				
				
Suggérer une idée de tutoriel

				








	
	

		
			





	
	

					







	




	






			

			

				
				
				
				
			

				

				
				
				
				
				

				
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
			 
	
 

			

			

				
				
				
				
			

				
				
			
'); ?>

<?php get_footer(); ?>

Quelques précisions :

  • la fonction get_header() permet d’afficher le header de votre page
  • ensuite on affiche notre modèle de page via un shortcode de Divi. Pour qu’il puisse être fonctionnel coté PHP, on utilise la fonction do_shortcode()
  • la fonction get_footer() permet d’afficher le footer du site

C’est au niveau de la deuxième ligne que vous devrez remplacer mon identifiant 3168 par celui de votre page. C’est tout ce que vous avez à modifier.

Enregistrez maintenant ce fichier 404.php et ouvrez votre client FTP (Filezilla, Cyberduck ou celui que vous voulez).

Il ne vous reste plus qu’à le transférer directement dans le dossier de votre thème enfant. Il se situe dans wp-content/themes:

theme enfant divi community

Je vous montre où doit se situer le fichier.

Et voila, c’est tout. Votre page d’erreur 404 devrait maintenant être active !

Je ne vous mets pas de lien vers notre page 404 (ça serait mauvais pour le référencement) mais tapez n’importe quoi après www.divi-community.fr/ et vous la verrez :

404 divi community

À vous de jouer maintenant et n’hésitez pas à nous partager vos toutes nouvelles pages 404 en commentaires 😉

Partager la publication "Créer une page d’erreur 404 avec le Divi Builder sans plugin"

  • Facebook
  • Twitter

Comment ?! 
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie
20% sur la licence annuelle

41 Commentaires

  2. Julien
    Julien sur 1 juin 2018 à 16h57

    Cool!

  3. Renaud Destermes
    Renaud Destermes sur 23 août 2018 à 14h39

    Merci pour cette article, je tiens à préciser un petit truc, Google ne lit pas les pages 404, celles-ci n’impacteront pas votre référencement. Vous pouvez donc vous lâcher et faire des pages bien fun 🙂

  4. Julien
    Julien sur 23 août 2018 à 16h44

    Merci pour la précision Renaud 😉

  5. GREMET
    GREMET sur 24 septembre 2018 à 12h49

    Super, merci

  6. leo26
    leo26 sur 30 octobre 2018 à 11h45

    Bonjour,
    Merci pour ce tuto mais j’ai un souci de pied de page apparemment https://ndtriors.fr/404.
    Je n’en utilise pas sur ce site. il y a une bande grise en bas que je n’arrive pas à enlever. Sur une page normale pas de soucis mais sur ce layout çà ne marche pas. Si je supprime la dernière ligne du script php c’est pas bon. Pouvez-vous m’aider ?

  7. Julien
    Julien sur 30 octobre 2018 à 21h27

    Bonjour, la bande grise correspond à la couleur de fond que tu as défini pour ton site et elle se voit car ta page ne prend pas toute la hauteur de l’écran 😉

  8. leo26
    leo26 sur 3 novembre 2018 à 17h55

    oui merci j’avais compris mais comment forcer la page à prendre toute la hauteur ?
    merci encore

  10. leo26
    leo26 sur 4 novembre 2018 à 19h00

    Bonsoir Julien,
    Sur les pages classiques je n’ai pas ce problème, je pense donc que c’est le fait que ce soit un layout. Toutefois j’ai pu régler le problème en ajoutant cette ligne de css à ma section : min-height: 100vh; et en activant le plugin Divi Quasi-Sticky Footer. Le script à la main de ton tuto ne fonctionne pas pour moi. Ce plugin pourrait être listé dans ceux “indispensables” pour Divi.
    Encore Merci

  11. Padi
    Padi sur 6 novembre 2018 à 10h26

    Bonjour,
    Merci pour ce tuto très utile.
    Pour ma part, j’ai un problème d’affichage de ma barre supérieure (blanche), qui n’apparaît plus. Je n’ai que ma barre de navigation (transparente). Or comme j’ai un footer, quand je scrolle, le design de la page 404 se superpose avec ma barre de navigation.
    Que dois-je faire pour retrouver ma barre supérieure ?
    Merci beaucoup par avance !

  12. Julien
    Julien sur 7 novembre 2018 à 23h09

    Salut, tu aurais un lien s’il te plait car je ne me représente pas très bien le problème?

  13. Padi
    Padi sur 8 novembre 2018 à 16h22

    J’ai résolu mon problème d’affichage de la barre supérieure en créant tout simplement une page 404 dédiée et en activant la redirection vers cette page 404 au moyen du code suivant :

    Du coup, je précise “blank page” dans “Attributs de page” et je me retrouve sans le menu primaire ni la barre supérieure mais finalement ça me va très bien comme affichage.

  14. Padi
    Padi sur 8 novembre 2018 à 16h24

    J’ai résolu mon problème d’affichage de la barre supérieure en créant tout simplement une page 404 dédiée et en activant la redirection vers cette page 404 au moyen du code suivant (ne pas oublier le

    meta http-equiv=”refresh” content=”0;url=https://www.monsiteweb.com/nomdelapage404”/>

    php get_footer(); ?>

    Du coup, je précise “blank page” dans “Attributs de page” et je me retrouve sans le menu primaire ni la barre supérieure mais finalement ça me va très bien comme affichage.

  15. Padi
    Padi sur 8 novembre 2018 à 16h28

    J’ai résolu mon problème d’affichage de la barre supérieure en créant tout simplement une page 404 dédiée et en activant la redirection vers cette page 404 au moyen du code suivant (ne pas oublier le signe inférieur à devant chaque ligne):

    php get_header(); ?>

    meta http-equiv=”refresh” content=”0;url=https://www.monsiteweb.com/nomdelapage404”/>

    php get_footer(); ?>

    Du coup, je précise “blank page” dans “Attributs de page” et je me retrouve sans le menu primaire ni la barre supérieure mais finalement ça me va très bien comme affichage.

  16. Yvon Legrand
    Yvon Legrand sur 13 février 2019 à 17h37

    Bonjour, j’ai fait le tuto mais ça ne marche pas pour moi =/
    J’ai bien mis le fichier 404.php dans le fichier du thème enfant, mais le template par défaut est toujours chargé.

    Bien à vous

  17. Pierre
    Pierre sur 13 février 2019 à 17h57

    As-tu bien modifié dans le shortcode l’ID correspondant à ton layout ?

  18. Julie Croyal
    Julie Croyal sur 27 février 2019 à 08h13

    Bonjour, j’ai le même pb que @Yvon Legrand… J’ai tout suivi à la lettre (y compris la modification de l’ID dans le shortcode) mais rien n’y fait, le template par défaut est toujours chargé. Une idée ?

  19. Julien
    Julien sur 27 février 2019 à 08h20

    Bonjour, tu as bien défini le template comme étant un Modèle lors de l’enregistrement?

  20. Julie Croyal
    Julie Croyal sur 27 février 2019 à 08h21

    Re, finalement tout va bien… ça a juste mis du temps à se mettre à jour … bien que le cache était vide…
    Merci pour le tuto !

  21. Eric Charbonnet
    Eric Charbonnet sur 27 avril 2019 à 18h35

    Bonjour ,
    Merci pour ce tutoriel, c’est justement ce que je souhaitais pour modifier ma page 404 sur mon site. Malheureusement le fichier “404.php”que j’ai créé et installé selon les informations données ne semble pas fonctionner.
    Mes questions :
    Cette solution est-elle toujours d’actualité ?
    Est-ce tous les thème divi ( divi create agency pour ma part ) ?

    Je vous remercie par avance de votre réponse,
    Cordialement, Eric

  22. Alex
    Alex sur 3 mai 2019 à 15h58

    Hello !

    Le tutoriel ne fonctionne pas de mon côté. J’ai bien créer un layout puis je l’ai inséré dans une page. Celle-ci n’a pas de nom et j’ai récupéré son identifiant que j’ai placé dans le code du fichier 404.php, à la racine de mon thème.

    Y’a t-il un détail que j’ai oublié ? Cela a fonctionné 2 minutes et puis plus rien..

    J’ai recommencé la manipulation en recréant un modèle, une nouvelle page, remettant un nouveau identifiant mais le problème persiste.

  23. Julien
    Julien sur 5 mai 2019 à 11h23

    Bonjour, effectivement pour nous non plus. Je pense qu’une MAJ de Divi a changé le système de shortcode.
    On va chercher une solution et mettre à jour le tuto dès que possible.
    On le postera à nouveau sur Facebook.
    Bonne journée

  24. Julien
    Julien sur 5 mai 2019 à 11h48

    Bonjour Eric,
    effectivement il ne marche plus à priori depuis les dernières MAJs de Divi.
    On va chercher une solution pour régler ça!

  25. Alexis
    Alexis sur 10 mai 2019 à 18h25

    Salut Julien,;
    Merci pour ton tuto 404.php 😉
    J’ai suivi tes instructions à la lettre et me voici avec ma propre page 404.
    Pas de dysfonctionnement à signaler.
    Merci encore.
    Il reste juste a faire une erreur dans l’adresse https://aqua-parc.fr pour la voir apparaître, et le tour est joué.

  26. Renaud
    Renaud sur 14 mai 2019 à 11h07

    Super, ça fonctionne au top, merci la team !

  27. Julien
    Julien sur 15 mai 2019 à 12h04

    Au top ta page 404!

  28. Alexia GRAZIANI
    Alexia GRAZIANI sur 15 mai 2019 à 15h51

    Hello !

    Est-ce que le tutoriel a été mis à jour ?

    Je me demandais si j’étais pas devenue folle car j’ai recommencé le tuto plusieurs fois il y a 2-3 semaines.

    Heureusement que j’ai lu les com’s aujourd’hui !

  29. Julien
    Julien sur 16 mai 2019 à 11h16

    Bonjour, pas encore mais a a marché malgré tout pour certains alors tu peux retenter ta chance 😉

  30. Christophe
    Christophe sur 5 juillet 2019 à 11h05

    Bonjour,

    Super tuto, merci !

    Par contre comment cela se passe-t-il pour un site multilingue ?

    J’ai traduit ma page 404 (avec WPML) mais le n° du post est différent. Est-ce que je dois rajouter les même lignes à la suite dans le fichier 404.php avec le second n° de post ?

  31. Julien Guiard
    Julien Guiard sur 12 juillet 2019 à 08h48

    Hello, tout dépend du nombre de langue mais tu auras besoin de conditions PHP sur la langue en cours du visiteur de cette manière:

    if (get_locale() == ‘en_US’) {

    echo do_shortcode(‘[et_pb_section global_module="3168"][/et_pb_section] ‘);
    }

    elseif (get_locale() == ‘fr_FR’) {

    echo do_shortcode(‘[et_pb_section global_module="4678"][/et_pb_section] ‘);

    }

    else {
    echo do_shortcode(‘[et_pb_section global_module="7890"][/et_pb_section]‘);
    }

    N’hésites pas si tu as des questions.

  32. Christophe
    Christophe sur 17 juillet 2019 à 16h13

    Hello,

    J’ai testé le code pour la page multilingue, mais ça ne fonctionne pas malheureusement.

    J’ai fait ça :

    if (get_locale() == ‘fr_FR’) {

    echo do_shortcode(‘[et_pb_section global_module="3030"][/et_pb_section] ‘);
    }

    else {
    echo do_shortcode(‘[et_pb_section global_module="3033"][/et_pb_section]‘);
    }

    J’ai aussi essayé d’inverser et de mettre en premier pour l’allemand (de_DE), mais ça ne va pas non plus

  33. Franco
    Franco sur 31 juillet 2019 à 11h27

    Salut

    L’affichage fonctionne mais je me retrouve avec du code après mon footer. Une solution ?

    Exemple pour aller sur la 404 : https://academy-geneva.ch/erreurpage

    Merci

  34. Franco
    Franco sur 31 juillet 2019 à 11h39

    Problème résolu. C’était mon plugin 404 notifier qui faisait ça. Je l’ai désactivé et c’est réglé.

  35. Julien Guiard
    Julien Guiard sur 5 août 2019 à 22h05

    Bonjour, quel genre de code?

  36. sycall
    sycall sur 20 octobre 2019 à 15h09

    Effectivement sur certains des sites que j’ai fait cette méthode fonctionne et parfois non… allez savoir, en tout cas une façon alternative qui fonctionne est de créer le dossier “includes” dans votre thème enfant et de créer le ficher no-results.php.
    avec ce code:


    post_content); ?>

  37. Pierre Bichet
    Pierre Bichet sur 22 octobre 2019 à 09h56

    Cette méthode devient obsolète avec Divi 4 qui permet de créer nativement un template pour la page d’erreur 404 (entre autres).

  38. sycall
    sycall sur 26 octobre 2019 à 09h31

    Oui mais pour les sites qui tournent encore avec la ou les versions précédentes, ç a peut aider.
    Avec Divi 4 que du bonheur 😉

  39. Rénaldo
    Rénaldo sur 17 décembre 2019 à 12h20

    Hello,
    Petit soucis sur ta 404 ce matin (https://www.divi-community.fr/tutu)
    Ta solution m’intéresse d’autant plus …
    Merci pour tout

  40. Mike
    Mike sur 5 janvier 2020 à 11h47

    Salut, Merci pour ce tutoriel j’ai réaliser le mien sous une base d’un slider modifier

    https://deltacomputer.fr/404.php

    Merci pour tout les tutoriels

  41. Rico
    Rico sur 10 février 2021 à 10h56

    Bonjour Julien

    La page a très bien fonctionnée jusqu’à présent, en voulant voir ce qui n’allait pas je me suis apreçu que mes pages créées par le visual builder sont inaccessible, en l’éditant j’ai “une erreur inconnue réessayez plus tard” une idée ou puis je le retelecharger facilement ?

Poster le commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.