Crea una plantilla completa para sitios de empresa de forma segura.

1. Modelo conceptual

Hay tres responsabilidades distintas. Separarlas ayuda a entender la versión 1.

No es un editor libre de páginas: el propietario puede añadir una sección permitida a main y elegir su posición. No puede crear otra área, mover una sección principal al pie de página, cambiar el HTML ni modificar el CSS del tema.

2. Inicio rápido: una plantilla mínima y utilizable

Cada tema v1 incluye su propio diseño completo, estilos y scripts, y puede organizarlos como decida su autor. Un tema nunca hereda el diseño ni los recursos de otro. Los componentes eyivo: compartidos y los siete tipos de página de reserva proceden de theme-core; el tema solo almacena los tipos que sustituye y los componentes que declara en el espacio de nombres theme:.

Cada tema v1 necesita un archivo de diseño predeterminado. Tanto page-types/ como components/ son opcionales si el paquete usa únicamente los recursos de reserva de Core:

acme-industrial/
├── theme.json
├── layouts/default.liquid
├── page-types/
│   └── home.liquid        # optional override
├── components/
│   └── featured_course.liquid
├── locales/
│   ├── en.json
│   └── tr.json
└── assets/
    ├── css/theme.css
    └── js/theme.js

layouts/default.liquid siempre pertenece al tema activo y define todo el documento público. Eyivo busca primero el tipo de página solicitado en ese tema y, si no existe, usa theme-core/page-types. Core nunca aporta un diseño ni recursos; incluso el contenido de reserva se muestra con el diseño y los estilos del tema activo.

3. Describe la plantilla en theme.json

El manifiesto declara las capacidades del tema y define el contrato con el que se generan los formularios de la aplicación. Responde a tres preguntas: qué tipos de página existen, qué áreas contiene cada uno y qué componentes puede incluir cada área. Los temas integrados declaran explícitamente los diez tipos de página estándar e incluyen sus archivos Liquid correspondientes. Los temas personalizados pueden seguir usando las plantillas de respaldo del núcleo para tipos no declarados.

{
  "name": "Acme Industrial",
  "version": "1.0.0",
  "eyivo_theme_api": "1.0",
  "settings": {
    "primary_color": { "type": "color" },
    "button_radius": { "type": "number" }
  },
  "page_types": {
    "home": {
      "areas": {
        "hero": {
          "allowed_components": ["eyivo:hero"],
          "min": 0,
          "max": 1
        },
        "main": {
          "allowed_components": ["eyivo:rich_text", "eyivo:image_text", "theme:featured_course"]
        }
      }
    },
    "page": { "areas": { "main": { "allowed_components": ["eyivo:rich_text"] } } }
  },
  "components": {
    "featured_course": {
      "variants": ["card", "compact"],
      "schema": {
        "heading": { "type": "text", "required": true, "translatable": true },
        "summary": { "type": "textarea", "translatable": true }
      }
    }
  }
}

Tipos de página de reserva: los tipos integrados son home, page, gallery, contact, products, product y videos. Si omites uno, se usa su definición y su archivo Liquid de theme-core. Declara un tipo solo si el tema aporta también su archivo de sustitución page-types/<type>.liquid.

El editor recibe la API combinada de tipos de página: las definiciones del tema activo sustituyen a las equivalentes de Core, y los tipos omitidos siguen disponibles desde Core.

4. Completa el contenido de demostración en demo.json

Cada paquete debe incluir un archivo demo.json portátil cuyo contenido sea solo borrador y al menos una captura de pantalla tomada con esos datos cargados. Los temas integrados usan el mismo esquema. No incluyas ID de base de datos, dominios de clientes ni credenciales de ningún tipo, incluidas las de almacenamiento de objetos.

{
  "schema_version": 2,
  "default_locale": "en",
  "label": "Northline Build Co.",
  "summary": "Thoughtful construction for the way life happens.",
  "media": {
    "media/hero.jpg": {
      "public_url": "https://cdn.example.com/demo/hero.jpg",
      "mime_type": "image/jpeg",
      "original_name": "hero.jpg",
      "bytes": 184000,
      "width": 1600,
      "height": 900
    }
  },
  "company": { "display_name": "Northline Build Co.", "logo_asset": "media/hero.jpg" },
  "theme_settings": { "settings": { "header_cta_url": "/contact" } },
  "pages": [],
  "catalog": [],
  "galleries": [],
  "videos": []
}

Páginas y componentes

{
  "type": "home",
  "sort_order": 0,
  "navigation_visible": true,
  "hero_asset": "media/hero.jpg",
  "translations": {
    "en": { "slug": "home", "title": "Home", "meta_title": "Home | Northline" },
    "tr": { "slug": "ana-sayfa", "title": "Ana sayfa", "meta_title": "Ana sayfa | Northline" }
  },
  "components": [{
    "component_type": "eyivo:hero",
    "area": "hero",
    "position": 100,
    "variant": "split",
    "data": { "primary_url": "/contact" },
    "translations": {
      "en": { "heading": "Built for real life", "primary_label": "Contact us" },
      "tr": { "heading": "Gerçek yaşam için tasarlandı", "primary_label": "Bize ulaşın" }
    }
  }]
}

Los tipos y áreas de componentes deben estar declarados en el manifiesto del tema activo o en theme-core. Usa rutas relativas como /contact para los enlaces dentro del mismo sitio. Las demos de inicio incluidas usan su imagen de cabecera existente como fondo a todo el ancho, con una capa para facilitar la lectura y texto adaptable: immersive en la mayoría de los temas y centered con imagen en Compact. Las demás variantes conservan sus propios diseños.

Idiomas de demostración y alternativa

El inglés es el idioma base obligatorio: establece default_locale en en. Si falta en datos antiguos, también significa inglés. Los demás idiomas admitidos son opcionales; no presentes copias del inglés como traducciones.

Incluye translations.en y objetos de idioma opcionales para empresa, ajustes del tema, páginas, componentes, productos, galerías, pies y textos alternativos de imágenes, vídeos y artículos. Los campos antiguos en inglés sin clave de idioma siguen siendo válidos. Al crear el sitio se elige su idioma principal y cada campo ausente usa el inglés. Los arrays sustituyen al array inglés completo; los valores vacíos explícitos se conservan. Solo se importa el idioma elegido, sin activar otros automáticamente.

