Créez un thème complet pour un site d’entreprise, en toute sécurité.

1. Comprendre le fonctionnement

Le système repose sur trois responsabilités distinctes. Les séparer permet de comprendre la version 1.

Ce n’est pas un éditeur de pages libre : le propriétaire peut ajouter une section autorisée dans main et choisir sa position. Il ne peut pas créer une zone, déplacer la section principale dans le pied de page, modifier le HTML ni changer votre CSS.

2. Démarrage rapide : un thème minimal et utilisable

Chaque thème v1 fournit sa mise en page, ses styles et ses scripts. Son auteur peut les organiser librement. Un thème n’hérite jamais de la mise en page ou des ressources d’un autre thème. Les composants communs eyivo: et les sept types de pages de repli proviennent de theme-core ; le thème ne contient que les types de pages qu’il remplace et les composants qu’il déclare dans l’espace de noms theme:.

Chaque thème v1 nécessite un fichier de mise en page par défaut. Les dossiers page-types/ et components/ sont facultatifs si le package utilise uniquement les éléments de repli du noyau :

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 provient toujours du thème actif et définit le document public complet. Eyivo cherche d’abord le type de page demandé dans ce thème, puis utilise theme-core/page-types en repli. Le noyau ne fournit ni mise en page ni ressources ; le contenu de repli reste donc intégré et stylisé par le thème actif.

3. Décrivez le modèle dans theme.json

Le manifeste déclare les capacités du thème et définit le contrat utilisé pour générer les formulaires de l’application. Il précise les structures de pages disponibles, les zones de chaque structure et les données que chaque composant peut stocker. Les thèmes intégrés déclarent explicitement les dix types de pages standard et incluent les fichiers Liquid correspondants. Les thèmes personnalisés peuvent continuer à utiliser les modèles de secours du noyau pour les types non déclarés.

{
  "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 }
      }
    }
  }
}

Types de pages de repli : les types intégrés sont home, page, gallery, contact, products, product et videos. Si vous omettez un type, sa définition et son fichier Liquid proviennent de theme-core. Ne déclarez un type que si le thème fournit aussi le fichier de remplacement page-types/<type>.liquid correspondant.

L’éditeur utilise les définitions fusionnées des types de pages : celles du thème actif remplacent les définitions correspondantes du noyau, tandis que les types omis restent disponibles depuis le noyau.

4. Contenu de démonstration complet dans demo.json

Chaque package transmis doit contenir un fichier demo.json portable, limité aux brouillons, ainsi qu’au moins une capture d’écran réalisée avec ces données chargées. Les thèmes intégrés utilisent le même schéma. N’incluez ni identifiants de base de données, ni domaines de clients, ni identifiants de connexion ou de stockage d’objets.

{
  "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": []
}

Pages et composants

{
  "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" }
    }
  }]
}

Les types et zones de composants doivent être déclarés dans le manifeste du thème actif ou theme-core. Utilisez des chemins relatifs tels que /contact pour les liens vers le même site. Les démos de page d’accueil intégrées utilisent leur image de bannière existante comme fond sur toute la largeur, avec un voile lisible et un texte adaptatif : immersive dans la plupart des thèmes et centered avec image dans Compact. Les autres variantes conservent leur propre mise en page.

Langues de démonstration et repli

L’anglais est la langue de base obligatoire : définissez default_locale sur en. Son absence dans les anciens fichiers signifie aussi anglais. Les autres langues prises en charge sont facultatives ; ne présentez pas des copies anglaises comme des traductions.

Fournissez translations.en et des objets de langue facultatifs pour l’entreprise, les réglages, pages, composants, produits, galeries, légendes et textes alternatifs, vidéos et articles. Les anciens champs anglais sans clé de langue restent acceptés. La création choisit la langue principale du site et utilise l’anglais pour chaque champ absent. Les tableaux remplacent le tableau anglais entier ; les valeurs explicitement vides sont conservées. Seule la langue choisie est importée, sans activer automatiquement d’autres langues.

Utilisez les slugs sources anglais pour les liens internes et les menus portables. L’import les remplace par les slugs traduits, y compris dans le texte enrichi et les articles. Les menus peuvent fournir des tables explicites slugs et labels. Les libellés absents utilisent l’anglais. Les URL externes restent inchangées.

{
  "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" }
    }]
  }
}

Sécurité des importations et des médias

Les nouveaux sites du tableau de bord incluent les données de démonstration par défaut et publient immédiatement la langue choisie ; le propriétaire peut décocher l’option. Sur un site existant, l’import depuis Identité visuelle crée toujours des brouillons et conserve le contenu publié. L’App centrale copie les images dans la médiathèque du nouveau site et transmet les références par l’API interne. Les masters et les thèmes ne reçoivent jamais les identifiants du stockage objet. Les thèmes utilisent la valeur media.public_url fournie.

Déclarez les captures d’écran dans theme.json.preview avec data_source: "demo_data". Le package doit contenir chaque image preview déclarée.

5. Écrivez la mise en page dont votre thème a besoin

La mise en page par défaut possède le document HTML complet. Rien en dehors du thème actif ne fournit son en-tête, son pied de page, sa feuille de style, son JavaScript ou sa structure visuelle.

<!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>

Le fichier de chaque type de page fixe la position de ses zones dynamiques. Les composants de zone sont déjà des fragments HTML rendus : insérez-les avec | raw. Les valeurs ordinaires sont échappées par défaut.

<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>

Rendre directement un composant

Le concepteur peut placer un composant enregistré directement dans une mise en page ou un fichier de type de page. Le thème fixe cet emplacement ; le propriétaire ne peut ni le réordonner ni le supprimer dans le panneau. Transmettez un objet avec data:, des champs de schéma séparés ou les deux ; les champs nommés priment sur les clés correspondantes 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"
%}

Le type doit être une chaîne littérale entre guillemets avec un espace de noms. Le rendu direct utilise le même schéma, les mêmes variantes, le même fichier et le même objet component normalisé qu’une instance dans une zone. Un fichier de composant ne peut pas afficher d’autres composants.

Ressources : utilisez toujours {{ 'css/theme.css' | asset_url }}. Eyivo le sert depuis le package actif à /theme-assets/<theme>/css/theme.css ; ne codez en dur ni le nom d’un autre thème ni un chemin du système de fichiers.

En-tête du document, routes et dictionnaires d’interface

Chaque mise en page doit afficher {% eyivo_head %} exactement une fois. Eyivo génère alors le titre, la description, les directives robots, l’URL canonique, les liens hreflang, Open Graph et les données structurées. Utilisez routes.home, routes.contact, routes.catalog, routes.gallery et routes.videos au lieu de coder en dur les routes publiques. Faites passer les URL configurables par | localized_url : les routes internes connues reçoivent le préfixe de la langue active, tandis que les URL externes restent inchangées.

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

Créez au besoin des fichiers locales/<locale>.json pour les libellés d’interface propres au thème. La recherche suit cet ordre : anglais du noyau, langue du noyau, anglais du thème, puis langue du thème. Les libellés communs de theme-core fonctionnent ainsi sans copie de fichiers. Placez les textes commerciaux dans le contenu traduisible, les champs des composants ou les paramètres du thème, pas dans les dictionnaires.

Un fichier de composant personnalisé

<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>

Eyivo sélectionne la langue du visiteur pour les champs traduisibles avant le rendu. Un visiteur turc et un visiteur anglophone voient donc la même structure de composant, mais des valeurs différentes dans component.data.heading.

Menus déclarés

Les thèmes peuvent déclarer des menus supplémentaires à un seul niveau dans theme.json. Main est réservé : navigation.main conserve la visibilité des pages et les liens de listes automatiques. Chaque menu exige une clé stable, un libellé, une description et un emplacement réellement rendu.

Liens de pages imbriqués dans la navigation principale

Chaque élément de navigation.main inclut un tableau children. Lorsqu’une page a un parent, elle apparaît dans la liste children de ce parent. La plateforme ajoute un menu déroulant accessible aux liens correspondants de l’en-tête du site ; les thèmes peuvent aussi afficher directement le tableau 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 %}

Les pages enfants conservent leurs propres URL et leur statut de publication. La navigation principale ne comprend que les pages publiées et visibles disposant d’une traduction publiée dans la langue active. Les relations parent-enfant ont un seul niveau : choisissez une page de premier niveau qui n’est pas la page d’accueil. Les menus enregistrés tels que navigation.footer restent plats.

{
  "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."
    }
  }
}

Affichez navigation.footer ou une autre clé déclarée avec item.label, item.url, item.active et item.kind. Respectez le libellé fourni, échappez la sortie et nommez clairement la navigation. Un menu supplémentaire vide ne reprend jamais 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 %}

Les pages, articles, produits, galeries et vidéos peuvent appartenir à plusieurs menus supplémentaires. L’écran Menus accepte aussi les listes, liens personnalisés, ordres indépendants et libellés traduits. La structure est commune aux langues ; les traductions non publiées sont masquées.

Enregistrer un contenu prépare ses affectations ; le publier applique uniquement ses choix. Les brouillons de menu sont enregistrés et publiés séparément. Publier un menu ne publie pas ses destinations. Les affectations non prises en charge sont conservées lors d’un changement de thème.

initialize_from_main copie les liens une seule fois, sans synchronisation ultérieure. Les anciens thèmes sans menus restent compatibles. Les démos utilisent le type et le slug source, une clé de liste ou une URL personnalisée, jamais des identifiants propres à un site.

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

Les champs de texte enrichi et page.body restent échappés dans Liquid ; la plateforme traite les marqueurs et références de pages en toute sécurité. Seul le HTML fiable déjà rendu, comme blog.post.body_html, utilise raw. Les références suivent les changements de slug et deviennent indisponibles sans traduction publiée.

6. Les données Liquid sûres à votre disposition

Liquid reçoit des données simples et normalisées, et non des modèles Laravel ou de base de données. Si une valeur ne figure pas dans ce tableau, traitez-la comme indisponible dans la v1.

Exemple de mise en page adaptée à la langue

<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 %}

Chaque langue disponible fournit aussi label, direction, is_default, current et has_translation. Eyivo ne propose que les traductions publiées équivalentes ; les thèmes doivent donc utiliser language.url au lieu de construire /en ou un autre préfixe.

Exemple de jeton basé sur les paramètres : style="--brand: {{ theme.settings.primary_color }}". Le réglage doit au préalable être déclaré dans theme.json.

7. Composants directs et dynamiques

