Le générateur de thèmes de Divi et les options de conception intégrées ont ouvert une tonne de nouvelles portes. Plus que jamais, vous pouvez personnaliser chaque page sur laquelle vos clients accèdent. Cela comprend la mise en place d’une page 404. Dans ce didacticiel, nous allons vous montrer comment créer un beau modèle de page 404 et l’appliquer immédiatement à votre site Web. Nous utilisons simplement les options intégrées de Divi, et vous pouvez également télécharger le fichier de modèle JSON gratuitement. Nous espérons que ce didacticiel vous incitera à faire preuve de créativité avec votre prochaine conception de page 404.

Commençons!

Aperçu

Avant d’entrer dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Bureau

Modèle de page 404

Téléphone portable, téléphone portable

Modèle de page 404

Téléchargez le modèle de page 404 GRATUITEMENT

Pour mettre la main sur le modèle de page 404 gratuit, vous devez d’abord le télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

Abonnez-vous à notre chaîne YouTube

1. Allez dans Divi Theme Builder et créez un nouveau modèle

Allez dans Divi Theme Builder

Pour commencer à créer le modèle de page 404, accédez au Générateur de thèmes Divi dans vos paramètres Divi.

Modèle de page 404

Créer un nouveau modèle

Cliquez sur « Ajouter un nouveau modèle » et configurez un nouveau modèle pour votre page 404.

Modèle de page 404

Modèle de page 404

Masquer la zone d’en-tête et de pied de page

Allez-y et masquez l’en-tête et le pied de page personnalisés de votre page 404 en cliquant sur l’icône en forme d’œil.

Modèle de page 404

Construire un organisme mondial

Après avoir suivi toutes les étapes précédentes, vous pouvez commencer à créer le corps de la page 404 en sélectionnant «Créer un corps personnalisé».

Modèle de page 404

2. Commencez par créer le corps de la page 404

Ajouter une nouvelle section

Couleur de l’arrière plan

Une fois que vous êtes dans l’éditeur de modèles, vous remarquerez une section sur votre page. Ouvrez cette section et ajoutez une couleur de fond blanc.

  • Couleur d’arrière-plan: #FFFFFF

Modèle de page 404

Diviseur inférieur

Accédez à l’onglet Conception de la section et ajoutez un séparateur inférieur:

  • Style de pièce: rechercher dans la liste
  • Couleur du séparateur: # ffee00
  • Hauteur du diviseur: 25vw (bureau), 77vw (tablette), 90vw (téléphone)
  • Clapet séparateur: vertical
  • Disposition des séparateurs: sous la section Contenu

Modèle de page 404

distance

Ensuite, ajoutez des valeurs de remplissage personnalisées pour différentes tailles d’écran.

  • Rembourrage supérieur: 4.6 VW (bureau), 23 VW (tablette), 25 VW (téléphone)
  • Rembourrage au sol: 4,6 VW (bureau), 13 VW (tablette), 11 VW (téléphone)

Modèle de page 404

Ajouter la ligne 1

Structure de la colonne

Une fois que vous avez terminé les paramètres de la section, il est temps d’ajouter la première ligne. Sélectionnez la structure de colonne suivante:

Modèle de page 404

Dimensionnement

Ouvrez les paramètres de ligne sans ajouter de modules et laissez la ligne occuper toute la largeur de l’écran.

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Largeur: 100%
  • Largeur maximale: 100%

Modèle de page 404

distance

Ensuite, modifiez les valeurs de remplissage supérieur et inférieur de la ligne.

  • Rembourrage supérieur: 2vw
  • Rembourrage au sol: 2vw

Modèle de page 404

Ajouter 1 à la colonne du module de texte

Ajouter du contenu

Il est temps d’ajouter des modules! Le premier module dont nous avons besoin est un module de texte. Insérez un contenu de paragraphe de votre choix.

Modèle de page 404

Paramètres de texte

Accédez à l’onglet Conception du module et modifiez les paramètres de texte comme suit:

  • Police du texte: monotone
  • Couleur du texte: # 000000
  • Taille du texte: 24vw (bureau), 35vw (tablette et téléphone)
  • Hauteur de la ligne de texte: 1em
  • Alignement du texte: centre

Modèle de page 404

Ajouter le module de texte n ° 2 à la colonne

Ajouter du contenu

Passons au module suivant, un autre module de texte. Ajoutez le contenu de votre choix.

Modèle de page 404

Paramètres de texte

Modifiez les paramètres de texte du module en conséquence:

  • Police du texte: Montserrat
  • Couleur du texte: # 000000
  • Taille du texte: 1,2 VW (bureau), 2,6 VW (tablette), 3 VW (téléphone)
  • Hauteur de la ligne de texte: 1,8em
  • Alignement du texte: centre