Usa slugs fuente en inglés en enlaces internos y entradas de menú portátiles. La importación los convierte al slug traducido, incluidos los enlaces de texto enriquecido y artículos. Las entradas de menú pueden incluir mapas explícitos slugs y labels. Las etiquetas ausentes usan el inglés. Las URL externas no cambian.

{
  "company": {
    "translations": {
      "en": { "display_name": "Northline", "description": "Built around your needs." },
      "tr": { "display_name": "Northline", "description": "İhtiyaçlarınıza göre tasarlandı." }
    }
  },
  "theme_settings": {
    "settings": { "header_cta_url": "/contact" },
    "translations": {
      "en": { "header_cta_label": "Contact us" },
      "tr": { "header_cta_label": "Bize ulaşın" }
    }
  },
  "menus": {
    "footer": [{ "type": "page", "slug": "contact",
      "slugs": { "en": "contact", "tr": "iletisim" },
      "labels": { "en": "Contact us", "tr": "Bize ulaşın" }
    }]
  }
}

Importación y seguridad de los medios

Los sitios nuevos del panel incluyen datos de demostración por defecto y publican inmediatamente el idioma elegido; el propietario puede desmarcar la opción. Cargar una demo desde Marca en un sitio existente sigue creando borradores y conserva el contenido publicado. La App central copia las imágenes a la biblioteca del nuevo sitio y envía referencias mediante la API interna. Los masters y los temas nunca reciben credenciales de almacenamiento de objetos. Los temas usan el valor media.public_url proporcionado.

Declara las capturas de pantalla en theme.json.preview con data_source: "demo_data". El paquete debe contener cada imagen preview declarada.

5. Escribe el diseño que necesite tu tema

El diseño predeterminado define todo el documento HTML. Ningún recurso externo al tema activo aporta el encabezado, el pie de página, los estilos, JavaScript ni la estructura visual.

<!doctype html>
<html lang="{{ locale.code }}" dir="{{ locale.direction }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% eyivo_head %}
  <link rel="stylesheet" href="{{ 'css/theme.css' | asset_url }}">
</head>
<body>
  <header class="site-header">
    <a href="{{ locale.home_url }}">{{ company.name }}</a>
    <nav>
      {% for item in navigation.main %}
        <a href="{{ item.url }}">{{ item.label }}</a>
      {% endfor %}
    </nav>
  </header>

  {{ content | raw }}
</body>
</html>

Cada archivo de tipo de página determina dónde aparecen sus áreas dinámicas. Los componentes del área ya son cadenas HTML renderizadas: insértalas con | raw. Los valores normales se escapan de forma predeterminada.

<main class="home-layout">
  <section class="home-layout__hero">{{ areas.hero | raw }}</section>
  <div class="home-layout__content">{{ areas.main | raw }}</div>
  <aside class="home-layout__footer-cta">{{ areas.bottom | raw }}</aside>
</main>

Renderizar un componente directamente

Un diseñador puede colocar un componente registrado directamente en un diseño o archivo de tipo de página. Esa posición queda fijada por el tema y el propietario no puede reordenarla ni eliminarla desde el panel. Pasa un objeto mediante data:, campos individuales del esquema o ambos; los campos con nombre prevalecen sobre las claves equivalentes de data:.

{% eyivo_component "eyivo:cta",
  eyebrow: "Let’s talk",
  heading: page.title,
  text: company.description,
  button_label: "Contact us",
  button_url: routes.contact
%}

{% eyivo_component "theme:featured_course",
  data: page.settings.featured_course,
  variant: "compact"
%}

El tipo debe ser un literal entre comillas con espacio de nombres. La renderización directa usa el mismo esquema, variantes, archivo de componente y objeto component normalizado que una instancia de área. Un archivo de componente no puede renderizar otros componentes.

Recursos: usa siempre {{ 'css/theme.css' | asset_url }}. Eyivo lo sirve desde el paquete activo como /theme-assets/<theme>/css/theme.css; no fijes en el código el nombre de otro tema ni una ruta del sistema de archivos.

Metadatos, rutas y diccionarios de interfaz

Cada diseño debe renderizar {% eyivo_head %} exactamente una vez. Eyivo genera el título, la descripción, robots, canonical, hreflang, Open Graph y los datos estructurados. Usa routes.home, routes.contact, routes.catalog, routes.gallery y routes.videos en vez de fijar rutas públicas en el código. Pasa las URL editables por | localized_url: las rutas internas conocidas reciben el prefijo del idioma activo y las URL externas no cambian.

{{ 'Menu' | t }}
{{ theme.settings.header_cta_url | localized_url }}

Puedes crear archivos opcionales locales/<locale>.json para las etiquetas de interfaz que añada el tema. El orden de búsqueda es: inglés de Core, idioma de Core, inglés del tema e idioma del tema. Las etiquetas compartidas de theme-core funcionan sin copiar archivos. Los textos comerciales pertenecen al contenido traducible, a los campos de componentes o a la configuración del tema; no a los diccionarios de interfaz.

Un archivo de componente personalizado

<article class="featured-course featured-course--{{ component.variant }}">
  <div class="featured-course__content">
    <h1>{{ component.data.heading }}</h1>
    {% if component.data.summary %}<p>{{ component.data.summary }}</p>{% endif %}
  </div>
</article>

En los campos traducibles, Eyivo elige el idioma del visitante antes de renderizar. Así, un visitante turco y otro inglés ven la misma estructura de componentes con distintos valores de component.data.heading.

Menús registrados

Los temas pueden registrar menús planos adicionales en theme.json. Main está reservado: navigation.main conserva la visibilidad de páginas y los enlaces automáticos a listados. Cada menú necesita una clave estable, etiqueta, descripción y un lugar donde se muestre.

Enlaces de página anidados en la navegación principal

Cada elemento de navigation.main incluye un array children. Cuando una página tiene una página principal, aparece en la lista children de esa página. La plataforma añade un desplegable accesible a los enlaces correspondientes de la cabecera del sitio; los temas también pueden renderizar directamente el array children:

{% for item in navigation.main %}
  <div class="nav-item">
    <a href="{{ item.url }}">{{ item.label }}</a>
    {% if item.children.size > 0 %}
      <div class="submenu">
        {% for child in item.children %}
          <a href="{{ child.url }}">{{ child.label }}</a>
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% endfor %}