Les composants suivent un seul contrat de rendu, avec deux modes de placement. Le concepteur place directement un composant dans une mise en page ou un type de page. Un composant dynamique est enregistré comme instance dans une zone et géré depuis l’éditeur. Chaque instance dynamique possède un ID stable, un type avec espace de noms, une zone, une position, une variante facultative, des données et des traductions. La position définit uniquement l’ordre, pas l’identité.

Composant universel : définissez "universal": true dans sa définition pour le rendre disponible dans toutes les zones des types de pages compatibles. Un schéma valide et un fichier Liquid restent obligatoires.

Les liens d’action partagés adaptent les chemins internes connus à la langue active tout en conservant les paramètres de requête et les fragments. Le texte enrichi conserve la mise en forme sûre dans les conteneurs imbriqués de l’éditeur. Les images de galerie vides sont omises, les images de carte sans destination ne sont pas des liens, et les libellés des diapositives et de recherche utilisent la langue d’interface du visiteur.

Visual Atelier (visual-01) fait défiler automatiquement le bandeau décoratif de sa page d’accueil, y compris lorsque le navigateur demande des animations réduites. Le survol met le texte en pause ; le quitter le relance. L’apparence d’origine et la boucle en CSS seul sont conservées.

8. Catalogue des composants disponibles

Ces 30 composants eyivo: partagés constituent la bibliothèque v1 complète et proviennent de theme-core. Un thème peut aussi déclarer et implémenter ses propres composants theme:.

Foundation Impact : composer le site web d’une fondation

Foundation Impact (foundation-impact) présente la raison d’être, les programmes, la gouvernance, l’impact, les événements, la galerie et les demandes d’une fondation. Sa mise en page renvoie à la ligne les longs libellés de navigation et passe à un menu dépliable sur les petits écrans. Les menus enregistrés header, footer et useful_links contrôlent la navigation. Lorsque son menu enregistré est vide, l’en-tête revient à la navigation automatique par pages. La page de photos sélectionnées utilise /in-pictures ; /gallery reste la liste native des albums.

Foundation Impact possède les dix modèles intégrés : Accueil, Page, Contact, Produits, Produit, Galerie, Vidéos, Blog, Catégorie et Article. Les zones de contenu et les formulaires enregistrés restent compatibles. Les entrées parentes utilisent les mêmes états transparents et soulignés au survol et à la sélection que les liens ordinaires ; un enfant sélectionné marque aussi son parent. Les sous-menus suivent ce style sur ordinateur et mobile.

Sans image, les en-têtes de sous-pages utilisent une bannière lavande compacte avec un fil d’Ariane rapproché, une petite accroche et un titre mesuré. Avec image, un voile sombre et des titres, fils d’Ariane et résumés blancs assurent la lisibilité. Le texte reste au-dessus de l’image et du voile, dont la direction suit les mises en page de droite à gauche.

Le composant partagé eyivo:rich_text accepte les contenus marqués par l’éditeur et les anciens contenus HTML. Tous passent par la liste de formatage autorisé : paragraphes, titres, listes et liens sûrs sont affichés, tandis que scripts, gestionnaires d’événements et liens dangereux sont supprimés. Les autres champs conservent leur échappement habituel. Les textes enrichis de la démo Foundation utilisent aussi la marque de l’éditeur.

Le thème compose les composants existants eyivo:hero, project_grid, image_text, event_list, media_gallery, feature_grid, team_grid, stats, rich_text, faq, cta et lead_form. Son script de thème différé active les commandes du carrousel d’images, les onglets utilisables au clavier et le filtrage du catalogue. Le menu mobile se déplie avec des commandes HTML natives. Les chiffres utilisent des titres, des libellés et des notes sombres sur une surface jaune pâle, avec des valeurs en bleu. Les cartes de programmes renvoient vers des pages de contenu ordinaires. Les cartes d’événements décrivent des événements et renvoient vers une page de demande ; elles ne créent ni réservations ni inscriptions.

Sa page de contact utilise eyivo:lead_form avec la liaison de contact portable fournie par eyivo/contact. L’import d’une démo résout cette liaison séparément pour chaque site. Les dons, les demandes de subvention et les validations de bénévoles ne sont pas inclus.

Les imports de démos intégrées réutilisent les entrées actives du catalogue partagé de médias des démos de thèmes. L’application centrale possède l’objet et fournit des références aux masters ; supprimer une référence importée ne supprime pas l’objet partagé protégé. Un aperçu de thème et un exemple SEO dédié sont des sites distincts.

Village Commons : navigation secondaire et barres latérales

Village Commons (village-commons) réunit un tableau d’affichage, des lieux locaux, l’histoire du village, des événements, des photos, des informations pour les visiteurs et un formulaire de contact propre au site. Les surfaces vert forêt, ivoire et ambre ont des couleurs de premier plan explicites. Les composants Eyivo existants fournissent le contenu ; les cartes d’événements ne proposent pas de réservation, et les pages de comptes rendus ne constituent pas un système d’archives officiel. Les sections image et texte des pages d’information conservent une marge intérieure adaptative autour du texte. Les panneaux d’événements et de FAQ des sous-pages ont une marge intérieure adaptative. Les FAQ utilisent un titre compact et des éléments dépliables arrondis empilés avec des commandes d’ouverture claires.

Enregistrez header, secondary, sidebar, footer et useful_links dans theme.json. La navigation secondaire apparaît dans la barre utilitaire ; le menu latéral apparaît à côté des pages ordinaires et de contact. Les deux se modifient et se publient avec l’éditeur de menus standard. Gardez la navigation principale courte. Sur les petits écrans, le menu principal se déplie et la barre latérale passe sous le contenu de la page.

