Editor de Wix Harmony: diseñar elementos
En este artículo
- Seleccionar colores
- Trabajar con degradados
- Diseñar partes de elementos
- Diseñar el estado al pasar el cursor (botones y menús)
- Glosario de diseño
El panel Diseño te permite dar vida a tu visión creativa, detalle a detalle. Ya sea que quieras actualizar los colores, personalizar partes de un elemento o establecer estilos únicos para diferentes estados, tienes la flexibilidad necesaria para dar forma a cada aspecto de la apariencia de tu sitio.
Como cada elemento tiene sus propias opciones de estilo, verás diferentes ajustes según lo que estés editando.
¿Cómo empiezo?
Haz clic en un elemento y luego en el icono Todas las opciones de diseño en la barra de acciones.
en la barra de acciones.Seleccionar colores
Cada vez que haces clic en un círculo de color para elegir un color, accedes al selector de color. Aquí es donde puedes ver los colores de la marca de tu sitio, además de cualquier color personalizado que estés usando. Hay 3 formas de elegir un nuevo color:
Mueve los puntos en el esquema de color para encontrar el color deseado
Ingresa el código del color (por ejemplo #000000 para negro)
Haz clic en el icono Cuentagotas para obtener el color de un elemento de la página
para obtener el color de un elemento de la página
Trabajar con degradados
Los degradados combinan 2 o más colores y permiten que fluyan entre sí, lo que le aporta al fondo más movimiento que un color sólido.
Elige entre degradados Lineal, Radial, Cónico y Fluido. Los degradados Lineal, Radial y Cónico crean transiciones de color más definidas, mientras que los degradados del tipo Fluido crean una mezcla más suave, similar a una malla. Puedes agregar más colores al degradado, ajustar la opacidad de cada color y guardar los degradados en tu marca para usarlos nuevamente más tarde.
Consejo:
Los fondos degradados están disponibles para secciones, celdas dentro de secciones, encabezados, pies de página, botones y cuadros.
Diseñar partes de elementos
Algunos elementos del editor ofrecen opciones de diseño detalladas que te permiten personalizar cada parte por separado. Por ejemplo, al trabajar con botones, puedes elegir personalizar el botón en sí, su icono o el texto; así podrás perfeccionar cada detalle y hacer que se adapte a tu estilo único. Usa el menú desplegable para seleccionar qué parte deseas personalizar.
Diseñar el estado al pasar el cursor (botones y menús)
Los elementos en los que se puede hacer clic pueden tener un diseño diferente cuando los visitantes pasan el cursor sobre ellos. Usa los estados al pasar el cursor para hacer que los botones y los menús parezcan más interactivos y así ayudar a los visitantes a comprender dónde pueden realizar acciones.
Para tener más control, haz clic en Todas las opciones de diseño para abrir el panel completo de Diseño. Usa el menú desplegable de estado para seleccionar Al pasar el cursor y personaliza las opciones de diseño disponibles.
Información útil:
También puedes personalizar el estado del cursor al diseñar botones en el panel Marca.
Glosario de diseño
Consulta la tabla a continuación para obtener más información sobre cada ajuste de diseño: lo que significa y cómo mejora tu diseño.
| Ajuste | ¿En qué consiste? |
|---|---|
Fondo/Colores de relleno  | Agrega un color de relleno para complementar el contenido del elemento. Haz clic en el círculo junto a Color para elegir uno de los colores de tu Marca o uno personalizado. Contenedores y secciones: haz clic en Reemplazar fondo en la barra de acciones para cambiar el color del fondo. También puedes hacer clic en el icono Opacidad  para hacer que el fondo sea más o menos visible y aplicar un efecto cristal. |
Borde  | Define los bordes del elemento para que se destaque. Puedes elegir el color, el ancho y el estilo de todo el borde o hacer clic en el icono Editar bordes individualmente  para diseñar cada lado por separado. |
Esquinas  | Haz que las esquinas del elemento sean más cuadradas o redondeadas arrastrando el control deslizante debajo de Radio. Haz clic en el icono Editar esquinas individualmente para diseñar cada esquina por separado. |
Sombra  | Aplica una sombra para darle al elemento un efecto 3D interesante. Puedes agregar una sombra dentro del elemento y hacer que el elemento también proyecte una sombra. Decide la posición, el desenfoque, el tamaño, el color y la opacidad de la sombra. |
Espaciado  | Agrega algo de espacio al contenido al ajustar el relleno alrededor del elemento o del área seleccionada. Según lo que estés editando, es posible que veas opciones para ajustar lados individuales, agregar espaciado vertical y horizontal y más. |
Estilo  | Organiza el elemento de la manera que desees personalizando los ajustes de estilo. Según lo que estés editando, es posible que veas opciones para voltear, alinear, establecer la dirección o ajustar el tamaño y la posición. |
Controla el aspecto de cualquier texto al personalizar la fuente, el peso, el tamaño, el color y el formato. Según lo que estés editando, es posible que puedas hacer clic en Más opciones de texto. Esto revela ajustes adicionales, como el espaciado entre líneas, el uso de mayúsculas y minúsculas y más. |
Crear con Wix Harmony:
Descubre la próxima generación de creación de sitios web con Wix Harmony. Fluye libremente entre el uso de comandos para tu agente de IA y el diseño de precisión mediante la función de arrastrar y soltar, para que la experiencia de creación sea tan intuitiva como el pensamiento mismo.