Comment ajouter un titre de site dynamique et un slogan à un en-tête Divi Global

Publié: 2020-05-15

Savoir comment ajouter un titre de site dynamique et un slogan à un en-tête mondial Divi sera utile lors de la création de sites Web Divi. Et il y a quelques bonnes raisons de le faire. D'une part, tous les sites n'ont pas de logo. Un titre de site est un bon remplacement de logo. Une autre raison est de renforcer votre marque en incluant des informations vitales sur votre site où tout le monde le verra.

Dans ce tutoriel, nous allons vous montrer comment ajouter un titre de site dynamique et un slogan à un en-tête global Divi. Cette solution extraira dynamiquement le titre et le slogan du site du backend de WordPress. De plus, vous disposerez de toutes les puissantes options de conception de Divi pour personnaliser le titre et le slogan comme vous le souhaitez !

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Notez le titre et le slogan du site en haut au milieu de l'en-tête qui s'affiche dynamiquement.

Téléchargez GRATUITEMENT le titre de site dynamique et le modèle d'en-tête global Divi

Pour mettre la main sur le modèle d'en-tête global de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! 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 pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer le modèle, accédez à Divi > Générateur de thèmes.

Cliquez sur l'icône de portabilité en haut à droite de la page.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, le modèle d'en-tête global sera disponible dans le générateur de thème Divi.

Passons au tutoriel, voulez-vous ?

Le titre et le slogan du site dans WordPress

Chaque site WordPress a un titre de site et un slogan. Le titre du site est essentiellement le nom du site et le slogan est une courte phrase qui explique généralement de quoi parle le site.

Il n'est pas rare d'ajouter le titre du site lors de l'installation de WordPress et de l'oublier.

Et, certaines personnes ne réalisent même pas que le slogan existe, et encore moins prennent le temps de le mettre à jour. De plus, lorsque vous utilisez le thème Divi, le titre et le slogan du site ne seront pas visibles sur votre site par défaut, il est donc facile de l'ignorer. Cependant, le titre du site et le slogan sont des éléments essentiels du site Web et seront reconnus par les moteurs de recherche.

Vous pouvez localiser et mettre à jour le titre et le slogan du site dans WordPress à tout moment en accédant au tableau de bord WordPress et en accédant à Paramètres > Général.

Ou, vous pouvez emprunter un autre itinéraire en utilisant le personnalisateur de thème pour mettre à jour le titre du site dans les paramètres généraux.

Maintenant que nous savons où se trouvent le titre et le slogan du site sur le backend de WordPress, explorons comment nous pouvons les ajouter à un en-tête Divi !

Comment ajouter un titre de site dynamique et un slogan à un en-tête global dans Divi

Importation du modèle d'en-tête global prédéfini

Pour ce didacticiel, nous allons nous concentrer sur la façon d'ajouter le titre et le slogan du site dynamique à un en-tête existant au lieu de créer un en-tête complet à partir de zéro. Cela permettra de gagner du temps et d'améliorer la clarté. Ainsi, pour démarrer cette conception d'en-tête, nous allons importer un modèle d'en-tête global prédéfini à partir de notre quatrième pack de création de thèmes.

Une fois que vous avez téléchargé le pack de création de thèmes, décompressez le fichier et recherchez le fichier JSON du modèle de site Web par défaut.

Accédez ensuite à Divi > Générateur de thèmes.

Cliquez sur l'icône de portabilité en haut à droite. Dans la fenêtre contextuelle de portabilité, choisissez le fichier JSON du modèle de site Web par défaut et cliquez sur le bouton d'importation.

Une fois le modèle ajouté au générateur de thème, supprimez le modèle de pied de page et cliquez pour modifier l'en-tête global.

Ajout d'un titre de site dynamique et d'un slogan à l'en-tête

Dans l'éditeur de mise en page de modèle, vous verrez l'en-tête prédéfini déjà conçu. Nous pouvons commencer à faire nos personnalisations tout de suite.

Déplacer le logo

Pour commencer, faites glisser le module d'image qui affiche le logo (dynamiquement) de la colonne du milieu de la rangée supérieure vers la colonne de gauche de la rangée supérieure.

Ajouter un module d'appel à l'action pour afficher le titre et le slogan du site

Ajoutez ensuite un nouveau module d'appel à l'action dans la colonne du milieu de la rangée supérieure (là où se trouvait le logo).

