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) :
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 :
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 :
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 :
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 :
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:
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 :
À 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"
Comment personnaliser les pages de blog de Divi ?
Les effets de transformations et de survol dans Divi
Divi Toolbox, le plugin dont vous ne pourrez plus vous passer
Personnaliser vos pages WooCommerce avec le Divi Builder
Adaptez le module formulaire de Divi pour le rendre conforme au RGPD
Créez une rubrique offres d’emploi
merci julien
voici une page 404 https://happyo.net/404
Cool!
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 🙂
Merci pour la précision Renaud 😉
Super, merci
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 ?
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 😉
oui merci j’avais compris mais comment forcer la page à prendre toute la hauteur ?
merci encore
Salut, tu peux essayer ce tuto je pense: https://www.divi-community.fr/tutoriels-divi/footer-bas-ecran-divi/
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
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 !
Salut, tu aurais un lien s’il te plait car je ne me représente pas très bien le problème?
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.
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=http://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.
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=http://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.
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
As-tu bien modifié dans le shortcode l’ID correspondant à ton layout ?
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 ?
Bonjour, tu as bien défini le template comme étant un Modèle lors de l’enregistrement?
Re, finalement tout va bien… ça a juste mis du temps à se mettre à jour … bien que le cache était vide…
Merci pour le tuto !