Créer un site web WordPress Divi parfaitement responsive 🖥📱
HTML-код
- Опубликовано: 25 авг 2024
- Dans cette vidéo, je vous montre comment créer un site web WordPress responsive en utilisant le thème Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalités intégrées à Divi pour créer un site Web professionnel qui aura fière allure sur n'importe quel appareil en s'adaptant parfaitement à son écran. Regardez ce tutoriel sans plus attendre, et apprenez à créer un site web WordPress parfaitement réactif avec Divi !
#sitewebreponsive #sitewebreactif
🔗 𝗟𝗜𝗘𝗡𝗦 𝗘́𝗩𝗢𝗤𝗨𝗘́𝗦 𝗗𝗔𝗡𝗦 𝗟𝗔 𝗩𝗜𝗗𝗘́𝗢 : 🖥️🔍
➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖➖ ➖➖➖ ➖
👁️ Divi, le super thème et Visual Builder pour WordPress :
➡️ alpa14.com/Divi Divi -𝟭𝟬% sur votre licence ! 💗
➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖➖ ➖➖➖ ➖
🔗 𝗥𝗘𝗖𝗢𝗠𝗠𝗔𝗡𝗗𝗔𝗧𝗜𝗢𝗡𝗦 𝗘𝗧 𝗕𝗢𝗡𝗦 𝗣𝗟𝗔𝗡𝗦 𝗔𝗟𝗣𝗔 𝟭𝟰 : 👍
👁️ 𝗗𝗶𝘃𝗶 𝗦𝘂𝗽𝗿𝗲𝗺𝗲 𝗣𝗿𝗼, le super plugin Divi qui décuple la puissance du Visual Builder
➡️ alpa14.com/Div... -𝟭𝟬% avec le code promo Alpa14 💗
👁️ Formation WordPress Divi Webmyday, finançable jusqu’à 100% par les budgets de formation.
➡️ alpa14.com/Web... -𝟭𝟬% avec le code promo ALPA14 💗
👁️ Hostinger : l’hébergeur de qualité aux tarifs compétitifs (Mutualisé, VPS, Cloud)
➡️ www.hostinger.... -𝟳% sur toutes les formules avec le code ALPA14 💗
👁️ Wondershare DemoCreator : Le logiciel que j’utilise pour filmer mon écran et créer mes tutoriels Alpa14 😉
➡️ alpa14.com/Dem...
👁️ o2switch : 1 super hébergeur pour votre site WordPress, à 5€HT/mois en illimité
➡️ bit.ly/link-o2...
👁️ Amelia : le plugin de bookink (Prise de rendez-vous et réservations) avec modules Divi ! -𝟭𝟬% avec le code Promo "E96DB94C" ! 💗
➡️ bit.ly/link-am...
👁️ MailerLite : L'email marketing simple et efficace, 30 j Gratuits toutes options
➡️ bit.ly/mailerl...
👁️ Presto Player : le meilleur lecteur vidéo pour votre site WordPress
➡️ bit.ly/Presto-...
👁️ Canva : Collaborez et créez d'incroyables designs, le meilleur outil pour supprimer l’arrière-plan de vos images et obtenir des fonds transparents ou blancs
➡️ bit.ly/canva-p...
👁️ LearnDash : le meilleur LMS WordPress, créez et vendez vos cours sur votre site
➡️ bit.ly/link-le...
👁️ Thinkific : Créez & vendez vos formations, 1 mois Gratuit en formule Pro
➡️ bit.ly/thinkif...
👁️ ThriveCart : Placez des paniers de vente où vous voulez et déployez des tunnels de vente en quelques clics - Offre spéciale : Compte à vie, paiement unique
➡️ bit.ly/thrivec...
👁️ Wondershare Filmora : Le montage vidéo facile, faites jouer votre imagination !
➡️ alpa14.com/Fil...
👁️ duoLogo : Réalisez un logo pro, formule Gratuite
➡️ bit.ly/duologo-fr
➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖➖ ➖➖➖ ➖
Vous aimez mon travail ? Ici, vous pouvez m'offrir un café ☕😃
➡️ bit.ly/payez-m...
➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖ ➖➖ ➖➖➖ ➖
🅰🅻🅿🅰 14 🅲’🅴🆂🆃 🅰🆄🆂🆂🅸 🆄🅽 🅱🅻🅾🅶 ! 😀
✉️ Abonnez-vous à la Newsletter pour être averti des futurs tutoriels et 𝗼𝗯𝘁𝗲𝗻𝗲𝘇 𝘂𝗻 𝗮𝗰𝗰𝗲̀𝘀 𝗮̀ 𝗱𝗲𝘀 𝗼𝘂𝘁𝗶𝗹𝘀 𝗦𝗘𝗢 𝗴𝗿𝗮𝘁𝘂𝗶𝘁𝘀.
➡️ 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 👍.
Mais quel plaisir ! Je commençais à désespérer de trouver quelqu’un d’aussi posé. Alors on va la liker 10 fois ! 😂. Quel plaisir, car voilà enfin quelqu’un qui n’est pas un fou de la souris, et qui a tout compris de la manière d’enseigner (et de faire de vrais tutoriels). Les zones sont grossies quand il faut, des flèches montrent l’endroit dont il parle, et on a largement le temps de bien tout comprendre (et de na pas attraper un torticolis à essayer de suive une souris folle). Nombre de "jeunos" qui pensent savoir faire des tuto devraient venir faire un stage ou suivre un webwinar chez vous ! Un bon technicien n’est pas forcément un bon enseignant … Continuez, c’est parfait. ( et il est fort probable que je profite de votre lien divi tellement vous êtes en plus convainquant ) 👍👏
Merci Gérard,
C'est très gentil 😊
Bonne continuation 👍
Je viens tout juste de voir votre vidéo de présentation sur votre chaîne ... enseignant ! tout s'explique...😎Et oui, c'est un métier (donc ça s'apprend l'enseignement et la pédagogie)
@@gaeil1 Je confirme tout à fait votre sentiment sur la pédagogie d'apprentissage,👍
Bonjour Alain, toujours merci pour vos vidéos qui apportent à chaque fois au moins un petit détail qui aide à mieux travailler par la suite avec DIVI. Dans le cas du responsive design, la simulation d’écran DIVI est très théorique et comporte des incertitudes. Pour ma part j’ai toujours mon smartphone sous la main pour afficher la page que je modifie au fur et à mesure. Par exemple DIVI n’inclut pas la petite barre d’adresse en haut des pages Web dans Safari. D’autre part, si on compare les affichages avec des simulateurs d’écran mobile en ligne, il y a toujours des différences. Ainsi, on ne sait jamais quel est le véritable étalon pour l’affichage de notre travail. Aussi, il faut garder à l’esprit que les profils couleurs et les réglages d’écran sont très différents entre nos écrans d’ordinateur et les écrans mobiles de chacun. Ainsi, le contraste, la saturation, la luminosité des images varient d’un écran à l’autre et cela DIVI ne le simule pas
Bonjour Vincent,
Merci pour votre message.
Oui, en effet, il se peut qu'il y ait parfois qqs décalages selon le type de téléphone utilisé.
Après si vous conservez une marge de sécurité suffisante notamment sur la taille des polices, le résultat est souvent très bon avec les personnalisations qu'offre Divi.
Le cas des titres notamment sur mobile m a frustree pendant un moment puisqu en effet, il y a tellement de tailles de mobile qu'il est compliqué de faire un rendu parfaitement identique pour tous... si on reste en pixel.
J'ai mis un moment à trouver, mais sur mobile, pour la tailles des titres et les marges gauches et droites je ne travaille plus qu'en vw (view-width) qui est en fait un pourcentage de la largeur de l écran et en vh (view-height) pour les marges en haut et en bas des elements.
Ainsi tous mes affichages sont vraiment parfaits quelque soit le mobile utilisé.
Pour l ordinateur et la tablette, j'en eprouve moins le besoin.
Vous pouvez verifier sur les simulateurs de tailles d écran, parfois il faut jouer un peu à 0,1 ou 0,2vw pour que ça passe partout mais depuis que j'ai trouvé ça, mes sites sont bcp plus responsifs !
@@alpasc ouiiii c’est le meilleur moyen..! Ça fonctionne aussi pour les espacements
Merci pour votre professionnalisme. Je débute sur Wordpress après une formation de 4 mois. J'envisage une formation complémentaire de 2/3 mois pour changer de métier et devenir créateur de sites. Je compte suivre vos vidéos progressivement. j'ai une question: Avez-vous une chronologie dans vos vidéos pour les nouveaux créateurs de sites ?
Merci.
Bonjour Alain, merci pour ces explications très instructives et très bien expliquées, au top 👌 !
J'ai 2 questions svp :
1 - il paraîtrait que lorsqu'on utilise la fonction visibilité, google n'aime pas cela, j'aimerai avoir votre avis svp ?
2 - Pour le responsive, faire les modifications du pc au téléphone c'est ok mais j'ai pu observer pas mal de décalage lorsqu'il s'agit de passer d'un écran de PC 24" à un autre écran de PC de 14", comment remédier à cela, svp ?
Encore merci pour vos vidéos et j'espère que vous aurez le temps de me répondre 🙂
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
super vidéo ! vous m'avez beaucoup aidé merciiii c'est tellement difficile de trouver de l'aide pour DIVI en français !!!
Avec plaisir Inès ! 😉👍
Franchement vous êtes un bon professeur
Merci, c'est gentil 😃👍
Super vidéo !! Merci Alain🙂
Avec plaisir 👍
Bonjour, votre vidéo ainsi que beaucoup d'autre mon énormément aidé, j'ai cependant un problème que je n'arrive à pas à résoudre, j'ai fais comme vous, copier coller un bloc pour le mettre en page différemment entre mobile et ordinateur jusqu'à la tout ok, mais le souci que j'ai c'est que je suis sur un site onepage, j'ai donc une encre sur la page ordinateur mais qui ne fonctionne pas sur la page ou mobile ou vis versa mais je n'arrive pas à avoir les 2 fonctionnelle en même temps.
Vous avez déjà eu ce problème ?
Merci d'avance et encore merci pour vos super vidéos qui m'aide au quotidien.
Salut probleme avec le mode responsive, j’ai une grande marge blanche sur le côté pour le mobile
Merci pour cette vidéo ! votre pédagogie nous aide bcp !!! J'aurai une question, j'ai bien fait le responsive de mon site mais lorsque je vais sur la version mobile, les pages (hors page d'accueil) s'affiche bizarrement et sans aucune mise en page. Mais lorsque je clique sur "quitter la version mobile" mon site en responsive s'affiche bien. Avez-vous déjà connu ce souci ?? Merci
👍 Merci pour toutes ces informations. 😉
Avec plaisir 👍😃
je n'arrive pas à aligner l'icone du hamburger menu à coté du logo sur tablette et téléphone ..
Très bien votre vidéo mais moi quand je fais les modifications sur téléphone et pourtant je suis bien sur téléphone ! Tout ce modifie aussi sur version pc du coup je suis très embêté 🙄et d'ailleur moi j'ai n'ai pas le petit pinceau qui s'affiche comme vous pouvez vous m'orienter ?
Bonsoir Stéphanie,
Il faut bien cliquer sur l'icône mobile et reselectionner l'onglet téléphone.
Bonjour, Tout d'abord, un grand merci à Alain pour ses vidéos pertinentes. Et merci à vous Stéphanie Pacelli pour votre question. Je suis comme vous sur la responsive Divi. Lorsque je modifie en format téléphone, les autres écrans sont aussi modifiés alors que j'ai bien cliqué sur l'icône mobile et reselectionner l'onglet téléphone. Avez-vous trouvé la solution ? J'ai donc cliqué sur l'icône mobile, puis sur le téléphone "par exemple iphone". Est-ce que j'ai sauté des étapes ou je suis carrément à côté de la plaque. Est-ce une option re-payante Divi ? Merci d'avance pour votre retour.
@@NdreRalison Bonjour, j'ai moi aussi le même problème. Avez-vous trouvé une solution ? J'ai essayer avec un tout nouveau site et même problème... J'ai tester la barre de navigation, des titres et des textes... et chaque changement que je veux faire, les changements se fait dans les 3 (ordi, tablette et cellulaire)...
@@stephaniegrondin9542j’ai le même problème
@@stephaniegrondin9542 Bonjour, J'ai trouvé certainement l'une des solutions, je dis bien l'une des solutions. Il faut effectivement (important) cliquer sur l'icône mobile ou tablette, c'est selon. Divi se met automatiquement en page "responsive", mais, il faudra travailler certaines choses comme les espacements etc, etc...Une fois votre intervention terminée, vous validez. Dans l'administration (par exemple) le "desktop", la partie portable et tablette est grisée. Rien d'anormale, vous pouvez toujours intervenir pour une éventuelle modification.
Bonjour Alain merci beaucoup pour ta vidéo c'est très clair. Mon site est responsive mais j'ai un souci quant à l'instabilité visuelle sur mobile. En effet mon site bouge de droite à gauche et je voudrais que ca ne soit pas le cas. J'ai ajouté ce code là :
body {
overflow-x: hidden;
}
Mais ça ne fonctionne pas. Est-ce que tu sais ce que je pourrais faire ?
Bonjour, je suis un peu embêtée mon site bouge selon la taille des écrans je l'ai travaillé sur un mac 13' j'ai verifié sur tablette et mobile tout est niquel mais par contre quand je passe sur un autre pc mes images et mes textes sont étirés sauriez vous comment je peux arranger ca svp?
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
hello! Ne voudrait-il pas mieux utiliser les %, em, vh ou vw plutôt que les px ?
Oui effectivement les em notamment sont bien pratiques
Bonjour, j'ai un gros problème avec mon site dont la taille diffère d'un ordinateur à l'autre. Je ne peux pas régler la taille pour chaque PC individuellement, et je ne sais pas comment faire en sorte que mon site apparaisse de la même manière sur tous les écrans d'ordinateur (sans parler d'un macbook). Pourriez-vous m'aiguiller s'il vous plaît ? Merci beaucoup !