Volver al soporte Contenido y multimedia Bloques Ajustes de color

Ajustes de color

Muchos bloques del editor de WordPress contienen ajustes de color para que controles los colores del contenido. En esta guía te explicaremos cómo usar estos ajustes de color.

Acceder a los ajustes de color

Los ajustes de color están disponibles para:

Cuando hagas clic en un bloque, verás ajustes del bloque en la barra lateral de la derecha. Si no ves la barra lateral, es posible que tengas que hacer clic en el icono Ajustes de la esquina superior derecha para que aparezcan los ajustes. Este icono parece un cuadrado con dos columnas desiguales:

El icono Ajustes situado en el Editor con un fondo negro y la información sobre la herramienta "Ajustes" debajo.
Haz clic en el icono Ajustes para abrir los ajustes del bloque

En los ajustes del bloque, puedes encontrar los ajustes de color de inmediato. Otros bloques tienen los ajustes de color en la pestaña Estilos. La imagen de la derecha muestra un bloque Columna con los ajustes de color debajo de la pestaña Estilos, a los que se puede acceder haciendo clic en el icono circular.

Ten en cuenta que no todos los bloques incluyen ajustes de color. Los ajustes de color disponibles variarán en función del tema y del tipo de bloque.

Lo ajustes de un bloque Columna con los colores en la pestaña Estilos.
U ejemplo de ajustes de color en el bloque Columnas

Elegir un color sólido

Con el selector de color, puedes elegir un color para distintos elementos del bloque, como el texto, el fondo y los enlaces. Haz clic en cada una de las secciones numeradas correspondientes, tal y como se explica abajo:

Cómo establecer un color personalizado para el texto o los enlaces en el Editor de bloques utilizando el selector de color:
  1. Haz clic en el círculo de color para abrir el selector de color.
  2. Haz clic en cualquiera de los puntos con color para elegir una opción de color predefinida de tu paleta. Puedes escoger qué colores aparecen aquí usando Estilos.
  3. Haz clic en el área del cuadro para definir un color personalizado.
  4. Si ya tienes el código de un color personalizado que quieras utilizar, puedes pegarlo en el área del cuadro. Este código se actualizará de forma automática si eliges otro color a través de cualquiera de las demás opciones que se muestran arriba.
  5. Haz clic en el icono desplegable para elegir otro perfil de color. Puedes escoger entre Hex, RGB y HSL.
  6. Haz clic en el icono circular y arrástralo hacia la izquierda o la derecha para aumentar o disminuir la opacidad o transparencia del color elegido.
  7. Haz clic en el icono circular y arrástralo hacia la izquierda o la derecha para elegir otro color.
  8. Haz clic en el icono circular y arrástralo a cualquier parte dentro del área del cuadro para elegir otro tono del color actual.
  9. Haz clic para copiar el código del color actual en el portapapeles.
  10. Haz clic en los tres puntos y, después, en Restablecer para revertir las opciones de color que hayas elegido. De esta manera, el color volverá a ser el que venía por defecto con el tema.

Para restablecer tu elección de color, haz clic en el botón Borrar que aparece en la parte inferior derecha del área de selección de color.

Elegir un degradado

Con los degradados, puedes elegir dos o más colores para ir mezclándolos poco a poco. Haz clic en cada una de las secciones numeradas correspondientes, tal y como se explica abajo:

Cómo establecer un color personalizado para el fondo en el Editor de bloques utilizando el selector de color:
  1. Haz clic en el círculo de color para abrir el selector de color.
  2. Haz clic para establecer un color sólido para el fondo. Esto funciona de la misma manera que los colores para el texto y los enlaces que se explicaron anteriormente.
  3. Haz clic para establecer un degradado para el fondo.
  4. Haz clic en cualquiera de los puntos con color para elegir un degradado predefinido de tu paleta. Puedes cambiar los colores que aparecen aquí usando Estilos.
  5. Haz clic en cualquiera de los iconos circulares de la zona del cuadro para elegir un color personalizado para incluir en el degradado. También puedes hacer clic en cualquier otra sección del cuadro para añadir más colores.
  6. Haz clic en el icono desplegable para elegir el tipo de degradado. Puedes escoger entre Lineal y Radial:
    • Lineal crea un degradado entre los dos colores a lo largo de una línea recta.
    • Radial empieza desde el centro y se desplaza hacia los bordes.
  7. Edita el numero en el cuadro para elegir un valor personalizado para el ángulo del degradado. Esto solo aparece si has elegido el tipo de degrado Lineal.
  8. Haz clic en el puntito con color y arrástralo por el círculo para ajustar el ángulo del degradado. Este reemplazará automáticamente el valor del cuadro Ángulo que se indica arriba en el punto 7.

Para restablecer tu elección de color, haz clic en el botón Borrar que aparece en la parte inferior derecha del área de selección de color.

Elegir un filtro duotono

La opción del filtro duotono es un efecto de color en dos tonos que puedes aplicar a los bloques de imagen, como el bloque Imagen y Fondo. Piensa en una foto en blanco y negro, el concepto es el mismo, pero con cualquier combinación de colores que elijas. 

Para empezar, elige el botón Filtro duotono en la barra de herramientas o ajustes del bloque, y escoge uno de los ejemplos o establece tus propios colores:

Un gif que muestra una imagen en la que se hace clic en el editor y después, se aplican varios filtros duotono diferentes para ver cómo queda.

Para establecer tus propios colores, selecciona los puntos que están en las barras de color:

Una captura de pantalla que indica (en destacado) dónde se debe hacer clic, dentro de la configuración del filtro duotono, para establecer un color personalizado en la barra de color.

Para quitar el filtro duotono, haz clic en el botón Borrar que aparece en la parte inferior derecha del área de selección de color.

Copied to clipboard!