Las páginas secundarias conservan sus propias URL y su estado de publicación. La navegación principal incluye solo páginas publicadas y visibles con una traducción publicada para el idioma activo. Las relaciones de página principal tienen un solo nivel: elija una página de nivel superior que no sea la de inicio. Los menús registrados como navigation.footer siguen siendo planos.

{
  "menus": {
    "footer": {
      "label": "Footer links",
      "description": "Links at the bottom of every page.",
      "initialize_from_main": true,
      "translations": {
        "tr": { "label": "Alt bilgi bağlantıları", "description": "Sayfanın altındaki bağlantılar." }
      }
    },
    "useful_links": {
      "label": "Useful links",
      "description": "A separate group of helpful destinations."
    }
  }
}

Renderiza navigation.footer u otra clave declarada con item.label, item.url, item.active e item.kind. Respeta la etiqueta, escapa la salida y usa una descripción de navegación accesible. Los menús adicionales vacíos nunca recurren a Main.

{% if navigation.footer.size > 0 %}
<nav aria-label="{{ 'Footer navigation' | t }}">
  {% for item in navigation.footer %}
    <a href="{{ item.url }}"{% if item.active %} aria-current="page"{% endif %}>{{ item.label }}</a>
  {% endfor %}
</nav>
{% endif %}
{% if navigation.useful_links.size > 0 %}
<nav aria-label="{{ 'Useful links' | t }}">
  {% for item in navigation.useful_links %}
    <a href="{{ item.url }}">{{ item.label }}</a>
  {% endfor %}
</nav>
{% endif %}

Las páginas, entradas, productos, galerías y vídeos pueden asignarse a varios menús adicionales. La pantalla Menús admite listados, enlaces personalizados, orden independiente y etiquetas traducidas. La estructura se comparte entre idiomas; las traducciones sin publicar se ocultan.

Guardar contenido prepara sus asignaciones; publicarlo aplica solo su selección. Los borradores de menú se guardan y publican por separado. Publicar un menú no publica sus destinos. Las asignaciones no compatibles se conservan al cambiar de tema.

initialize_from_main copia los enlaces una sola vez y no los sincroniza después. Los temas antiguos sin menús siguen siendo compatibles. Las demos usan el tipo y slug de origen, claves de listado o URL personalizadas, nunca identificadores de registros de un sitio.

{
  "menus": {
    "footer": [
      { "type": "page", "slug": "about", "labels": {} },
      { "type": "listing", "listing": "catalog", "labels": {} }
    ],
    "useful_links": [
      { "type": "custom", "url": "https://example.com/help", "labels": { "en": "Help" } }
    ]
  }
}

Los campos de texto enriquecido y page.body permanecen escapados en Liquid; la plataforma procesa de forma segura el formato y las referencias a páginas. Solo el HTML fiable ya renderizado, como blog.post.body_html, usa raw. Las referencias siguen los cambios de slug y se desactivan si no existe una traducción publicada.

6. Los datos seguros de Liquid que puedes utilizar

Liquid recibe datos simples y normalizados, no modelos de Laravel ni de la base de datos. Si un valor no aparece en esta tabla, considéralo no disponible en v1.

Ejemplo de diseño adaptado al idioma

<html lang="{{ locale.code }}" dir="{{ locale.direction }}">
<a href="{{ locale.home_url }}">{{ company.name }}</a>
{% if locale.available.size > 1 %}
  <nav aria-label="Language">
    {% for language in locale.available %}
      <a href="{{ language.url }}" lang="{{ language.code }}"
         {% if language.current %}aria-current="page"{% endif %}>
        {{ language.native_name }}
      </a>
    {% endfor %}
  </nav>
{% endif %}

Cada idioma disponible incluye además label, direction, is_default, current y has_translation. Eyivo solo proporciona traducciones publicadas equivalentes, por lo que los temas deben usar language.url en vez de construir /en u otro prefijo.

Ejemplo de un token basado en configuración: style="--brand: {{ theme.settings.primary_color }}". Primero se debe declarar el ajuste en theme.json.

7. Componentes: directos y dinámicos

Los componentes tienen un contrato de renderización con dos formas de colocación. El diseñador controla los componentes directos en un diseño o tipo de página. Los componentes dinámicos se guardan como instancias de un área y se gestionan desde el editor. Cada instancia dinámica tiene un ID estable, tipo con espacio de nombres, área, posición, variante opcional, datos y traducciones. La posición determina el orden, no la identidad.

Componente universal: establece "universal": true en su definición para permitirlo en todas las áreas de los tipos de página compatibles. Aun así, necesita un esquema válido y un archivo Liquid.

Los enlaces de acción compartidos adaptan las rutas internas conocidas al idioma activo y conservan los parámetros de consulta y los fragmentos. El texto enriquecido conserva el formato seguro dentro de contenedores anidados del editor. Se omiten las imágenes de galería vacías, las imágenes de mapa sin destino no son enlaces y las etiquetas de diapositivas y búsqueda usan el idioma de interfaz del visitante.

Visual Atelier (visual-01) mantiene en movimiento automático la cinta decorativa de la página de inicio, incluso cuando el navegador solicita movimiento reducido. Al pasar el cursor el texto se detiene; al salir, se reanuda. Se conservan la apariencia original y el bucle solo con CSS.

8. Catálogo de componentes disponibles

Estos 30 componentes eyivo: compartidos forman la biblioteca completa de v1 y se cargan desde theme-core. Un tema también puede declarar e implementar sus propios componentes theme:.

Foundation Impact: componer el sitio web de una fundación

Foundation Impact (foundation-impact) presenta el propósito, los programas, la gobernanza, el impacto, los eventos, la galería y las consultas de una fundación. Su diseño ajusta las etiquetas de navegación largas y cambia a un menú desplegable en pantallas pequeñas. Los menús registrados header, footer y useful_links controlan la navegación. Cuando su menú registrado está vacío, la cabecera recurre a la navegación automática de páginas. La página de fotografías seleccionadas usa /in-pictures; /gallery sigue siendo el listado nativo de álbumes.

