skip to Main Content

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

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Savoir ajouter un titre de site dynamique et un slogan à un en-tête global 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 booster votre marque en incluant des informations vitales sur votre site où tout le monde le verra.

Dans ce didacticiel, 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 du site et le slogan du backend de WordPress. De plus, vous aurez toutes les puissantes options de conception de Divi pour personnaliser le titre et le slogan comme vous le souhaitez!

Résultat Possible

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

Notez le titre du site et le slogan en haut au milieu de l’en-tête qui est affiché dynamiquement.

Télécharger gratuitement

Rejoignez le Divi Newlsetter et nous vous enverrons par e-mail une copie du pack de mise en page de la page de destination Divi ultime, ainsi que des tonnes d’autres ressources, astuces et astuces Divi gratuites et incroyables. 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.TÉLÉCHARGER

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 de téléchargement depuis votre ordinateur.

Cliquez ensuite sur le bouton d’importation.

Une fois terminé, le modèle d’en-tête global sera disponible dans Divi Theme Builder.

Dans ce qui suit nous allons passer à la conception.

Le titre du site et le slogan sur 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 il s’agit.

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

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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 du site et le slogan ne seront pas visibles sur votre site par défaut, il est donc facile de les 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 du site et le slogan dans WordPress à tout moment en accédant au tableau de bord WordPress et en naviguant vers Paramètres> Général.

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

Maintenant que nous savons où se trouvent le titre du site et le slogan 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éconçu

Pour ce didacticiel, nous allons nous concentrer sur la façon d’ajouter le titre de site dynamique et le slogan à un en-tête existant au lieu de créer un en-tête complet à partir de zéro. Cela vous fera gagner du temps et améliorera la clarté. Donc, 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 générateur de thème .

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

Ensuite, accédez à Divi> Theme Builder.

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

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.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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

À l’intérieur de l’éditeur de disposition de modèle, vous verrez l’en-tête premade 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 ligne supérieure vers la colonne de gauche de la ligne du haut.

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

Ajoutez ensuite un nouveau module Appel à l’action à la colonne du milieu de la ligne supérieure (où se trouvait le logo).

Nous utiliserons le module Appel à l’action pour afficher le titre du site et le slogan.

Mais avant de commencer à ajouter du contenu, sélectionnez d’abord NON pour 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, passez la souris sur la zone du corps et sélectionnez l’icône «Utiliser le contenu dynamique». Sélectionnez ensuite «Site Tagline» dans la liste.

Ajouter un lien de page d’accueil dynamique

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.

Conception du texte du titre et du slogan du site

Now the site title and tagline are displayed on the header dynamically. All we have to do now is add some styling. Remember, we need to customize the title text to design the site title and the body text to design the tagline.

Jump over to the design tab, and update the following:

  • Title Font: Heebo
  • Title Font Weight: Bold
  • Title Font Style: TT
  • Title Text Size: 32px (desktop), 24px (tablet and phone)
  • Title Letter Spacing: 0.3em
  • Body Font: Roboto
  • Body Font Style: italic
  • Body Text Color:
  • Body Text Size: 13px
  • Body Letter Spacing: 0.1em
  • Body Line Height: 1em

To help with centering, take out the default padding below the body text by adding the following custom CSS to the Promo Description:

padding-bottom: 0px

Additional Design Adjustments

For this last part of the tutorial, we are going to make some additional design adjustments to the header to make sure the items remain vertically centered in each column and to give the button a unique design. We’ll also add a before and after squiggly line to the tagline (just for kicks).

Vertically Centering the Columns/Content

Right now the top row is the “Equalize Column Heights” active which uses the flex property. We can capitalize on this by adding a small css snippet to make sure all the columns remain vertically centered within the row. To do this, open the settings for the top row and add the following CSS to the Main Element:

align-items: center;

Updating the Column with the Button

Next, open the settings for column 3 in the top row and take out the background color and padding.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Updating the Button Background

Ouvrez ensuite 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:

  • Arrière-plan dégradé Couleur gauche: #ffffff
  • Couleur de fond dégradé à droite: # 1dbf73
  • Gradient Direction: 135deg
  • Start Position: 10%
  • End Position: 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 du site dynamique et le slogan affichés magnifiquement!

Dernières pensées

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

Source: Elegant Theme

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie 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.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer