Le constructeur Elementor permet un débogage responsive séparé pour les tablettes et les téléphones mobiles, ce qui permet de mieux répondre à l'expérience des utilisateurs sur différents appareils.
Aller à la page et la modifier visuellement avec Elementor
- Accès à l'édition visuelle d'ElementorPour accéder rapidement au mode d'édition visuelle de la page en cours, cliquez sur le bouton "Edit with Elementor" dans la barre de navigation noire située en haut de la page.
- Passer en mode réactifVous pouvez passer en mode réactif en cliquant sur l'icône en bas à gauche, comme indiqué ci-dessous.
- Passer d'un mode de navigation sur tablette à un mode de navigation sur mobile
Après avoir basculé vers la navigation mobile, cliquez sur le module correspondant pour modifier la taille de la mise en forme du texte dans le module, la taille des marges, etc.
1. modifier la taille du texte sur les téléphones portables
Modifier la taille du texte se trouvent dans le module sous la colonne Style Typographie (police), modifier la valeur Taille permet de modifier la taille du texte.
2. modifier la largeur des colonnes des téléphones portables
Cliquez sur l'icône dans le coin supérieur gauche (comme indiqué ci-dessous), modifiez l'écart entre les colonnes sous la colonne Disposition pour modifier la largeur et la taille des colonnes, le ratio, etc.
3. modifier l'espacement interne et externe des téléphones mobiles
Dans la colonne Avancé, vous pouvez modifier les marges, comme le montre la figure ci-dessous, Marge est la marge extérieure, Padding est la marge intérieure, généralement les téléphones portables doivent modifier la valeur de Padding, afin que la lecture soit plus compacte.
4. modification de la méthodologie de la colonne des produits
Voici la modification du module d'appel de produit (module woo-Products), cliquez sur le module pour l'éditer.Contenudans le cadre de laColonneIl s'agit du nombre de colonnes dans l'affichage du produit, et il est plus approprié de le remplacer par 2 pour les mobiles.
Modifier la taille du titre du produit sur la page mobile :frappe (sur le clavier)Style Colonne sous le contenu, trouver le titre sous la typographie peut modifier la taille du titre
5. masquer l'affichage de la page mobile
Dans Modifier le module, dans la section Avancé, Réactif, cliquez sur Masquer sur mobile pour masquer l'affichage du module sur mobile.
6. enregistrer les modifications
Comme indiqué ci-dessous, cliquez sur le coin inférieur gauche de l'écranPublierVous pouvez enregistrer les modifications
7. retourner rapidement au front office et au back office
Cliquez sur les icônes suivantes pour un retour rapide
Résumé :
En accédant au mode d'édition visuelle du front-end d'Elementor, vous pouvez passer en mode responsive et ajuster la taille du texte, la largeur des colonnes, l'espacement intérieur et extérieur, et le nombre de colonnes de produits pour les tablettes et les mobiles respectivement. En outre, des modules spécifiques peuvent être masqués si nécessaire pour garantir la meilleure expérience possible aux utilisateurs sur différents appareils. L'article fournit des étapes spécifiques et des conseils pratiques pour vous aider à réaliser facilement l'optimisation on-page.
