Faites un bel entête (header) de page WordPress avec le Divi Thème Builder
Вставка
- Опубліковано 21 жов 2024
- Vous souhaitez faire facilement un entête de page WordPress personnalisé pour les pages de votre site web WordPress ?
Dans cette vidéo, je vous explique pas à pas comment réaliser cet entête avec le Divi Thème Builder. Vous pourrez ainsi retrouver automatiquement ce nouvel entête sur toutes vos nouvelles pages WordPress créées :)
Je vous explique également comment placer votre logo et comment designer votre menu ainsi que les icônes liées aux pages de vos réseaux sociaux.
*Code CSS utilisé pour laisser alignés les 3 modules de la rangée sous périphériques mobiles :
display: flex;
*Code CSS utilisé pour garder la section entête fixe en cas de scroll vers le bas :
position: fixed;
top: 0;
left: 0;
right: 0;
--------------------------------------------------------------------------------------------------
🔥🔥🔥🔥 Mise à jour : Vous pouvez désormais utiliser pour fixer la section menu la fonction "Stick to top" présente dans l'onglet "Avancé" puis "Scroll effects"
--------------------------------------------------------------------------------------------------
Vous aimez mon travail ? Ici, vous pouvez m'offrir un café ☕😃
➡️ bit.ly/payez-m...
------------------------------------------------------------------------
LIENS ÉVOQUÉS DANS LA VIDÉO : 🔍
👁️ DIVI, le super thème et Visual Builder pour WordPress :
𝗗𝗲𝗽𝘂𝗶𝘀 𝗹𝗮 𝗽𝗮𝗿𝘂𝘁𝗶𝗼𝗻 𝗱𝗲 𝗰𝗲𝘁𝘁𝗲 𝘃𝗶𝗱𝗲́𝗼, 𝗹𝗮 𝗽𝗼𝗹𝗶𝘁𝗶𝗾𝘂𝗲 𝗱'𝗘𝗹𝗲𝗴𝗮𝗻𝘁 𝗧𝗵𝗲𝗺𝗲 𝗮 𝗰𝗵𝗮𝗻𝗴𝗲́ 𝗲𝘁 𝗹𝗮 𝗿𝗲́𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗱𝗲 𝗗𝗶𝘃𝗶 𝗱𝗲 -𝟮𝟬 % 𝗻'𝗲𝘀𝘁 𝗽𝗹𝘂𝘀 𝗱𝗶𝘀𝗽𝗼𝗻𝗶𝗯𝗹𝗲. 𝗘𝗹𝗹𝗲 𝗲𝘀𝘁 𝗽𝗮𝘀𝘀𝗲́𝗲 𝗮̀ -𝟭𝟬% 𝗰𝗲 𝗾𝘂𝗶 𝗿𝗲𝘀𝘁𝗲 𝘁𝗼𝘂𝗷𝗼𝘂𝗿𝘀 𝗶𝗻𝘁𝗲́𝗿𝗲𝘀𝘀𝗮𝗻𝘁 😉
➡️ bit.ly/Divi-Pr... -10% sur votre licence ! 💗
➡️ bit.ly/divi-cl... Divi lien classique
------------------------------------------------------------------------
RECOMMANDATIONS ET BONS PLANS ALPA 14 : 👍
👁️ Formation WordPress Divi Webmyday, finançable jusqu’à 100% par les budgets de formation.
➡️ bit.ly/Webmyday -𝟭𝟬% avec le code promo 𝗔𝗟𝗣𝗔𝟭𝟰 💗
👁️ Hostinger : l’hébergeur de qualité aux tarifs compétitifs.
-7% sur toutes les formules avec le code ALPA14 💗
➡️ www.hostinger....
👁️ o2switch : 1 super hébergeur pour votre site WordPress, à 5€HT/mois en illimité
➡️ bit.ly/link-o2...
👁️ Semrush : la meilleure boîte à outils SEO, 14 j Gratuits (offre spéciale)
➡️ bit.ly/semrush...
👁️ Créez des vidéos marketing -25% sur les offres Invideo
➡️ bit.ly/invideo-25
👁️ MailerLite : L'email marketing simple et efficace, 30 j Gratuits toutes options
➡️ bit.ly/mailerl...
👁️ duoLogo : Réalisez un logo pro, formule Gratuite
➡️ bit.ly/duologo-fr
👁️ Thinkific : Créez & vendez vos formations, 1 mois Gratuit en formule Pro
➡️ bit.ly/thinkif...
👁️ Alpa14 SEOStudio : Outils SEO Alpa14 gratuits
➡️ alpa14-seo
ALPA 14 C’EST AUSSI UN BLOG 😀
✉️ Abonnez-vous à la Newsletter pour être averti des futurs tutoriels et des nouveautés du site.
➡️ bit.ly/alpa14-...
------------------------------------------------------------------------
Pour une totale transparence, la plupart des liens de cette page sont des liens affiliés, en les utilisant, vous m'offrez une commission sur la vente et votre geste sympa compensera mes nombreuses heures de travail à concevoir ce tutoriel. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l'éditeur. Voire parfois moins cher 👍.
J'avais tester Divi il y a 4 ans, et ensuite j'ai appris le HTML CSS PHP et JAVASCRIPT. J'ai réalisé deux sites mais en visionnant ces vidéos, je reste scotché de la puissance de WordPress et Divi. Je comprends mieux pourquoi même des développeurs expérimentés préfèrent ces outils. Bravo a toi, Alain, tu explique super bien.
Merci 👋 Bonne continuation
𝗔𝗯𝗼𝗻𝗻𝗲𝘇-𝘃𝗼𝘂𝘀 𝗮̀ 𝗹𝗮 𝗰𝗵𝗮𝗶̂𝗻𝗲 🅰🅻🅿🅰14
𝗽𝗼𝘂𝗿 𝗲̂𝘁𝗿𝗲 𝗶𝗻𝗳𝗼𝗿𝗺𝗲́ 𝗱𝗲𝘀 𝗻𝗼𝘂𝘃𝗲𝗹𝗹𝗲𝘀 𝘃𝗶𝗱𝗲́𝗼𝘀.
➡️ bit.ly/Alpa14-UA-cam
Activez la 🔔 et vous recevrez une notification lorsque je publierai 1 nouveau tutoriel. 😉
Les meilleurs tutos pour Divi, merci !
Merci Stéphane 😊👍
merci beaucoup pour ce contenu riche pour votre communauté on apprend toujours avec vous 😊
Merci Sedik
Avec plaisir 👍😃
merci beaucoup pour ce tutoriel qui m'a permis de résoudre mon problème de scroll!
Avec plaisir Marine 👍😉
Merci énormément trop trop bien expliqué
👍Avec plaisir Rayan 😉
oui merci, très utile ce tuto pour les débutants avec divi comme moi.
Avec plaisir Patrick !😊👍
Merci pour ce tuto clair net et précis !
Merci Sophie pour vos encouragements 😊 Si ce n'est pas encore fait, merci de vous abonner à la chaîne d'autres tutos sont en préparation 👍
Merci beaucoup pour la vidéo et pour ta pédagogie
Merci
Merci, des bons tutos sur Divi en FR, ça manque :)
Je l'ai depuis 1 an mais j'ai encore des choses à découvrir afin d'optimiser mon site.
Merci Alain pour tes encouragements 😊👍
Effectivement ça manque en français malheureusement
Pouvez-vous m'aiguiller pour un portfolio svp ? Sur la responsive en version mobile
Excellente présentation , utile et simple. Merci
Merci, avec plaisir 😉
Merci merci pour ces vidéos !!!
Y a pas de quoi 😊👋
Super, comme toujours. Et merci pour le css…
De rien
Merci pour les tutos. J'ai utilisé votre lien d'affiliation. vous le mérité car j'avais abandonné d'utiliser divi. Avoir une progression ça aide. Merci beaucoup
Avec plaisir 👍😊
Depuis les dernières version (2022), pour fixer le menu en haut, on va dans la section, on choisit "avancé", et en bas dans Scroll Effects, on choisit Stick to top 😉
Exact mais ce tuto est ancien 😉
Bonjour, merci pour les tutos ! malheureusement quand je colle le code display: flex; rien ne ce passe sur le menu au niveau de l'alignement une idée ?
Bonjour,
Merci pour votre message.😊 Malheureusement, je ne peux pas répondre à tous car j'en reçois trop...
J'espère que vous pourrez trouver réponse à votre problème dans un de mes tutoriels (ou dans 1 futur).
J'espère que vous comprendrez, encore désolé. Merci de votre fidélité à la chaîne, bonne continuation 😃👍
Alain
Merci ! 🙏
Incroyable que Divi ne permette pas de garder un header statique par défaut c'est aberrant
Bonjour Romain,
Depuis que le tuto a été réalisé, il y a maintenant la fonction Stick to top qui le permet.
@@Alpa14 En effet je n'avais pas vu !
Merci beaucoup
Je passerai ma prochaine purchase semrush en affiliation
@@Alpa14 Chez moi ça ne marche pas, même en rajoutant du css impossible de le garder collé en haut...
@@marcapouli7805 utilisez l'option Stick top pour la section
@@Alpa14 Merci pour la réponse!! Effectivement c'est bien sur la section que j'ai rajouté le css. J'ai aussi essayé "barre de navigation fixe" dans les options du thème. Quant à l'option stick to top sur la section, je ne la trouve nulle part.
C'est un peu le problème avec divi et wordpress, il y a trop d'options éparpillées de partout et au final aucune ne marche.
j'ai même l'impression que le html/css n'est pas correctement interprété car une petite div avec 3 icones et du flex marche très bien avec visual code mais le même code collé dans divi donne un résultat différent, 2 icones sur les 3 sont carrément en dehors de la div...
Thanks
Bonjour, merci pour ce tuto pratique et bien expliqué, j'ai une question j'ai mis sur notre site en cours de conception j'ai créé 1 section avec deux lignes. la première pour afficher les icônes des réseaux sociaux sur une ligne pleine, dans la deuxième section 2 colonnes pour le logo et le menu, ça marche bien pour le logo et le menu mais ma section avec les RS ne s'affiche pas ? Qu'ai-je oublié d'ajouter ?
Bonjour,
Avez-vous configuré chaque icône des RS avec la bonne URL ?
Une autre question. J’ai vu dans certain menus, que la barre du menu reste en place comme ici, sauf qu’elle change un peu de taille en hauteur. Au départ elle est assez haute, puis quand on scrolle, elle devient moins haute (et bien sûr, tout suit, c’est à dire que le logo diminue de taille en conséquence. Serait-ce trop compliqué à faire ici ? Ou existe-t-il un effet plus ou moins similaire déjà implanté dans divi ? Merci . J’édite ma question. Je viens de voir que le thème Extra fait ça. Je vais essayer de trouver, mais si tu as la solution….😊
Bonjour,
Merci pour votre message.😊 Malheureusement, je ne peux pas répondre à tous car j'en reçois trop...
J'espère que vous pourrez trouver réponse à votre problème dans un de mes tutoriels (ou dans 1 futur).
J'espère que vous comprendrez, encore désolé. Merci de votre fidélité à la chaîne, bonne continuation 😃👍
Alain
Chantal Levé
Merci pour vos tutos clairs et précis. J'ai un souci avec mon menu sur mobile je n'ai qu'une partie du menu qui s'affiche je n'ai pas accès à la suite on ne peux pas faire défiler j'ai dû zapper un truc, sur tablette c'est la même chose par contre sur ordinateur ça fonctionne très bien ! mystère !!
Bonjour Chantal,
Désolé pour la réponse tardive..
Pour ajuster la vue mobile et tablette il faut cliquer sur les petites icones du bas de page en mode visual builder et ajuster les vues (taille des polices etc) ces réglages ne seront pris en compte que pour ces vues.
Bonjour . Merci pour ta vidéo . Que faut-il faire pour pouvoir réduire la taille de la liste du menu déoulant ?
Merci pour ce tuto très bien expliqué !
J'ai essayé d'utiliser le code CSS display: flex; pour faire la même chose avec les sections de mon site mais cela ne marche pas. Est-ce qu'il faut un autre code spécifique afin d'avoir le reste du site responsive svp ?
Bonjour,
Merci pour votre message. Je reçois énormément de messages et malheureusement, je ne peux pas répondre à tous. J'espère que vous comprendrez et que vous pourrez trouver une réponse à votre problème dans un de mes tutoriels existant ou dans un autre à venir.
Encore désolé et merci de votre fidélité.
Bonne continuation
Bien cordialement
Alain 🙂
Merci pour l'info mais ce menu ne peut fonctionner en vue mobile, une vidéo pour une version adaptée au mobile ? merci
Bonjour Alpa, Très bon tuto ! merci bcp ! Je ne comprends pas.... j'ai fait exactement comme tu as dit, mais mon menu ne s'affiche pas automatiquement sur toutes mes pages.... Aurais-tu une idée de pourquoi ...? merci :)
Bonjour Camille,
Merci ! 🤩
Dans le thème builder quand tu as créé ton modèle de header, as-tu bien choisi "Modèle de site Web par défaut" puis "Ajouter un en-tête global" ?
@@Alpa14 merci pour ton retour. Et oui pourtant j’ai bien fait ce que tu viens de dire. Pareil pour le pied de page… obligé de les ajouté un à un sur chaque page :/
@@camillecarpentier1710 j'ai le même problème. Est ce que vous avez appliqué le thème par dessus le site déjà existant ?
@@vincentdupin4375 En faite je me suis rendue compte, que c'est parce qu'à chaque fois que j'édite une page, dans le choix du modèle de page je choisie systématiquement "blank page".... donc c'est sur que ca ne pouvait pas fonctionner...
Salut la team !
Y a t'il possibilité de changer la couleur du texte d'une des pages dans le menu? Voir même de remplacer le texte qui fait lien vers la page par une image ?
Merci d'avance !
Par exemple ici dans la vidéo le lien menu "blog" dans une autre couleur ou le remplacer par une p'tite image sympa a la place du texte
Bonjour Alain, tout d'abord merci pour tes vidéos qui sont très bien détaillées et aident beaucoup, j'ai une question concernant le header, j’utilise egalement le divi builder et je n'arrive pas à mettre mon header sur une seule ligne, j'aimerais avoir mon logo sur la gauche, mon menu centré et 2 icones tout à droite (icone pour se connecter espace client et icone panier)
Est ce qu'il y a un moyen pour avoir cette architecture sur le header (appliquer une ligne de css ou faire une manipulation quelconque? )Merci pour ton aide parce que je suis vraiment bloqué avec cette difficulté,
Bonjour,
Merci pour votre message et désolé pour pour le retard.
Je reçois énormément de questions et je peux malheureusement pas répondre à toutes, je n'ai pas le temps... . La création de tutoriels m'occupe beaucoup. 😅
J'espère que vous comprendrez et que vous pourrez trouver une réponse à votre question dans une de mes vidéos ou ailleurs.
Amicalement
Alain
Bonjour. Merci bcp pour ces tutos bien détaillés qui permettent d'avancer pas à pas. :). Je suis encore dans une phase où j'essaie de bien comprendre la logique de Divi, je tâtonne pas mal. Par contre sur Divi, il me semble qu'il y a une fonction qui permet de maintenir le header apparent quand on scroll, ce qui évite de taper une ligne de code. Si on va dans les paramètres de la section / avancé / scroll effect / sticky position , ça permet de maintenir le header visible en haut de page. cependant, je ne comprends pas bien à quoi correspondent toutes les options présentes dans "scroll effect".
Bonsoir Patricia,
Heureux d'apprendre que mes tutos vous aident.
L'option scroll effect permet de générer des animations de modules quand on fait défiler la page.
Je ferai sans doute 1 tuto sur cette fonction prochainement.
Bonne continuation 👋😁
Bonjour Alain, j'adore tes vidéos et je suis vraiment un fan de tes cours. Cependant, le code CSS ne marche pas chez moi pour aligner les modules que j'ai crée :/
Bonjour Samy, j'aimerais savoir si tu as solutionné ton problème ? Car j'ai effectivement le même... Merci pour ton retour !
Pareil pour moi, ca fonctionne pour la tablette mais pas le mobile.
Bonjour, merci beaucoup pour ce tuto!!! j'ai cependant un problème, malgré toutes les étapes ma barre reste blanche alors que j'ai changé le fond... pouvez-vous m'aider svp ? merci
Bonjour,
Avec plaisir.
Avez-vous bien défini dans les paramètres de votre section (onglet contenu).
La couleur de fond ?
Ensuite qd vous insérez le module Menu. Il faut lui donner la couleur de fond transparente pour que la couleur de la section se voit en dessous.
@@Alpa14 Merci pour la réponse, encore une question ! j'ai voulu rajouter des liens personnalisés (j'ai suivi votre tuto) et du coup lorsque je suis dans cette partie le menu est parfait mais quand j'enregistre et que je vais sur mon site le menu n'est plus en ligne comme ça mais en gros bloc centré au milieu... je n'arrive pas à savoir pourquoi, pouvez-vous me renseigner svp ? merci :)
Bonjour, merci pour le tuto, mais j'ai un petit soucis, en fait quand j'applique l'ombre, mon menu déroulant ne se déroule plus. comment je fais pour y remédier
Bonjour,
Merci pour votre message. Je reçois énormément de messages et malheureusement, je ne peux pas répondre à tous. J'espère que vous comprendrez et que vous pourrez trouver une réponse à votre problème dans un de mes tutoriels existant ou dans un autre à venir.
Encore désolé et merci de votre fidélité.
Bonne continuation
Bien cordialement
Alain 🙂
Bonjour, je vous remercie avec vos beaux tutos DIVI. Je travail avec DIVI j'ai un probléme les images de la page d'acceuil seulement s'affiche pas. (juste aujourd'hui j'ai ce probléme)? avez vous une idée pour résoudre ce probléme? merci à vous
Bonjour,
Curieux, aviez-vous fait des changements sur votre site depuis ?
@@Alpa14 bonsoir, merci pour votre réponse, en faite j'ai installé un nouveau plugin, par contre j'ai désactivé tous les plugins et je les remis un à un et j'ai trouvé un ancien plugin l'origine de problème. Je le supprimer et le problème est résolu. Merci pour votre réponse
@@royaltyfreemusic7323 Super, bonne continuation :)
Top
Merci Lilian ! :)
@@Alpa14 super bien expliqué , ta chaîne ne demande qu’à grandir vraiment 👏
@@LilianRiviere Merci à toi :)
bonjour, mon logo est de forme ronde. Sur mobile, le logo est trop grand, comment faire? Merci, j'adore vos vidéo !
Salut Roman merci 😊, regardez ce tuto, je montre à la fin comment modifier le menu et la taille du logo ua-cam.com/video/pr-QLa3NU0g/v-deo.html
Bon courage 👋
Slt Alain et merci pour ton travail, j'ai un soucis, j'ai copié ton super travail et le problème c'est qu'un bloc était mal positionner et j'ai supprimé tous les blocs et j'ai du supprimer l'entête globale mais un entête reste malgré tout mais je ne peux plus le modifier et ça me rend fou! Que dois je faire?
Bonjour Florent,
Ce doit être le header par défaut du thème. Tu souhaites avoir une page sans header ?
Sinon si tu recrées 1 header global dans le thème Builder, il remplacera celui par défaut.
Bonjour j’ai fait la connaissance de vos vidéos ce jour et sincèrement c’est un contenu top et de qualité .
Je suis depuis une semaine en train d’essayer de construire mon site .
J’ai divi avec WordPress …..
et je souhaiterais pouvoir recommencer de zéro mon site web de zéro .
Et par conséquent tout supprimer (que je sais faire en supprimant les modules ect …..Mais moi je voudrais redémarrer d’une page vierge .
Avez-vous dans vos vidéos un tuto ?
Merci de votre réponse
Bonjour Séverine,
Dans ce cas allez dans pages et supprimez-les puis concernées puis recréez de nouvelles pages.
N'oubliez pas ensuite dans menu de faire les corrections nécessaires.
@@Alpa14 merci beaucoup et les corrections sont a faire ou? dans le header? ou dans le menu wordpress? Merci d'avoir pris le temp de me repondre j'étais en stand bye a cause d'un truc con ,mais j'ai tellement peur de faire des betises que sa me stop .encore merci
@@piscart32 Pas de problème Séverine 😊 Regarder ce mini tuto pour créer votre menu ua-cam.com/users/shortsYvUqP2bBuf0?feature=share
Bon courage avec votre site 👍
Merci beaucoup c’est exactement ce que je cherchais merci 🙏.
Moi j’ai un hic j’ai créé un titre et aimerai le retrouver ailleurs ça ne finctionnne pas
Bonjour Lilian,
Pour une section, une rangée ou un module vous pouvez les enregistrer l'élément dans la librairie (flèche qui entre dans un cercle à côté de la poubelle pour supprimer). Mais attention pour récupérer l'élément sauvegardé (une section par exemple) il faut créer un autre section et choisir à ce moment "Ajouter de la bibliothèque" pareil pour la rangée ou le module.
Bonne continuation ;)
Bonjour, merci pour cette vidéo ! Comment fait-on pour avoir le menu écrit en version mobile et non les 3 traits ?
Bonjour,
Voici un article qui pourra vous renseigner
www.learnhowwp.com/disable-mobile-menu-in-menu-module-divi/
@@Alpa14 Bonjour, merci beaucoup !
Est ce qu’il y a le « navigateur » sur Divi Builder comme sur Elementor ? Pour voir tous les éléments de la page comment ils sont divisés.
Bonjour Aline,
Désolé pour la réponse tardive. Oui dans le Divi Builder tu peux afficher une vue en blocs de tous les éléments de la page.
Bonjour Alain, merci pour ces tutos, ils m'ont convaincus à prendre divi avec votre lien et WordPress en remplacement de wix.
Cependant j'ai une erreur récurrente sur mon en-tête faite avec divi builder.
J'ai suivi le tuto à la lettre, je n'ai rien modifié de plus, ni les marges à la souris ni l'onglet "transformer" car j'ai lu que cela pouvait créer des erreurs de css.
En fait l'en-tête est parfaite sur toutes les pages, sauf sur la page accueil ou la marge haute est tronquée. Même en ajoutant un peu de marge haute, sur la page accueil il y a une différence que je n'ai pas sur les autres pages.
Comme je suis en local, j'ai même créer un deuxieme site, et je retrouve des erreurs d'en-tête seulement sur ma page accueil.
Tout est à jour, et pour le moment aucun autre plugin est installé. J'ai essayé beaucoup de choses mais toujours cette même erreur.
Est-ce normal que le css d'en-tête fixe ne fonctionne qu'avec le mode bureau?
cordialement
Bonsoir,
Merci pour votre message 😊
Depuis la réalisation de ce tuto, une nouvelle fonction est apparue dans Divi. C'est l'option Sticky. Plus nécessaire d'entrer 1 ligne de code pour fixer votre section ou tout autre élément de Divi
Allez dans dans les paramètres de la section, choisissez l'onglet "Avancé " puis l'option Scroll effect et dans, Sticky Position, choisissez Stick to top. 😉👍
Merci ! Comment on fait pour avoir un menu Burger personnalisé ?
C'est à dire ? Pour modifier l'icône ?
Bonjour après avoir mis la ligne de code mon logo n'apparait pas sur la version mobile
Bonjour,
Normalement ça devrait fonctionner, vérifiez bien la ligne de code. Mieux vaut la copier et la coller.
Comment organiser le menu déroulant responsive ?
Merci pour la vidéo c'est bien expliqué mais même avec elle je n'y arrive pas. Rien n'est aligné, le menu se présente sur 2 lignes, pas moyen d'espacer les boutons du menu, en responsive le hamburger se trouve sur la 2ème ligne et prends toute la largueur. Je crois que faire un header avec divi est hors de portée pour moi 😅
Bonjour,
Merci pour votre message.😊 Malheureusement, je ne peux pas répondre à tous car j'en reçois trop...
J'espère que vous pourrez trouver réponse à votre problème dans un de mes tutoriels (ou dans 1 futur).
J'espère que vous comprendrez, encore désolé. Merci de votre fidélité à la chaîne, bonne continuation 😃👍
Alain
@@Alpa14 Oui je comprends tout à a fait, c'est déjà sympa de répondre pour le dire !
Pour ce qui est de la solution j'ai trouvé, je fais mon site sans divi ni wordpress 😁
@@marcapouli7805 Super ! Bonne continuation :)