Diseño y widgets

En esta página

El aspecto de toda tu web (colores, fuentes, botones, efectos) se configura en un solo lugar: la pestaña Diseño del editor. Los extras para toda la web, como los botones de chat y la barra de anuncio, están en la pestaña Widgets. Los cambios se ven al instante en la vista previa y se publican cuando haces clic en Publicar.

Temas predefinidos

En el editor, abre la pestaña Diseño (panel izquierdo).
En Colores, los Temas predefinidos ofrecen combinaciones de color completas: Naranja, Azul medianoche, Lima neón, Rosa, Violeta, Estudio claro y Blanco y negro.
Haz clic en uno para aplicarlo. Después puedes ajustar cualquier color más abajo.

Consejo: empieza con el tema que más se parezca a tu marca y cambia solo el Color de acento por el color de tu marca. A menudo con eso basta.

Colores

Color	Dónde se usa
Fondo	El fondo de la página.
Tarjetas / superficies	Tarjetas, cajas y secciones más claras.
Líneas y bordes	Marcos y separadores.
Texto principal	Titulares y texto general.
Texto secundario	Texto más pequeño y suave.
Color de acento (botones, detalles)	Botones, destacados, enlaces, iconos.
Texto sobre el color de acento	El texto de los botones; asegúrate de que se lea bien sobre el acento.
Color del resplandor	El resplandor suave detrás de imágenes y secciones.
Tarjetas claras (precios)	Las tarjetas de precio claras de Paquetes y precios.

Tipografía

Fuente de los títulos y Fuente del texto: elige de una lista de fuentes web; la vista previa las carga a medida que las eliges.
Grosor de los títulos: de normal a extranegrita.
Espaciado de letras de los títulos: títulos más apretados o más espaciados.
Tamaño del título: agranda o reduce todos los títulos.
Tamaño del texto: el tamaño base del texto general.
Etiquetas pequeñas en mayúsculas: si las etiquetas pequeñas sobre los títulos van en mayúsculas.

Formas

Redondeo de las tarjetas y Redondeo de los botones: de esquinas rectas a totalmente redondeadas.
Aspecto de los botones: Color sólido, Degradado o Contorno.
Ancho del contenido: cuánto puede ensancharse el contenido en pantallas grandes.

Efectos y animaciones

Intensidad del resplandor: lo intenso que es el efecto de resplandor (0 lo desactiva).
Animación al desplazarse: cómo aparecen las secciones al desplazarse: Sin animación, Aparición gradual, Aparición desde abajo, Zoom o Enfoque.
Las tarjetas se elevan al pasar el ratón: las tarjetas suben un poco bajo el ratón.
Grano de película sobre la web: un sutil aspecto con textura.
Desplazamiento suave: desplazamiento suave cuando un enlace salta a una sección.

CSS personalizado

En Avanzado, el campo CSS personalizado te permite añadir tu propio CSS para cambios de diseño que no están disponibles como ajustes. Ejemplo:

.btn { text-transform: uppercase; }

El CSS personalizado es para usuarios avanzados. Si algo se rompe, borra lo que has añadido o usa Ctrl+Z.

Diseño de cada sección

Cada sección tiene también su propio aspecto en Editar → Apariencia: fondo (ninguno, tarjeta, resplandor, acento), espaciado, alineación del título y una imagen de fondo con oscurecimiento. Muchas secciones añaden sus propias opciones, como columnas, estilo de las tarjetas o forma de la imagen. Consulta Secciones y elementos.

Widgets

Abre la pestaña Widgets. Tiene tres grupos: Botones de chat, Barra de anuncio y Otros.

Botones de chat

Los botones flotantes en la esquina de la pantalla permiten que los visitantes te contacten con un solo toque.

Activa Mostrar botones de chat.
En Canales, haz clic en Añadir elemento para cada canal y elige el Canal:
- WhatsApp, Viber, Telegram, Messenger, Instagram;
- Llamada, SMS, Email;
- Otro enlace (cualquier dirección https://…, con tu propio icono).
Rellena Número, usuario o dirección:
- WhatsApp, Viber y Llamada: tu número en formato internacional, por ejemplo +381601234567;
- Telegram e Instagram: tu nombre de usuario;
- Email: tu dirección de email;
- Otro enlace: una dirección https://… completa.
Si quieres, añade un Mensaje predefinido (WhatsApp), un Texto junto al botón (opcional) y un Color (vacío = color de la marca).

Después elige cómo se comportan los botones:

Ajuste	Qué hace
Texto del botón principal	El texto del botón principal (por defecto Chat).
Disposición	Un botón (abre un pequeño menú con todos los canales) o Todos los botones (apilados).
Lado de la pantalla	Derecha o Izquierda.
Mostrar texto junto a los botones	Muestra las etiquetas junto a los iconos.
Pulso (llama la atención)	Una suave animación de pulso.
Aparece tras	Los segundos de espera antes de que aparezcan los botones.
Mostrar en móviles / Mostrar en ordenadores	Dónde se ven los botones.

Barra de anuncio

Una barra fina en la parte más alta de la web, para novedades u ofertas (Envío gratis esta semana, Ya está aquí el nuevo curso).

Activa Mostrar una barra en la parte superior de la web.
Escribe el Texto y, si quieres, un Texto del enlace (opcional) con El enlace lleva a.
Elige el Estilo: Acento, Oscuro o Claro.
Decide si El visitante puede cerrarla.

Otros

Botón «volver arriba»: un pequeño botón que te lleva de vuelta arriba en las páginas largas.
Línea de progreso de desplazamiento arriba: una línea fina que se va llenando a medida que el visitante baja.

Consejos

Revisa los colores también en Teléfono y asegúrate de que el texto se lea bien sobre cualquier fondo.
No mezcles más de dos fuentes; con la de los títulos y la del texto basta.
Uno o dos canales de chat suelen funcionar mejor que cinco.

¿No encuentras la respuesta?

Escríbenos y te respondemos en un día hábil.

Contacto