Los bloques: portada, galería, equipo, opiniones, mapa, formulario…
Cada página de la web se compone apilando bloques. Hay 26, agrupados en cinco familias: Portada, Básico, Fotos y vídeo, Negocio y Avanzado. Los añades desde el botón Añadir bloque del panel izquierdo, y luego los arrastras para ordenarlos.
Trabajar con un bloque
Al pasar el ratón por un bloque de la lista aparecen sus acciones:
- Editar — abre el formulario con dos pestañas: Contenido (los textos, imágenes y opciones propias del bloque) y Ajustes del bloque (los comunes a todos, ver más abajo).
- Subir / Bajar o arrastrar — cambia el orden.
- Duplicar — crea una copia justo debajo. Útil para repetir una estructura cambiando solo el texto.
- Visible / Oculto — un bloque oculto no se ve en la web pero se conserva.
- Quitar — lo borra, con confirmación.
Un aviso de «Hay cambios sin guardar» te recuerda que guardes antes de cerrar el formulario.
Ajustes comunes a todos los bloques
| Ajuste | Opciones |
|---|---|
| Fondo | Blanco, Suave, Color principal, Color de acento, Oscuro, Degradado o Imagen (con su Imagen de fondo) |
| Espaciado | Ninguno, Poco, Normal, Mucho: el aire por encima y por debajo |
| Animar al aparecer | El bloque entra suavemente al hacer scroll |
| Ancla | Un nombre para enlazar a este bloque desde un botón: #carta, #reservas |
Cómo escribir un enlace
Todos los botones aceptan el mismo formato de enlace:
- el nombre de una página de la web:
carta,reservas,contacto; - un ancla de la misma página:
#horario; - una dirección completa:
https://…; - las palabras
whatsapp,telefonooemail, que abren WhatsApp, marcan el teléfono o abren el correo con los datos de Ajustes del sitio → Contacto.
Portada
Portada (banner principal)
El primer bloque de la página de inicio. Lleva imagen de fondo o vídeo de fondo (un enlace de YouTube o Vimeo, o un mp4/webm de la biblioteca), una etiqueta pequeña encima del título (por ejemplo «Restaurante»), el título, el subtítulo y hasta dos botones.
Opciones: Altura (pantalla completa, alta, media, baja), Alineación (centrado o izquierda), Oscurecer el fondo en porcentaje (para que el texto se lea sobre la foto) y Mostrar el logo sobre el título.
Con la cabecera transparente activada en Diseño, el menú se dibuja sobre esta portada con el logo claro. Ver diseño.
Carrusel de banners
Varias diapositivas que van pasando, cada una con imagen, título, texto, botón y enlace. Ajusta la altura y los segundos por diapositiva (de 2 a 30).
Básico
- Título — un titular suelto, con tamaño (grande, normal, pequeño) y alineación.
- Texto — texto libre con formato (negrita, listas, enlaces), con ancho estrecho, normal o ancho.
- Texto e imagen — dos columnas: etiqueta, título, texto y botón a un lado y una imagen al otro. Eliges el lado de la imagen y el efecto al aparecer (ninguno, aparecer, deslizar, zoom). Es el bloque más versátil para «quiénes somos», «nuestra cocina», «cómo trabajamos».
- Imagen — una foto con pie, enlace opcional, ancho y esquinas redondeadas.
- Llamada a la acción — una franja de color con título, subtítulo y dos botones. Para el «Reserva ahora» a mitad de página.
- Iconos con texto — de dos a cuatro columnas con icono, título y texto. Las razones para elegirte: «Producto de proximidad», «Aparcamiento gratuito», «Abierto los domingos». El icono se elige de un catálogo.
- Separador — aire entre bloques, con altura en píxeles y una línea opcional.
Fotos y vídeo
- Galería de fotos — las imágenes que quieras, con pie, en cuadrícula o mosaico, de dos a cuatro columnas. Al pulsar una se abre a tamaño completo.
- Vídeo — un vídeo de YouTube o Vimeo (pega el enlace normal, el de la barra de direcciones) o un mp4/webm subido a la biblioteca. Con imagen de portada antes de reproducir, ancho normal, ancho o completo, y la opción de reproducir solo (sin sonido).
- Logos de colaboradores — una fila de logos con nombre y enlace: marcas que vendes, sellos, asociaciones.
Negocio
- Carta / catálogo — tus familias y artículos, sacados del programa. Tiene artículo propio: Carta y catálogo desde los artículos.
- Servicios — tarjetas con imagen, icono, título, texto y precio (texto), de dos a cuatro columnas. Para servicios que no son artículos del catálogo o que prefieres describir a mano.
- Reservas / cita — el formulario de reserva conectado al TPV, a ClinicaGest o a la bandeja. Tiene artículo propio: Reservas y citas.
- Tienda online — enlace y muestra de artículos de tu tienda. Ver tienda online.
- Horario — el horario de Ajustes del sitio → Horario, con una nota al pie y, opcionalmente, los datos de contacto al lado. Si no hay horario configurado, el bloque te lo recuerda.
- Contacto — los datos de contacto, el mapa y un formulario en un solo bloque, con texto de agradecimiento al enviar.
- Formulario — solo el formulario: nombre, correo, teléfono (opcional), un desplegable de asuntos a elegir (uno por línea) y el mensaje. Lo que se envía llega a Mensajes web y por correo.
- Mapa — el mapa de Google de Ajustes del sitio → Contacto, a todo el ancho o no.
- Equipo — personas con foto, nombre, cargo y texto.
- Opiniones — reseñas con autor, estrellas (1 a 5) y texto, y un enlace a tus reseñas de Google con el botón «Ver todas las opiniones».
- Tarifas — planes con título, precio, líneas de «qué incluye» (una por línea), botón, y la posibilidad de marcar uno como destacado («Recomendado»).
- Preguntas frecuentes — pares de pregunta y respuesta que se despliegan.
- Cifras — números grandes con texto e icono: «25 años», «3.000 clientes», «12 profesionales». Va sobre fondo de color principal por defecto.
Avanzado
- Código HTML — para incrustar algo que no tiene bloque: un widget de reseñas, un mapa de otro proveedor, un formulario de un tercero. Se guarda por idioma. Úsalo solo si sabes lo que pegas: el código se publica tal cual.
Qué se traduce y qué no
En cada formulario, los campos de texto que tienen pestañas de idioma se guardan por idioma; el resto (imágenes, enlaces, opciones) es común. Más sobre idiomas.
Una página de inicio que funciona
Si no sabes por dónde empezar, esta estructura no falla:
- Portada con foto, titular y dos botones (reservar y ver carta o servicios).
- Iconos con texto con tres o cuatro razones para elegirte.
- Texto e imagen contando quién eres.
- Carta / catálogo o Servicios.
- Opiniones.
- Reservas / cita o Llamada a la acción.
- Contacto con mapa.
Mira cómo está resuelta en el restaurante de ejemplo.