Rendre son site responsive pour mobile avec Elementor [RDV WORDPRESS 003]
HTML-код
- Опубликовано: 11 окт 2024
- ✅ Comment rendre son site responsive avec le plugin Elementor ?
✅ Le responsive design c'est compliqué ?
✅ Pourquoi ne pas adapter son contenu au mobile vous prive de 70% du trafic vers votre site ?
✅ Tutoriel WordPress complet pour adapter son site au format mobile et tablette
C'est ce que je vous présente dans ce REPLAY du RDV WordPress n°03
► Vous souhaitez ASSISTER AU PROCHAIN RDV WORDPRESS ?
Idéal pour se former gratuitement... car c'est GRATUIT (pour le moment !)
Avec toujours plus d'astuces présentées en direct.
Avec la séance questions / réponses qui n’apparaît pas dans le replay.
JE M'INSCRIS ► inzewind.com/r...
Vous souhaitez aller plus loin pour réaliser un site web professionnel, moderne et sécurisé ?
Même si vous êtes débutant, il est possible de réaliser soi-même un site internet pro.
Il suffit d'être guidé, étape par étape.
Mais il ne faut surtout pas se retrouver seul(e) devant son écran.
C'est pour cela que je propose dans cette formation un suivi personnalisé, régulier, pour savoir où vous en êtes, si vous avancez, si vous avez des difficultés...
Et c'est justement parce que j'assure ce suivi que je suis en mesure de donner une garantie de résultat.
Vous rêvez d'un site web pro pour votre activité ?
Vous voulez être fier de l'avoir réaliser seul(e) ?
Vous voulez être autonome pour le faire évoluer et gérer le contenu ?
Mais vous n'avez pas envie que ça vous coûte un bras si jamais vous passez par une agence web ou un prestataire ?
Alors faites-le vous-même, OUI VOUS EN ETES CAPABLE !
Inscrivez-vous à ma formation à distance sur le lien ci-dessous :
► inzewind.com/c...
#wordpress #tutoriel #formation #plugin #elementor #responsive
▬▬▬▬▬▬▬▬▬▬ QUI SUIS-JE ? ▬▬▬▬▬▬▬▬▬▬
Je m'appelle Pierre-Olivier Lair
Je dirige un Organisme de Formation et Studio de Créations Web
Docteur en Informatique, spécialiste WordPress et Stratégies Digitales, je propose des méthodes d'apprentissage innovantes.
J'enseigne à l'Université Paris-Sorbonne et à la Digital School of Paris.
💎 J'aide les thérapeutes, les coachs, les formateurs à diffuser leur message et à devenir magnétique pour ne plus avoir à prospecter. Je les aide à obtenir plus de clients sans être dans une posture de vendeur, en mettant en place une stratégie de marketing digital, éthique et sur-mesure, qui a du sens pour eux, et qui leur permet de vivre sereinement de leur activité.
▬▬▬▬▬▬▬▬▬▬ RESSOURCES ▬▬▬▬▬▬▬▬▬▬
► Créer sa formation en ligne (plateforme française !) : viededingue1.c...
► Des milliers de vidéos décalées pour créer des publicités impactantes et avoir un meilleur retour sur investissement : giff1.com/RsohMs
► ☯️ Plateforme dédiée à la spiritualité : inzewind.page....
► Gagner de l'argent avec Instagram : inzewind.page....
► Hébergeur o2switch : fournit un hébergement et un nom de domaine pour 6€ par mois. SAV de qualité. goo.gl/A8g1VS
► Si wordpress.com convient à ton projet : goo.gl/Y3t5ET
► Si tu préfères télécharger wordpress sur wordpress.org : goo.gl/XVfgbU
► Accès à ma formation en ligne "Créer soi-même un site web pro sans compétences particulières en informatique" : goo.gl/jjgQYq (nb de places limité à 15 stagiaires)
► Accès à l'accompagnement personnalisé d'auto-entrepreneur : inzewind.page.... (J'OFFRE un diagnostic GRATUIT par téléphone)
► Télécharge sons, vidéos, bruitages (Pack Essentiel Audio GRATUIT) : goo.gl/oFVvui
► Télécharge mon guide PDF "Sécuriser son site Wordpress" : inzewind.page....
► Télécharge mon guide GRATUIT "15 questions à se poser avant de se lancer dans un projet de site web" : goo.gl/HDPZP4
► Rejoins mon programme : "Créer son propre organisme de formation en partant de zéro :
goo.gl/LnieZp (limité à 20 stagiaires)
▬▬▬▬▬▬▬▬▬▬▬▬▬ LIENS ▬▬▬▬▬▬▬▬▬▬▬▬▬
N'hésite pas à t'abonner à ma chaîne, à m'ajouter sur les réseaux sociaux, et à me laisser tes questions en commentaire. Je me ferai un plaisir d'y répondre.
• Facebook : / pierre.olivier.formateur
• Twitter : / inzewind77
• Instagram : / _pierre.olivier_
• Pinterest : www.pinterest....
• RUclips : goo.gl/Sz3eAx
• Site officiel : inzewind.com/
• Pour coachs et thérapeutes : devenir-magnet...
![Espionner les visiteurs de son site et analyser leur comportement [RDV #WORDPRESS 033]](http://i.ytimg.com/vi/iW6cHzZBXyw/mqdefault.jpg)
![Espionner les visiteurs de son site et analyser leur comportement [RDV #WORDPRESS 033]](/img/tr.png)
![Rendre son site vraiment responsive pour mobile. Les astuces avec Elementor [RDV #WordPress 058]](http://i.ytimg.com/vi/0ELbSUGazXA/mqdefault.jpg)
Merci Docteur pour ce tutoriel. Vous avez répondu à beaucoup de mes interrogations et m'avez clarifié surtout une bonne fois pour toutes sur l'Independence entre les trois modes de modifications: ordinateur/tablette/mobile
Super, merci Youssef pour ce retour !
Des vidéos toujours simples et efficaces! Un grand merci pour toute cette aide précieuse!
Avec plaisir
Bonjour, le tuto est clair et précis néanmoins quand je selectionne la prévisualisation mobile et que je change afin de rendre celui ci plus agréable pour smartphone cela me change aussi ma hierarchie desktop ... En esperant avoir un retour de votre part ! Merci pour ce tuto
Bonjour Theo, les designs sont indépendants, c'est justement ce qui fait l'intérêt de travailler avec cette fonctionnalité "responsive" d'Elementor, donc ce n'est pas normal. Sauf si l'on est sur une caractéristique commune au 3 designs (mobile, tablette et écran). Comment le savoir ? Les champs modifiables pour chaque taille d'écran ont à côté un icone qui indique sur quel design on est en train de travailler. Ceux qui n'en ont pas sont communs aux 3 et donc si l'on change 1 on change les 2 autres en même temps. Attention à ça !
@@pierreolivierlair bonjour, je viens de voir votre réponse et il m’arrive la même situation, comment je pourrais y remédier ? S’il voulait plaît
Bonjour Gabriel, si en changeant la version mobile, ça change aussi la version tablette ou écran c'est que l'on est en présence d'un champ commun aux 3 designs. Comme je disais, pour remédier à ça il faut veiller à modifier uniquement les valeurs qui ont un icone responsive juste à côté.
@@pierreolivierlair bonjour, j’ai trouver une astuce en ajoutant deux widgets un pour la version pour ordinateur et tablette et l’autre pour la version mobile.
@@MrGaby202 C'est possible de connaitre le nom des widgets que vous avez ajouté ?
Je rencontre le même problème, et je ne m'en sors pas ^^
Super Video Merci
Avec plaisir
Super vidéo, toujours aussi PRO!! Avec mon travail de webmaster, c'est très utile ce genre de vidéos. Merci
Merci pour ce retour ! 😉
Explications claires 👍
▬ INFO du 01/07/2021 ▬ Même en utilisant "Elementor", on peut rencontrer certains problèmes. Je profite du RDV WordPress n°58, le dernier avant la trêve estivale, pour faire un point et livrer toutes mes astuces pour proposer un site au DESIGN IMPECCABLE sur mobile (et tablette). C'est une MASTERCLASS OFFERTE.
Les inscriptions sont ouvertes 👉 inzewind.com/rdv-wordpress
merci merci
⚠ Les questions des participants n'apparaissent pas dans le REPLAY.
Si vous souhaitez poser vos questions, soyez présent le dimanche à 20h sur le live !
C'est GRATUIT, il suffit de s'inscrire ici ► inzewind.com/rdv-wordpress/
Merci bcp cela m a bcp aider, video très bien expliquée simple précise 👍👍👍👍
MErci olivier
Bonjour Olivier, merci beaucoup pour es vidéos qui m'aident beaucoup !
Cependant, j'ai un petit soucis : J'ai rendu mon site totalement responsive, mais selon le format des écrans de téléphone, j'ai de gros décalages... Tout est parfait sur mon téléphone, mais pas sur d'autres... Il y a t'il une astuce pour que la disposition soit la même sur tous les téléphones?
Merci de ta réponse !!
Juliette.
Merci Juliette pour ce retour. Oui ce que je conseille pour que la conception de la partie mobile soit adaptée à la majorité des smartphones, c'est de régler la largeur sur la dimension la plus étroite. En bougeant les bords de la fenêtre en mode mobile dans Elementor.
Salut Pierre Olivier, j'ai un gros problème sur deux de mes pages. J'ai des gros espace blanc sur la droite quand je suis sur le mobile, je n'arrive pas à trouver la solution. Ça ne le fait pas sur toutes mes pages. Aurais-tu une idée d'où ça peut venir s'il te plaît ?
Bonjour @boustacom. Difficile de savoir comme ça sans voir la page, mais avec Elementor, tu peux quand même vérifier que ta section est en pleine largeur (au lieu de largeur contenu), et regarde aussi le paramètre "étirer la section" qui permet d'étirer le contenu de la section du bord gauche jusqu'au bord droit.
Bonjour merci pour votre tuto, serriez vous comment pour que les bouton (on progresse, on s'amuse, on revient) soit à coté de l'image sur version mobile comme sur version PC et tablette ?? merci par avance :) (je cherche depuis des jours je désespère :( )
Bonjour, merci pour cette vidéo. J’ai un petit problème, ma page est bien réglée cependant il y a un espace blanc sur toute la longue du côté droit de la page, comment puis-je régler cela ? Merci
A voir si ça ne viendrait pas du réglage de la page, dans le paramétrage de la largeur de page, et ça peut dépendre du thème que tu as choisi. Thème > Personnaliser
idem
thème > personnaliser > css additionnel > html,body{
width:100%;
overflow-x:hidden;
}
Merci 1 Abonne +
Bonjour, j'ai créé mon site web via un pc (avec le plugin Elementor) et quand je visite mon site avec mon téléphone, la police d'écriture n'est pas du tout respectée... Je ne trouve pas la solution. Pouvez-vous m'aider ? Merciii
Bonjour Ludivine, il faut vérifier que la police choisie est utilisée pour la version mobile, cela implique d'avoir basculé sur le mode responsive dans Elementor. Attention aussi à certaines polices qui ne sont pas des "Google Fonts" ou que certains mobiles ne sont pas capables d'afficher. Dans ce cas, il faut privilégier une police classique pour la version mobile (Arial, Tahoma, Verdan, Georgia...). Voilà, sinon difficile de donner une réponse sans voir la page et analyser précisément le problème. J'espère toutefois que cela aura pu vous aider.
Bonjour Pierre Olivier et merci pour cette vidéo qui m'a été d'un grand secours. Je prends la main sur le site WP de l'entreprise où je fais mon stage, et il y a deux images en haut de l'écran sur lesquelles je ne peux cliquer (rien ne se passe).Auriez vous une idée du comment du pourquoi ? Cela me serait très utile car pour le coup, elles ne sont pas responsives sur la version mobile et cela ne fait pas très joli sur la page. Merci d'avance excellente journée,
Laure
Bonjour Laure, difficile de répondre sans voir le site mais en général certaines parties d'une page ou d'un article ne sont pas modifiables avec l'éditeur d'Elementor. Il s'agit de l'en-tête (tout en haut) et du pied de page (tout en bas).
Pour les modifier, il faut passer par la personnalisation du thème, en allant sur le menu Apparence > Personnaliser. Ensuite, vous aurez plus ou moins de latitudes pour modifier ces zones en fonction du thème qui est activé sur le site. Regardez notamment si les images ne sont pas dans la rubrique "Header" du menu de personnalisation.
J'espère que cela pourra vous aider.
Même en utilisant "Elementor", on peut rencontrer certains problèmes. Je profite du RDV WordPress n°58, le dernier avant la trêve estivale, pour faire un point et livrer toutes mes astuces pour proposer un site au DESIGN IMPECCABLE sur mobile (et tablette). C'est une MASTERCLASS OFFERTE.
Les inscriptions sont ouvertes 👉 inzewind.com/rdv-wordpress
Bonjour, comment gérer le responsive lorsqu'on a des widget sur une colonne latérale?
Car, je suis bien tout ce que vous dites, mais mes widgets se sont mis en bas de l'affichage "mobile" et ils se supperposent sur des éléments du bas.
Merci
Hello! J'ai un problème quand je change en version mobile sur elementor ça change aussi la version ordi et vice versa, si je modifie ça affecte tous les modèles ( tablette, ordi, téléphone)
Bonjour Louise, oui il faut veiller à modifier un paramètre qui n'est pas commun aux 3 interfaces (écran, tablette, mobile). Quand ce n'est pas commun aux 3 c'est matérialisé par un icone. Plus d'explications sur un RDV WordPress plus récent ► ruclips.net/video/0ELbSUGazXA/видео.html
Bonjour, merci pour cette vidéo.Je rencontre un soucis , quand je clique sur modifier avec Elementor, la page apparaît en mode code source avec un seul grand bloc qui contient tous les éléments de ma page. Du coup impossible de modifier mes colonnes ou images. Avez-vous une idée de comment y remédier ? Merci pour votre retour. Bonne journée
Oui c'est normal. Lorsque la page a déjà été construite sans Elementor, la première fois l'éditeur récupère en effet tous les éléments et met tout dans un emplacement unique.
Il faut donc créer des sections, des colonnes, et séparer son contenu pour le gérer de manière indépendante.
Merci, j'ai tout compris ^^
Super, c'est le but !
Bonjour, Merci pour cette vidéo mais j'ai un soucis au niveau de ma page responsive, elle n'est pas fixe je peux la bouger de gauche à droite. J'aimerais quelle ne bouge pas savez-vous comment je peux procéder ?
Même en utilisant "Elementor", on peut rencontrer certains problèmes. Je profite du RDV WordPress n°58, le dernier avant la trêve estivale, pour faire un point et livrer toutes mes astuces pour proposer un site au DESIGN IMPECCABLE sur mobile (et tablette). C'est une MASTERCLASS OFFERTE.
Les inscriptions sont ouvertes 👉 inzewind.com/rdv-wordpress
Bonjour, merci pour votre vidéo ! Nous sommes étudiants et nous réalisons un site internet pour un cours de CMS & SEO. Nous sommes entrain de rendre celui ci responsive, votre vidéo nous a beaucoup aidé. Cependant nous avons un problème. Lorsque je vais vérifier sur mon téléphone comment celle ci apparait, elle ne s'affiche pas correctement, je dois aller tout en bas de la page pour sélectionner un des deux modes "bureau" ou "mobile". Et seulement là elle s'affiche correctement. Comment faire pour que ça soit automatique pour les utilisateurs ? Je vous remercie.
Si la version mobile est correcte en travaillant sur Elementor, vérifiez s'il n'y a pas un plugin de cache qui empêche de voir les modifs en temps réel sur mobile. Dans ce cas il faut vider le cache.
Hello ! En version tablette, quand il y a, par exemple, une image et un long texte côte à côte comment mettre en colonne ces éléments les un en dessous des autres svp ?
Bonjour merci pour cette vidéo je voulais justa savoir comment il fallait faire si je n'ai pas elementor j'ai le constructeur de page colibri gratuit pour modifier l'aspect de mon site sur un telephone à part inspecter pour voir l'aspect du site, je n'ai pas d'options pour redimensionner les images ou modifier l'apparence ? merci
Désolé je n'ai jamais utilisé le constructeur de page colibri, je ne le connais pas du tout. Elementor aussi est gratuit (même s'il existe aussi une version pro)
@@pierreolivierlair merci je vais commencer sur elementor 👍👍
Bonjour,
Avant tout merci pour votre vidéo. Je rencontre néanmoins quelques problème, les modifications apportées sur la version mobile de mon site entrainement également des changements sur la version Ordinateur. J'utilise Elementor pro, je n'ai pas pris de thème je suis parti d'une page blanche pour créer mon site internet.
Cordialement,
Même en utilisant "Elementor", on peut rencontrer certains problèmes. Je profite du RDV WordPress n°58, le dernier avant la trêve estivale, pour faire un point et livrer toutes mes astuces pour proposer un site au DESIGN IMPECCABLE sur mobile (et tablette). C'est une MASTERCLASS OFFERTE.
Les inscriptions sont ouvertes 👉 inzewind.com/rdv-wordpress
Bonjour,
merci pour cette video, pouvez-vous me dire comment gérer le mobil mis à l'horizontal : mobil mis à l'horizontal = apparition des filtres categorie de produit (woocommerce + elementor + astra) je peux passer en elementor pro et astra pro, si besoin). L'objectif serait de transformer mon site en application android/ios (Playstore et Apple Store) Merci d'avance.
Bonjour ! Désolé mais chez moi ça ne fonctionne pas du tout ! Lorsque je modifie la version mobile le reste est également modifier même en prenant la précaution de modifier uniquement le mobile. Donc ça ne marche à tout les coups...dommage
Attention, si c'est un champ commun aux 3 supports (écran, tablette, mobile) alors modifier d'un côté modifiera de l'autre. Seuls les champs qui ont l'icone responsive à côté sont modifiables et ne bougeront pas d'une version à l'autre. Exemple : taille de police, longueur de marges, etc.
@@pierreolivierlair ça je l es compris tout seul.
Alors aucune raison que ça ne fonctionne pas.
Super vidéo merci beaucoup pour ton temps!
mais j’ai un petit soucis j’ai fait tout comme toi mais ça ma modifier quand l’écran ordinateur et tablette
saurai tu pourquoi ?
Je n'ai pas compris ta question. Ca modifie quoi exactement ?
@@pierreolivierlair en gros je veux dire que les changements que je fais sur mobile dans Elementor se répercutent aussi sur PC et tablette
Bizarre en effet. Normalement, chaque modification de design sur mobile, tablette et écran est indépendante de l'autre. Regarde du côté de ton thème, qui n'est peut-être pas responsive. Attention aussi si tu as un autre constructeur de page activé (en plus d'Elementor).
Bonjour, Lorsque je modifie mon site sur la version mobile, cela bouge également toute la mise en page sur la version originale du site.
La fonctionnalité responsive d'Elementor permet de travailler de manière indépendante sur la version écran/tablette/mobile. Une modification sur une version n'a pas d'impact sur une autre.
@@pierreolivierlair Bonjour, rien à faire pour ma part tout bouge...
@@pierreolivierlair Bonjour, merci pour votre vidéo. J'ai le même souci que Nathalie. Comment faire pour régler ce souci responsive ? J'aimerais modifier sur le mode mobile mais ça bouge tout sur le mode tablette et écran. Merci pour votre future réponse.
@@marinecardona4480 Idem pour moi ! :)
@@aureliesevestre1569 Même en utilisant "Elementor", on peut rencontrer certains problèmes. Je profite du RDV WordPress n°58, le dernier avant la trêve estivale, pour faire un point et livrer toutes mes astuces pour proposer un site au DESIGN IMPECCABLE sur mobile (et tablette). C'est une MASTERCLASS OFFERTE.
Les inscriptions sont ouvertes 👉 inzewind.com/rdv-wordpress
Comment faire ?
Bonjour, j'ai tenté de faire comme vous dites. Résultat : toute ma version ordinateur a été foutu en l'air et tout est décalé, je dois tout recommencer maintenant.
Bonjour Jean-Claude, probablement car vous avez modifié des champs communs au 3 versions (mobile, tablette et écran). Explications complémentaires dans une vidéo que j'ai tournée plus récemment : ruclips.net/video/0ELbSUGazXA/видео.html
et qui pointe l'erreur la plus fréquente (timing 15:05).
Faut il la version payante de elementor pour pouvoir faire le site de facon reponsive? sur la version gratuite, il semblerait que ce soit limité a la customisation ordinateur!
Merci d'avance
J'avoue ne pas être allé très loin avec la version gratuite sur le .com, car en effet on a très peu de possibilités de personnalisation. ce serait pas étonnant que seule la version écran soit éditable.
Salut mes texte disparaît sur la version mobile .on dirait que ça change et que le texte arrive que quand je vais en bas du site et que je remonte et de fois il me change aussi ma version pc trop bizarre pourtant je choisie bien le mode tel
Si le texte n'apparait que au moment de scroller vers le bas de page, vérifiez que vous n'avez pas une animation d'entrée sur le texte.
Même en utilisant "Elementor", on peut rencontrer certains problèmes. Je profite du RDV WordPress n°58, le dernier avant la trêve estivale, pour faire un point et livrer toutes mes astuces pour proposer un site au DESIGN IMPECCABLE sur mobile (et tablette). C'est une MASTERCLASS OFFERTE.
Les inscriptions sont ouvertes 👉 inzewind.com/rdv-wordpress
Ca ne marche pas, ça modifie la version ordinateur aussi pour moi
Bonjour Raymond, les designs sont indépendants, c'est justement ce qui fait l'intérêt de travailler avec cette fonctionnalité "responsive" d'Elementor, donc ce n'est pas normal. Sauf si l'on est sur une caractéristique commune au 3 designs (mobile, tablette et écran). Comment le savoir ? Les champs modifiables pour chaque taille d'écran ont à côté un icone qui indique sur quel design on est en train de travailler. Ceux qui n'en ont pas sont communs aux 3 et donc si l'on change 1 on change les 2 autres en même temps. Attention à ça !
@@pierreolivierlair Cela réponds à ma question ! Merci ! :)
Merci beaucoup pour votre vidéo :) par j'ai une question à vous poser ! Pourquoi pour la typographie du texte au-dessous de la liste d'icônes vous avez choisi comme unité pour la taille EM au lieu de PX ? Et pourriez-vous m'expliquer les autres unités s'il vous plaît? Merci d'avance de votre aide :)