Foundation Impact incluye las diez plantillas integradas: Inicio, Página, Contacto, Productos, Producto, Galería, Vídeos, Blog, Categoría del blog y Entrada del blog. Conserva las áreas de contenido y los formularios registrados. Los elementos principales usan los mismos estados transparentes y subrayados que los enlaces normales al pasar el cursor o seleccionar; un hijo seleccionado también marca a su padre. Los submenús siguen el mismo estilo en escritorio y móvil.

Las cabeceras de subpáginas sin imagen usan una franja lavanda compacta con rutas de navegación próximas, una etiqueta pequeña y un título moderado. Con imagen, incorporan una capa oscura y títulos, rutas y resúmenes blancos. El texto queda por encima de la imagen y la capa, cuya dirección se adapta a los diseños de derecha a izquierda.

El componente compartido eyivo:rich_text acepta tanto contenido marcado por el editor como HTML antiguo. Ambos pasan por la lista de formato permitido: se muestran párrafos, títulos, listas y enlaces seguros, y se eliminan scripts, controladores de eventos y enlaces inseguros. Los demás campos mantienen su escape habitual. El texto enriquecido de la demo Foundation también usa la marca del editor.

El tema combina los componentes existentes eyivo:hero, project_grid, image_text, event_list, media_gallery, feature_grid, team_grid, stats, rich_text, faq, cta y lead_form. Su script de tema diferido activa los controles del carrusel de imágenes, las pestañas accesibles con teclado y el filtrado del catálogo. El menú móvil se despliega con controles HTML nativos. Las cifras usan títulos, etiquetas y notas oscuros sobre una superficie amarillo pálido, con valores en azul. Las tarjetas de programas enlazan a páginas de contenido normales. Las tarjetas de eventos describen eventos y enlazan a una página de consulta; no crean reservas ni registros de asistencia.

Su página de contacto usa eyivo:lead_form con el vínculo de contacto portable que proporciona eyivo/contact. Al importar una demostración, este vínculo se resuelve por separado para cada sitio. No se incluyen donaciones, solicitudes de subvenciones ni aprobaciones de voluntarios.

Las importaciones de demostraciones integradas reutilizan las entradas activas del catálogo compartido de medios de demostración de temas. La aplicación central es propietaria del objeto y proporciona referencias a los masters; eliminar una referencia importada no elimina el objeto compartido protegido. Una vista previa del tema y un ejemplo SEO dedicado son sitios independientes.

Village Commons: navegación secundaria y barras laterales

Village Commons (village-commons) combina un tablón de anuncios, lugares locales, la historia del pueblo, eventos, fotografías, información para visitantes y un formulario de contacto propio del sitio. Las superficies verde bosque, marfil y ámbar tienen colores de primer plano explícitos. Los componentes existentes de Eyivo aportan el contenido; las tarjetas de eventos no ofrecen reservas y las páginas de actas no constituyen un sistema de registros oficial. Las secciones de imagen y texto de las páginas informativas mantienen un relleno interior adaptable alrededor del texto. Los paneles de eventos y preguntas frecuentes de las subpáginas tienen un relleno interior adaptable. Las preguntas frecuentes usan un título compacto y desplegables redondeados apilados con controles de expansión claros.

Registre header, secondary, sidebar, footer y useful_links en theme.json. La navegación secundaria aparece en la barra de utilidades; el menú lateral aparece junto a las páginas normales y de contacto. Ambos se editan y publican con el editor de menús estándar. Mantenga breve la navegación principal. En pantallas pequeñas, el menú principal se despliega y la barra lateral pasa debajo del contenido de la página.

Una barra lateral es una región del diseño, no un nuevo tipo de componente. Los esquemas page y contact declaran un área sidebar para rich_text, announcement, download_list y contact_actions, con un máximo de tres instancias. Renderice areas.sidebar dentro de un elemento aside, junto a navigation.sidebar. La página Village life muestra un widget de texto editable. Los ajustes del tema aportan la tarjeta de contacto adicional. Cada área personalizada debe declararse por separado en cada tipo de página que la use.

{% if navigation.secondary.size > 0 %}
<nav aria-label="{{ 'Useful information' | t }}">
  {% for item in navigation.secondary %}
    <a href="{{ item.url }}"{% if item.active %} aria-current="page"{% endif %}>{{ item.label }}</a>
  {% endfor %}
</nav>
{% endif %}
<aside aria-label="{{ 'More information' | t }}">
  {% for item in navigation.sidebar %}
    <a href="{{ item.url }}">{{ item.label }}</a>
  {% endfor %}
  {{ areas.sidebar | raw }}
</aside>

La vista previa general del tema y la demostración dedicada en inglés WT-003 son sitios admin-1 independientes. La aplicación central importa las imágenes y las protege en el catálogo compartido de medios de demostración. Las capturas de los contenidos de prueba publicados por separado se toman localmente antes del despliegue y se incluyen en el tema y en Apex. Prepare verifica el hash del blueprint y la versión del tema antes de vincular la revisión de la captura a la demostración generada. El catálogo público encuentra su vista previa protegida a través de la App API autenticada. Las capturas están separadas de los medios de los clientes. El tema usa el vínculo portable del formulario de contacto de eyivo/contact.

Formularios e historial de solicitudes

Forms API 1 incluye siete procesadores aprobados. Los temas controlan diseño y estilo; los plugins definen esquema, validación y flujo. La plataforma guarda, verifica y notifica.

Un formulario, varias ubicaciones

La configuración crea un UUID predeterminado estable por sitio/plugin/tipo. Reutilizar una ubicación conserva esa identidad; un formulario nuevo con nombre recibe otro UUID. Cambiar de tema o reinstalar conserva el historial. Los temas usan alias portables y el editor permite seleccionar formularios guardados sin introducir UUIDs.

{
  "plugins": ["eyivo/contact", "eyivo/quote-request"],
  "forms": {
    "contact": {"plugin":"eyivo/contact","type":"contact","schema_version":1,"instance":"default"},
    "quote": {"plugin":"eyivo/quote-request","type":"quote_request","schema_version":1,"instance":"default"}
  }
}

Usa forms.contact en contacto y component.form en secciones de formulario. Sustituye form_preset por form_binding. Renderiza campos, ayuda, action, CSRF, form_context firmado y verification_html suministrados. Solo se aceptan cambios de presentación declarados y campos adicionales permitidos; no se debilita la validación obligatoria.