Nous utiliserons le module Call to Action pour afficher le titre du site et le slogan.

Mais avant de commencer à ajouter du contenu, sélectionnez d'abord NE PAS utiliser la couleur d'arrière-plan.

Ajouter un titre de site dynamique

Sous les paramètres de contenu, survolez la zone de saisie du titre et cliquez sur l'icône "Utiliser le contenu dynamique". Sélectionnez ensuite « Titre du site » dans la liste.

Ajouter un slogan de site dynamique

Ensuite, survolez la zone du corps et sélectionnez l'icône "Utiliser le contenu dynamique". Sélectionnez ensuite « Slogan du site » dans la liste.

Ajouter un lien dynamique vers la page d'accueil

Il est courant que le titre du site redirige vers la page d'accueil au clic, surtout si vous remplacez le logo. Pour rediriger l'intégralité du module vers la page d'accueil, ajoutez le lien de la page d'accueil en tant que contenu dynamique à l'URL du lien du module.

Titre du site et conception du texte du slogan

Désormais, le titre et le slogan du site sont affichés dynamiquement sur l'en-tête. Il ne nous reste plus qu'à ajouter un peu de style. N'oubliez pas que nous devons personnaliser le texte du titre pour concevoir le titre du site et le corps du texte pour concevoir le slogan.

Passez à l'onglet Conception et mettez à jour les éléments suivants :

Police du titre : Heebo
Poids de la police du titre : gras
Style de police du titre : TT
Taille du texte du titre : 32 px (ordinateur de bureau), 24 px (tablette et téléphone)
Espacement des lettres du titre : 0.3em
Police de caractère : Roboto
Style de police du corps : italique
Couleur du corps du texte :
Taille du corps du texte : 13 px
Espacement des lettres du corps : 0.1em
Hauteur de la ligne du corps : 1 em

Pour faciliter le centrage, supprimez le remplissage par défaut sous le corps du texte en ajoutant le CSS personnalisé suivant à la description de la promotion :

padding-bottom: 0px

Ajustements de conception supplémentaires

Pour cette dernière partie du didacticiel, nous allons apporter quelques ajustements de conception supplémentaires à l'en-tête pour nous assurer que les éléments restent centrés verticalement dans chaque colonne et pour donner au bouton un design unique. Nous ajouterons également une ligne ondulée avant et après au slogan (juste pour les coups de pied).

Centrage vertical des colonnes/contenu

À l'heure actuelle, la ligne du haut est l'actif « Egaliser les hauteurs de colonne » qui utilise la propriété flex. Nous pouvons capitaliser sur cela en ajoutant un petit extrait css pour nous assurer que toutes les colonnes restent centrées verticalement dans la ligne. Pour ce faire, ouvrez les paramètres de la ligne supérieure et ajoutez le CSS suivant à l'élément principal :

align-items: center;

Mettre à jour la colonne avec le bouton

Ensuite, ouvrez les paramètres de la colonne 3 dans la rangée supérieure et retirez la couleur d'arrière-plan et le remplissage.

Mettre à jour l'arrière-plan du bouton

Ensuite, ouvrez le paramètre du module de boutons et mettez à jour l'arrière-plan avec un nouveau dégradé d'arrière-plan comme suit :

Couleur d'arrière-plan dégradé à gauche : #ffffff
Couleur de fond dégradé à droite : #1dbf73
Direction du dégradé : 135 deg
Position de départ : 10 %
Position finale : 0%

Ajout de caractères avant et après au slogan

Chaque élément de contenu dynamique peut être modifié en cliquant sur l'icône d'engrenage. Pour ajouter des caractères avant et après au slogan, ouvrez les paramètres du module d'appel à l'action contenant le slogan et cliquez sur l'icône de modification sur le contenu dynamique du slogan du site. Ajoutez ensuite les caractères aux entrées avant et après.

Résultat final

Pour voir le résultat, ouvrez n'importe quelle page de votre site. Vous devriez voir le titre et le slogan dynamiques du site s'afficher magnifiquement !

Voici comment il s'empile sur tablette et téléphone.

Dernières pensées

Il est vraiment agréable de pouvoir personnaliser un en-tête global avec un titre et un slogan de site dynamiques. Cela semble être quelque chose qui sera utile pour beaucoup de sites. J'aime aussi l'idée d'inclure le titre et le slogan du site en plus du logo pour une représentation encore plus forte de la marque.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!