Comment utiliser Elementor pour le responsive design et l'optimisation des sites web WordPress ?

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.

Allez sur la page et utilisez Elementor pour l'édition visuelle

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

2. Passer en mode réactifVous pouvez passer en mode réactif en cliquant sur l'icône en bas à gauche, comme indiqué ci-dessous.

3. 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 (illustré ci-dessous), modifiez l'espace Colonnes sous la colonne Disposition pour modifier la largeur et la taille de la colonne, 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 suivante, Marge est la marge extérieure, Padding est la marge intérieure, généralement les téléphones mobiles 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.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.