forms.contact · component.form · form_binding · form.fields · form.action · form.csrf_token · form.context · form.verification_html

Dos vistas, un registro

La bandeja compartida y las páginas de lista/detalle del plugin muestran los mismos registros. Cada formulario requiere Panel API 2, submission-list/submission-detail y un enlace de menú plano. Panel API 1 sigue admitido. Ver no marca como leído; lectura, archivo y flujo son independientes y usan record_revision al editar. Desactivar elimina las páginas del plugin, pero conserva el historial en la bandeja compartida.

{"components":[{"type":"submission-list","form_type":"contact","detail_page":"submission"}]}
{"components":[{"type":"submission-detail","form_type":"contact","list_page":"submissions"}]}

Datos y permisos

Los registros usan la base de contenido del sitio y el límite de paquete max_db_bytes existente. No hay cuotas adicionales de cantidad o retención. La configuración sigue en el master con 50 campos, 32 KB y tres niveles. Los miembros pueden ver; modificar requiere propietario/gestión. Los plugins no acceden directamente a la base y no envían PHP/Blade a la app.

Guardado verificado y notificación

La plataforma valida contexto, respuestas y Human Verification y guarda registro, uso y trabajo de notificación juntos. El mismo intento y contenido se recuperan durante 24 horas sin duplicados. SMTP se ejecuta después y puede reintentar; un fallo de correo no borra el registro. Sin destinatario del formulario se usa el correo de la empresa; si ninguna dirección es válida, se guarda sin correo.

Todos los temas incluidos usan este contrato. Los antiguos POST de contact devuelven 410; los enlaces GET de contacto funcionan. Las solicitudes de cita o reserva no confirman reservas. No se incluyen procesadores de terceros, archivos ni destinos externos arbitrarios.

POST /__eyivo/forms/{UUID}/submissions
GET /__eyivo/forms/{UUID}/challenge

Field Guide: guías legibles y bibliotecas de recursos

Field Guide (field-guide) combina una serif editorial con un texto legible, fondos azul marino, acciones verdes y sobrios acentos dorados. La portada y el área opcional de orientación comparten una introducción adaptable. Las fotografías de fondo quedan atenuadas tras el texto; si el área de orientación está vacía, la introducción usa todo el ancho.

La cabecera de escritorio muestra los cuatro primeros enlaces de página de nivel superior y coloca el resto bajo Más. Las páginas principales conservan sus propios enlaces y botones de submenú independientes. En pantallas pequeñas, un Menú desplegable nativo muestra todas las páginas y enlaces secundarios. Escape y un clic fuera cierran los desplegables de navegación. Los enlaces de idioma solo aparecen cuando hay más de un idioma disponible.

Use las áreas hero y orientation para la introducción y una orientación rápida, y el área main para los componentes existentes de Eyivo. Una cuadrícula de funciones que sigue a un contenido editorial se convierte en una lista de comprobación complementaria en pantallas anchas y lo sigue en móvil. Los artículos de texto enriquecido tienen una longitud de línea legible, un espaciado claro entre títulos y fotografías contenidas con créditos visibles. Cuando un artículo termina con un único subtítulo seguido de una lista de comprobación o una nota breve, el script del tema presenta ese contenido existente como barra lateral complementaria en escritorio y debajo del artículo en móvil; sigue siendo legible sin JavaScript. Una sección final de texto enriquecido en la página de inicio cuyo cuerpo con formato es un párrafo con enlaces HTTPS se convierte en una franja de referencia azul marino a todo el ancho con un título dorado más pequeño y enlaces verde claro, también sin JavaScript. Las colecciones de guías enlazadas usan un índice editorial con campos opcionales image_url y alt en cada elemento de service_grid, enlaces en toda la entrada y foco de teclado. La página de inicio comienza con dos guías ilustradas y después presenta en la siguiente colección una guía destacada junto a filas compactas de recursos. Las listas de servicios informativas o mixtas usan paneles de lectura numerados; solo los elementos con una URL definida tienen una acción. Las miniaturas usan las URL de medios suministradas y nunca consultan las páginas de destino. Los formularios de contacto y el pie usan el mismo espaciado y los mismos colores. La demostración ficticia del catálogo Northwater Brief se mantiene separada del contenido de ejemplo de la migración de BACC-GA; actualizar la demostración del catálogo no importa el sitio web de ningún cliente.

Automotive Care: páginas de taller y medios

Automotive Care (automotive-care) incluye plantillas propias Home, Page, Contact, Products, Product, Gallery y Videos, además del blog. Las áreas de componentes existentes siguen siendo compatibles. El diseño oscuro y dorado utiliza títulos moderados, tarjetas de servicios numeradas, credenciales con descripciones separadas y espacio entre los textos y los botones. Las imágenes de cabecera de las subpáginas llevan una capa de contraste; sin imagen se muestra una introducción sencilla.

La navegación de escritorio muestra seis enlaces principales y agrupa los demás en Más. Los enlaces padre y sus botones de submenú comparten el estilo al pasar el cursor y al indicar la página actual. El menú móvil incluye todas las páginas y enlaces secundarios. Escape y un clic fuera cierran el menú. Los idiomas solo aparecen cuando hay varios disponibles.

Las imágenes del catálogo conservan sus proporciones en marcos limitados. Las plantillas base también limitan las imágenes de productos y colocan correctamente los fondos de cabecera. La galería destaca la primera foto; un clic abre un diálogo accesible, Escape lo cierra y devuelve el foco. Sin JavaScript, el original se abre en otra pestaña. Los carruseles admiten gestos táctiles, botones de flecha, teclado y movimiento reducido; la búsqueda del catálogo filtra localmente. Las fotos de detalle del producto llenan todo el ancho del marco con un recorte centrado. Las credenciales forman una franja oscura con escudos dorados; las características usan columnas amplias con distintivos dorados y se apilan en pantallas pequeñas.

Wellness & Beauty: cuidado personal y colecciones de tratamientos

Wellness & Beauty (wellness-beauty) dispone de plantillas propias Home, Page, Contact, Products, Product, Gallery y Videos, además del blog. Las áreas de componentes y los formularios existentes siguen siendo compatibles. Los fondos rosados, los acentos suaves, los títulos serif moderados y las fotos arqueadas crean un estilo de estudio delicado. Textos y acciones tienen espacios claros. El detalle del tratamiento combina una introducción amplia, una foto con recorte centrado y contenido legible. Las tarjetas separan imágenes, descripciones y acciones; la galería utiliza marcos de álbum con leyendas.

