Rendre son site responsive pour mobile avec Elementor [RDV WORDPRESS 003]

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ธ.ค. 2024

ความคิดเห็น • 81

  • @youssefa.b.8114
    @youssefa.b.8114 4 ปีที่แล้ว +1

    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

  • @moicolibri4866
    @moicolibri4866 3 ปีที่แล้ว +1

    Des vidéos toujours simples et efficaces! Un grand merci pour toute cette aide précieuse!

  • @marcsellem1469
    @marcsellem1469 2 ปีที่แล้ว +1

    Super Video Merci

  • @pierreolivierlair
    @pierreolivierlair  3 ปีที่แล้ว

    ▬ 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

  • @ahautevoix-voixoff-marseil6509
    @ahautevoix-voixoff-marseil6509 4 ปีที่แล้ว +1

    Explications claires 👍

  • @dilminformatique8422
    @dilminformatique8422 4 ปีที่แล้ว

    Super vidéo, toujours aussi PRO!! Avec mon travail de webmaster, c'est très utile ce genre de vidéos. Merci

  • @pierreolivierlair
    @pierreolivierlair  4 ปีที่แล้ว

    ⚠ 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/

  • @Gzx91
    @Gzx91 3 ปีที่แล้ว +1

    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

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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 !

    • @MrGaby202
      @MrGaby202 3 ปีที่แล้ว

      @@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

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว +1

      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é.

    • @MrGaby202
      @MrGaby202 3 ปีที่แล้ว

      @@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.

    • @vivienremond6334
      @vivienremond6334 3 ปีที่แล้ว

      @@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 ^^

  • @terrylegait4911
    @terrylegait4911 4 ปีที่แล้ว +2

    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

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      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

    • @kevinh7597
      @kevinh7597 4 ปีที่แล้ว

      idem

    • @ines2898
      @ines2898 2 ปีที่แล้ว

      thème > personnaliser > css additionnel > html,body{
      width:100%;
      overflow-x:hidden;
      }

  • @boustacom
    @boustacom 10 หลายเดือนก่อน +1

    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 ?

    • @pierreolivierlair
      @pierreolivierlair  9 หลายเดือนก่อน

      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.

  • @chancialouise1203
    @chancialouise1203 2 ปีที่แล้ว +1

    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)

    • @pierreolivierlair
      @pierreolivierlair  2 ปีที่แล้ว

      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 ► th-cam.com/video/0ELbSUGazXA/w-d-xo.html

  • @MrsLalaina
    @MrsLalaina 2 ปีที่แล้ว

    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 ?

  • @berto001mb
    @berto001mb 4 ปีที่แล้ว

    Merci bcp cela m a bcp aider, video très bien expliquée simple précise 👍👍👍👍

  • @user-qt6ws8zs6c
    @user-qt6ws8zs6c 3 ปีที่แล้ว +1

    merci merci

  • @laurecastex593
    @laurecastex593 4 ปีที่แล้ว +1

    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

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว +1

      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.

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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

  • @kevin.bordet
    @kevin.bordet 2 ปีที่แล้ว

    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 :( )

  • @ludivineallemand2485
    @ludivineallemand2485 3 ปีที่แล้ว +1

    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

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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.

  • @droneserviceoccitanie2288
    @droneserviceoccitanie2288 2 ปีที่แล้ว

    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

  • @Ben-zy8kw
    @Ben-zy8kw 4 ปีที่แล้ว +1

    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

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      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)

    • @Ben-zy8kw
      @Ben-zy8kw 4 ปีที่แล้ว

      @@pierreolivierlair merci je vais commencer sur elementor 👍👍

  • @julietteclech2207
    @julietteclech2207 2 ปีที่แล้ว +1

    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.

    • @pierreolivierlair
      @pierreolivierlair  2 ปีที่แล้ว

      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.

  • @citronmieleventsspa2100
    @citronmieleventsspa2100 3 ปีที่แล้ว +1

    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 ?

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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

  • @webagence
    @webagence 3 ปีที่แล้ว +1

    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

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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.

    • @webagence
      @webagence 3 ปีที่แล้ว

      @@pierreolivierlair ça je l es compris tout seul.

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      Alors aucune raison que ça ne fonctionne pas.

  • @preslenejeanmary5778
    @preslenejeanmary5778 4 ปีที่แล้ว +1

    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

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      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.

  • @manonlevent9610
    @manonlevent9610 4 ปีที่แล้ว +1

    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.

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว +1

      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.

  • @nguyader
    @nguyader 4 ปีที่แล้ว +1

    Bonjour, Lorsque je modifie mon site sur la version mobile, cela bouge également toute la mise en page sur la version originale du site.

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      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.

    • @marinecardona4480
      @marinecardona4480 4 ปีที่แล้ว +1

      @@pierreolivierlair Bonjour, rien à faire pour ma part tout bouge...

    • @sarahm.2294
      @sarahm.2294 4 ปีที่แล้ว

      @@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.

    • @aureliesevestre1569
      @aureliesevestre1569 3 ปีที่แล้ว

      @@marinecardona4480 Idem pour moi ! :)

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      @@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

  • @kevinpierre-georges7539
    @kevinpierre-georges7539 3 ปีที่แล้ว +1

    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,

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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

  • @rabo1657
    @rabo1657 4 ปีที่แล้ว

    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.

  • @Laraider
    @Laraider 4 ปีที่แล้ว +1

    Merci, j'ai tout compris ^^

  • @microdesentrepreneurs
    @microdesentrepreneurs 4 ปีที่แล้ว +1

    MErci olivier

  • @vapoteamtv8414
    @vapoteamtv8414 4 ปีที่แล้ว

    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 ?

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      Je n'ai pas compris ta question. Ca modifie quoi exactement ?

    • @vapoteamtv8414
      @vapoteamtv8414 4 ปีที่แล้ว

      @@pierreolivierlair en gros je veux dire que les changements que je fais sur mobile dans Elementor se répercutent aussi sur PC et tablette

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      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).

  • @game-sy4nb
    @game-sy4nb 4 ปีที่แล้ว +1

    Merci 1 Abonne +

  • @Magik_haze
    @Magik_haze 4 ปีที่แล้ว

    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

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      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.

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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

  • @jean.D54
    @jean.D54 3 ปีที่แล้ว

    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.

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว

      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 : th-cam.com/video/0ELbSUGazXA/w-d-xo.html
      et qui pointe l'erreur la plus fréquente (timing 15:05).

  • @pierrelouishostein7424
    @pierrelouishostein7424 4 ปีที่แล้ว

    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

    • @pierreolivierlair
      @pierreolivierlair  4 ปีที่แล้ว

      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.

  • @chancialouise1203
    @chancialouise1203 2 ปีที่แล้ว +1

    Comment faire ?

  • @raymondforest5799
    @raymondforest5799 3 ปีที่แล้ว +1

    Ca ne marche pas, ça modifie la version ordinateur aussi pour moi

    • @pierreolivierlair
      @pierreolivierlair  3 ปีที่แล้ว +1

      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 !

    • @aureliesevestre1569
      @aureliesevestre1569 3 ปีที่แล้ว

      @@pierreolivierlair Cela réponds à ma question ! Merci ! :)