Une barre latérale est une zone de mise en page, pas un nouveau type de composant. Les schémas page et contact déclarent une zone sidebar pour rich_text, announcement, download_list et contact_actions, avec au maximum trois instances. Affichez areas.sidebar dans un élément aside, à côté de navigation.sidebar. La page Village life montre un widget de texte modifiable. Les réglages du thème fournissent la carte de contact supplémentaire. Chaque zone personnalisée doit être déclarée séparément pour chaque type de page qui l’utilise.

{% 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>

L’aperçu général du thème et la démo dédiée en anglais WT-003 sont des sites admin-1 distincts. Les images sont importées par l’application centrale et protégées dans le catalogue partagé de médias de démonstration. Les captures des contenus de test publiés séparément sont réalisées localement avant le déploiement et intégrées au thème et à Apex. Prepare vérifie l’empreinte du blueprint et la version du thème avant de lier la révision de capture à la démo générée. Le catalogue public découvre son aperçu protégé via l’App API authentifiée. Les captures sont distinctes des médias des clients. Le thème utilise la liaison de formulaire de contact portable de eyivo/contact.

Formulaires et historique des demandes

Forms API 1 propose sept processeurs approuvés. Les thèmes définissent présentation et style ; les plugins définissent schéma, validation et traitement. La plateforme assure stockage, vérification et notifications.

Un formulaire, plusieurs emplacements

La configuration crée un UUID par défaut durable par site/plugin/type. Réutiliser un emplacement conserve cette identité ; créer un formulaire nommé génère un autre UUID. Changer de thème ou réinstaller préserve l’historique. Les thèmes utilisent des alias portables ; le client sélectionne un formulaire enregistré sans saisir d’UUID.

{
  "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"}
  }
}

Utilisez forms.contact pour le contact et component.form pour les sections de formulaire. Remplacez form_preset par form_binding. Affichez les champs, aides, action, CSRF, form_context signé et verification_html fournis. Seuls les changements de présentation déclarés et les champs supplémentaires autorisés sont acceptés ; la validation obligatoire reste intacte.

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

Deux vues, un enregistrement

La boîte commune et les pages liste/détail du plugin affichent les mêmes enregistrements. Les formulaires exigent Panel API 2, submission-list/submission-detail et un lien de menu sans sous-menu. Panel API 1 reste compatible. Consulter ne marque pas comme lu ; lecture, archive et traitement sont distincts, avec record_revision pour les modifications. La désactivation retire les pages du plugin, tandis que la boîte commune conserve les instantanés historiques.

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

Données et permissions

Les données utilisent la base de contenu du site et son quota max_db_bytes existant. Aucun quota supplémentaire de nombre ou de conservation. La configuration reste sur le master avec 50 champs, 32 Ko et trois niveaux. Les membres consultent ; modifier exige propriétaire/gestion. Aucun accès direct à la base pour les plugins, ni transfert PHP/Blade vers l’app.

Enregistrement vérifié et notification

La plateforme valide contexte, réponses et Human Verification, puis enregistre demande, utilisation et notification ensemble. Une tentative identique se récupère pendant 24 heures sans doublon. SMTP intervient ensuite avec des reprises possibles ; une erreur mail ne supprime pas la demande. Sans destinataire du formulaire, l’adresse de l’entreprise est utilisée ; si aucune adresse n’est valide, la demande est conservée sans email.

Tous les thèmes fournis suivent ce contrat. Les anciens POST contact renvoient 410 ; les pages de contact GET restent accessibles. Les demandes de rendez-vous ou réservation ne confirment aucune réservation. Processeurs tiers, fichiers et destinations externes arbitraires sont exclus.

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

Field Guide : des guides lisibles et des bibliothèques de ressources

Field Guide (field-guide) associe une serif éditoriale à un texte courant lisible, des fonds bleu marine, des actions vertes et de sobres accents dorés. L’ouverture et la zone d’orientation facultative partagent une introduction adaptative. Les photos d’arrière-plan restent atténuées derrière le texte ; lorsque la zone d’orientation est vide, l’introduction occupe toute la largeur.

L’en-tête sur ordinateur affiche les quatre premiers liens de page de premier niveau et place les autres sous Plus. Les pages parentes conservent leurs propres liens et des boutons de sous-menu distincts. Sur les petits écrans, un Menu déroulant natif affiche chaque page et chaque lien enfant. Échap et un clic à l’extérieur ferment les menus déroulants de navigation. Les liens de langue n’apparaissent que lorsque plusieurs langues sont disponibles.

Utilisez les zones hero et orientation pour l’introduction et une orientation rapide, et la zone main pour les composants Eyivo existants. Une grille de fonctionnalités placée après un contenu éditorial devient une liste de contrôle complémentaire sur les grands écrans et le suit sur mobile. Les articles en texte enrichi ont une longueur de ligne lisible, des espacements de titres clairs et des photos contenues avec des crédits visibles. Lorsqu’un article se termine par un seul intertitre suivi d’une liste de contrôle ou d’une courte note, le script du thème présente ce contenu existant comme une barre latérale complémentaire sur ordinateur et sous l’article sur mobile ; il reste lisible sans JavaScript. Une section finale de texte enrichi sur la page d’accueil dont le corps mis en forme est un paragraphe contenant des liens HTTPS devient une bande de références bleu marine pleine largeur avec un titre doré plus petit et des liens vert clair, y compris sans JavaScript. Les collections de guides liées utilisent un index éditorial avec des champs image_url et alt facultatifs sur chaque élément de service_grid, des liens sur toute l’entrée et un focus clavier. La page d’accueil commence par deux guides illustrés, puis présente dans la collection suivante un guide mis en avant à côté de lignes de ressources compactes. Les listes de services informatives ou mixtes utilisent des panneaux de lecture numérotés ; seuls les éléments dotés d’une URL renseignée ont une action. Les vignettes utilisent les URL de médias fournies et ne récupèrent jamais les pages de destination. Les formulaires de contact et le pied de page utilisent les mêmes espacements et couleurs. La démo fictive du catalogue Northwater Brief reste distincte du contenu d’exemple de la migration BACC-GA ; actualiser la démo du catalogue n’importe aucun site client.

Automotive Care : pages et médias pour les ateliers

Automotive Care (automotive-care) possède ses propres modèles Home, Page, Contact, Products, Product, Gallery et Videos, ainsi que ses modèles de blog. Les zones de composants existantes restent compatibles. Le design sombre et doré propose des titres mesurés, des services numérotés, des garanties avec des descriptions distinctes et des boutons bien espacés du texte. Les images de sous-page sont placées derrière un voile contrasté ; sans image, une introduction sobre apparaît.

La navigation sur ordinateur affiche six liens principaux et regroupe les autres sous Plus. Les liens parents et leurs boutons de sous-menu partagent les mêmes styles de survol et de page actuelle. Le menu mobile contient toutes les pages et leurs liens enfants. Échap et un clic extérieur ferment le menu. Les liens de langue apparaissent uniquement si plusieurs langues sont disponibles.

Les images du catalogue gardent leurs proportions dans des cadres limités. Les modèles de base limitent aussi les images de produits et positionnent correctement les arrière-plans de sous-page. La galerie met en avant la première photo ; un clic ouvre une boîte de dialogue accessible, Échap la ferme et rend le focus au lien. Sans JavaScript, la photo originale ouvre un nouvel onglet. Les diaporamas prennent en charge le tactile, les flèches, le clavier et la réduction des animations ; la recherche du catalogue filtre localement. Les photos de détail des produits remplissent toute la largeur du cadre avec un recadrage centré. Les garanties forment un bandeau sombre avec des boucliers dorés ; les caractéristiques occupent des colonnes aérées à badges dorés, empilées sur petit écran.

Wellness & Beauty : soins personnels et collections de prestations

Wellness & Beauty (wellness-beauty) possède ses modèles Home, Page, Contact, Products, Product, Gallery et Videos, ainsi que le blog. Les zones de composants et les formulaires existants restent compatibles. Fonds poudrés, accents rosés, titres serif mesurés et photos arrondies composent une identité de studio douce. Les textes et actions sont bien espacés. Les détails des soins associent une introduction aérée, une photo recadrée au centre et un contenu lisible. Les cartes séparent images, descriptions et actions ; la galerie utilise des cadres d’album avec légendes.

Les liens simples et parents partagent les mêmes états rosés de survol et de page actuelle. Les sous-menus disposent de boutons séparés ; les liens supplémentaires sont sous Plus et le menu mobile contient toutes les pages et leurs enfants. Échap et un clic extérieur ferment les menus. La galerie ouvre une boîte de dialogue puis rend le focus ; sans JavaScript, la photo ouvre un nouvel onglet. La recherche filtre localement. Diaporamas et onglets prennent en charge le clavier et la réduction des animations. Les couleurs de marque sont respectées ; aucun système de réservation n’est ajouté.

Veterinary Care : services, équipe et coordonnées lisibles

Veterinary Care (veterinary-care) possède ses modèles Home, Page, Contact, Products, Product, Gallery et Videos, ainsi que le blog. Les zones de composants et formulaires enregistrés restent compatibles. Panneaux menthe, texte vert foncé, actions abricot et titres arrondis mesurés créent une identité de cabinet chaleureuse. Les cartes séparent photos, noms, fonctions et biographies. Chaque libellé de contact apparaît au-dessus de sa valeur, avec des liens de téléphone et de courriel lisibles. Le pied présente le nom de l’entreprise, une courte signature, une description et les coordonnées.

Les liens simples et parents partagent les états menthe de survol et de page actuelle. Les parents gardent des boutons de sous-menu séparés ; les liens supplémentaires sont sous Plus et le menu mobile contient toutes les pages et leurs enfants. Échap et un clic extérieur ferment les menus. Le catalogue propose des actions claires et une recherche locale ; les photos remplissent des cadres limités par recadrage centré. La galerie met en avant une grande image et des vues complémentaires, puis ouvre les originaux dans un dialogue avec retour du focus. Sans JavaScript, la photo ouvre un nouvel onglet. Diaporamas et onglets acceptent clavier et réduction des animations.

Early Learning : des pages joyeuses pour les écoles

Early Learning (early-learning) possède ses propres modèles Accueil, Page, Contact, Produits, Produit, Galerie et Vidéos, en plus du blog. Les zones de composants et les formulaires enregistrés restent compatibles. Fonds crème, accents corail, menthe et jaune, titres arrondis et détails de blocs conviennent à la petite enfance. Les profils et les trois cartes À propos séparent images, rôles et descriptions. Les coordonnées disposent de panneaux légendés, les programmes d’une introduction aérée et de photos centrées, et la galerie de cadres d’album avec légendes.