Modèle de page 404

distance

Complétez les paramètres du module en ajoutant une marge supérieure et inférieure personnalisée.

  • Marge supérieure: 2vw
  • Marge inférieure: 6vw

Modèle de page 404

Ajouter la ligne 2

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne avec la structure de colonnes suivante:

Modèle de page 404

Dimensionnement

Ouvrez les paramètres de ligne et ajustez les paramètres de taille comme suit:

  • Largeur: 32vw (bureau), 50vw (tablette et téléphone)
  • Largeur maximale: 100%

Modèle de page 404

distance

Modifiez également les paramètres d’espacement.

  • Top: 7vw (bureau), 22vw (tablette), 59vw (téléphone)
  • Rembourrage supérieur: 0vw
  • Rembourrage au sol: 0vw

Modèle de page 404

Paramètres des colonnes 1 et 2

Couleur d’arrière-plan standard

Une fois que vous avez défini les paramètres généraux des lignes, vous pouvez ouvrir chaque colonne individuellement et apporter des modifications, en commençant par la couleur d’arrière-plan.

  • Couleur d’arrière-plan: #FFFFFF

Modèle de page 404

Couleur d’arrière-plan du survol

Changez la couleur d’arrière-plan lors du survol.

  • Couleur d’arrière-plan: # fffa00

Modèle de page 404

bord

Ajoutez également des coins arrondis.

  • Coins arrondis: 20px (tous les coins)

Modèle de page 404

Ombre de boîte standard

Passez aux paramètres d’ombre de la boîte et appliquez les modifications suivantes:

  • Force de flou de l’ombre de la boîte: 50px
  • Couleur de l’ombre: rgba (0,0,0,0)

Modèle de page 404

Ombre de la boîte de survol

Changez la couleur de l’ombre pendant le survol.

  • Couleur de l’ombre: rgba (0,0,0,0,12)

Modèle de page 404

Échelle de transformation standard

Accédez ensuite aux paramètres de l’échelle de transformation et assurez-vous que les valeurs par défaut restent « 100% ».

Modèle de page 404

Échelle de transformation de survol

Modifiez les valeurs d’échelle de transformation pendant le survol:

Modèle de page 404

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Lorsque vous avez terminé les paramètres de ligne et de colonne, ajoutez un module de texte à la colonne 1 avec un contenu de paragraphe de votre choix.

Modèle de page 404

Ajouter un lien

Ensuite, ajoutez un lien vers le module.

  • URL du lien du module: #
  • Cible du lien du module: dans la même fenêtre

Modèle de page 404

Paramètres de texte

Accédez à l’onglet Conception du module et modifiez les paramètres de texte comme suit:

  • Police du texte: Montserrat
  • Épaisseur de la police du texte: gras
  • Style de police du texte: majuscule
  • Couleur du texte: # 000000
  • Taille du texte: 0.8vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Espacement des lettres de texte: 1px
  • Hauteur de la ligne de texte: 1,8em
  • Alignement du texte: centre

Modèle de page 404

distance

Accédez ensuite aux paramètres d’espacement et appliquez des valeurs de remplissage haut et bas personnalisées à différentes tailles d’écran.

  • Rembourrage supérieur: 2vw (bureau), 3vw (tablette), 4vw (téléphone)
  • Rembourrage au sol: 2vw (bureau), 3vw (tablette), 4vw (téléphone)

Modèle de page 404

Cloner le module de texte et placer le duplicata dans la colonne 2

Une fois que vous avez terminé le module de texte et tous ses paramètres, vous pouvez cloner tout le module et placer le duplicata dans la colonne 2.

Modèle de page 404

Changer de contenu

Assurez-vous de modifier le contenu du module dupliqué.

Modèle de page 404

Changer de lien

Modifiez également le lien.

Modèle de page 404

3. Enregistrez les modifications dans le générateur de thèmes

Une fois que votre conception est prête, vous pouvez enregistrer tous les paramètres du modèle. C’est ça!

Modèle de page 404

Modèle de page 404

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Bureau

Modèle de page 404

Téléphone portable, téléphone portable

Modèle de page 404

Dernières pensées

Dans cet article, nous vous avons montré comment configurer et créer un modèle de page 404. Avec le générateur de thèmes de Divi et les options de conception intégrées, vous pouvez toucher chaque page de votre site Web avec des modèles personnalisés. Nous espérons que vous apprécierez tous les didacticiels de Divi Theme Builder! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts