Comment rendre l'affichage plus convivial sur mobile lorsqu'il y a trop de champs ? Conseils sur le défilement et la réduction expliqués

Lors de la création de sites web avec WordPress, en particulier dans des scénarios tels que les pages de produits, les pages de soumission, les pages de profil, etc., il est souvent nécessaire d'afficher un grand nombre deChamps personnalisés. Ces champs sont généralement corrects lorsqu'ils sont affichés sur un ordinateur de bureau, mais sur les téléphones portables, les problèmes suivants peuvent survenir :

• Le contenu est trop long et prend trop de temps à glisser
• Les champs sont densément empilés et les informations sont difficiles à lire.
• Les pages sont confuses et l'expérience visuelle est dégradée

Pour résoudre ces problèmes, vous pouvez utiliser des méthodes d'affichage simples et efficaces pour rendre la structure du champ dans le terminal mobile plus claire et plus facile à utiliser. Voici quelques techniques courantes de défilement et de pliage qui ne nécessitent pas de code et conviennent aux opérateurs novices.

I. Pourquoi faut-il optimiser l'affichage des champs pour les mobiles ?

• Des écrans de téléphone portable plus petits avec des zones de contenu limitées

• Les utilisateurs s'appuient davantage sur des gestes et des glissements, et la structure est plus claire et plus facile à lire.
• Un contenu trop volumineux doit être présenté par morceaux afin d'éviter l'accumulation d'informations.

II. aperçu général des méthodes de présentation génériques

Vitrine	Scénarios d'utilisation	Si un code est requis
zone de pliage	Regroupement des champs, contenu de l'affichage succinct	bouché
Disposition des onglets	Utilisé lorsque les types de champs sont clairement catégorisés	bouché
Formulaires multi-pages	Lors de la soumission ou du remplissage d'un grand nombre de champs de type	bouché

III. regroupement des champs de l'affichage de la zone réduite

Convient à l'affichage des paramètres du produit et des informations complémentaires,FAQetc.

Utiliser le "bloc de détails" dans l'éditeur Gutenberg

• Ouvrir la pageéditeur (logiciel)Cliquez sur "+" pour ajouter un bloc.
• Rechercher "détails" et insérer

• Fixer le titre au nom du groupe de champs
• Insérer des champs dans la zone de contenu (par ex. [acf field="price"])

Cette approche peut être réduite par défaut sur mobile et développée pour afficher les détails lorsqu'on clique dessus.

IV. utilisation de tabulations pour séparer les types de champs

Il convient de diviser les champs en catégories telles que "Introduction", "Spécifications" et "Commentaires".

Moyens de réalisation :

• Les plugins qui prennent en charge les onglets, tels que Spectra, peuvent être installés dans Gutenberg,Blocs Kadence

• Utiliser le composant Tabs dans Elementor pour regrouper les champs dans différents onglets

Cette approche permet de mieux hiérarchiser les pages et d'éviter un flot de contenus empilés les uns sur les autres.

V. Utiliser le bouton Développer pour masquer les champs secondaires

Adapté à l'affichageRésumé de l'articleLe contenu de la page d'accueil, le profil de l'utilisateur, la description du produit et d'autres éléments du champ.

Les étapes :

• Insérer le contenu du champ, définir la hauteur maximale (par exemple, n'afficher que les deux premières lignes)

• Insérer "En savoir plus" ou "Développer" ci-dessous.boutons

• L'utilisateur clique pour développer le contenu complet

Cela peut être fait dans Elementor en utilisant le bouton "Toggle Visibility" ; Gutenberg peut être configuré avec des plugins tiers ou manuellement.

VI. pagination dans le formulaire pour afficher les groupes de champs

Idéal pour les pages qui nécessitent un grand nombre de champs à remplir, comme les formulaires d'inscription, les formulaires de soumission, les questionnaires, etc.

témoignagesformulaire (document)Le plugin prend en charge la pagination :

• Fluent Forms (gratuit)

• Formulaire de contact 7(en liaison avec le plug-in en plusieurs étapes)

Diviser les champs en plusieurs étapes, en affichant une petite quantité de contenu par page, ce qui facilite le processus de remplissage.

VII. résumé

Lorsqu'une page contient un grand nombre de champs, il est essentiel qu'ils soient présentés correctement sur les appareils mobiles. Vous pouvez :

• Réduire la quantité d'informations initiales à l'aide de blocs réduits
• Répartir le contenu des champs sur les onglets
• adoptionfenêtre à onglets (dans un navigateur web, etc.)ou le bouton "expand" pour optimiser la structure de l'information

Toutes les méthodes ci-dessus peuvent être utilisées sans écrire de code. Si vous utilisez un thème spécifique (par exemple Astra, Blocksy), vous pouvez également incorporer les outils de visualisation fournis par le thème pour obtenir ces effets d'affichage. Avez-vous besoin de moi pour vous aider à concevoir une série d'exemples d'affichage de champs ? N'hésitez pas à poser des questions.

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.