fbpx

Divi et ses options de personnalisation

Créer un menu à son image grâce au divi theme builder

15 mai 2021, St-Jean-sur-Richelieu

Vous voulez vous démarquer de la concurrence et vous cherchez un moyen de vous faire valoir? Sachez que Divi a un talent caché qui pourrait vous convenir. Mis à part la fonctionnalité de créer par défaut votre menu avec Divi et WordPress, vous pouvez pousser la création plus loin que l’emplacement du menu. Laissez-moi vous montrer, mais tout d’abord commençons par le commencement.

En premier lieu, avec WordPress, vous devez ajouter des pages à votre projet, exemple : à  propos, accueil, contact. Par la suite, il vous faudra les attribuer à un menu quelconque. Aller dans l’onglet « apparence » puis cliquer sur « menus« . Dans cette section vous allez pouvoir intégrer vos pages. Pour se faire, vous devez créer un menu.

  1. Cliquer sur « créez un nouveau menu »
  2. Donner un nom à votre menu.
  3. Sélectionner les pages que vous désirez ajouter.
  4. Cliquer sur « Ajouter au menu » pour confirmer la sélection
  5. Enregistrer le menu.

À noter, il est possible d’inclure des articles, catégories et liens personnalisés au menu.

Après l’intégration de vos pages, vous pouvez les disposés dans l’ordre souhaiter d’un simple « drag and drop« .

Jusqu’à présent, c’est assez simple n’est-ce pas? Ce que vous verrez par la suite ne sera pas plus compliqué. À temps normal, nous aurions le réflexe d’aller dans l’onglet apparence et personnaliser pour la suite des choses, mais pas cette fois-ci. Ce que nous voulons, c’est de concevoir notre menu et non changer quelques couleurs. Nous voulons le faire de A à Z.

Il est temps de vous dévoiler le talent caché de Divi. Dans l’onglet du même nom, nous pouvons trouver plusieurs options, dont un que nous allons nous intéresser aujourd’hui.

Utiliser le Divi Thème Builder

Dans cette section vous pouvez personnaliser l’affichage et inclure les modifications pour une seule page ou à tout le contenu de votre site. Tout ce que vous devez faire pour commencer est d’ajouter un nouveau modèle en cliquant sur le petit « + », sélectionner le contenu souhaité et cliquer sur le bouton « créer un modèle ». Veuillez suivre les étapes ci-dessous.

Voilà, vous venez de créer un nouveau gabarit pour votre en-tête. Maintenant, laissez aller votre créativité. Sélectionner une rangée à une ou plusieurs colonnes et insérer un module « menu ».

Paramètres de contenu sous Divi

Menu

Dans cet onglet, vous devez choisir le nom du menu créé précédemment. Une fois que c’est fait, vos pages s’afficheront automatiquement.

Logo

Cet onglet vous permet d’ajouter un logo.

Éléments

Vous permet d’inclure une icône panier ou de recherche.

Lien

Si vous voulez insérer un lien au logo pointant vers votre page d’accueil, c’est ici que vous pouvez le faire.

Fond

Comme partout dans Divi, l’onglet « fond » vous servira à ajouter une image, une couleur unie ou un dégradé en arrière-plan.

Contenu

Menu

Dans cet onglet, vous devez choisir le nom du menu créé précédemment. Une fois que c’est fait, vos pages s’afficheront automatiquement.

Logo

Cet onglet vous permet d’ajouter un logo.

Éléments

Vous permet d’inclure une icône panier ou de recherche.

Lien

Si vous voulez insérer un lien au logo pointant vers votre page d’accueil, c’est ici que vous pouvez le faire.

Fond

Comme partout dans Divi, l’onglet « fond » vous servira à ajouter une image, une couleur unie ou un dégradé en arrière-plan.

La différence ici, contrairement au thème par défaut, il y a une panoplie d’options offerte à vous. Tout peut être modifié dans le style. Que vous désiriez un menu aligné à gauche, un menu déroulant vers le haut ou encore un lien de survol d’une couleur éclatée, tout est possible. Si vous souhaitez vous y aventurer, il y a aussi possibilité d’ajouter du code dans la section « avancé ». Voici un exemple ci-dessous; ce code CSS vous permettra d’afficher une bordure de couleur rouge sous le lien actif du menu de la page courante.

Voilà un simple exemple de ce que vous pourriez faire :

Saviez-vous que…

 

Il est possible d’insérer des icônes à même votre menu. Ces icônes tape-à-l’œil sont très à la mode et donneront une petite touche d’originalité à votre site.

Tout d’abord, assurez-vous que la case « classes CSS » est cochée dans l’onglet Apparence > Menu > Options de l’écran.

Cette option ajoutera un champ « classes CSS » dans chaque élément de menu.

Donner un nom à votre nouvelle classe. Peu importe le nom que vous donnerez pour vu qu’il ne compose pas d’accents, de caractères spéciaux ou d’espaces.

Par la suite, rendez-vous dans l’onglet Apparence > Personnaliser > CSS additionnel et copier-coller le code suivant :

.ld-menu-propos > a:before {

font-family: ‘ETMODULES’;

content: ‘\7c’;

text-align: center;

margin-right: 10px;

margin-left: -10px;

color: #4d2def;

font-size: 1em;

transition: all .3s ease;

}

.ld-menu-propos : appel la classe que vous avez défini précédemment.

font-family: ‘ETMODULES’ : indique quelle police d’icône utiliser.

content: ‘\7c’ : indique quelle icône à afficher.

color: #4d2def:indique la couleur de l’icône.

À noter, si vous voulez insérer plus d’une icône, il vous faudra répéter les mêmes opérations que précédemment.

  • Nommer une classe à l’élément du menu.
  • Copier-coller le code CSS dans Apparence > Personnaliser > CSS additionnel.
  • Dans le code, changer la classe CSS et le code de l’icône.

Voici quelques icônes mises à votre disposition avec Divi :

Pour pouvoir les utiliser, dans le code CSS précédent, vous devez retirer les préfixes « &#X » et le point-virgule puis le faire précéder par un « \ ». Exemple : content: ‘\7c’;  ou si nous désirions y mettre l’icône de la clé le code sera : \e001.

Ce qui est bon à savoir…

Peu importe la disposition de l’en-tête, les icônes s’afficheront dans votre menu.

Voilà. Amusez-vous. Créer. Tester. Une chose dont je suis certaine, il n’y aura pas deux menus comme le vôtre. 😉 

Share This