Tutorial de personalización de estilos de GenerateBlocks: fuentes, colores, espaciado y diseño unificados

hacer uso de Biblioteca de plantillas GenerateBlocksDespués de crear una página, muchos usuarios desean realizar ajustes uniformes en los estilos de los módulos, como fuentes, colores, espaciado y anchura de los contenedores y otros contenidos. Este tutorial muestra el origen de los estilos de página con ejemplos, así como formas específicas de modificar los estilos de los botones, los colores de los encabezados, el espaciado entre párrafos y el ancho de los contenedores.

Resumen de la estructura del estilo de plantilla

Los estilos de la página proceden de tres niveles:

Estilos temáticos: por ejemplo, familia de fuentes, formato de los encabezados H1-H2, espaciado entre párrafos, etc.
Estilo de bloque local: sólo afecta a la configuración de un bloque concreto.
Estilo global (Estilo global): puede reutilizarse en varias zonas de la estación

Demostración de configuración de fuentes

Las siguientes fuentes son modificadas por el personalizador en la página de ejemplo:

Tipo de letra: Rubik
Fuentes de los titulares (H1 y H2): Roboto Mono

Todos los módulos que utilizan H1 y H2 heredan automáticamente los tipos y pesos de las fuentes. Por ejemplo, abra la biblioteca de plantillas y seleccione Héroe H1 mostrará la nueva configuración de fuentes.

Estilos de botones personalizados

Los botones de la página utilizan un botón denominado gbp-button-primary del estilo global. Modifíquelo como sigue:

Seleccione el bloque de botones y haga clic en el nombre del estilo gbp-button-primary

Vaya a la configuración del fondo y cambie el color del botón, por ejemplo, a un color más oscuro en la paleta.

Todos los botones de la página que utilicen este estilo se actualizarán de forma sincrónica, incluidas las nuevas plantillas que se inserten en el futuro.

Ajustar los colores de los botones

Haga clic en el bloque de botones para entrar en el "estado hover".

Cambia el color del hover en los ajustes de fondo (por ejemplo, tonos claros).

Después de guardar, el efecto hover tiene efecto inmediato

Configuración del color de la cabecera (H1 como ejemplo)

Para unificar los colores de todos los títulos H1, siga los pasos que se indican a continuación:

Localice cualquier elemento H1 y haga clic en su etiqueta de estilo global
Modifica el color de la fuente, por ejemplo, eligiendo el marrón rojizo u otros colores vivos.

El módulo Hero se ha insertado de nuevo y el color del título ha cambiado.

Este método es adecuado para la configuración general del estilo de la página y no requiere repetidos cambios manuales de estilo.

Controla la separación entre la parte superior e inferior de los bloques

La mayoría de los módulos de plantillas (excepto Hero) utilizan una plantilla denominada sección gbp El estilo global que controla los márgenes interiores superior e inferior con espaciado izquierdo y derecho, por ejemplo:

Espaciado superior e inferior: 7rem
Espaciado izquierda-derecha: 40px

Los ajustes se realizan del siguiente modo:

Abra módulos como Características, Galería, Precios, etc.
Haga clic en la pestaña Estilo sección gbp

Cambia el espaciado superior e inferior a 3rem

Todos los módulos que hacen referencia a este estilo se sincronizan y actualizan para obtener una página más compacta y clara.

Ajuste de la anchura máxima del contenedor

GenerarBloques Admite la configuración de la anchura máxima del contenedor. Si el tema actual es GenerarPrensaLa anchura predeterminada (por ejemplo, 1440px) puede establecerse en Diseño → Contenedores.

El procedimiento de configuración es el siguiente:

Comprobar los contenedores del módulo
Activar "Anchura máxima

Elija utilizar la configuración de anchura máxima del tema o GenerateBlocks.

Incluso si no utiliza GeneratePress, puede establecer el ancho adecuado en la configuración de GenerateBlocks.

Añadir estilos globales personalizados

También es posible añadir sus propios estilos globales a la estructura de plantillas existente. Por ejemplo, en el módulo de equipo añada un estilo exclusivotermosensibleNombre de la clase (por ejemplo .tarjeta), establezca el estilo y luego podrá reutilizarlo en varias páginas.

resúmenes

Esta sección muestra:

Los estilos de las plantillas proceden de tres niveles: temas, bloques locales y estilos globales
Estilos globales para estandarizar fuentes, colores, botones, espaciado entre bloques y anchuras.
Ajustar una vez, todo el módulo de la estación de respuesta sincrónica
Los estilos personalizados pueden ampliarse en función de las necesidades de la página para su posterior gestión unificada

Dominar estos métodos de estilización ayuda a crear diseños de página bien estructurados y coherentes. No dudes en seguir aprendiendo. GenerarBloques Contenido de la tutoría.

Actualizaciones recientes

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