WordPress responsive design : faire en sorte que les sites web soient attrayants sur les téléphones portables et les ordinateurs

Elementor est livré avec de puissantes fonctionnalités d'édition responsive qui vous permettent de rendre votre site Web magnifique et facile à utiliser sur les ordinateurs, les tablettes et les téléphones mobiles avec seulement quelques paramètres simples. Elementor est facile à utiliser.

Qu'est-ce que le responsive design ?

En bref.Le responsive design signifie que la même page web adapte automatiquement sa mise en page à la taille de l'écran de l'appareil.：

• Sur un ordinateur (grand écran), le contenu peut être affiché côte à côte (par exemple, trois colonnes d'images) ;
• Sur un écran plat (moyen), il devient automatiquement deux colonnes ;
• Sur les téléphones mobiles (petits écrans), il s'empile automatiquement en une seule colonne pour éviter que le texte ne soit trop petit ou que le contenu ne déborde.

Elementor s'adapte automatiquement à la plupart des scénarios, mais certains détails doivent encore être optimisés manuellement pour garantir la meilleure expérience possible pour chaque appareil.

Étape 1 : Apprendre à connaître le modèle d'édition responsive d'Elementor

Lorsque vous entrez dans l'interface d'édition d'Elementor, il y a trois icônes sur le côté droit de la barre d'outils supérieure, correspondant aux trois vues de l'appareil :

• 🖥️ vue du bureau(affichage par défaut)
• 📱 vue à plat(768px de largeur gauche/droite)
• 📱 Vue mobile(375px de largeur gauche/droite)

mode opératoireCliquez sur l'icône correspondante pour passer au mode de prévisualisation pour cet appareil. Toutes les modifications de style (par exemple, la taille de la police, l'espacement, la mise en page) peuvent être réglées individuellement pour un seul appareil sans s'influencer les unes les autres.

Étape 2 : Paramètres de base du Responsive Design (3 requis)

1. taille du texte : éviter les textes trop petits ou trop grands sur les téléphones mobiles

Un texte qui semble correct sur un ordinateur peut ne pas être lisible sur un téléphone portable (trop petit) ou les retours à la ligne peuvent être mal faits (trop grands) et doivent être ajustés individuellement :

1. Sélectionnez l'élément de texte (titres, paragraphes, etc.) et allez dans le panneau "Styles" à droite.
2. Recherchez le paramètre "Taille de la police" et cliquez sur l'icône "Responsive" (une petite icône d'ordinateur qui affiche trois champs de saisie lorsqu'on clique dessus, correspondant à bureau/tablette/mobile) à côté de la valeur.
3. Passez en mode "Affichage mobile" et entrez directement la taille appropriée (par exemple, les titres sont réglés sur 24-32 px sur les téléphones mobiles, les paragraphes sur 14-16 px).

ConseilLa taille du texte suit le principe "plus l'écran est petit, plus le texte doit être grand et clair" afin de garantir qu'il puisse être lu sans zoomer sur un téléphone portable.

2. largeur des images et des modules : éviter de dépasser l'écran

Les images réglées sur "80% width" sur les ordinateurs peuvent encore apparaître trop larges sur les téléphones portables, ou comporter trop d'espace blanc de part et d'autre :

1. Sélectionnez l'image/le module et allez dans le panneau "Styles" de droite (les images sont dans "Styles" → "Largeur", les autres modules peuvent être dans "Avancé" → "Largeur").
2. Cliquez sur l'icône "Responsive" à côté de la valeur "Width" pour passer en mode "Mobile View".
3. Réglez la largeur à "100%" (pour que l'image/module remplisse la largeur de l'écran du téléphone et évite les espaces blancs sur les côtés), ou ajustez-la selon vos besoins (par exemple, 90% pour laisser une petite marge).

prendre noteSi la taille de l'image elle-même est trop petite, le fait de la régler sur 100% la rendra floue. Il est donc recommandé de préparer à l'avance des images à haute résolution (d'une largeur d'au moins 1000 px).

3. espacement et marges : éviter l'entassement des contenus

L'espace disponible sur l'écran d'un téléphone portable étant limité, l'espacement entre les modules est trop grand pour gaspiller de l'espace, et trop petit pour donner l'impression d'être encombré :