Les liens et leurs parents partagent un contour au survol et une pastille jaune pour la page actuelle. Les sous-menus ont des commandes distinctes ; Plus regroupe les liens supplémentaires et le menu mobile natif contient toutes les pages et leurs enfants. Les photos ouvrent un dialogue qui restitue le focus à la fermeture, ou un nouvel onglet sans JavaScript. La recherche locale, les onglets et les diaporamas acceptent le clavier et la réduction des animations. La démo utilise des textes scolaires et n’ajoute aucun système d’inscription.

Thèmes de la collection design

Chaque thème possède les dix modèles de page standard et met en forme les trente composants Eyivo partagés. Les pages d’exemple de composants et de demandes incluses montrent des sections au-delà de la page d’accueil. Les liaisons de contact, de devis, de demande produit, de rendez-vous, de candidature à une formation, de réservation et de demande immobilière utilisent les plugins existants et la vérification humaine. Le filtrage du catalogue, les onglets utilisables au clavier, les carrousels d’images et les menus déroulants de navigation natifs prennent en charge les mêmes contrats de contenu sur ordinateur, sur mobile et dans les mises en page de droite à gauche.

Seafood Restaurant

Seafood Restaurant (seafood-restaurant) associe le bleu océan à l’orange agrume, des pages d’un blanc frais et des titres Manrope sobres. Une ouverture photographique de fruits de mer mène à une bande d’atouts compacte, à des plats signatures, à une histoire au bord de l’eau, à des galeries de plats circulaires et à un panneau bleu marine de raisons de venir. Le contenu d’exemple fictif de Tide & Table comprend des demandes de réservation, dix types de pages, les trente sections partagées et les sept liaisons de formulaire existantes. Les liens de navigation, les liens parents et Plus partagent les états de survol et de page courante ; les pages enfants sélectionnées mettent leur parent en évidence. Les menus mobiles gardent les liens enfants sous leur parent. Les onglets, les carrousels, le filtrage des plats et les mises en page de droite à gauche respectent les contrats de la plateforme. Les demandes de réservation nécessitent une confirmation ; aucun système de paiement ni de disponibilité des tables en temps réel n’est sous-entendu.

Family Insurance

Family Insurance (family-insurance) associe un en-tête violet et une navigation blanche en retrait à des photos de famille, de doux panneaux d’information lavande et des titres Manrope sobres. Le contenu d’exemple de Hearthway Insurance est fictif. Les liens de navigation simples et parents partagent le même survol et le même état de page courante ; une page enfant sélectionnée met son parent en évidence. Des titres de sous-pages compacts, des galeries légendées, des images de catalogue recadrées et des panneaux de contact étiquetés prolongent le design au-delà de la page d’accueil.

Barbershop

Barbershop (barbershop) suit un en-tête vert profond sur deux lignes avec un logotype serif centré, une ouverture photographique pleine largeur assombrie du côté de la lecture et des pages crème avec des titres Playfair Display et des boutons laiton. Les cartes de fonctionnalités dessinent des icônes au trait et affichent chaque valeur d’icône sous forme de courte étiquette dorée, les références se trouvent dans une bande sombre scindée, le carrousel montre quatre coupes carrées, les caractéristiques produit deviennent une liste de prix sur deux colonnes et les offres un panneau à rosette en pointillés. Les cartes du catalogue sur la page d’accueil et la page des services sont des tuiles photographiques sombres. Le contenu d’exemple de Northline Barber est fictif.

Recruitment & Staffing

Recruitment & Staffing (recruitment-staffing) utilise une navigation blanche arrondie, une ouverture scindée lavande avec photo en arche, des actions violettes, des témoignages vert menthe et un pied de page bleu-violet. Le contenu d’exemple fictif de Brightlane Talent comprend des services propres au recrutement, des profils d’équipe et des textes de demande. Les titres Plus Jakarta Sans restent mesurés. La navigation parent et enfant, les fiches du catalogue, les galeries, les articles et tous les formulaires de demande enregistrés suivent le même langage visuel.

Airline Booking

Airline Booking (airline-booking) utilise un en-tête blanc avec un pictogramme d’avion, une ouverture arrondie pleine largeur au coucher du soleil dont le texte et les actions se trouvent dans une barre de réservation blanche flottante, et des titres Figtree bleu canard et encre. Les cartes du catalogue deviennent des tuiles de destinations avec un badge numéroté, l’image et le texte se placent dans un panneau menthe avec une puce de légende bleu canard, les chiffres deviennent une bande arrondie bleu canard, les cartes de fonctionnalités une liste sur deux colonnes avec chevrons, et le pied de page est un panneau arrondi bleu canard avec une action de contact. Le contenu d’exemple de Skyvane Travel est fictif.

Architecture Studio

Architecture Studio (architecture-studio) place un en-tête transparent avec une navigation en pilule dépolie sur une photo pleine largeur de résidence voilée de sable du côté de la lecture, et utilise des titres Montserrat légers, des boutons pilule couleur espresso avec des disques fléchés blancs et une légende de projet flottante. Les cartes de catalogue et de services sont de douces tuiles sable avec un coin d’image asymétrique, la grille de projets devient une bande sombre de projets phares, l’image et le texte courent d’un bord à l’autre avec un bord d’image arrondi, les chiffres se trouvent dans une colonne filetée et les formulaires de contact deviennent une bande de contact couleur espresso. Le contenu d’exemple de Solace Architecture est fictif.