Los enlaces normales y los enlaces padre comparten los estados rosados al pasar el cursor y de página actual. Los submenús tienen botones separados; los enlaces adicionales aparecen en Más y el menú móvil contiene todas las páginas y sus hijos. Escape y un clic fuera cierran los menús. La galería abre un diálogo y devuelve el foco al cerrar; sin JavaScript abre la imagen en otra pestaña. La búsqueda filtra localmente. Carruseles y pestañas admiten teclado y movimiento reducido. Se respetan los colores de marca; el tema no añade un sistema de reservas.

Veterinary Care: servicios, equipo y datos de contacto claros

Veterinary Care (veterinary-care) tiene plantillas propias Home, Page, Contact, Products, Product, Gallery y Videos, además del blog. Las áreas de componentes y los formularios registrados siguen siendo compatibles. Paneles verde menta, texto verde oscuro, acciones albaricoque y títulos redondeados moderados crean una clínica acogedora. Las tarjetas del equipo separan fotos, nombres, funciones y biografías. Los datos de contacto sitúan cada etiqueta sobre su valor, con enlaces de teléfono y correo legibles. El pie muestra nombre de empresa, lema breve, descripción y contacto.

Los enlaces normales y padre comparten los estados verde menta al pasar el cursor y de página actual. Los padres conservan botones separados de submenú; los enlaces extra aparecen en Más y el menú móvil contiene todas las páginas e hijos. Escape y un clic fuera cierran los menús. El catálogo ofrece acciones claras y búsqueda local; las fotos de detalle llenan marcos limitados con recorte central. La galería destaca una imagen grande con vistas secundarias y abre originales en un diálogo que devuelve el foco. Sin JavaScript, abre otra pestaña. Carruseles y pestañas admiten teclado y movimiento reducido.

Early Learning: páginas alegres para escuelas

Early Learning (early-learning) incluye plantillas propias de Inicio, Página, Contacto, Productos, Producto, Galería y Vídeos, además del blog. Conserva las áreas de componentes y los formularios registrados. Fondos crema, tonos coral, menta y amarillo, títulos redondeados y detalles de bloques acompañan la educación infantil. Los perfiles y las tres tarjetas de Acerca de separan imágenes, funciones y descripciones. El contacto usa paneles etiquetados, los programas una introducción espaciosa con fotos centradas y la galería marcos de álbum con leyendas.

Los enlaces y sus elementos principales comparten estados al pasar el cursor con borde y una marca amarilla para la página actual. Los submenús tienen controles separados; Más agrupa enlaces adicionales en escritorio y el menú móvil nativo contiene todas las páginas e hijos. Las fotos abren un diálogo que devuelve el foco al cerrarse, o una pestaña nueva sin JavaScript. La búsqueda local, las pestañas y los deslizadores admiten teclado y movimiento reducido. La demo incluye textos escolares y no añade un sistema de matrícula.

Temas de la colección de diseño

Cada tema incluye las diez plantillas de página estándar y da estilo a los treinta componentes compartidos de Eyivo. Las páginas de ejemplo de componentes y solicitudes incluidas muestran secciones más allá de la página de inicio. Los vínculos de contacto, presupuesto, consulta de producto, cita, solicitud de curso, reserva y consulta inmobiliaria usan los plugins existentes y la verificación humana. El filtrado del catálogo, las pestañas accesibles con teclado, los carruseles de imágenes y los desplegables de navegación nativos admiten los mismos contratos de contenido en escritorio, móvil y diseños de derecha a izquierda.

Seafood Restaurant

Seafood Restaurant (seafood-restaurant) combina azul océano con naranja cítrico, páginas en blanco frío y títulos sobrios en Manrope. Una portada fotográfica de marisco da paso a una franja compacta de ventajas, platos estrella, una historia junto al agua, galerías circulares de platos y un panel azul marino con motivos para visitar. El contenido de ejemplo ficticio de Tide & Table incluye solicitudes de reserva, diez tipos de página, las treinta secciones compartidas y los siete vínculos de formulario existentes. Los enlaces de navegación, los enlaces principales y Más comparten los estados al pasar el cursor y de página actual; las páginas secundarias seleccionadas resaltan su elemento principal. Los menús móviles mantienen los enlaces secundarios bajo su elemento principal. Las pestañas, los carruseles, el filtrado de platos y los diseños de derecha a izquierda mantienen los contratos de la plataforma. Las solicitudes de reserva requieren confirmación; no se da a entender ningún sistema de pago ni de disponibilidad de mesas en tiempo real.

Family Insurance

Family Insurance (family-insurance) combina una cabecera violeta y una navegación blanca insertada con fotografías familiares, suaves paneles informativos lavanda y títulos sobrios en Manrope. El contenido de ejemplo de Hearthway Insurance es ficticio. Los enlaces de navegación simples y principales comparten el mismo efecto al pasar el cursor y el mismo estado de página actual; una página secundaria seleccionada resalta su elemento principal. Títulos compactos en las subpáginas, galerías con leyendas, imágenes de catálogo recortadas y paneles de contacto etiquetados llevan el diseño más allá de la página de inicio.

Barbershop

Barbershop (barbershop) sigue una cabecera verde profundo de dos filas con un logotipo serif centrado, una portada fotográfica a sangre sombreada desde el lado de lectura y páginas crema con títulos en Playfair Display y botones de latón. Las tarjetas de funciones dibujan iconos de línea y muestran cada valor como una breve etiqueta dorada, las credenciales se sitúan en una franja oscura dividida, el carrusel muestra cuatro cortes cuadrados, las especificaciones de producto se convierten en una lista de precios a dos columnas y las ofertas en un panel con roseta discontinua. Las tarjetas del catálogo en la página de inicio y en la de servicios son mosaicos fotográficos oscuros. El contenido de ejemplo de Northline Barber es ficticio.

Recruitment & Staffing

