Voir la démo Télécharger la source

J’ai reçu par mail une demande pour savoir si il était possible de réaliser le « slide menu » du site obama.org avec le thème Divi.
Oui c’est possible c’est ce que je vous montre dans ce tuto.

J’ai découpé ce tuto en 3 étapes.

Étape 1 : passer le menu à gauche

Il est possible depuis la configuration du thème de divi de basculer dans une navigation verticale.

Pour cela allez dans « apparence > personnaliser > En tête et navigation > Format de l’entête ».
Ici vous trouverez l’option « Activer la navigation verticale », qu’il faut cocher.

Étape 2 : Ajouter des modules dans le menu

Pour cette étape j’utilise une technique que je vous ai déjà montré dans un autre tuto.

Elle consiste à créer un « modèle » et de l’appeler directement dans le template .php

Allez dans « Divi > Bibliothèque de Divi » et cliquez sur « ajouter un nouveau ».

Une pop Up va s’ouvrir. Donnez lui un nom.
Dans la liste déroulante « Type de modèle » choisissez : « Modèle ou Disposition ».

Vous avez à présent accès au divi Builder.

Nous avons besoin du module bouton, formulaire et du texte.

Important : pour ajoute le module qui va gérer notre menu « pied de page » il faut ajouter une section « pleine largeur »

Enregistrer votre modèle.

Vous disposez maintenant d’un ID de modèle (ici 351), celui-ci est visible dans l’url de la page

wp-admin/post.php?post=351&action=edit

Si vous utilisez un thème enfant, copiez collez le fichier header.php de votre thème principal et coller le dans votre thème enfant.

Ajouter la ligne de code ci dessous :

Je ne peux pas mettre le shortcode dans cette page sinon celui-ci est interprété … Mais vous pouvez retrouver le fichier header.php en téléchargeant la source !

CODE PHP ICI
</header> <!-- #main-header -->

 

Étape 3 : la couche graphique

Maintenant il ne reste lus qu’à faire un peu de CSS pour avoir un rendu « plus joli ».
Je ne vais pas détailler le CSS dans ce tuto.
Vous trouverez le fichier style.css dans les sources que je vous donne 😉

Voir la démo Télécharger la source