Automation SaaS

Automation SaaS (automation-saas) associe un en-tête blanc et une ouverture Instrument Serif centrée sur une photo du ciel aux collines à des pages vert sauge, des cartes blanches arrondies et des actions vert vif. Les chiffres deviennent quatre cartes dont la troisième en vert forêt, l’image et le texte alternent selon la variante entre une carte blanche et une carte citron vert, la section vidéo devient une carte de fonctionnalité vert forêt, la grille de projets des cartes d’analyse horizontales avec une puce Lire la suite, et la FAQ est un accordéon centré. Le pied de page se termine par un grand logotype serif sur des collines vertes dessinées. Le contenu d’exemple de Fernflow est fictif.

Business Analytics SaaS

Business Analytics SaaS (business-analytics-saas) utilise un en-tête blanc, une ouverture Outfit centrée avec une forme d’accent émeraude et la photo d’ouverture dans un cadre de produit bleu marine à motif de barre latérale. Les chiffres se trouvent dans une rangée divisée, les icônes de fonctionnalités alternent émeraude, bleu et violet, l’image et le texte reposent sur une bande menthe avec une carte de croissance flottante, le nuage de logos devient des tuiles d’intégration et l’offre tarifaire une formule émeraude mise en avant. Les témoignages affichent des étoiles et des points d’avatar, et le pied de page est bleu marine. Le contenu d’exemple de Metrova est fictif.

Car Dealership

Car Dealership (car-dealership) utilise un en-tête bleu canard profond sur deux lignes avec une ligne de contact, une ouverture scindée menthe avec une puce de note sur la photo du véhicule et une carte de recherche blanche qui chevauche l’ouverture. Les cartes de services illustrées deviennent six tuiles de catégories compactes, l’image et le texte une bande bleu canard foncé d’achat et de vente, les références des arguments centrés avec icônes ; les cartes du catalogue portent un badge numéroté, les témoignages reposent sur un bleu canard profond, l’offre tarifaire devient un panneau de financement menthe et le pied de page s’ouvre sur un appel à l’action. Le contenu d’exemple de Corvane Motors est fictif.

Car Rental

Car Rental (car-rental) est un thème sombre fait de panneaux vert presque noir aux bordures douces et aux accents citron vert. Une bande citron vert surmonte un logotype centré et une navigation par catégories aérée ; l’ouverture est une carte photographique bordée avec un grand titre Archivo en majuscules et des boutons pilule citron vert à disques fléchés. Les références deviennent une seule bande d’atouts, les cartes du catalogue des cartes de location blanches dont le choix central est cerné de citron vert, les cartes de fonctionnalités des étapes numérotées, et le pied de page est un panneau bordé avec une action de prise de contact. Le contenu d’exemple de Laneway Rentals est fictif.

Catering Services

Catering Services (catering-services) utilise un en-tête vert forêt, des pages crème et des titres Gilda Display avec un séparateur en feuille. L’ouverture place la photo dans un cadre en arche avec un symbole de lecture ; les cartes de services illustrées s’alignent sur quatre colonnes, les cartes de fonctionnalités deviennent une bande vert forêt avec la carte centrale olive, l’image et le texte associent une photo échancrée à une carte de texte sable et une légende façon signature, les références deviennent une carte de menu soignée, le carrousel montre des plats circulaires sur fond vert et la FAQ se trouve dans une carte vert sauge. Le contenu d’exemple de Sage & Table Catering est fictif.

Coaching & Consulting

Coaching & Consulting (coaching-consulting) associe un en-tête et une ouverture bleu marine à un dégradé orange, rose et violet qui parcourt le titre, les boutons et une tuile portrait avec une puce de nom blanche. Le nuage de logos prolonge l’ouverture bleu marine en bande de clients, les cartes de fonctionnalités portent un soulignement en dégradé, les chiffres deviennent un panneau communauté scindé entre dégradé et bleu marine, les cartes de services gagnent des badges cerclés de couleur et des boutons fléchés, la grille de projets montre des cartes d’étapes encadrées, l’offre tarifaire devient une formule sombre mise en avant, et l’image et le texte se trouvent dans un panneau lilas. Le contenu d’exemple de Northbeam Coaching est fictif.

Construction Company

Construction Company (construction-company) utilise une barre d’en-tête flottante bleu canard foncé avec des actions citron vert sur une page blanche, et une ouverture dont la photo déborde jusqu’au bord avec une découpe en biais et un cachet circulaire en pointillés. Les chiffres se trouvent dans une barre sombre qui chevauche l’ouverture, la troisième carte de service devient sombre, l’image et le texte se placent dans un panneau vert sauge avec une photo en parallélogramme, la grille d’équipe montre quatre portraits de l’équipe de chantier, les références deviennent un panneau sombre numéroté du processus et le pied de page est un panneau arrondi bleu canard avec des coordonnées directes. Le contenu d’exemple de Ironleaf Builders est fictif.

Cookie Bakery