1. Sélectionnez un module (par exemple, un bouton, un paragraphe) et allez dans le panneau "Avancé" sur la droite.
2. Localisez la "marge extérieure" (la distance entre le module et les autres éléments) ou la "marge intérieure" (la distance entre le contenu à l'intérieur du module et la bordure) et cliquez sur l'icône "Responsive" à côté de la valeur.
3. Passez en mode "Affichage mobile" et réduisez les valeurs (par exemple, modifiez la marge extérieure supérieure de 50 à 20 px pour rendre le module plus compact).

finesse: Appuyer sur la touche et la maintenir enfoncée Ctrl pour sélectionner plusieurs modules en même temps et ajuster l'espacement des lots pour une plus grande efficacité.

Étape 3 : Ajustement de la mise en page (optimisation de la disposition des colonnes pour les téléphones mobiles)

Si votre page d'accueil utilise une "mise en page à plusieurs colonnes" (par exemple, 3 colonnes de descriptions de services, 2 colonnes de combinaisons graphiques), elle risque d'être surchargée sur les téléphones mobiles et doit être remplacée par une seule colonne :

1. Localisez la section contenant plusieurs colonnes (cliquez sur la boîte bleue en pointillés à l'extérieur du module pour sélectionner toute la section).
2. Allez dans le panneau "Disposition" sur la droite et trouvez le paramètre "Colonnes" (par exemple, actuellement "3 colonnes").
3. Cliquez sur l'icône "Responsive" à côté de la valeur "Columns" pour passer à l'affichage mobile.
4. Changez le nombre de colonnes en "1 colonne", à ce moment-là, il sera automatiquement empilé en une seule colonne sur le téléphone portable, et le contenu sera plus clair.

exemple typiqueVoici un exemple : 3 colonnes de produits sur les ordinateurs, 2 colonnes sur les tablettes et 1 colonne sur les téléphones portables, ce qui permet d'utiliser le grand espace de l'écran et d'assurer la lisibilité du petit écran.

Étape 4 : Masquer les éléments inutiles (pour les petits écrans)

Certains éléments qui enrichissent la page sur un ordinateur mais qui seraient superflus sur un téléphone portable (par exemple, des icônes décoratives complexes, un texte explicatif volumineux) peuvent être masqués sur un téléphone portable :

1. Sélectionnez le module que vous souhaitez masquer et allez dans le panneau "Avancé" sur la droite.
2. Faites défiler la page jusqu'aux paramètres "Responsive" et trouvez l'option "Hide on mobile devices" (ou cochez respectivement "Hide on desktop" et "Hide on tablet").
3. En cochant la case "Masquer sur les appareils mobiles", le module disparaîtra automatiquement dans la vue mobile et n'affectera pas l'affichage de l'ordinateur et de la tablette.

Scénarios applicablesLes points forts de ce site sont les suivants : icônes latérales décoratives, formulaire de contact spécifique à l'ordinateur (qui peut être remplacé par un formulaire plus propre sur les téléphones portables).

Étape 5 : Prévisualisation et test (étape clé)

Une fois la configuration terminée, veillez à la tester sur un appareil réel (ou à la vérifier de manière critique avec la fonction de prévisualisation d'Elementor) :

1. Aperçu dans ElementorCliquez sur l'icône "Desktop→Tablet→Mobile" à tour de rôle et faites défiler les pages pour vérifier chaque module :
   • Le texte est-il affiché dans son intégralité (pas de troncature, pas de chevauchement) ?
   • Les images sont-elles claires et remplissent-elles l'écran (pas d'étirement, pas de distorsion) ?
   • Les boutons sont-ils suffisamment grands (au moins 44×44px sur les téléphones portables pour faciliter le clic) ?
2. Essais d'équipements réelsScannez le "code QR" situé en haut d'Elementor avec votre téléphone portable, ouvrez la page sur votre propre téléphone portable et manipulez les boutons et les champs de saisie pour vous rendre compte de la fluidité du glissement.
3. Résolution des problèmes courants：
   • Si les sauts de ligne du texte sont déroutants : réduisez la taille de la police sur le téléphone portable ou augmentez la largeur du module.
   • Si l'image est déformée : Réglez "Adaptation à l'objet" sur "Remplacer" sur le téléphone portable (Image→Style→Adaptation à l'objet).
   • Si le bouton est trop petit : augmentez la "marge intérieure" du bouton sur les téléphones mobiles (au moins 15 px pour le haut et le bas, 20 px pour la gauche et la droite).

Principes du Responsive Design pour les débutants

1. le mobile d'abordConception : Conçue pour le téléphone portable avant d'être étendue à l'ordinateur (afin d'éviter des modifications radicales à un stade ultérieur).
2. Moins, c'est plusLes téléphones portables : l'espace disponible sur l'écran des téléphones portables étant limité, seul le contenu essentiel est conservé et les éléments redondants sont supprimés.
3. cohérenceLes couleurs et les styles de police sont cohérents d'un appareil à l'autre afin d'éviter toute confusion chez les visiteurs.
4. inspection régulièrePour plus d'informations, veuillez vous référer à la page suivante : Passez à la vue mobile après chaque ajout de module pour confirmer que l'affichage est correct.

Grâce à ces étapes, votre site web s'affichera de manière professionnelle sur les ordinateurs, les tablettes et les téléphones portables. Le responsive design peut sembler compliqué, mais après quelques opérations avec Elementor, vous réaliserez qu'il suffit d'ajuster quelques paramètres clés pour les différents appareils afin de résoudre le problème d'affichage 90%. Pratiquez davantage, testez plus, et vous le maîtriserez bientôt !