La herramienta avanzada de personalización de color de Pixpa le permite mejorar el atractivo visual de su sitio web al aplicar colores sólidos, degradados lineales y degradados radiales a sus secciones y texto.
Esto le proporciona un alto nivel de control creativo al diseñar el fondo, los encabezados y el texto de los párrafos de su sitio.
En este artículo hablaremos de:
- Acceder al panel de color
- Opciones de tipo de color
- Paradas de gradiente
- Control deslizante de rotación
- Opciones de forma de degradado radial
- Selector de color y entrada de código hexadecimal
- Control deslizante de opacidad
- Dónde puedes usar las opciones de color
Acceder al panel de color
- Pase el cursor sobre la sección que desea editar y haga clic en Editar sección Opción (1).
- En la sección Color En esta pestaña, verá la opción para cambiar el color de fondo, el color del texto del encabezado y el color del texto del párrafo.
- Haga clic en el elemento Color personalizado (2) opción junto al elemento que desea editar.
- Una nueva encuesta Se abrirá una ventana emergente desde donde podrás personalizar el color del elemento seleccionado.
Opciones de tipo de color
En la parte superior del panel de color, verás tres opciones:
- Sólido: Aplique un solo color uniforme al área seleccionada. Esta es una opción sencilla y limpia para quienes desean un bloque de color consistente.
- Gradiente lineal: Crea una fusión gradual entre dos o más colores a lo largo de una línea recta. Puedes controlar la dirección de este degradado con el control deslizante de rotación.
- Gradiente radial: Produce una transición de color circular que irradia desde un punto central. Es ideal para efectos de foco o para dirigir la atención a una zona específica.
Paradas de gradiente
Cuando seleccionas cualquiera de los dos Lineal or Gradiente radialVerás una barra de color horizontal donde podrás administrar tus paradas de degradado:
- Cada parada de gradiente (representado por un icono de gota) marca un punto de color en el degradado.
- Haga clic en una parada para cambiar su color utilizando el selector de color o ingresando un código hexadecimal.
- Puede añadir varias paradas para crear transiciones suaves de varios colores.
- Haga clic en el botón pequeño icono de “x” debajo un tope para quitarlo.
Control deslizante de rotación (solo degradado lineal)
Para degradados lineales, use el control deslizante de rotación para cambiar el ángulo del degradado. Esto le permite rotar la dirección del color de horizontal (0°) a vertical (90°) o cualquier ángulo personalizado de hasta 360°.
- Una vista previa del degradado se ajustará en tiempo real a medida que mueva el control deslizante.
- El ángulo actual se muestra en un campo numérico junto al control deslizante (por ejemplo, 270°).
Opciones de forma de degradado radial
Cuando seleccionas Gradiente radial (1), aparecerán dos opciones de forma debajo de la vista previa del degradado:
- Elipse: Produce un degradado radial alargado con estiramiento horizontal o vertical. Resulta útil para una cobertura de degradado más amplia o diseños asimétricos.
- Círculo: Esto crea un degradado perfectamente circular que irradia desde el centro (o el punto focal seleccionado). Ideal para fondos con efecto de foco o para atraer la atención hacia un elemento central.
Selector de color y entrada de código hexadecimal
Ya sea que esté trabajando con un color sólido o con degradados individuales:
- Utilice el selector de color Elegir un color visualmente.
- Alternativamente, ingrese un código de color hexadecimal manualmente (por ejemplo, #c14dff) para un control de color preciso.
Si está utilizando un degradado, seleccionar un punto le permitirá definir su color específico utilizando esta herramienta.
Control deslizante de opacidad
En la parte inferior del panel, encontrará un control deslizante para controlar la opacidad:
- Establezca el nivel de transparencia del color seleccionado o el punto de degradado.
- Un valor de 1 significa completamente opaco, mientras que 0 es completamente transparente.
Esto es útil para crear efectos visuales en capas o superposiciones de fondos suaves.
Dónde puedes utilizar estas opciones de color
Estas herramientas de color avanzadas están disponibles en las siguientes áreas:
- Antecedentes de la sección
- Texto de encabezado
- Texto de párrafo
Cada área tiene su propia pestaña de color, por lo que puedes diseñar diferentes componentes de forma independiente para una mayor flexibilidad visual.