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.
![Image [1] - Comment utiliser Elementor pour le responsive design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/04/2024042708545524.jpg)
Allez sur la page et utilisez Elementor pour l'édition visuelle
- 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.
![Image [2] - Comment utiliser Elementor pour le Responsive Design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052214411859.png)
- Passer en mode réactifVous pouvez passer en mode réactif en cliquant sur l'ic?ne en bas à gauche, comme indiqué ci-dessous.
![Image [3] - Comment utiliser Elementor pour le Responsive Design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052214434275.png)
- Passer d'un mode de navigation sur tablette à un mode de navigation sur mobile
![Image [4] - Comment utiliser Elementor pour le Responsive Design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052214453578.png)
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.
![Image [5] - Comment utiliser Elementor pour le Responsive Design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052214504561.png)
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.
![Image [6] - Comment utiliser Elementor pour la conception et l'optimisation de sites Web WordPress - Photonflux.com | Service professionnel de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/05/2024052214572570.png)
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.
![Image [7] - Comment utiliser Elementor pour le Responsive Design et l'optimisation des sites WordPress - Photonflux.com | Service professionnel de réparation de WordPress, portée mondiale, réponse rapide](http://gqxi.cn/wp-content/uploads/2024/05/2024052215000612.png)
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.
![Image [8] - Comment utiliser Elementor pour le Responsive Design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052215014548.png)
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
![Image [9] - Comment utiliser Elementor pour le Responsive Design et l'optimisation des sites WordPress - Photonflux.com | Professional WordPress Repair Service, Worldwide, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052215052632.png)
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.
![Image [10] - Comment utiliser Elementor pour le responsive design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052215070080.png)
6. enregistrer les modifications
Comme indiqué ci-dessous, cliquez sur le coin inférieur gauche de l'écranPublierVous pouvez enregistrer les modifications
![Image [11] - Comment utiliser Elementor pour le responsive design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052215094177.png)
7. retourner rapidement au front office et au back office
Cliquez sur les ic?nes suivantes pour un retour rapide
![Image [12] - Comment utiliser Elementor pour le responsive design et l'optimisation des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](http://gqxi.cn/wp-content/uploads/2024/05/2024052215120362.png)
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.
Lien vers cet article :http://gqxi.cn/fr/10376L'article est protégé par le droit d'auteur et doit être reproduit avec mention.





















![Emoji[chi]-Photonflux.com | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide](http://gqxi.cn/wp-content/themes/zibll/img/smilies/chi.gif)
[PHOTO]
Pas de commentaires