Cómo personalizar el estilo de tu página
Puedes personalizar el diseño de tu sitio web para que se ajuste al estilo de tu marca. Crea una identidad visual eligiendo un esquema de colores primarios y fuentes para los elementos de tu sitio. La configuración que elijas en la sección Estilo de página se aplicará a todos los elementos.
Te recomendamos copiar elementos para mantener un estilo de diseño de página consistente sin personalización adicional.
También puedes leer: Personalización de la apariencia del elemento.
Haz clic en el ícono del lápiz en la esquina superior izquierda para acceder a la configuración de estilo de tu página.
Selecciona Personalizar junto al elemento deseado.
Esquema de colores
En la sección Esquema de colores, puedes seleccionar los colores dominantes de los elementos.
Para seleccionar el esquema de colores para cada elemento de manera individual, haz clic en Personalizar y selecciona una color:
Claro | Se utiliza como fondo para los elementos del sitio oscuro. |
Oscuro | Se utiliza como fondo para elementos de sitio claros. |
Principal | Se utiliza para llamar la atención sobre tu marca y representar la identidad de la misma. |
Secundario | Se utiliza para llamar la atención y complementar tu color primario. |
Acento | Se utiliza para resaltar elementos únicos del sitio. |
Estilos de texto
En la sección Estilos de texto, puedes elegir entre nuestras combinaciones de fuentes predefinidas o personalizar las fuentes de párrafo y encabezado para que coincidan con el estilo de tu sitio y mantengan la integridad del diseño.
Para definir individualmente los estilos de texto de los párrafos y los títulos, haz clic en Personalizar y ajusta la configuración.
Fuente | Selecciona la apariencia general del texto. |
Grosor de fuente | Establece el grosor de la fuente: negrita, delgada o normal. |
Tamaño de fuente | Establece el tamaño de la fuente en píxeles (px). |
Formato | Selecciona las propiedades del texto (mayúsculas, cursiva). |
Altura de línea | Establece una distancia vertical entre las líneas de texto, que puede ser inferior o superior al 100%. |
Espacio entre letras | Establece un espaciado entre caracteres en píxeles (px), que no puede ser inferior a cero. |
La configuración de los botones se ajustará a los tamaños y fuentes seleccionados.
El tamaño de fuente de los botones del widget Formulario depende del tamaño de botón seleccionado (S es 0,8 del tamaño especificado, M corresponde a la fuente seleccionada y L es 1,2 de la fuente especificada).
También puedes añadir tus propias fuentes al creador de sitios web, basándote en el estilo de tu marca.
Leer también: Cómo agregar una fuente personalizada a un sitio web.
Estilos de botón
En la sección Botón, puedes seleccionar el estilo de todos los botones del sitio, inluyendo los de los widgets Botón, Formulario, Pagos, Registro, entre otros.
También puedes personalizar el estilo, haz clic en Personalizar y ve a la pestaña:
Principal | Se utiliza para los botones de Llamado al acción de alta prioridad que necesitan atraer más atención. |
Secundario | Se utiliza para los botones de menor importancia. Por default, su color es más tenue. |
También puedes utilizar las isguientes opciones para personalizar tus botones:
Estilo del texto | Muestra el estilo del texto seleccionado en la configuración de fuente. Para cambiarlo, haz clic en Editar. Luego, en la sección Botón, selecciona una fuente y su tamaño, y ajusta el ancho y su altura de línea. | |
Color de texto | Define el color del texto del botón. Haz clic en el ícono y selecciona un color. | |
Color de fondo | Define el color de fondo del botón. Haz clic en el ícono y selecciona un color. | |
Contorno | Añade una línea alrededor de los bordes del botón. Activa la opción, ingresa un valor en pixeles para establecer el grosor de la línea, y selecciona un tipo de línea y su color. | |
Efecto hover | Añade efectos hover para aumentar las conversiones y animar a los visitantes a realizar una acción en la página. | |
Opacidad | La opacidad de tu botón cambiará de 100% al porcentaje especificado. | |
Sombra | Aparecerá una sombra alrededor de tu botón. | |
Color alternativo | La paleta de colores de tu botón cambiará.
Selecciona el texto, fondo y contorno que cambiará al pasar el cursor. |
Última actualización: 18.10.2024
o