Diseño: colores, tipografía, cabecera transparente, logo y favicon

Todo el aspecto de la web se decide en un sitio: Ajustes del sitio, en la barra superior del diseñador, pestaña Diseño. No hay hojas de estilo ni temas que instalar: dos colores, una tipografía, el logo, y la web entera se adapta.

Colores

• Color principal — el de los botones, los enlaces, los fondos de color y los iconos. De él salen solos el tono oscuro para los degradados, el tono suave para los fondos «Suave» y el color del texto sobre él (blanco o negro, según lo que se lea mejor).
• Color de acento — el segundo color, para los sellos, los destacados y el fondo «Color de acento» de los bloques.

Elige el principal del logo o del local. Si dudas, un solo color bien elegido y el acento parecido pero más claro queda mejor que dos colores que compiten.

Fondo claro u oscuro

Fondo: Claro (blanco, texto oscuro) u Oscuro (texto claro sobre fondo oscuro). El oscuro funciona bien en restaurantes de noche, coctelerías y estudios; el claro, en clínicas, comercios y despachos.

Tipografía

Cinco familias, todas del sistema (la web no descarga fuentes de terceros, así carga rápido y sin cookies):

Cabecera

• Sólida — la barra del menú siempre tiene fondo, desde arriba.
• Transparente sobre la portada — el menú se dibuja encima de la foto o vídeo de portada, sin fondo, y se vuelve sólido al bajar. Es el efecto que se ve en el restaurante de ejemplo.

Para que la transparente quede bien necesitas el logo claro (ver abajo) y una portada con Oscurecer el fondo al 40-50 %, para que el menú blanco se lea sobre la foto.

Logo, logo claro y favicon

• Logo — el normal, en color. Si no subes ninguno, se usa el logo de la ficha de la empresa.
• Logo claro (para la cabecera transparente) — la versión en blanco del logo, que se ve sobre la portada; al bajar aparece el normal. Si no lo subes, sobre la portada se ve el normal, que con un logo oscuro sobre foto oscura no se distingue.
• Alto del logo (px) — por defecto 44. Un logo horizontal puede ir a 36-44; uno cuadrado o con mucho detalle, a 56-64.
• Icono de la pestaña (favicon) — el cuadradito que sale en la pestaña del navegador. Una imagen cuadrada, PNG con fondo transparente, de 256 × 256 o más. Si no pones ninguno, se usa el logo.

Las imágenes se eligen de la Biblioteca de medios: súbelas ahí primero (o pulsa Seleccionar y súbelas desde el propio selector).

El botón destacado del menú

• Botón destacado del menú (texto) — un botón de color a la derecha del menú: «Reservar», «Pedir cita», «Llámanos». Se traduce por idioma.
• Enlace del botón del menú — la página o acción a la que lleva: reservas, #contacto, whatsapp, telefono… Cómo se escribe un enlace.

Botón flotante de WhatsApp

En la pestaña Avanzado: Botón flotante de WhatsApp, activado por defecto. Muestra el botón verde abajo a la derecha en todas las páginas, que abre un chat con el número de Contacto → WhatsApp. Si el campo WhatsApp está vacío, el botón no sale.

Texto del pie

También en Avanzado: Texto del pie, una línea bajo el pie de página (el nombre comercial, el copyright, «Diseñado con cariño en…»). El pie muestra además los datos de contacto, el horario, las redes y los enlaces legales.

Fondo, espaciado y animación de cada bloque

Lo que acabamos de ver es global. Además, cada bloque tiene en Ajustes del bloque su propio fondo (blanco, suave, color principal, color de acento, oscuro, degradado o imagen), su espaciado y si se anima al aparecer. Alternar fondos blanco y suave entre bloques da ritmo a la página sin necesidad de más.

Ver el resultado

La vista previa del diseñador se actualiza al guardar. Prueba con el selector de idioma y estrecha la ventana del navegador para ver cómo queda en móvil: más de la mitad de las visitas llegarán desde el teléfono.

Continúa por aquí

• Los bloques — la portada donde luce la cabecera transparente
• Idiomas y traducciones
• SEO, legal, cookies y publicar
• Primeros pasos y plantilla por sector