¿Qué son los estilos globales?
Estilos globales Es una función importante de GemPages que te ayuda a mantener una apariencia uniforme en todas las secciones y elementos de tu sitio web. A medida que creas más páginas, mantener un diseño unificado puede ser un desafío. Con los Estilos Globales, puedes ahorrar tiempo y asegurar que tu sitio tenga un aspecto impecable y profesional.
In Versión 7Esta función se ha simplificado. Mientras que la versión 6 incluía varios ajustes preestablecidos, la versión 7 solo ofrece uno. Sin embargo, aún puedes definir estilos específicos (como la fuente, los colores y el espaciado predeterminados) y aplicarlos a tus páginas. Cualquier cambio que realices se actualizará automáticamente en todas las páginas vinculadas una vez que lo confirmes.
Cómo acceder a los estilos globales
Paso 1: Desde el Panel de Control de GemPages, seleccione su plantilla preferida para acceder a la Editor.
Paso 2: Dentro de la barra lateral izquierda del Editor, haga clic en el segundo ícono para acceder a los Estilos Globales.
¿Cómo personalizar estilos globales?
Color
Los estilos globales son compatibles 15 colores globales dividido en 5 categorías:
- Color del boton
- Color de Texto
- Color de Fondo:
- línea de color
- Acentuar el color
Estos colores se generarán a partir del tema publicado. Para reemplazar el color existente, haga clic en él y elija otro de la paleta.
Qué afecta cada opción de color:
- Color del boton: Se aplica a todos los botones creados con el elemento Botón (p. ej., Añadir al carrito o CTA). Controla el color de relleno principal y el estado al pasar el cursor, si está definido.
- Color del texto: Establece el color de fuente predeterminado para encabezados, párrafos y otros elementos basados en texto.
- Color de fondo: Establezca un color de fondo predefinido para los elementos compatibles, incluidos Carrusel, Código personalizado, Ventana emergente, Icono, Lista de productos (color del punto), Temporizador de cuenta regresiva, Banner principal, Lista de iconos, Lista avanzada, Marquesina, Descuento por paquete y Campo personalizado de producto.
- Color de linea: Afecta el color de las líneas divisorias, los bordes y los separadores en todo el diseño.
- Acentuar el color: Se utiliza para resaltar elementos interactivos como enlaces, íconos y efectos de desplazamiento.
Para cambiar un color, haga clic en el cuadro de color y seleccione un nuevo tono de la paleta. Los cambios se aplicarán automáticamente a todos los elementos vinculados a estas variables de color globales.
Administrador de fuentes
Los estilos globales proporcionan dos tipos de estilos de texto, a saber: Encabezado más antigua y párrafoPuede seleccionar su opción preferida en el menú desplegable y la fuente utilizada se toma de Google Fonts.
Tipografía
GemPages admite 6 tipos de Encabezado y 3 tipos de PárrafosEn la configuración del elemento, todas las configuraciones relacionadas con los estilos de texto se seleccionarán desde estas configuraciones de tipografía global.
Cuando instales GemPages, sincronizará la tipografía global con los estilos de texto de tus temas. La información de tipografía sincronizada desde tu tema de Shopify incluye Familia de fuentes, tamaño de fuente, altura de línea, grosor de fuente, estilo de fuente y Espacio entre letras:.
Espaciado
GemPages le permite sincronizar el espaciado en su sitio web configurando valores de espaciado globales. Hay Tipos 10 de espaciado global disponible, cada uno de los cuales se puede personalizar con valores para tres dispositivos: Escritorio, Tableta y Móvil.
La unidad predeterminada para el espaciado global son los píxeles (px). El espaciado global permite configurar márgenes, relleno, espaciado entre elementos o espacios entre columnas.
Ancho de fila predeterminado
Acerca del ancho de fila predeterminado
Una página suele estar formada por varias secciones, cada una de las cuales requiere un estilo distinto. Por ejemplo, secciones como Hero Banner suelen tener fondos y es posible que prefieras configurarlos con el ancho completo. Sin embargo, otras secciones tienen un ancho fijo para mantener el diseño y centrar el contenido en la pantalla. Por lo tanto, se requiere un valor universal para ajustar automáticamente el ancho de dichas secciones.
¿Cómo Usar?
- Ancho de fila
GemPages establece el valor de ancho predeterminado en 1200px para escritorio y 100% Para tabletas y dispositivos móviles, que es compatible con todas las plantillas actuales. No es necesario realizar ningún ajuste, ya que GemPages aplicará este valor automáticamente.
Sin embargo, si prefiere un valor de ancho diferente, puede ingresar un número en el cuadro. Por ejemplo, si ingresa 1000 px, el ancho predeterminado para las secciones o filas que no tengan el ancho completo será 1000 px.
- Relleno de página
Ingrese un número para el relleno que prefiera para las secciones/filas. Tenga en cuenta que este relleno no se aplicará a las secciones/filas de ancho completo.
Esquinas
GemPages le permite sincronizar las esquinas utilizadas en su sitio web configurando un valor de esquina global. Puede definir tres estilos de esquina: Pequeña, Media y Ancha. Simplemente haga clic en el lápiz Icono para ingresar el valor en píxeles.
Preguntas Frecuentes
¿Puedo desactivar los estilos globales en GemPages?
- Seleccione el elemento en el Editor
- Establezca manualmente sus valores de color, fuente, espaciado o borde en la pestaña Configuración del elemento
gracias por tus comentarios