Tu web, sin tocar código

Eliges un kit de tu sector, cambias los textos y las fotos, y publicas. Esta guía te lleva de la cuenta vacía a la web en tu dominio.

Para
Quien no programa
Tiempo
Una tarde
Necesitas
Tu logo, tus datos y unas fotos
  1. Entra en el panel

    Entra en layocms.com/admin con tu email y tu contraseña. Si aún no tienes cuenta, pídenos acceso.

    Lo primero que ves es Primeros pasos: la lista de lo que falta para tener la web lista. Cada paso se marca solo cuando lo haces, y esta guía va en el mismo orden.

    La pantalla Primeros pasos del panel de Layo, con la lista de pasos y cuántos están hechos
    Primeros pasos: los imprescindibles arriba y, debajo, los de «cuando puedas».

    TrucoCon Ctrl+K (⌘K en Mac) buscas cualquier página, plantilla o pantalla del panel. Si te pierdes, es lo más rápido.

  2. Pon tus colores y tus letras

    En Desarrollo › Tema y código eliges los colores de tu marca y dos fuentes: una para los títulos y otra para el texto.

    Todas las secciones de la web usan esos colores y esas fuentes, así que cambian a la vez en todas las páginas. En esa pantalla también hay código, pero no hace falta tocarlo.

    La pantalla Tema del panel, con los colores de la marca y las fuentes

    TrucoSi tienes el color de tu logo en hexadecimal (#1E2A4A), pégalo tal cual. Si no, elígelo con el selector.

  3. Sube tu logo

    En Sitio › Cabecera y pie, toca el campo del logo y súbelo. Mejor en SVG, o en PNG con el fondo transparente, para que se vea nítido en cualquier pantalla.

    Ahí mismo cambias lo demás que traen la cabecera y el pie de tu web: el botón de arriba, los textos y los enlaces del pie.

  4. Escribe los datos de tu negocio

    En Ajustes › Datos para Google pones qué es tu negocio, el teléfono, el email, la dirección y el horario.

    Se escriben una sola vez: las secciones de contacto, el pie y el botón de WhatsApp los leen de ahí. Si un día cambias el teléfono, cambia en toda la web. Y Google los usa para entender qué eres y dónde estás.

  5. Crea la página desde un kit

    En Contenido › Páginas, pulsa Nueva página. Puedes empezar de tres formas:

    • Un kit de tu sector (taller, restaurante, peluquería, clínica…): la página sale montada, con sus secciones y textos de ejemplo. Es lo más rápido.
    • Con IA, si tu cuenta la tiene: describes la página y la IA la monta con las secciones que tienes.
    • En blanco: una página vacía para montarla desde cero.

    Para la portada, la dirección es /. Para las demás, una palabra corta: /servicios, /contacto.

    La ventana Nueva página, con las opciones En blanco, Con IA y los kits por sector
  6. Cambia los textos y las fotos

    Toca una sección (en la lista o en la vista previa) y, a la derecha, abre Contenido. Ahí están sus campos: títulos, textos, botones, fotos y listas. Lo que escribes se ve en la vista previa al momento.

    Para una foto, toca su campo: eliges una de Medios (tu biblioteca) o pulsas Subir. Layo la convierte y prepara versiones más pequeñas para el móvil: no hace falta que la reduzcas tú.

    El editor de páginas: la lista de secciones, la vista previa en el centro y los campos de la sección elegida a la derecha

    TrucoEscribe las listas como te salgan y luego ordénalas arrastrando cada elemento por su asa.

  7. Añade, ordena y quita secciones

    Añadir sección abre la biblioteca: una miniatura de cada sección, pintada ya con tus colores, para ver cómo quedará antes de ponerla. Ahí salen también los bloques que hayas guardado.

    Para cambiar el orden, arrastra la sección por su asa. Junto a cada una tienes Duplicar y Quitar.

    La biblioteca de secciones, con las miniaturas de cada una en los colores de la web
  8. Ajusta cómo se ve cada sección

    En la pestaña Estilos de cada sección cambias su aspecto con las opciones que trae: el esquema de color (fondo claro, oscuro o el de tu marca), el espaciado, el lado de la foto… En Efectos eliges cómo entra al bajar la página.

    No hay forma de romper el diseño: cada sección solo deja cambiar lo que está pensado para cambiarse.

    La pestaña Estilos de una sección, con el esquema de color y el espaciado
  9. Guarda y publica

    Son dos botones distintos:

    • Guardar borrador guarda tus cambios, pero la web sigue enseñando lo de antes.
    • Publicar cambios pasa a la web lo que ves.

    Cada guardado queda en el historial, y puedes volver a una versión anterior. También puedes programar la publicación para un día y una hora.

    TrucoPon la página nueva en el menú de la web en Sitio › Menús: añádela y arrástrala a su sitio.

  10. Recibe los mensajes en tu email

    Los formularios de la web ya funcionan y tienen antispam, sin captcha. Para que cada mensaje te llegue por email, ve a Formularios › Configuración y pon tu dirección en «Enviar cada mensaje a». Si no, los mensajes solo se ven en el panel.

    En Layo los avisos salen por nuestro correo. Si quieres que salgan desde el de tu dominio, se configura en Ajustes › Correo.

  11. Conecta tu dominio

    En Administración › Webs pones tu dirección (www.tunegocio.com). El panel te dice exactamente qué poner en el proveedor donde compraste el dominio. En cuanto apunta a Layo, la web sale con su certificado https, sin hacer nada más.

    TrucoSi tu web anterior tenía otras direcciones (/servicios.html, /contacto/), Redirecciones las lleva a las nuevas para que no se pierdan visitas.

  12. Avisa a Google y mira cómo va

    Con el dominio ya puesto, verifica la web en Search Console desde Ajustes y envía el sitemap. Layo lo hace solo con tus páginas publicadas; tú solo das el aviso.

    Después, Estadísticas te dice cuánta gente entra y por dónde, sin aviso de cookies, y Salud de la web te avisa si falta algo: una foto sin descripción, un enlace roto, una página sin título para Google.

La guía siguiente Plantillas por dentro Para quien programa: los campos en JSON, el HTML con Liquid, el SCSS con el tema y cómo importar una plantilla o una web entera.