Consejos para implementar el diseño responsivo en el editor de bloques de WordPress

Hoy en día, al crear un sitio web con WordPress, muchas personas optan por utilizar la zonaeditor de bloques(también conocido como Editor Gutenberg) para editar páginas. Viene con módulos que no solo son fáciles de usar, sino que son cada vez más fuertes en términos de diseño, y el soporte para el diseño responsivo en particular es bastante bueno.

Este artículo examina lo que se puede hacer con la herramienta de WordPressEditor de bloquescómo crear diseños de página que se vean y funcionen bien en ordenadores, tabletas y teléfonos móviles.

Construir infraestructuras con bloques "grupo" y "columna

existeEditor de bloquesen el que los diseños responsivos comunes suelen crearse con la función Bloque "Grupo" (Grupo) responder cantando "Bloque "Columnas para hacerlo realidad.

"formulario" Los bloques pueden envolver varios elementos, lo que facilita la configuración uniforme de fondos, espaciado, etc. Y "columnas"Los bloques pueden crearse con estructuras de izquierda-derecha, tres columnas o más columnas divididas, perfectas para mostrar contenidos gráficos uno al lado del otro.

Por ejemplo, para hacer un módulo con una estructura izquierda-derecha:

• Añada un bloque "Columnas" y seleccione "Diseño a dos columnas".

• Poner una imagen a la izquierda, título + párrafo + botón a la derecha

En el móvil, estas dos columnas se convertirán automáticamente en la estructura superior e inferior sin procesamiento adicional, lo que resulta muy cómodo.

Utiliza "anchura", "espaciado" y "alineación".

El editor de bloques tiene parámetros de estilo asociados a cada bloque, y aprender a ajustar estos parámetros puede hacer que el diseño sea más flexible.

• Ajuste de la anchuraPuede elegir entre "Anchura del contenido", "Ancho", "Anchura completa" y otros modos. Si desea que el color de fondo se extienda por toda la pantalla, puede utilizar "Anchura completa".
• espaciado: El uso de "espaciado entre bloques" y "márgenes interiores" permite que haya suficiente espacio en blanco entre los elementos para que la página tenga un aspecto más cómodo.
• DisposiciónEl contenido de los bloques de grupo puede disponerse vertical u horizontalmente, así como centrarse, a la izquierda o a la derecha, para adaptarse a las distintas necesidades de visualización.

Estos ajustes no sólo afectan al aspecto visual, sino que también permiten adaptar mejor el contenido a las distintas pantallas.

Mejora la optimización móvil con "apilamiento", "ocultación"

A veces queremos mostrar más contenido en el ordenador, pero puede que no sea adecuado en el móvil. Algunos temas del editor de bloques admiten la función "ocultar un bloque en móvil o escritorio", que puede ser flexible.

Por ejemplo:

• Muestra una imagen de banner en tu escritorio y sustitúyela por una imagen vertical en tu móvil
• Oculte el texto redundante en el móvil y conserve sólo los mensajes clave
• Hacer los botones un poco más grandes y fáciles de pulsar en los teléfonos móviles.

Si utiliza un tema o plugin compatible con la función "mostrar condiciones", por ejemplo Kadence tal vez GenerarBloques plug-ins que también permiten un control más preciso.

No olvides probar diferentes dispositivos

Una vez completado el editor, asegúrate de ver los resultados en un dispositivo real. Aunque es posible previsualizar diferentes dispositivos en el editor, los resultados en un teléfono real reflejan mejor el problema.

Se recomienda comprobar la página abriendo una ventana de teléfono móvil, tableta o navegador de tamaño diferente:

• ¿Se carga correctamente la imagen?
• Si el contenido se alinea arriba o abajo
• ¿Son los botones lo suficientemente grandes como para poder pulsarlos fácilmente?
• ¿Las fuentes son claras y los párrafos demasiado densos?

Si la página tiene tablas, galerías de imágenes o vídeos, se recomienda utilizar la configuración "Adaptable" que proporciona el bloque para evitar el desbordamiento del contenido en pantallas pequeñas.

resúmenes

Hacerlo con el editor de bloques de WordPresspágina web adaptativaLa clave está en hacer un buen uso de los grupos, las columnas, el espaciado, la alineación y la ocultación. Mientras la estructura esté bien construida, la página se ajustará de forma natural tanto en móviles como en tabletas, sin necesidad de escribir código.

Mucha gente piensa que el uso de plug-ins avanzados o herramientas de visualización con el fin de hacer responsive, WordPress viene con el editor es lo suficientemente potente, siempre y cuando el uso familiar, también se puede hacer una página web hermosa y práctica.

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