Comment créer une navigation verticale avec Divi qui stimule les affaires

Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment créer une navigation verticale qui stimule les affaires pour votre site Web. La navigation verticale que nous allons vous montrer comment faire sera généralement utilisée pour les entreprises qui pensent qu'il est important que les visiteurs agissent immédiatement. Par exemple, si vous possédez un restaurant qui permet aux clients de commander en ligne, vous souhaiterez peut-être que votre site Web aide les visiteurs à agir rapidement.

La navigation verticale que nous allons vous montrer comment faire contiendra des informations importantes et des appels à l'action au lieu de pages. Les inclure dans la navigation verticale stimulera les visiteurs à commander et augmentera ainsi le taux de conversion du site Web.

Résultat

Avant de plonger dans les différentes étapes et l'inspiration, regardons le résultat de navigation verticale que vous pourrez obtenir à la fin de cet article :

En plus de vous montrer comment ajouter tous les différents éléments de menu à la navigation verticale, nous utiliserons également la navigation fixe. De cette façon, vous êtes sûr que les informations suivent les visiteurs tout au long de la page.

Inspiration

L'inspiration que nous avons eue pour cela sur la navigation verticale qui stimule les affaires vient d'un site Web que nous avons présenté dans un article précédent. Dans cet article, nous avons répertorié 12 sites Web qui utilisent la navigation verticale aux fins de leur propre site Web. L'un des exemples qui a attiré l'attention des gens est le site Web Eat Thai Restaurant. Leur navigation verticale est l'un de ces concepts prêts à l'emploi. Leur site Web est une page mais ils ont trouvé un bon moyen de continuer à utiliser les possibilités de navigation. Leur site Web ressemble à ceci:

Comment créer une navigation verticale avec Divi qui stimule les affaires

Abonnez-vous à notre chaîne Youtube

Activer la navigation verticale

Pour commencer, il va falloir activer l'option de navigation verticale que propose Divi. Pour ce faire, accédez à votre tableau de bord WordPress > Apparence > En-tête et navigation > Format d'en-tête > Activer la navigation verticale.

Activer la navigation fixe

La navigation verticale que nous recréons sera, comme le site Web Eat Thai Restaurant, corrigée. Pour rendre votre navigation verticale fixe, accédez à votre tableau de bord WordPress > Divi > Options du thème > onglet Général > Activer la navigation fixe.

Paramètres du menu principal (personnaliseur de thème)

La prochaine chose que vous devrez faire est d'apporter quelques modifications à votre menu principal. Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > En-tête et navigation > Barre de menu principale . Une fois que vous y êtes, vous pouvez y apporter les modifications suivantes (ou toute autre modification que vous souhaiteriez apporter) :

• Masquer l'image du logo : désactiver
• Hauteur maximale du logo : 100
• Marge supérieure du menu : 0
• Taille du texte : 14
• Espacement des lettres : -1
• Police : Lato Light
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : #004159
• Couleur d'arrière-plan du menu déroulant : #004159

Paramètres du menu de navigation fixes (personnaliseur de thème)

La dernière chose que nous devrons faire dans le personnalisateur de thème est de nous assurer que le logo apparaît également lors du défilement. Si vous êtes toujours dans votre personnalisateur de thème, accédez à En-tête et navigation > Paramètres de navigation fixes > Et assurez-vous que l'option « Masquer le logo » est désactivée.

Ajouter des éléments de menu

Ensuite, nous allons ajouter les éléments de menu à notre navigation verticale. Cette partie du message prendra probablement la plupart de votre temps. Vous devez ajouter chacun des éléments individuellement via des liens personnalisés.

Activer les classes CSS

Mais avant de commencer à ajouter les éléments de menu, vous devrez vous assurer que l'option Classes CSS est activée. Cette option vous permet d'attribuer une classe à chacun des éléments de menu individuellement. Dans ce cas, cela est nécessaire car la plupart des éléments auront leurs propres paramètres de style. Pour activer l'option Classes CSS, cliquez sur "Options d'écran" en haut à droite de la page Menu et activez l'option Classes CSS comme indiqué dans la capture d'écran ci-dessous.

Ajouter un nouveau menu

Une fois que vous avez activé les classes CSS pour vos éléments de menu, vous pouvez continuer et créer un nouveau menu. Donnez-lui un nom et assurez-vous de faire de ce nouveau menu votre menu principal.

Après avoir ajouté tous les éléments du menu (que nous allons vous montrer étape par étape), votre menu ressemblera à ceci sur le backend :

Numéro de téléphone

Comme il s'agit d'un pager, il n'y aura pas de pages incluses dans le menu. Tous les éléments que nous allons ajouter au menu seront plutôt des liens personnalisés. Cela nous donne la possibilité de jouer avec les choses que nous voulons ajouter.

Pour ajouter votre premier élément de menu, cliquez sur Liens personnalisés et ajoutez le numéro de téléphone dans le champ Étiquette de navigation. Vous pouvez choisir si vous souhaitez y ajouter une URL ou non. Cependant, lors de l'ajout de l'élément de menu à votre menu, vous devrez remplir une URL. Une fois que l'élément de menu a été ajouté à votre menu, vous pouvez effacer l'URL et vous serez sûr que rien ne se passera lorsque quelqu'un cliquera sur l'élément de menu.

Une fois que vous avez ajouté l'élément de menu à votre menu, vous verrez également la classe CSS apparaître. C'est là que vous devrez choisir une classe CSS qui modifiera le style de l'élément de menu. Dans ce cas, nous utilisons la classe 'phone-number'. Si vous souhaitez simplement copier et coller les lignes de code CSS à la fin de cet article, assurez-vous d'utiliser les classes CSS mentionnées dans ces étapes.

Adresse

De même, nous allons ajouter l'adresse. Remplissez l'adresse dans l'étiquette de navigation et ajoutez une URL si vous le souhaitez. La classe que nous utilisons pour l'élément de menu d'adresse est simplement « adresse ».

Icônes sociales

L'ajout des icônes sociales à votre navigation verticale nécessite un peu plus d'efforts. Dans un article précédent, nous avons explicitement traité l'ajout d'icônes sociales à votre menu principal. Cependant, dans ce cas, la méthode sera légèrement différente puisque nous devrons aligner les icônes les unes à côté des autres dans la navigation verticale.

Ajouter une police géniale

La première chose que vous devrez faire, si vous ne l'avez pas déjà fait, est d'ajouter Font Awesome à vos options de thème. Pour ce faire, accédez à votre tableau de bord WordPress > Divi > Options du thème > Intégration > Et collez le shortcode suivant dans la tête de votre site Web :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Obtenir des codes courts

Pour obtenir les codes abrégés des icônes sociales ; ouvrez cette page sur le site Web de Font Awesome. Dans le champ de recherche que vous verrez sur cette page, recherchez les différentes icônes que vous souhaitez ajouter à votre navigation verticale.

Une fois que vous avez cliqué sur l'icône, vous verrez le shortcode lié à l'icône. Enregistrez chacun de ces shortcodes quelque part.

Ajouter des icônes sociales au menu

En continuant, nous allons ajouter les icônes sociales. Normalement, vous pouvez ajouter chacune des icônes sociales individuellement en tant qu'éléments de menu. Mais puisque nous voulons qu'ils apparaissent l'un à côté de l'autre, nous devrons les placer dans le même élément de menu. Le code HTML que vous devrez ajouter au libellé de navigation est le suivant :

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

N'oubliez pas d'ajouter une URL à chacune des icônes. La classe que nous utilisons pour les trois icônes sociales combinées est « icon-wrapper », mais nous avons également attribué une classe supplémentaire à chacune des icônes sociales pour effectuer des ajustements individuels. Vous pouvez remarquer ces classes juste après la classe Font Awesome. Ils s'appellent 'facebook', 'instagram' et 'envelope'.

instructions