Cookie Bakery (cookie-bakery) utilise une page crème, une ouverture arrondie chocolat avec un lettrage Lilita One généreux qui passe du blanc au moutarde, une photo de produit circulaire et des points de vermicelles. Les cartes de fonctionnalités alternent pêche, rose, bleu ciel et beurre, l’offre tarifaire devient un panneau de remise pêche, les caractéristiques produit une liste sombre des spécialités du jour, les cartes de services illustrées des sélections de produits en cercles ; l’image et le texte utilisent une photo dans un cadre organique avec un cachet corail, les références deviennent une bande de services sombre et le pied de page a un bord chocolat festonné. Le contenu d’exemple de Crumb & Co. Bakery est fictif.

Coworking Space

Coworking Space (coworking-space) associe une page blanc cassé chaleureuse à des panneaux vert profond, des accents pêche et des titres serif Gloock ; le titre d’ouverture passe du vert au pêche d’une ligne à l’autre et la photo de l’espace se trouve dans un grand cadre arrondi avec une carte de légende verte. Les références deviennent une bande d’atouts compacte, les cartes de fonctionnalités une liste à icônes, les cartes du catalogue partagent une bande sable avec la carte centrale en vert, les chiffres défilent dans une bande verte, les images de la galerie portent des légendes sombres, les témoignages affichent une tuile portrait et les formulaires de contact deviennent des cartes vertes avec un bouton d’envoi pêche. Le contenu d’exemple de Greenhall Workspace est fictif.

Creative Studio Coffee

Creative Studio Coffee (creative-studio-coffee) pose un en-tête transparent et un titre Bodoni Moda en majuscules qui passe du blanc au laiton sur une photo d’espresso pleine largeur, puis enchaîne sur des pages beige café au lait. Les références deviennent une bande de valeurs en cinq parties, la grille de projets six tuiles portrait sombres avec des anneaux fléchés, l’image et le texte courent d’un bord à l’autre avec une légende en cachet circulaire, les formulaires de contact deviennent une bande d’adhésion torréfiée sombre et le pied de page est une mise en page claire en colonnes filetées. Le contenu d’exemple de Crema Digital est fictif.

Duck Farm

Duck Farm (duck-farm) conserve des pages blanches et vert pâle avec des panneaux vert ferme profond et des accents jaune soleil. La photo d’ouverture déborde jusqu’au bord et se fond dans le texte, dont la dernière ligne devient verte, avec une légende manuscrite. Les cartes du catalogue montrent quatre produits, l’image et le texte deviennent un panneau vert foncé avec une photo de forme organique et un badge nature en pointillés, les cartes de fonctionnalités des icônes de confiance séparées, les chiffres un panneau agricole sombre, les références un parcours numéroté de la ferme à la table, et les témoignages reposent sur un fond crème. Le contenu d’exemple de Brookmead Farm est fictif.

Electrical Services

Electrical Services (electrical-services) associe un en-tête blanc avec un lien téléphonique et un bouton de devis vert à des ouvertures et des cartes de services anthracite. La photo d’ouverture se fond dans l’anthracite et les deux dernières lignes du titre passent au vert électrique. Les chiffres se trouvent sur une carte blanche qui chevauche l’ouverture, l’image et le texte découpent la photo en hexagone avec un badge de sécurité rond, les cartes de services deviennent anthracite avec des cercles d’icônes verts, les références deviennent des raisons de choisir l’entreprise marquées d’un éclair et l’appel à l’action un panneau vert d’intervention d’urgence. Le contenu d’exemple de Brightwire Electric est fictif.

Fashion Store Lavender

Fashion Store Lavender (fashion-store-lavender) associe un en-tête et une ouverture scindée anthracite à une photo lilas en arche, des titres Cormorant Garamond et des pages ivoire chaleureuses. Une bande d’avantages lavande mène à des collections éditoriales illustrées, à des cartes de nouveautés discrètes et à un panneau sombre de campagne de mode. Le thème possède les dix modèles de page, met en forme les trente sections partagées et prend en charge les sept formulaires de demande existants. Les liens de navigation, les parents et Plus partagent les états lavande de survol et de sélection, y compris lorsqu’une page enfant est sélectionnée. Plus et les menus mobiles utilisent des lignes pleine largeur avec les liens imbriqués sous leur parent. La recherche dans le catalogue, la navigation imbriquée native, les onglets utilisables au clavier et les carrousels d’images respectent les contrats de la plateforme. Le contenu d’exemple de Violette Edit est fictif ; la collection utilise des liens de demande plutôt qu’un panier ou un paiement en ligne.

9. Du thème activé à la publication

1. Installez et activez le thème. Eyivo valide le package, enregistre sa clé et sa version, puis présente ses paramètres et les schémas de ses composants dans l’application.
2. Choisissez un type de page. Eyivo utilise le fichier Liquid et la définition de zone correspondants du thème actif s’ils existent ; sinon, il utilise ceux de theme-core.
3. Ajoutez les sections autorisées. L’application propose uniquement les types indiqués dans allowed_components. Elle enregistre le texte, les références des médias et les traductions pour chaque instance de composant.
4. Effectuez un rendu sûr. Eyivo rassemble les données de l’entreprise, de la page, du référencement et de la navigation. Il affiche les composants enregistrés dans les zones, puis les composants directs aux emplacements définis par le concepteur, avant de générer la page et sa mise en page avec le thème actif.
5. Publiez. Le visiteur reçoit votre HTML et votre CSS, mais jamais les identifiants de base de données, les modèles internes ou le code de l’application.

10. Validation et erreurs courantes