Recruitment & Staffing (recruitment-staffing) usa una navegación blanca redondeada, una portada dividida lavanda con fotografía en arco, acciones moradas, testimonios en verde menta y un pie azul violáceo. El contenido de ejemplo ficticio de Brightlane Talent incluye servicios propios de la selección de personal, perfiles del equipo y textos de consulta. Los títulos en Plus Jakarta Sans se mantienen discretos. La navegación principal y secundaria, los detalles del catálogo, las galerías, los artículos y todos los formularios de solicitud registrados siguen el mismo lenguaje visual.

Airline Booking

Airline Booking (airline-booking) usa una cabecera blanca con un símbolo de avión, una portada redondeada a todo el ancho con una puesta de sol cuyo texto y acciones se sitúan en una barra de reserva blanca flotante, y títulos en Figtree en verde azulado y tinta. Las tarjetas del catálogo se convierten en mosaicos de destinos con una insignia numerada, la imagen y el texto se colocan en un panel menta con una etiqueta verde azulada, las cifras se convierten en una franja redondeada verde azulada, las tarjetas de funciones en una lista a dos columnas con flechas y el pie es un panel redondeado verde azulado con una acción de contacto. El contenido de ejemplo de Skyvane Travel es ficticio.

Architecture Studio

Architecture Studio (architecture-studio) coloca una cabecera transparente con navegación en píldora esmerilada sobre una fotografía a sangre de una residencia bañada en tono arena desde el lado de lectura, y usa títulos ligeros en Montserrat, botones en píldora color espresso con discos de flecha blancos y una leyenda de proyecto flotante. Las tarjetas de catálogo y servicios son suaves mosaicos color arena con una esquina de imagen asimétrica, la cuadrícula de proyectos se convierte en una franja oscura de proyectos destacados, la imagen y el texto ocupan todo el ancho con un borde de imagen redondeado, las cifras se sitúan en una columna con líneas y los formularios de captación se convierten en una franja de contacto color espresso. El contenido de ejemplo de Solace Architecture es ficticio.

Automation SaaS

Automation SaaS (automation-saas) combina una cabecera blanca y una portada centrada en Instrument Serif sobre una fotografía de cielo y colinas con páginas en verde salvia, tarjetas blancas redondeadas y acciones en verde vivo. Las cifras se convierten en cuatro tarjetas con la tercera en verde bosque, la imagen y el texto alternan entre una tarjeta blanca y una lima según la variante, la sección de vídeo se convierte en una tarjeta de función verde bosque, la cuadrícula de proyectos en tarjetas horizontales de artículos con una etiqueta de leer más, y las preguntas frecuentes son un acordeón centrado. El pie termina con un gran logotipo serif sobre colinas verdes dibujadas. El contenido de ejemplo de Fernflow es ficticio.

Business Analytics SaaS

Business Analytics SaaS (business-analytics-saas) usa una cabecera blanca, una portada centrada en Outfit con una forma de acento esmeralda y la fotografía de portada dentro de un marco de producto azul marino con un patrón de barra lateral. Las cifras se sitúan en una fila dividida, los iconos de funciones alternan esmeralda, azul y violeta, la imagen y el texto se colocan sobre una franja menta con una tarjeta de crecimiento flotante, la nube de logotipos se convierte en mosaicos de integraciones y la oferta de precio en un plan esmeralda destacado. Los testimonios muestran estrellas y puntos de avatar, y el pie es azul marino. El contenido de ejemplo de Metrova es ficticio.

Car Dealership

Car Dealership (car-dealership) usa una cabecera de dos filas en verde azulado profundo con una línea de contacto, una portada dividida en menta con una etiqueta de valoración sobre la fotografía del vehículo y una tarjeta de búsqueda blanca superpuesta a la portada. Las tarjetas de servicios con imagen se convierten en seis mosaicos compactos de categorías, la imagen y el texto en una franja de compraventa verde azulado oscuro, las credenciales en motivos centrados con iconos, las tarjetas del catálogo llevan una insignia numerada, los testimonios se sitúan sobre verde azulado profundo, la oferta de precio se convierte en un panel de financiación menta y el pie se abre con una llamada a la acción. El contenido de ejemplo de Corvane Motors es ficticio.

Car Rental

Car Rental (car-rental) es un tema oscuro de paneles verde casi negro con bordes suaves y acentos lima. Una franja lima se sitúa sobre un logotipo centrado y una navegación de categorías espaciada; la portada es una tarjeta fotográfica con borde, un gran título en Archivo en mayúsculas y botones en píldora lima con discos de flecha. Las credenciales se convierten en una sola franja de ventajas, las tarjetas del catálogo en tarjetas de alquiler blancas con la opción central perfilada en lima, las tarjetas de funciones en pasos numerados y el pie es un panel con borde y una acción de contacto. El contenido de ejemplo de Laneway Rentals es ficticio.

Catering Services

Catering Services (catering-services) usa una cabecera verde bosque, páginas crema y títulos en Gilda Display con un separador de hoja. La portada sitúa la fotografía en un marco en arco con un símbolo de reproducción; las tarjetas de servicios con imagen se colocan en una fila de cuatro columnas, las tarjetas de funciones se convierten en una franja verde bosque con la tarjeta central en verde oliva, la imagen y el texto combinan una fotografía con muesca con una tarjeta de texto color arena y una leyenda tipo firma, las credenciales se convierten en una carta cuidadosamente diseñada, el carrusel muestra platos circulares sobre verde y las preguntas frecuentes se sitúan dentro de una tarjeta verde salvia. El contenido de ejemplo de Sage & Table Catering es ficticio.

Coaching & Consulting

Coaching & Consulting (coaching-consulting) combina una cabecera y una portada azul marino con un degradado de naranja a rosa y violeta que recorre el titular, los botones y un mosaico de retrato con una etiqueta blanca con el nombre. La nube de logotipos prolonga la portada azul marino como franja de clientes, las tarjetas de funciones llevan un subrayado en degradado, las cifras se convierten en un panel de comunidad dividido en degradado y azul marino, las tarjetas de servicios incorporan insignias con contorno de color y botones de flecha, la cuadrícula de proyectos muestra tarjetas de pasos enmarcadas, la oferta de precio se convierte en un plan destacado oscuro y la imagen y el texto se sitúan en un panel lila. El contenido de ejemplo de Northbeam Coaching es ficticio.

Construction Company

