¿Cómo mostrar más amigablemente en móvil cuando hay demasiados campos? Consejos para desplazarse y contraerse explicados

Al construir sitios web con WordPress, especialmente en escenarios como páginas de productos, páginas de envío, páginas de perfil, etc., a menudo es necesario mostrar un gran número deCampos personalizados. Estos campos suelen mostrarse correctamente en ordenadores de sobremesa, pero en teléfonos móviles puede ocurrir lo siguiente:

• El contenido es demasiado largo y tarda demasiado en deslizarse
• Los campos están densamente apilados y la información es difícil de leer
• Las páginas son confusas y la experiencia visual se degrada

Para resolver estos problemas, puede utilizar algunos métodos de visualización sencillos y eficaces para que la estructura del campo en el terminal móvil sea más clara y fácil de manejar. He aquí algunas técnicas habituales de desplazamiento y plegado que no requieren código y son adecuadas para operadores principiantes.

I. ¿Por qué hay que optimizar la visualización de campos para móviles?

• Pantallas de móvil más pequeñas con áreas de contenido limitadas

• Los usuarios recurren más a gestos y deslizamientos, y la estructura es más clara y fácil de leer.
• Demasiado contenido debe mostrarse en trozos para evitar que la información se amontone

II. Visión general de los métodos genéricos de presentación

Escaparate	Escenarios de uso	Si se requiere código
área de plegado	Agrupación de campos, breve contenido de la pantalla	obstruido
Disposición de las pestañas	Se utiliza cuando los tipos de campo están claramente categorizados	obstruido
Formularios multipágina	Al enviar o rellenar un gran número de campos de tipo	obstruido

III. Agrupación de campos de visualización del área colapsada

Adecuado para mostrar parámetros de productos, información adicional,PREGUNTAS FRECUENTESetc.

Uso del "Bloque de detalles" en el editor de Gutenberg

• Abrir páginaeditor (software)Haga clic en "+" para añadir un bloque.
• Buscar "detalles" e insertar

• Establece el título con el nombre del grupo de campos
• Insertar campos en el área de contenido (por ejemplo [acf field="precio"])

Este enfoque puede contraerse por defecto en los móviles y expandirse para ver los detalles al hacer clic.

IV. Uso de tabuladores para separar tipos de campo

Conviene dividir los campos en categorías como "Introducción", "Especificaciones" y "Comentarios".

Formas de realización:

• Los plugins que admiten pestañas, como Spectra, pueden instalarse en Gutenberg,Bloques Kadence

• Utilice el componente Pestañas de Elementor para agrupar campos en diferentes pestañas.

Este planteamiento permite una jerarquía de páginas más clara y evita un torrente de contenidos apilados unos sobre otros.

V. Utilice el botón Expandir para ocultar los campos secundarios

Apto para exposiciónResumen del artículoPerfil del usuario, descripción del producto y otros campos de contenido.

Pasos:

• Insertar el contenido del campo, establecer la altura máxima (por ejemplo, mostrar sólo las 2 primeras filas)

• Inserte "Leer más" o "Ampliar" a continuación.botones

• El usuario hace clic para ampliar el contenido completo

Esto se puede hacer en Elementor usando el botón "Toggle Visibility"; Gutenberg se puede configurar con plugins de terceros o manualmente.

VI. Paginación en el formulario para mostrar los grupos de campos

Ideal para páginas que requieren rellenar un gran número de campos, como formularios de inscripción, formularios de envío, cuestionarios, etc.

testimoniosformulario (documento)El plugin admite la paginación:

• Fluent Forms (gratuito)

• Formulario de contacto 7(junto con el complemento de varios pasos)

Dividir los campos en varios pasos de página, mostrando una pequeña cantidad de contenido por página, lo que facilita el proceso de cumplimentación.

VII. Resumen

Cuando una página contiene un gran número de campos, es fundamental que se muestren correctamente en los dispositivos móviles. Es posible:

• Reducción de la cantidad de información inicial mediante bloques colapsados
• Distribuir el contenido de los campos en las pestañas
• adopciónventana de pestañas (en un navegador web, etc.)o ampliar para optimizar la estructura de la información

Todas las formas anteriores pueden realizarse sin escribir código. Si utilizas un tema específico (por ejemplo, Astra, Blocksy), también puedes incorporar las herramientas de visualización que proporciona el tema para conseguir estos efectos de visualización. ¿Necesitas que te ayude a diseñar un conjunto de ejemplos de visualización de campos? No dudes en seguir haciendo preguntas.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres