Su guía simple para los estilos globales de WordPress y las variaciones de estilo global
Publicado: 2025-03-24Tabla de contenido
Con esta publicación, continuamos nuestra serie de edición del sitio. Hoy, estamos profundizando en los estilos globales de WordPress. Global Styles es una característica relativamente nueva en WordPress introducida con la edición completa del sitio. Usando un solo conjunto de reglas de estilo, este sistema permite establecer y controlar la estética y el diseño general del sitio.
Con los estilos globales de WordPress, puede establecer una tipografía global, colores y diseños de una sola interfaz en lugar de modificar estilos para bloques o páginas individuales. La interfaz Global Styles ha reemplazado el personalizador y ahora es la forma principal de personalizar los estilos en los temas de Bloque de WordPress.
La evolución de la personalización de WordPress: un viaje desde el personalizador hasta los estilos globales
Si eres un principiante de WordPress, puede ser interesante para ti ver una línea de tiempo de hitos clave de WordPress hacia personalizaciones más poderosas:
- WordPress 3.4, 2011: Personalización temprana con el personalizador
WordPress introdujo el personalizador en la versión 3.4, que se lanzó en 2011. Esta herramienta le dio a los usuarios una vista previa en vivo de los cambios de diseño, lo que les permite ajustar elementos básicos como colores, fuentes y opciones de diseño. Si bien era una herramienta poderosa para la personalización en ese momento, el personalizador todavía estaba limitado en sus capacidades. - WordPress 5.0, 2018: El cambio a WordPress Full Site Editing (FSE)
El editor de bloques de Gutenberg se lanzó en 2018 con el lanzamiento de WordPress 5.0. Esta importante actualización permitió a los usuarios editar todo su sitio utilizando bloques, desde encabezados hasta pies de página. Este cambio abrió nuevas capacidades de diseño del sitio, pero destacó la necesidad de una herramienta de personalización más avanzada. Considere este período como el comienzo del cambio hacia la edición del sitio completo. - WordPress 5.9, 2022: Introducción de los estilos globales de WordPress
Finalmente, WordPress 5.9 introdujo los estilos globales como parte de las características de edición del sitio completo. Usando esta nueva interfaz, los usuarios pueden administrar la tipografía, los colores, los diseños y los estilos de bloqueo a nivel mundial. Global Styles reemplazaron el personalizador para los temas de bloque, y su objetivo principal era centralizar todos los controles para que los usuarios pudieran mantener fácilmente un aspecto cohesivo en sus sitios. - WordPress 6.0+, 2023 y posterior: los estilos globales como el nuevo estándar
Por WordPress 6.0, implementado en 2023, los estilos globales se habían convertido en el estándar para personalizar los temas de bloque. Todas las mejoras a los controles de tipografía, las opciones de gradiente y la configuración de diseño avanzado proporcionaron aún más soporte para la personalización en todo el sitio.
Global Styles ahora se ha convertido en una verdadera piedra angular de la experiencia de diseño de WordPress, ya que ofrece a los usuarios una forma confiable de modificar la apariencia de su sitio con un esfuerzo mínimo. Antes de sumergirnos en los estilos globales con más detalle, repasemos algunos requisitos básicos.
En consecuencia, para acceder a los estilos globales de WordPress, necesitará WordPress 5.9 o más. En esta publicación, usaré WordPress versión 6.7.2. Si está utilizando una versión diferente, puede notar algunas diferencias en la interfaz y la funcionalidad.
En segundo lugar, debes usar un tema de bloque. En este tutorial, usaré Prime, un tema de inicio de WordPress Free MotoPress que admite plenamente la edición del sitio completo. Puede descargar Prime desde nuestro sitio web oficial o en wp.org.
Encontrar estilos globales
Navegue a la apariencia> Editor en su menú de administración para localizar la configuración de los estilos globales. Espere a que se cargue la pantalla principal, luego seleccione la página que aparece. Haga clic en el icono de los estilos en la esquina superior derecha, que se asemeja a un círculo medio lleno.
Esto abrirá el panel Global Styles para su sitio web. Luego haga clic en el icono Editar estilos (lápiz) para abrir una lista de elementos personalizables, que incluyen tipografía, colores, fondo, sombras, diseño y bloques.
Algunos temas, como Prime o Twenty Veinticinco, incluyen diferentes variaciones de estilo. Piense en las variaciones de estilo como un patio de recreo.
Estos le permiten experimentar con varias fuentes, colores, configuraciones de tipografía, espaciado, estilos de bloque y más. Las variaciones de estilo son versiones alternativas de su tema de bloque, puede intercambiarlas fácilmente por un aspecto nuevo. Si no ve la opción de estilos de navegación, no se preocupe, todavía tendrá acceso a paletas de colores predefinidas creadas por el autor del tema.
Tipografía
Ahora, echemos un vistazo más de cerca a la tipografía. Haga clic en el menú de tipografía para acceder a la configuración de fuentes. Puede:
- Cambie la fuente usando una lista.
- Ajuste el tamaño de la fuente, la apariencia y la altura de la línea, con una vista previa en vivo de sus cambios.
- Restablezca cualquier modificación utilizando el menú de tres puntos.
Cada elemento le permite cambiar la fuente utilizando una lista de opciones en su tema. También puede modificar la configuración de tipografía, incluido el tamaño de la fuente, la apariencia y la altura de la línea. La principal ventaja es que obtienes una vista previa en vivo de tus cambios a medida que los hace. Si no le gusta el resultado, abra el menú de tres puntos y restablezca los cambios.
Para los enlaces, encontrará la misma configuración que para el texto pero con una opción de decoración adicional, que incluye Strikethrough y subrayar.
Algunos elementos tienen configuraciones adicionales. Por ejemplo, los encabezados le permiten seleccionar el nivel de encabezado. El espacio de letras te permite controlar el espacio entre los personajes. Además, puede elegir transformaciones de texto como todos los límites (AB), la primera letra capitalizada (AB) y todos los minúsculas (AB).
A continuación, puede ajustar la tipografía en busca de subtítulos, que se usan en la imagen y los bloques de cubierta.
Por último, pero no menos importante, botones. Dado que los botones incluyen texto, puede ajustar fácilmente su configuración de tipografía al igual que cualquier otro elemento basado en texto.
Bandera
Para personalizar los colores de su sitio, abra el panel de colores. La primera opción que verás es la paleta: hazte clic en ella. El panel de la paleta se abre a sólidos de forma predeterminada, donde puede editar el tema y los colores predeterminados o agregar los personalizados. Los colores del tema son definidos por el diseñador de su tema y se usan en todo su sitio. Los colores predeterminados aparecen en la configuración del color del bloque al editar páginas y publicaciones.
También puede agregar colores personalizados a la paleta de su sitio y hacerlos disponibles en su configuración de color. Para agregar uno, haga clic en el botón + en Custom, luego elija un tono con el selector de color o ingrese un valor HEX, RGB o HSL. Por defecto, el nuevo color está etiquetado como Color 1, pero puede cambiar el nombre de él haciendo clic en él. Haga clic en Hecho para guardar.
Si no está satisfecho con su color personalizado, retírelo y comience de nuevo.
También puede cambiar a la pestaña Gradiente para agregar opciones de color de gradiente. Al igual que los colores sólidos, puede establecer un tema, predeterminados y gradientes personalizados. Al hacer clic en un gradiente, abre un control deslizante que le permite personalizarlo. Los gradientes lineales crean una transición suave entre dos colores a lo largo de una línea recta. Los gradientes radiales comienzan desde el centro y se extienden hacia afuera. Si selecciona Lineal, puede ajustar manualmente el ángulo de gradiente ingresando un valor en el cuadro.
Otra opción es el filtro Duotone, un efecto de color de dos tonos, los usuarios pueden aplicar a las imágenes en la imagen y los bloques de portada.
Una vez que haya terminado de configurar sus paletas, podemos volver al panel de colores. Debajo de la sección de la paleta, encontrará opciones para editar los colores para:
- Texto
- Fondo
- Campo de golf
- Subtítulos
- Botones
- Encabezados
El fondo y las sombras
¿Sabía que agregar una imagen de fondo a su sitio web es otra opción? Simplemente haga clic en el botón "Agregar imagen de fondo" y cargue la imagen o elija una de la biblioteca de medios. Por supuesto, puede hacer clic en Restablecer para deshacerse de todo a la vez.
Luego procedemos a las sombras. Para una variedad de piezas de contenido y combinaciones de contenido, una sombra de caída es una excelente herramienta de diseño para crear un aspecto más dinámico. Con esta sección a su disposición, puede modificar los estilos predeterminados o hacer sus sombras personalizadas. Puede darles los nombres propios después de haber realizado las modificaciones.
Disposición
El panel de diseño le permite controlar el ancho del área de contenido de su sitio.
Bajo dimensiones, puede usar los campos de entrada para ajustar el ancho. El contenido controla el ancho de los bloques cuando la alineación se establece en "Ninguno". El ancho ancho ajusta el ancho de los bloques cuando la alineación se establece en "ancho".
También puede modificar el relleno, que es el espacio alrededor de los elementos. Hay cuatro áreas de acolchado: arriba, abajo, izquierda y derecha. Por defecto, estos están vinculados, lo que significa que cualquier ajuste se aplica a los cuatro lados por igual. Al hacer clic en el icono de bloqueo, le permite ajustarlos por separado.
El ajuste de espaciado de bloques controla el espacio entre los bloques anidados. Si todo se ve bien, puede dejar estas configuraciones como están.
Cambiar el estilo de bloques específicos
Finalmente, veamos bloques. La sección de bloques enumera todos los bloques disponibles que puede personalizar en todo el sitio. Cualquier cambio que realice aquí afectará todas las instancias de ese bloque en su sitio a menos que haya personalizado un bloque individual por separado. Las opciones de personalización disponibles varían según el bloque. Explore cada uno para ver qué se puede modificar.
Cómo revisar sus cambios
Para revisar sus cambios, use el libro de estilo WordPress (icono de los ojos). La ventana de vista previa del libro de estilo contiene seis pestañas, que muestra cómo los diferentes bloques se ocuparán de aplicar sus cambios de estilo global. Hacer clic en una vista previa de bloque lo lleva directamente a los estilos globales de ese bloque para una mayor personalización.
Personalizaciones adicionales
Si tiene habilidades CSS y desea hacer ajustes adicionales, abra la ventana CSS:
- Haga clic en el menú de tres puntos en la esquina superior derecha.
- Seleccione CSS adicional.
- Ingrese su CSS personalizado en el cuadro provisto.
Esta característica permite un control aún más fino sobre sus estilos.
Restablecer a los estilos predeterminados
Si desea volver a la apariencia predeterminada, use la función de revisiones:
- En la configuración de los estilos, haga clic en el menú de tres puntos en la esquina superior derecha.
- Seleccione Restablecer estilos.
Una vez que se han guardado los cambios, la opción de revisiones le permite restaurar las versiones anteriores de la configuración de sus estilos.
¿Qué hay de nuevo en WordPress 6.7?
Ahora, como bono, exploremos rápidamente algunas mejoras a los estilos globales disponibles con WordPress 6.7 o más.
Tocando herramientas de diseño, ya que la versión 6.7, más bloques ahora admiten bordes, fondos, sombras y controles de espaciado. Por ejemplo, con el bloque de grupo ahora tiene acceso a los efectos de sombra, y el bloque de contenido admite imágenes de fondo.
Otra gran mejora es la capacidad de crear, editar y eliminar presets de tamaño de fuente personalizados directamente dentro de los estilos globales. Esta nueva característica lo ayudará a mantener una tipografía constante en su sitio web para mantener un diseño cohesivo.
Además, hay nuevos controles de UI. Para ser más precisos, los usuarios ahora pueden agregar imágenes de fondo a más bloques, incluidos versos, cotización y contenido publicado. Esto significa que puede crear secciones visualmente atractivas incluso sin aplicar CSS personalizado. Además, WordPress 6.7 presenta una opción de fondo fija, perfecta para crear un efecto similar a la paralaje (un efecto que permite que las imágenes permanezcan en su lugar mientras los usuarios se desplazan).
Con estas actualizaciones, WordPress 6.7 hace que sea simple crear sitios web bien diseñados sin tener que escribir ningún código.
Conclusión en WordPress Global Styles
En resumen, Global Styles in WordPress es una verdadera actualización para los usuarios que buscan crear un aspecto consistente y profesional en su sitio sin ensuciarse las manos. Los estilos globales de WordPress le permiten controlar la tipografía, los colores, el diseño y los estilos de bloque en un solo lugar. Puede cambiar entre variaciones de estilo, ajustar elementos individuales y agregar colores o gradientes personalizados. Si lo necesita, puede restablecer los cambios o restaurar la configuración anterior utilizando revisiones de estilo. ¡Así que comparta su experiencia trabajando con Global Styles WordPress con nosotros y presione como si le pareciera útil esta publicación!
Preguntas frecuentes
¿Dónde puedo encontrar la configuración de los estilos globales en WordPress?
¿Qué puedo personalizar con los estilos globales?
¿Qué pasa si no veo la opción 'Examinar estilos'?
Algunos temas, como veinte veinticuatro, ofrecen variaciones de estilo, lo que le permiten cambiar entre diferentes presets de diseño. Si esta opción no está disponible, aún tendrá acceso a paletas de colores predefinidas establecidas por el desarrollador de temas.
¿Puedo restablecer mis estilos globales si no me gustan los cambios?
¡Sí! Puede restablecer la configuración individual utilizando el menú de tres puntos o restaurar versiones anteriores utilizando revisiones de estilo. Si es necesario, también puede restablecer todo al valor predeterminado.
¿Cómo aplico CSS personalizado si los estilos globales no son suficientes?
Haga clic en los tres puntos en la esquina superior derecha del panel de estilos y seleccione CSS adicional. Aquí, puede ingresar CSS personalizados para ajustar aún más el diseño de su sitio.
¿Cómo puedo aplicar CSS personalizado para refinar aún más el diseño de mi sitio con los estilos globales?
Si conoce CSS, puede acceder a la opción "CSS adicional" en la interfaz Global Styles. Esto le permite agregar estilos personalizados además de los proporcionados en la configuración estándar.
¿Cómo pruebo mis cambios antes de publicarlos en los estilos globales?
Después de aplicar sus actualizaciones, puede obtener una vista previa de sus cambios de diseño utilizando el libro de estilo, que muestra cómo se verán diferentes bloques. Esto le permite ver el efecto completo antes de finalizar sus ediciones.