Construction Company (construction-company) usa una barra de cabecera flotante verde azulado oscuro con acciones lima sobre una página blanca, y una portada cuya fotografía llega al borde con un corte inclinado y un sello circular discontinuo. Las cifras se sitúan en una barra oscura superpuesta a la portada, la tercera tarjeta de servicio se oscurece, la imagen y el texto se colocan en un panel verde salvia con una fotografía en paralelogramo, la cuadrícula del equipo muestra cuatro retratos de la cuadrilla, las credenciales se convierten en un panel oscuro numerado del proceso y el pie es un panel redondeado verde azulado con datos de contacto directos. El contenido de ejemplo de Ironleaf Builders es ficticio.

Cookie Bakery

Cookie Bakery (cookie-bakery) usa una página crema, una portada redondeada color chocolate con robustas letras Lilita One que pasan de blanco a mostaza, una fotografía circular de producto y puntos de virutas de colores. Las tarjetas de funciones alternan melocotón, rosa, celeste y mantequilla, la oferta de precio se convierte en un panel de descuento melocotón, las especificaciones de producto en una lista oscura de especialidades del día, las tarjetas de servicios con imagen en selecciones de productos circulares, la imagen y el texto usan una fotografía con marco orgánico y un sello coral, las credenciales se convierten en una franja oscura de servicios y el pie tiene un borde ondulado color chocolate. El contenido de ejemplo de Crumb & Co. Bakery es ficticio.

Coworking Space

Coworking Space (coworking-space) combina una página blanco roto cálido con paneles verde profundo, acentos melocotón y titulares serif en Gloock; el título de la portada pasa de verde a melocotón entre líneas y la fotografía del espacio se sitúa en un gran marco redondeado con una tarjeta de leyenda verde. Las credenciales se convierten en una franja compacta de ventajas, las tarjetas de funciones en una lista con iconos, las tarjetas del catálogo comparten una franja color arena con la tarjeta central en verde, las cifras forman una franja verde, las imágenes de la galería llevan leyendas oscuras, los testimonios muestran un mosaico de retrato y los formularios de captación se convierten en tarjetas verdes con un botón de envío melocotón. El contenido de ejemplo de Greenhall Workspace es ficticio.

Creative Studio Coffee

Creative Studio Coffee (creative-studio-coffee) sitúa una cabecera transparente y un titular en Bodoni Moda en mayúsculas que pasa de blanco a latón sobre una fotografía a sangre de espresso, y continúa con páginas en beige café con leche. Las credenciales se convierten en una franja de valores de cinco partes, la cuadrícula de proyectos en seis mosaicos oscuros de retrato con anillos de flecha, la imagen y el texto ocupan todo el ancho con una leyenda en sello circular, los formularios de captación se convierten en una franja de membresía en tono tostado oscuro y el pie es una disposición clara en columnas con líneas. El contenido de ejemplo de Crema Digital es ficticio.

Duck Farm

Duck Farm (duck-farm) mantiene páginas blancas y verde pálido con paneles en verde granja profundo y acentos amarillo sol. La fotografía de portada llega al borde y se funde con el texto, cuya última línea se vuelve verde, con una leyenda manuscrita. Las tarjetas del catálogo muestran cuatro productos, la imagen y el texto se convierten en un panel verde oscuro con una fotografía de forma orgánica y un sello natural discontinuo, las tarjetas de funciones en iconos de confianza divididos, las cifras en un panel oscuro sobre la granja, las credenciales en un proceso numerado de la granja a la mesa y los testimonios se sitúan sobre crema. El contenido de ejemplo de Brookmead Farm es ficticio.

Electrical Services

Electrical Services (electrical-services) combina una cabecera blanca con un enlace telefónico y un botón verde de presupuesto con portadas y tarjetas de servicios en gris carbón. La fotografía de portada se funde en gris carbón y las dos últimas líneas del titular se vuelven verde eléctrico. Las cifras se sitúan en una tarjeta blanca superpuesta a la portada, la imagen y el texto recortan la fotografía en hexágono con un sello circular de seguridad, las tarjetas de servicios se vuelven gris carbón con círculos de iconos verdes, las credenciales se convierten en motivos para elegir la empresa marcados con rayos y la llamada a la acción en un panel verde de urgencias. El contenido de ejemplo de Brightwire Electric es ficticio.

Fashion Store Lavender

Fashion Store Lavender (fashion-store-lavender) combina una cabecera y una portada dividida en gris carbón con una fotografía lila en arco, títulos en Cormorant Garamond y cálidas páginas marfil. Una franja lavanda de ventajas da paso a colecciones editoriales con imagen, discretas tarjetas de novedades y un panel oscuro de campaña de moda. El tema incluye las diez plantillas de página, da estilo a las treinta secciones compartidas y admite los siete formularios de solicitud existentes. Los enlaces de navegación, los elementos principales y Más comparten los estados lavanda al pasar el cursor y de selección, también cuando hay una página secundaria seleccionada. Más y los menús móviles usan filas a todo el ancho con los enlaces anidados bajo su elemento principal. La búsqueda del catálogo, la navegación anidada nativa, las pestañas accesibles con teclado y los carruseles de imágenes mantienen los contratos de la plataforma. El contenido de ejemplo de Violette Edit es ficticio; la colección usa enlaces de consulta en lugar de una cesta de la compra o un proceso de pago.

9. ¿Qué sucede desde la activación de la plantilla hasta la publicación?

1. Instala o activa la plantilla. Eyivo valida el paquete, registra su clave y versión, y muestra sus opciones y esquemas de componentes en la aplicación.
2. Elige un tipo de página. Eyivo usa el archivo Liquid y la definición de áreas del tema activo cuando existen; de lo contrario, usa los correspondientes de theme-core.
3. Añade secciones permitidas. La aplicación solo ofrece los tipos enumerados en allowed_components. Guarda el texto, las referencias multimedia y las traducciones en la instancia seleccionada.
4. Renderiza de forma segura. Eyivo resuelve los datos de empresa, página, SEO y navegación; renderiza los componentes de área guardados y los componentes directos situados por el diseñador; después renderiza el tipo de página y el diseño del tema activo.
5. Publica. El visitante recibe el HTML y CSS del tema, pero nunca credenciales de base de datos, modelos internos ni código de aplicación.

10. Validación y errores comunes