Pour l'élément de menu suivant, nous avons utilisé le mot « directions » comme nom de classe CSS.

Ligne

Pour ajouter une ligne juste en dessous des directions, nous devons ajouter un caractère vide dans la navigation par étiquette. C'est parce que WordPress ne vous permet pas de créer un élément de menu sans avoir une étiquette qui lui est liée. Pour ajouter un caractère vide à votre élément de menu de ligne, ajoutez simplement ' ' à l'étiquette de navigation. De plus, ajoutez également 'line' comme nom de classe CSS à cet élément de menu.

Horaires d'ouvertures

Ensuite, nous allons ajouter les heures d'ouverture et lui attribuer le nom de classe CSS 'hours'.

CTA 1

Ensuite, nous allons ajouter le premier CTA. Nous allons lui attribuer le nom de classe CSS 'cta-1'.

CTA 2

Pour le deuxième CTA, nous allons utiliser le nom de classe CSS 'cta-2'.

Bouton CTA

L'ajout du bouton CTA à votre navigation verticale nécessite quelques étapes de plus que les éléments de menu habituels qui ne sont que du texte. Commencez par ouvrir la page que vous utilisez comme page d'une page et suivez les étapes suivantes mentionnées ci-dessous.

Créer un bouton sur la page de destination

Si vous souhaitez utiliser un bouton CTA dans votre navigation verticale, vous devrez avoir ce même bouton quelque part sur votre page. Une fois que vous en avez créé un, vous pouvez inspecter l'élément et copier les lignes de code suivantes (liées au bouton que vous avez créé) qui apparaissent dans le code de votre site Web :

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

Bien sûr, ce code peut différer selon la façon dont vous le stylisez. Cela dépend aussi s'il y a d'autres boutons sur cette même page ou non. Sachez que le bouton n'apparaîtra qu'avec le style que vous lui attribuez sur la page où se trouve le bouton. C'est pourquoi l'ajout d'un bouton à votre navigation verticale n'est généralement préférable que lorsqu'il s'agit d'un one-pager.

Remarque : assurez-vous d'ajuster la taille de la police et le remplissage de votre bouton dans le module de boutons afin qu'il s'intègre parfaitement dans votre navigation verticale.

Ajouter comme élément de menu

Maintenant que vous avez copié le code HTML nécessaire lié au bouton, ajoutez un nouveau lien personnalisé et ajoutez le code à l'étiquette de navigation. La classe CSS que nous utilisons pour cet élément de menu est 'cta-3'.

Ajouter des lignes de code CSS

La prochaine partie de cet article est consacrée au partage des lignes de code CSS qui vous aident à obtenir le résultat final et la mise en page. Vous remarquerez que nous avons utilisé les classes CSS que nous avons attribuées aux différents éléments de menu. Cependant, si vous décidez d'utiliser des noms de classe différents, assurez-vous de les modifier dans le code CSS pour que cela fonctionne.

Pour ajouter le code CSS, accédez à votre tableau de bord WordPress > Divi > Options du thème > Faites défiler l'onglet Général et ajoutez les lignes de code CSS suivantes dans la zone CSS personnalisée :

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

Changer la couleur d'arrière-plan des sections

La dernière étape que vous devrez faire est de changer les couleurs d'arrière-plan des sections sur votre page. Assurez-vous que cette couleur est la même que celle que vous utilisez pour votre conteneur de page. Dans ce cas, il s'agit de '#d6d4d1'.

Résultat

Une fois que vous avez ajouté tous les éléments de menu et le code CSS lié à chacun de ces éléments de menu, vous devriez pouvoir obtenir le résultat suivant :

Dernières pensées

Dans cet article, nous vous avons montré comment créer une navigation verticale pour votre page unique. Cet article a été inspiré par le site Web Eat Thai Restaurant qui a également été créé avec Divi. Si vous avez suivi l'intégralité de la publication étape par étape, vous devriez être en mesure d'obtenir le résultat présenté ci-dessus. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par Vectomart / shutterstock.com