Eine vollständige Vorlage für Unternehmenswebsites sicher entwickeln.

1. Das Grundmodell

Es gibt drei getrennte Zuständigkeiten. Diese Trennung ist der Schlüssel zum Verständnis von v1.

Kein freier Page Builder: Ein Inhaber kann einen zulässigen Abschnitt zu main hinzufügen und seine Position festlegen. Er kann keinen neuen Bereich anlegen, einen Hero-Abschnitt in die Fußzeile ziehen, HTML verändern oder Ihr CSS bearbeiten.

2. Schnellstart: eine minimale, nutzbare Vorlage

Jedes v1-Theme bringt sein vollständiges Layout, seine Styles und Skripte mit und kann sie nach dem gewählten Design anordnen. Themes erben weder Layouts noch Assets anderer Themes. Gemeinsame eyivo:-Komponenten und die sieben Ersatz-Seitentypen stammen aus theme-core; ein Theme speichert nur überschriebene Seitentypen und die eigenen Komponenten im Namensraum theme:.

Jedes v1-Theme benötigt eine Standard-Layoutdatei. page-types/ und components/ sind optional, wenn das Paket ausschließlich Core-Fallbacks nutzt:

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 stammt immer aus dem aktiven Theme und bildet das vollständige öffentliche Dokument. Eyivo sucht den angeforderten Seitentyp zuerst im Theme und greift dann auf theme-core/page-types zurück. Core liefert weder Layout noch Assets; der Fallback-Seiteninhalt wird deshalb weiterhin vom aktiven Theme umgeben und gestaltet.

3. Vorlage in theme.json beschreiben

Das Manifest beschreibt sowohl die Fähigkeiten des Themes als auch den Vertrag, aus dem die App Formulare erzeugt. Es beantwortet drei Fragen: Welche Seitenstrukturen gibt es, welche Bereiche enthalten sie und welche Daten darf eine Komponente speichern? Integrierte Themes deklarieren alle zehn Standardseitentypen ausdrücklich und enthalten die zugehörigen Liquid-Dateien. Eigene Themes können für nicht deklarierte Seitentypen weiterhin auf Core-Vorlagen zurückgreifen.

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

Fallback für Seitentypen: Die integrierten Typen sind home, page, gallery, contact, products, product und videos. Lassen Sie einen davon weg, um Definition und Liquid-Datei aus theme-core zu verwenden. Deklarieren Sie einen Typ nur, wenn das Theme auch die passende Datei page-types/<type>.liquid als Überschreibung bereitstellt.

Der Editor erhält die zusammengeführte Seitentyp-API: Definitionen des aktiven Themes ersetzen entsprechende Core-Definitionen; jeder ausgelassene Typ bleibt aus Core verfügbar.

4. Vollständige Demoinhalte in demo.json

Jeder Upload muss eine portable demo.json-Datei mit ausschließlich Entwurfsdaten und mindestens einen Screenshot mit diesen geladenen Daten enthalten. Integrierte Themes verwenden dasselbe Schema. Nehmen Sie keine Datenbank-IDs, Tenant-Domains, Zugangsdaten oder Objektspeicher-Zugangsdaten auf.

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

Seiten und Komponenten

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

Komponententypen und Bereiche müssen im Manifest des aktiven Themes oder in theme-core deklariert sein. Verwenden Sie für Links innerhalb der Website relative Pfade wie /contact. Die mitgelieferten Startseiten-Demos verwenden ihr vorhandenes Hero-Bild als Hintergrund über die volle Breite mit lesbarer Überlagerung und responsivem Text: meist immersive, in Compact centered mit Bild. Andere Hero-Varianten behalten ihre eigenen Layouts.

Demo-Sprachen und Fallback

Englisch ist die erforderliche Basissprache: Setzen Sie default_locale auf en. Fehlt das Feld in älteren Daten, gilt ebenfalls Englisch. Andere unterstützte Website-Sprachen sind optional. Englische Kopien gelten nicht als Übersetzungen.

Verwenden Sie translations.en und optionale Sprachobjekte für Unternehmen, Theme-Einstellungen, Seiten, Komponenten, Produkte, Galerien, Bildunterschriften und Alternativtexte, Videos und Blogbeiträge. Ältere englische Felder ohne Sprachschlüssel bleiben gültig. Beim Erstellen wird die Hauptsprache der Website gewählt; fehlende Felder fallen auf Englisch zurück. Arrays ersetzen das gesamte englische Array, ausdrücklich leere Werte bleiben erhalten. Nur die gewählte Sprache wird importiert; weitere Sprachen werden nicht automatisch aktiviert.

Verwenden Sie englische Quell-Slugs für interne Links und portable Menüeinträge. Beim Import werden auch Links in Rich Text und Blogdokumenten auf den übersetzten Slug abgebildet. Menüeinträge können explizite slugs- und labels-Zuordnungen enthalten. Fehlende Beschriftungen fallen auf Englisch zurück. Externe URLs bleiben unverändert.

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

Sicherer Import und Umgang mit Medien

Neue Websites aus dem Dashboard enthalten standardmäßig Demo-Daten und veröffentlichen sofort die gewählte Sprache; Besitzer können die Option deaktivieren. Demo-Importe über Branding für bestehende Websites bleiben Entwürfe und erhalten veröffentlichte Inhalte. Die zentrale App kopiert Bilder in die Medienbibliothek der neuen Website und sendet Referenzen über die interne API. Master und Themes erhalten keine Zugangsdaten zum Objektspeicher. Themes verwenden die bereitgestellte media.public_url.

Deklarieren Sie Screenshots unter theme.json.preview mit data_source: "demo_data". Das Paket muss jedes deklarierte preview-Bild enthalten.

5. Jedes gewünschte Layout mit Liquid gestalten

Das Standardlayout bildet das vollständige HTML-Dokument. Header, Footer, Stylesheet, JavaScript und visuelle Struktur stammen ausschließlich aus dem aktiven Theme.

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

Die Seitentyp-Datei legt fest, wo dynamische Bereiche erscheinen. Bereichskomponenten sind bereits gerenderte HTML-Zeichenfolgen. Fügen Sie sie daher mit | raw ein; gewöhnliche Werte werden standardmäßig escaped.

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

Komponente direkt rendern

Ein Designer kann eine registrierte Komponente direkt in einem Layout oder einer Seitentyp-Datei platzieren. Diese Position ist im Theme festgelegt und kann im Panel weder verschoben noch entfernt werden. Übergeben Sie ein Objekt über data:, einzelne Schemafelder oder beides; benannte Felder überschreiben gleichnamige Schlüssel aus 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"
%}

Der Typ muss ein in Anführungszeichen gesetztes Literal mit Namensraum sein. Direktes Rendering verwendet dasselbe Schema, dieselben Varianten, dieselbe Komponentendatei und dasselbe normalisierte component-Objekt wie eine Bereichsinstanz. Komponentendateien können keine anderen Komponenten rendern.

Assets: Verwenden Sie stets {{ 'css/theme.css' | asset_url }}. Eyivo liefert es aus dem aktiven Paket unter /theme-assets/<theme>/css/theme.css aus. Codieren Sie keinen anderen Theme-Namen oder Dateisystempfad fest ein.

Dokumentkopf, Routen und Oberflächenübersetzungen

Jedes Layout muss {% eyivo_head %} genau einmal rendern. Eyivo erzeugt damit Titel, Beschreibung, Robots-Angaben, Canonical-URL, hreflang, Open Graph und strukturierte Daten. Verwenden Sie routes.home, routes.contact, routes.catalog, routes.gallery und routes.videos statt fest codierter öffentlicher Pfade. Leiten Sie bearbeitbare URL-Einstellungen durch | localized_url, damit bekannte interne Pfade das aktive Sprachpräfix erhalten und externe URLs unverändert bleiben.

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

Legen Sie bei Bedarf locales/<locale>.json-Dateien für vom Theme eingeführte Oberflächenbeschriftungen an. Die Suche erfolgt in dieser Reihenfolge: Core-Englisch, Core-Sprache, Theme-Englisch, Theme-Sprache. Gemeinsame Labels aus theme-core funktionieren daher ohne Kopie. Unternehmenstexte gehören in übersetzbare Inhalte, Komponentenfelder oder Theme-Einstellungen, nicht in Oberflächenwörterbücher.

Datei einer eigenen Komponente

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

Bei übersetzbaren Feldern wählt Eyivo vor dem Rendering die Sprache des Besuchers. Ein türkischer und ein englischer Besucher sehen somit dieselbe Komponentenstruktur mit unterschiedlichen Werten für component.data.heading.

Registrierte Menüs

Themes können zusätzliche flache Menüs in theme.json registrieren. Main bleibt reserviert: navigation.main behält die Seitensichtbarkeit und automatische Listenlinks bei. Jedes Menü benötigt einen stabilen Schlüssel, eine Bezeichnung, eine Beschreibung und einen tatsächlichen Anzeigeort.

Verschachtelte Seitenlinks in der Hauptnavigation

Jedes navigation.main-Element enthält ein children-Array. Hat eine Seite eine übergeordnete Seite, erscheint sie in deren children-Liste. Die Plattform ergänzt passende Links in der Website-Kopfzeile um ein barrierefreies Dropdown; Themes können das children-Array auch direkt rendern:

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

Unterseiten behalten ihre eigenen URLs und ihren Veröffentlichungsstatus. Die Hauptnavigation enthält nur veröffentlichte, sichtbare Seiten mit einer veröffentlichten Übersetzung für die aktive Sprache. Übergeordnete Beziehungen haben eine Ebene: Wählen Sie eine Seite der obersten Ebene, die nicht die Startseite ist. Registrierte Menüs wie navigation.footer bleiben flach.

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

Geben Sie navigation.footer oder einen anderen registrierten Schlüssel mit item.label, item.url, item.active und item.kind aus. Übernehmen Sie die Bezeichnung, maskieren Sie die Ausgabe und verwenden Sie verständliche Navigationsbeschriftungen. Leere zusätzliche Menüs greifen niemals auf Main zurück.

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

Seiten, Beiträge, Produkte, Galerien und Videos können mehreren zusätzlichen Menüs zugeordnet werden. Die Menüverwaltung unterstützt außerdem Listen, eigene Links, eine unabhängige Reihenfolge und übersetzte Bezeichnungen. Die Struktur gilt für alle Sprachen; unveröffentlichte Übersetzungen werden ausgeblendet.

Beim Speichern werden Zuordnungen vorgemerkt; die Veröffentlichung des Inhalts übernimmt nur dessen Auswahl. Menüentwürfe werden separat gespeichert und veröffentlicht. Eine Menüveröffentlichung veröffentlicht keine Zielinhalte. Nicht unterstützte Zuordnungen bleiben beim Themewechsel erhalten.

initialize_from_main übernimmt die bisherigen Links einmalig und synchronisiert sie danach nicht. Ältere Themes ohne Menüs bleiben kompatibel. Demo-Einträge verwenden Inhaltstyp und Quell-Slug, Listenschlüssel oder eigene URLs, niemals mandantenspezifische Datensatz-IDs.

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

Rich-Text-Felder und page.body bleiben in Liquid maskiert; die Plattform verarbeitet Editorformatierung und Seitenverweise sicher. Nur vertrauenswürdiges, bereits gerendertes HTML wie blog.post.body_html verwendet raw. Seitenverweise folgen Slug-Änderungen und werden ohne veröffentlichte Zielübersetzung deaktiviert.

6. Verfügbare sichere Liquid-Daten

Liquid erhält einfache, normalisierte Daten, keine Laravel- oder Datenbankmodelle. Fehlt ein Wert in dieser Tabelle, ist er in v1 nicht verfügbar.

Beispiel für ein sprachsicheres Layout

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

Jeder Eintrag einer verfügbaren Sprache bietet außerdem label, direction, is_default, current und has_translation. Eyivo liefert nur gleichwertige veröffentlichte Übersetzungen. Themes müssen daher language.url verwenden, statt /en oder ein anderes Präfix selbst zu bilden.

Beispiel für ein einstellungsbasiertes Token: style="--brand: {{ theme.settings.primary_color }}". Die Einstellung muss zuerst in theme.json deklariert werden.

7. Komponenten: direkt und dynamisch

Komponenten haben einen Rendering-Vertrag mit zwei Möglichkeiten der Platzierung. Eine direkte Komponente wird vom Designer im Layout oder Seitentyp festgelegt. Eine dynamische Komponente wird als Instanz eines Seitenbereichs gespeichert und im Editor verwaltet. Dynamische Instanzen besitzen eine stabile ID, einen Typ mit Namensraum, Bereich, Position, optionale Variante, Daten und Übersetzungen. Die Position bestimmt nur die Reihenfolge, nicht die Identität.

Universelle Komponente: Setzen Sie "universal": true in einer Komponentendefinition, um sie in allen Bereichen kompatibler Seitentypen zuzulassen. Sie benötigt weiterhin ein gültiges Schema und eine Liquid-Datei.

Gemeinsame Aktionslinks passen bekannte interne Pfade an die aktive Sprache an und behalten Abfrageparameter und Fragmente bei. Rich Text bewahrt sichere Formatierung in verschachtelten Editor-Containern. Leere Galeriebilder werden ausgelassen, Kartenbilder ohne Ziel sind keine Links, und Folien- sowie Suchbeschriftungen verwenden die Oberflächensprache des Besuchers.

Visual Atelier (visual-01) lässt den dekorativen Laufschriftstreifen auf der Startseite automatisch weiterlaufen, auch wenn der Browser reduzierte Bewegung anfordert. Beim Überfahren mit der Maus hält der Text an; beim Verlassen läuft er weiter. Das ursprüngliche Erscheinungsbild und die reine CSS-Schleife bleiben erhalten.

8. Verfügbare Komponenten

Diese 30 gemeinsamen eyivo:-Komponenten bilden die vollständige v1-Bibliothek und stammen aus theme-core. Ein Theme kann zusätzlich eigene theme:-Komponenten deklarieren und implementieren.

Foundation Impact: eine Stiftungswebsite zusammenstellen

Foundation Impact (foundation-impact) präsentiert Zweck, Programme, Governance, Wirkung, Veranstaltungen, Galerie und Anfragen einer Stiftung. Das Layout bricht lange Navigationsbeschriftungen um und wechselt auf kleineren Bildschirmen zu einem aufklappbaren Menü. Die registrierten Menüs header, footer und useful_links steuern die Navigation. Ist das registrierte Menü leer, greift die Kopfzeile auf die automatische Seitennavigation zurück. Die kuratierte Fotoseite verwendet /in-pictures; /gallery bleibt die native Albumübersicht.

Foundation Impact besitzt alle zehn integrierten Seitenvorlagen: Startseite, Seite, Kontakt, Produkte, Produkt, Galerie, Videos, Blog, Blogkategorie und Blogbeitrag. Bestehende Inhaltsbereiche und registrierte Formulare bleiben kompatibel. Übergeordnete Navigationseinträge verwenden dieselben transparenten, unterstrichenen Hover- und Aktivzustände wie normale Links; ein ausgewählter Unterpunkt markiert auch seinen übergeordneten Eintrag. Untermenüs folgen diesem Stil auf Desktop und Mobilgeräten.

Unterseiten ohne Titelbild verwenden ein kompaktes lavendelfarbenes Banner mit eng angeordneten Breadcrumbs, einer kleinen Dachzeile und einer maßvollen Überschrift. Mit Bild sorgen eine dunkle Überlagerung und weiße Überschriften, Breadcrumbs und Zusammenfassungen für Lesbarkeit. Der Text liegt über Bild und Überlagerung; deren Richtung passt sich Rechts-nach-links-Layouts an.

Die gemeinsame Komponente eyivo:rich_text akzeptiert sowohl vom Editor markierte als auch ältere HTML-Inhalte. Beide durchlaufen die bestehende Formatierungs-Positivliste: Absätze, Überschriften, Listen und sichere Links werden dargestellt, Skripte, Ereignisattribute und unsichere Links entfernt. Andere Textfelder behalten ihre normale Maskierung. Die Rich-Text-Inhalte der Foundation-Demo verwenden ebenfalls die Editor-Markierung.

Das Theme setzt die vorhandenen Komponenten eyivo:hero, project_grid, image_text, event_list, media_gallery, feature_grid, team_grid, stats, rich_text, faq, cta und lead_form zusammen. Sein verzögert geladenes Theme-Skript aktiviert Bildslider-Steuerelemente, tastaturbedienbare Tabs und Katalogfilter. Das mobile Menü klappt mit nativen HTML-Steuerelementen auf. Kennzahlen verwenden dunkle Überschriften, Beschriftungen und Notizen auf einer blassgelben Fläche mit blauen Werten. Programmkarten verlinken auf normale Inhaltsseiten. Veranstaltungskarten beschreiben Veranstaltungen und verlinken auf eine Anfrageseite; sie erzeugen keine Buchungen oder Teilnahmeeinträge.

Die Kontaktseite verwendet eyivo:lead_form mit der portablen Kontaktbindung von eyivo/contact. Beim Import einer Demo wird diese Bindung für jede Website separat aufgelöst. Spenden, Förderanträge und Freigaben von Ehrenamtlichen sind nicht enthalten.

Integrierte Demo-Importe verwenden aktive Einträge im gemeinsamen Medienkatalog der Theme-Demos wieder. Die zentrale App besitzt das Objekt und liefert den Mastern Referenzen; das Löschen einer importierten Referenz löscht nicht das geschützte gemeinsame Objekt. Eine Theme-Vorschau und ein eigenes SEO-Beispiel sind getrennte Websites.

Village Commons: Nebennavigation und Seitenleisten

Village Commons (village-commons) vereint ein Schwarzes Brett, lokale Orte, Dorfgeschichte, Veranstaltungen, Fotos, Besucherinformationen und ein websitespezifisches Kontaktformular. Flächen in Waldgrün, Elfenbein und Bernstein haben ausdrücklich festgelegte Vordergrundfarben. Vorhandene Eyivo-Komponenten liefern die Inhalte; Veranstaltungskarten bieten keine Buchungen, und Seiten mit Sitzungsnotizen sind kein offizielles Aktensystem. Bild-und-Text-Abschnitte auf Informationsseiten behalten einen responsiven Innenabstand um den Text. Veranstaltungs- und FAQ-Panels auf Unterseiten haben einen responsiven Innenabstand. FAQs verwenden eine kompakte Überschrift und gestapelte, abgerundete Aufklapper mit klaren Bedienelementen zum Erweitern.

Registrieren Sie header, secondary, sidebar, footer und useful_links in theme.json. Die Nebennavigation erscheint in der Hilfsleiste; das Seitenleistenmenü erscheint neben normalen Seiten und Kontaktseiten. Beide werden über den Standard-Menüeditor bearbeitet und veröffentlicht. Halten Sie die Hauptnavigation kurz. Auf kleinen Bildschirmen klappt das Hauptmenü auf, und die Seitenleiste rückt unter den Seiteninhalt.

Eine Seitenleiste ist ein Layoutbereich, kein neuer Komponententyp. Die Schemas page und contact deklarieren einen sidebar-Bereich für rich_text, announcement, download_list und contact_actions mit höchstens drei Instanzen. Rendern Sie areas.sidebar in einem aside-Element neben navigation.sidebar. Die Seite Village life zeigt ein bearbeitbares Text-Widget. Die Theme-Einstellungen liefern die zusätzliche Kontaktkarte. Jeder benutzerdefinierte Bereich muss für jeden Seitentyp, der ihn verwendet, einzeln deklariert werden.

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

Die allgemeine Theme-Vorschau und die englische WT-003-Spezialdemo sind getrennte admin-1-Websites. Bilder werden von der zentralen App importiert und im gemeinsamen Demo-Medienkatalog geschützt. Screenshots der separat veröffentlichten Testinhalte werden vor der Bereitstellung lokal erstellt und mit dem Theme und Apex ausgeliefert. Prepare prüft den Blueprint-Hash und die Theme-Version, bevor die Aufnahmerevision an die erzeugte Demo gebunden wird. Der öffentliche Katalog findet seine geschützte Vorschau über die authentifizierte App-API. Screenshots sind von Kundenmedien getrennt. Das Theme verwendet die portable Kontaktformular-Bindung von eyivo/contact.

Formulare und Einsendungen

Forms API 1 bietet sieben freigegebene Verarbeiter. Themes gestalten Layout und Stil; Plugins definieren Schema, Validierung und Ablauf. Der Host übernimmt Speicherung, Verifizierung und Benachrichtigung.

Ein Formular, mehrere Platzierungen

Die Einrichtung erzeugt eine beständige Standard-UUID je Website/Plugin/Typ. Weitere Platzierungen verwenden dieselbe Identität; benannte neue Formulare erhalten eigene UUIDs. Themewechsel und Neuinstallation erhalten den Verlauf. Themes verwenden portable Aliase; Kunden wählen gespeicherte Formulare statt UUIDs einzugeben.

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

Kontaktvorlagen verwenden forms.contact, Formularabschnitte component.form. Ersetzen Sie form_preset durch form_binding. Rendern Sie die gelieferten Felder, Hinweise, action, CSRF, signierten form_context und verification_html. Nur erlaubte Darstellungsänderungen und Zusatzfelder sind zulässig; Pflichtvalidierung bleibt bestehen.

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

Zwei Ansichten, ein Datensatz

Gemeinsamer Posteingang und Plugin-Listen/Details zeigen dieselben Datensätze. Formularpakete benötigen Panel API 2 mit submission-list/submission-detail und einem flachen Menülink. Panel API 1 bleibt unterstützt. Lesen markiert nicht automatisch als gelesen; Lese-, Archiv- und Ablaufstatus sind getrennt, Änderungen nutzen record_revision. Deaktivierung entfernt Plugin-Seiten; der gemeinsame Posteingang erhält historische Snapshots.

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

Kundendaten und Berechtigungen

Formulardaten liegen in der Inhaltsdatenbank der Website und zählen zum vorhandenen max_db_bytes-Paketlimit. Keine zusätzliche Anzahl- oder Aufbewahrungsquote. Konfiguration bleibt in der Masterdatenbank mit 50 Feldern, 32 KB und drei Ebenen. Mitglieder lesen; Änderungen brauchen Eigentümer-/Verwaltungsrechte. Plugins erhalten keinen direkten Datenbankzugriff; PHP/Blade gelangt nicht zur App.

Geprüft speichern und benachrichtigen

Der Host prüft Kontext, Antworten und Human Verification und speichert Datensatz, Nutzung und Benachrichtigungsauftrag zusammen. Identische Versuche lassen sich 24 Stunden ohne Duplikate wiederholen. SMTP läuft anschließend mit Wiederholungen; Mailfehler löschen keine Einsendung. Ohne Formular-Empfänger gilt die Unternehmensadresse; ist keine der beiden Adressen gültig, wird ohne E-Mail gespeichert.

Alle ausgelieferten Themes verwenden diesen Vertrag. Alte contact-POSTs liefern 410; Kontaktseiten bleiben per GET erreichbar. Termin- und Reservierungsanfragen bestätigen keine Buchung. Drittanbieterprozessoren, Dateiuploads und beliebige externe Ziele gehören nicht dazu.

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

Field Guide: gut lesbare Leitfäden und Ressourcenbibliotheken

Field Guide (field-guide) kombiniert eine redaktionelle Serifenschrift mit gut lesbarem Fließtext, marineblauen Hintergründen, grünen Aktionen und zurückhaltenden Goldakzenten. Der Einstieg und der optionale Orientierungsbereich teilen sich eine responsive Einleitung. Hintergrundfotos bleiben hinter dem Text gedämpft; ist der Orientierungsbereich leer, nutzt die Einleitung die volle Breite.

Der Desktop-Kopfbereich zeigt die ersten vier Seitenlinks der obersten Ebene und legt die übrigen Links unter „Mehr“. Übergeordnete Seiten behalten ihre eigenen Links und separate Umschalter für Untermenüs. Auf kleineren Bildschirmen zeigt ein natives aufklappbares Menü jede Seite und jeden untergeordneten Link. Escape und ein Klick außerhalb schließen die Navigationsaufklapper. Sprachlinks erscheinen nur, wenn mehr als eine Sprache verfügbar ist.

Verwenden Sie die Bereiche hero und orientation für die Einleitung und eine schnelle Orientierung und den Bereich main für vorhandene Eyivo-Komponenten. Ein Funktionsraster nach redaktionellem Inhalt wird auf breiten Bildschirmen zu einer ergänzenden Checkliste und folgt ihm auf Mobilgeräten. Rich-Text-Artikel haben eine gut lesbare Zeilenlänge, klare Abstände zwischen Überschriften und eingefasste Fotos mit sichtbaren Bildnachweisen. Endet ein Artikel mit einer einzelnen Zwischenüberschrift, gefolgt von einer Checkliste oder kurzen Notiz, stellt das Theme-Skript diesen vorhandenen Inhalt auf dem Desktop als ergänzende Seitenleiste und auf Mobilgeräten unter dem Artikel dar; er bleibt ohne JavaScript lesbar. Ein abschließender Rich-Text-Abschnitt auf der Startseite, dessen formatierter Text aus einem Absatz mit HTTPS-Links besteht, wird zu einem vollbreiten marineblauen Referenzband mit kleinerer goldener Überschrift und hellgrünen Links, auch ohne JavaScript. Verlinkte Leitfadensammlungen verwenden einen redaktionellen Index mit optionalen Feldern image_url und alt für jedes service_grid-Element, Links über den gesamten Eintrag und Tastaturfokus. Die Startseite beginnt mit zwei illustrierten Leitfäden und zeigt in der folgenden Sammlung einen hervorgehobenen Leitfaden neben kompakten Ressourcenzeilen. Informative oder gemischte Leistungslisten verwenden nummerierte Lesepanels; nur Elemente mit hinterlegter URL haben eine Aktion. Vorschaubilder verwenden bereitgestellte Medien-URLs und rufen nie Zielseiten ab. Kontaktformulare und die Fußzeile verwenden dieselben Abstände und Farben. Die fiktive Katalogdemo Northwater Brief bleibt von den Beispielinhalten der BACC-GA-Migration getrennt; das Aktualisieren der Katalogdemo importiert keine Kundenwebsite.

Automotive Care: Werkstattseiten und Medien

Automotive Care (automotive-care) enthält eigene Vorlagen für Home, Page, Contact, Products, Product, Gallery und Videos sowie den Blog. Bestehende Komponentenbereiche bleiben kompatibel. Das dunkle Design mit Goldakzenten verwendet maßvolle Überschriften, nummerierte Leistungskarten, getrennte Qualitätsmerkmale und Erläuterungen sowie genügend Abstand zwischen Text und Aktionsschaltflächen. Unterseitenbilder liegen hinter einer kontrastreichen Überlagerung; ohne Bild erscheint eine schlichte Einleitung.

Die Desktop-Navigation zeigt sechs Hauptlinks, weitere stehen unter Mehr. Elternlinks und separate Untermenüschalter erhalten dieselbe Hervorhebung beim Darüberfahren und für die aktuelle Seite. Das mobile Menü enthält alle Seiten und Unterlinks. Escape und ein Klick außerhalb schließen das Menü. Sprachlinks erscheinen nur bei mehreren Sprachen.

Katalogbilder behalten ihre Proportionen in begrenzten Rahmen. Auch die gemeinsamen Basisvorlagen begrenzen Produktbilder und positionieren Hero-Hintergründe korrekt. Die Galerie hebt das erste Foto hervor. Ein Bildklick öffnet einen zugänglichen Dialog; Escape schließt ihn und gibt den Fokus zurück. Ohne JavaScript öffnet das Original in einem neuen Tab. Bildslider unterstützen Berührung, Pfeiltasten, Tastatur und reduzierte Bewegung; die Katalogsuche filtert lokal. Fotos auf Produktdetailseiten füllen die gesamte Rahmenbreite mit einem mittigen Zuschnitt. Qualitätsmerkmale bilden ein dunkles Band mit goldenen Schildsymbolen; Eigenschaften erscheinen in großzügigen Spalten mit goldenen Marken und werden auf kleinen Bildschirmen untereinander angeordnet.

Wellness & Beauty: persönliche Pflege und Behandlungskollektionen

Wellness & Beauty (wellness-beauty) besitzt eigene Vorlagen für Home, Page, Contact, Products, Product, Gallery und Videos sowie den Blog. Bestehende Komponentenbereiche und Formularbindungen bleiben kompatibel. Rosige Hintergründe, dezente Akzente, maßvolle Serifentitel und gewölbte Fotorahmen schaffen einen sanften Studiocharakter. Texte und Aktionen erhalten klare Abstände. Behandlungsdetails bieten eine großzügige Einleitung, ein mittig zugeschnittenes Foto und lesbare Inhalte. Katalogkarten trennen Bilder, Beschreibungen und Aktionen; Galeriefotos erscheinen in weichen Albumrahmen mit Bildunterschriften.

Normale und übergeordnete Navigationslinks teilen dieselbe rosige Hervorhebung bei Hover und für die aktuelle Seite. Untermenüs haben separate Schalter; weitere Desktop-Links stehen unter Mehr, das mobile Menü enthält alle Seiten und Unterlinks. Escape und Außenklick schließen Menüs. Galeriefotos öffnen einen Dialog mit Fokusrückgabe; ohne JavaScript öffnet das Original in einem neuen Tab. Die Katalogsuche filtert lokal. Slider und Tabs unterstützen Tastatur und reduzierte Bewegung. Markenfarben bleiben erhalten; das Theme fügt kein Buchungssystem hinzu.

Veterinary Care: Leistungen, Team und klare Kontaktdaten

Veterinary Care (veterinary-care) besitzt eigene Vorlagen für Home, Page, Contact, Products, Product, Gallery und Videos sowie den Blog. Bestehende Komponentenbereiche und registrierte Formulare bleiben kompatibel. Mintfarbene Flächen, dunkelgrüner Text, apricotfarbene Aktionen und maßvolle abgerundete Überschriften schaffen einen freundlichen Praxisauftritt. Teamkarten trennen Fotos, Namen, Rollen und Biografien. Kontakt- und Adressbereiche setzen jede Beschriftung über ihren Wert und bieten lesbare Telefon- und E-Mail-Links. Der Footer enthält Firmenname, kurzen Leitsatz, Beschreibung und Kontaktdaten.

Normale und übergeordnete Links teilen mintfarbene Hover- und Aktivzustände. Elternlinks haben separate Untermenüschalter; weitere Desktop-Links stehen unter Mehr, das mobile Menü enthält alle Seiten und Unterlinks. Escape und Außenklick schließen Menüs. Katalogkarten bieten klare Aktionen und lokale Suche; Detailfotos füllen begrenzte Rahmen mit mittigem Zuschnitt. Die Galerie kombiniert ein großes Bild mit ergänzenden Ansichten und öffnet Originale in einem Dialog mit Fokusrückgabe. Ohne JavaScript öffnet das Bild einen neuen Tab. Slider und Tabs unterstützen Tastatur und reduzierte Bewegung.

Early Learning: lebendige Seiten für Schulen

Early Learning (early-learning) besitzt neben den Blogvorlagen eigene Vorlagen für Startseite, Seite, Kontakt, Produkte, Produkt, Galerie und Videos. Bestehende Komponentenbereiche und registrierte Formulare bleiben kompatibel. Cremefarbene Flächen, Korall-, Mint- und Gelbtöne, abgerundete Überschriften und Bausteindetails passen zur frühkindlichen Bildung. Teamprofile und die drei Über-uns-Karten trennen Bilder, Rollen und Beschreibungen. Beschriftete Kontaktfelder, großzügige Programmseiten mit zentrierten Titelbildern und Galerie-Alben mit Bildunterschriften sorgen für klare Inhalte.

Navigationslinks und übergeordnete Einträge teilen umrandete Hover-Zustände und gelbe Markierungen für aktuelle Seiten. Untermenüs haben separate Schalter; Weitere enthält zusätzliche Desktoplinks, das native mobile Menü alle Seiten und Unterpunkte. Galeriefotos öffnen einen Dialog mit Fokuswiederherstellung oder ohne JavaScript einen neuen Tab. Lokale Katalogsuche, Tastaturbedienung für Tabs und Slider berücksichtigen reduzierte Bewegung. Die Demo verwendet schulbezogene Team- und Programmtexte und ergänzt kein Anmeldesystem.

Themes aus der Designkollektion

Jedes Theme besitzt alle zehn Standard-Seitenvorlagen und gestaltet alle dreißig gemeinsamen Eyivo-Komponenten. Die enthaltenen Komponenten- und Anfragebeispielseiten zeigen Abschnitte über die Startseite hinaus. Bindungen für Kontakt, Angebot, Produktanfrage, Termin, Kursbewerbung, Reservierung und Immobilienanfrage nutzen die vorhandenen Plugins und die menschliche Verifizierung. Katalogfilter, tastaturbedienbare Tabs, Bildslider und native Navigationsaufklapper unterstützen dieselben Inhaltsverträge in Desktop-, Mobil- und Rechts-nach-links-Layouts.

Seafood Restaurant

Seafood Restaurant (seafood-restaurant) kombiniert Ozeanblau mit Zitrusorange, kühlen weißen Seiten und zurückhaltenden Manrope-Überschriften. Ein fotografischer Meeresfrüchte-Einstieg führt zu einem kompakten Vorteilsstreifen, Signature-Gerichten, einer Geschichte am Wasser, runden Gerichtsgalerien und einem dunkelblauen Panel mit Gründen für einen Besuch. Die fiktiven Beispielinhalte von Tide & Table enthalten Reservierungsanfragen, zehn Seitentypen, alle dreißig gemeinsamen Abschnitte und alle sieben vorhandenen Formularbindungen. Navigationslinks, übergeordnete Links und „Mehr“ teilen Hover- und Aktuelle-Seite-Zustände; ausgewählte Unterseiten heben ihr übergeordnetes Element hervor. Mobile Menüs zeigen Unterseiten unter ihrem übergeordneten Element. Tabs, Slider, Gerichtsfilter und Rechts-nach-links-Layouts behalten die Plattformverträge bei. Reservierungsanfragen erfordern eine Bestätigung; ein Zahlungs- oder Live-Tischverfügbarkeitssystem ist nicht vorgesehen.

Family Insurance

Family Insurance (family-insurance) kombiniert einen violetten Kopfbereich und eine eingerückte weiße Navigation mit Familienfotos, sanften lavendelfarbenen Infopanels und zurückhaltenden Manrope-Überschriften. Die Beispielinhalte von Hearthway Insurance sind fiktiv. Einfache und übergeordnete Navigationslinks teilen dieselbe Hover- und Aktuelle-Seite-Darstellung; eine ausgewählte Unterseite hebt ihr übergeordnetes Element hervor. Kompakte Unterseitenüberschriften, beschriftete Galerien, zugeschnittene Katalogbilder und beschriftete Kontaktpanels führen das Design über die Startseite hinaus.

Barbershop

Barbershop (barbershop) folgt einem tiefgrünen zweizeiligen Kopfbereich mit zentriertem Serifen-Schriftzug, einem randlosen Foto-Einstieg, der zur Leseseite hin abgedunkelt ist, und cremefarbenen Seiten mit Playfair-Display-Überschriften und Messingschaltflächen. Funktionskarten zeichnen Liniensymbole und zeigen jeden Symbolwert als kurzes goldenes Label, Qualifikationen stehen in einem geteilten dunklen Band, der Bildslider zeigt vier quadratische Haarschnitte, Produktspezifikationen werden zu einer zweispaltigen Preisliste und Preisangebote zu einem gestrichelten Rosettenpanel. Katalogkarten auf der Startseite und der Leistungsseite sind dunkle Fotokacheln. Die Beispielinhalte von Northline Barber sind fiktiv.

Recruitment & Staffing

Recruitment & Staffing (recruitment-staffing) verwendet eine weiße abgerundete Navigation, einen lavendelfarbenen geteilten Einstieg mit gewölbtem Foto, violette Aktionen, mintfarbene Kundenstimmen und eine blauviolette Fußzeile. Die fiktiven Beispielinhalte von Brightlane Talent enthalten recruitingspezifische Leistungen, Teamprofile und Anfragetexte. Die Überschriften in Plus Jakarta Sans bleiben zurückhaltend. Über- und untergeordnete Navigation, Katalogdetails, Galerien, Artikel und alle registrierten Anfrageformulare folgen derselben Bildsprache.

Airline Booking

Airline Booking (airline-booking) verwendet eine weiße Kopfzeile mit Flugzeugzeichen, einen abgerundeten, vollbreiten Sonnenuntergangs-Einstieg, dessen Text und Aktionen in einer schwebenden weißen Buchungsleiste stehen, und Figtree-Überschriften in Petrol und Tinte. Katalogkarten werden zu Reisezielkacheln mit nummeriertem Abzeichen, Bild und Text stehen in einem mintfarbenen Panel mit petrolfarbenem Beschriftungschip, Kennzahlen werden zu einem abgerundeten petrolfarbenen Band, Funktionskarten zu einer zweispaltigen Liste mit Pfeilen, und die Fußzeile ist ein abgerundetes petrolfarbenes Panel mit Kontaktaktion. Die Beispielinhalte von Skyvane Travel sind fiktiv.

Architecture Studio

Architecture Studio (architecture-studio) legt eine transparente Kopfzeile mit mattierter Pillennavigation über ein randloses Wohnhausfoto, das zur Leseseite hin sandfarben überblendet ist, und verwendet leichte Montserrat-Überschriften, espressofarbene Pillenschaltflächen mit weißen Pfeilscheiben und eine schwebende Projektbeschriftung. Katalog- und Leistungskarten sind sanfte sandfarbene Kacheln mit asymmetrischer Bildecke, das Projektraster wird zu einem dunklen Band mit ausgewählten Projekten, Bild und Text laufen randlos mit abgerundeter Bildkante, Kennzahlen stehen in einer linierten Spalte und Lead-Formulare werden zu einem espressofarbenen Kontaktband. Die Beispielinhalte von Solace Architecture sind fiktiv.

Automation SaaS

Automation SaaS (automation-saas) kombiniert eine weiße Kopfzeile und einen zentrierten Instrument-Serif-Einstieg über einem Foto von Himmel bis Hügeln mit salbeifarbenen Seiten, weißen abgerundeten Karten und hellgrünen Aktionen. Kennzahlen werden zu vier Karten, die dritte in Waldgrün, Bild und Text wechseln je nach Variante zwischen einer weißen und einer limettenfarbenen Karte, der Videoabschnitt wird zu einer waldgrünen Funktionskarte, das Projektraster zu horizontalen Einblickkarten mit Weiterlesen-Chip, und die FAQ ist ein zentriertes Akkordeon. Die Fußzeile endet mit einem großen Serifen-Schriftzug über gezeichneten grünen Hügeln. Die Beispielinhalte von Fernflow sind fiktiv.

Business Analytics SaaS

Business Analytics SaaS (business-analytics-saas) verwendet eine weiße Kopfzeile, einen zentrierten Outfit-Einstieg mit smaragdgrüner Akzentform und das Einstiegsfoto in einem marineblauen Produktrahmen mit Seitenleistenmuster. Kennzahlen stehen in einer geteilten Zeile, Funktionssymbole wechseln zwischen Smaragdgrün, Blau und Violett, Bild und Text stehen auf einem mintfarbenen Band mit schwebender Wachstumskarte, die Logowolke wird zu Integrationskacheln und das Preisangebot zu einem hervorgehobenen smaragdgrünen Tarif. Kundenstimmen zeigen Sterne und Avatarpunkte, die Fußzeile ist marineblau. Die Beispielinhalte von Metrova sind fiktiv.

Car Dealership

Car Dealership (car-dealership) verwendet eine tiefpetrolfarbene zweizeilige Kopfzeile mit Kontaktzeile, einen mintfarbenen geteilten Einstieg mit Bewertungschip auf dem Fahrzeugfoto und eine weiße Suchkarte, die den Einstieg überlappt. Bildbasierte Leistungskarten werden zu sechs kompakten Kategoriekacheln, Bild und Text zu einem dunkelpetrolfarbenen An- und Verkaufsband, Qualifikationen zu zentrierten Gründen mit Symbolen; Katalogkarten tragen ein nummeriertes Abzeichen, Kundenstimmen stehen auf Tiefpetrol, das Preisangebot wird zu einem mintfarbenen Finanzierungspanel und die Fußzeile beginnt mit einem Handlungsaufruf. Die Beispielinhalte von Corvane Motors sind fiktiv.

Car Rental

Car Rental (car-rental) ist ein dunkles Theme aus fast schwarzgrünen Panels mit weichen Rändern und limettengrünen Akzenten. Über einem zentrierten Schriftzug und einer luftigen Kategorienavigation liegt ein limettengrüner Streifen; der Einstieg ist eine umrandete Fotokarte mit großer Archivo-Überschrift in Großbuchstaben und limettengrünen Pillenschaltflächen mit Pfeilscheiben. Qualifikationen werden zu einem einzigen Funktionsstreifen, Katalogkarten zu weißen Mietkarten mit limettengrün umrandeter mittlerer Option, Funktionskarten zu nummerierten Schritten, und die Fußzeile ist ein umrandetes Panel mit Kontaktaktion. Die Beispielinhalte von Laneway Rentals sind fiktiv.

Catering Services

Catering Services (catering-services) verwendet eine waldgrüne Kopfzeile, cremefarbene Seiten und Gilda-Display-Überschriften mit Blatttrenner. Der Einstieg setzt das Foto in einen gewölbten Rahmen mit Abspielzeichen; Leistungskarten mit Bildern stehen in einer vierspaltigen Reihe, Funktionskarten werden zu einem waldgrünen Band mit olivfarbener mittlerer Karte, Bild und Text kombinieren ein eingekerbtes Foto mit einer sandfarbenen Textkarte und einer Beschriftung im Signaturstil, Qualifikationen werden zu einer sorgfältig gestalteten Menüliste, der Bildslider zeigt runde Gerichte auf Grün und die FAQ steht in einer salbeifarbenen Karte. Die Beispielinhalte von Sage & Table Catering sind fiktiv.

Coaching & Consulting

Coaching & Consulting (coaching-consulting) kombiniert eine marineblaue Kopfzeile und einen Einstieg mit einem Farbverlauf von Orange über Pink zu Violett, der durch Überschrift, Schaltflächen und eine Porträtkachel mit weißem Namenschip läuft. Die Logowolke setzt den marineblauen Einstieg als Kundenstreifen fort, Funktionskarten tragen eine Verlaufsunterstreichung, Kennzahlen werden zu einem geteilten Community-Panel in Verlauf und Marineblau, Leistungskarten erhalten farbige Umrissabzeichen und Pfeilschaltflächen, das Projektraster zeigt gerahmte Schrittkarten, das Preisangebot wird zu einem dunklen hervorgehobenen Tarif, und Bild und Text stehen in einem fliederfarbenen Panel. Die Beispielinhalte von Northbeam Coaching sind fiktiv.

Construction Company

Construction Company (construction-company) verwendet eine schwebende dunkelpetrolfarbene Kopfleiste mit limettengrünen Aktionen auf einer weißen Seite und einen Einstieg, dessen Foto mit schrägem Anschnitt bis zum Rand reicht, mit gestricheltem rundem Stempel. Die Kennzahlen stehen in einer dunklen Leiste, die den Einstieg überlappt, die dritte Leistungskarte wird dunkel, Bild und Text stehen in einem salbeifarbenen Panel mit Parallelogrammfoto, das Teamraster zeigt vier Porträts der Mannschaft, Qualifikationen werden zu einem nummerierten dunklen Ablaufpanel, und die Fußzeile ist ein abgerundetes petrolfarbenes Panel mit direkten Kontaktdaten. Die Beispielinhalte von Ironleaf Builders sind fiktiv.

Cookie Bakery

Cookie Bakery (cookie-bakery) verwendet eine cremefarbene Seite, einen abgerundeten schokoladenbraunen Einstieg mit kräftiger Lilita-One-Schrift, die von Weiß zu Senfgelb wechselt, ein rundes Produktfoto und Streuselpunkte. Funktionskarten wechseln zwischen Pfirsich, Rosa, Himmelblau und Buttergelb, das Preisangebot wird zu einem pfirsichfarbenen Rabattpanel, Produktspezifikationen zu einer dunklen Liste mit Tagesangeboten, Leistungskarten mit Bildern zu runden Produktempfehlungen; Bild und Text verwenden ein Foto in Klecksform mit korallenrotem Stempel, Qualifikationen werden zu einem dunklen Leistungsstreifen, und die Fußzeile hat einen gewellten Schokoladenrand. Die Beispielinhalte von Crumb & Co. Bakery sind fiktiv.

Coworking Space

Coworking Space (coworking-space) kombiniert eine warme gebrochen weiße Seite mit tiefgrünen Panels, Pfirsichakzenten und Gloock-Serifenüberschriften; die Einstiegsüberschrift wechselt zwischen den Zeilen von Grün zu Pfirsich, und das Arbeitsplatzfoto sitzt in einem großen abgerundeten Rahmen mit grüner Beschriftungskarte. Qualifikationen werden zu einem kompakten Funktionsstreifen, Funktionskarten zu einer Symbolliste, Katalogkarten teilen sich ein sandfarbenes Band mit grüner mittlerer Karte, Kennzahlen laufen als grünes Band, Galeriebilder tragen dunkle Beschriftungen, Kundenstimmen zeigen eine Porträtkachel, und Lead-Formulare werden zu grünen Formularkarten mit pfirsichfarbener Absendeschaltfläche. Die Beispielinhalte von Greenhall Workspace sind fiktiv.

Creative Studio Coffee

Creative Studio Coffee (creative-studio-coffee) setzt eine transparente Kopfzeile und eine Bodoni-Moda-Überschrift in Großbuchstaben, die von Weiß zu Messing wechselt, über ein randloses Espressofoto und geht dann zu Seiten in Milchkaffee-Beige über. Qualifikationen werden zu einem fünfteiligen Wertestreifen, das Projektraster zu sechs dunklen Porträtkacheln mit Pfeilringen, Bild und Text laufen randlos mit einer runden Stempelbeschriftung, Lead-Formulare werden zu einem dunkel gerösteten Mitgliedschaftsband, und die Fußzeile ist ein helles, liniertes Spaltenlayout. Die Beispielinhalte von Crema Digital sind fiktiv.

Duck Farm

Duck Farm (duck-farm) behält weiße und blassgrüne Seiten mit tiefen hofgrünen Panels und sonnengelben Akzenten bei. Das Einstiegsfoto reicht bis zum Rand und geht in den Text über, dessen letzte Zeile grün wird, mit einer handschriftlichen Beschriftung. Katalogkarten zeigen vier Produkte, Bild und Text werden zu einem dunkelgrünen Panel mit klecksförmigem Foto und gestricheltem Natursiegel, Funktionskarten zu geteilten Vertrauenssymbolen, Kennzahlen zu einem dunklen Landwirtschaftspanel, Qualifikationen zu einem nummerierten Weg vom Hof auf den Tisch, und Kundenstimmen stehen auf Creme. Die Beispielinhalte von Brookmead Farm sind fiktiv.

Electrical Services

Electrical Services (electrical-services) kombiniert eine weiße Kopfzeile mit Telefonlink und grüner Angebotsschaltfläche mit anthrazitfarbenen Einstiegen und Leistungskarten. Das Einstiegsfoto geht in Anthrazit über, und die letzten beiden Überschriftenzeilen werden elektrogrün. Kennzahlen stehen auf einer weißen Karte, die den Einstieg überlappt, Bild und Text schneiden das Foto sechseckig mit rundem Sicherheitssiegel zu, Leistungskarten werden anthrazitfarben mit grünen Symbolkreisen, Qualifikationen werden zu mit Blitzen markierten Gründen für das Unternehmen, und der Handlungsaufruf wird zu einem grünen Notdienstpanel. Die Beispielinhalte von Brightwire Electric sind fiktiv.

Fashion Store Lavender

Fashion Store Lavender (fashion-store-lavender) kombiniert einen anthrazitfarbenen Kopfbereich und geteilten Einstieg mit einem gewölbten fliederfarbenen Foto, Cormorant-Garamond-Überschriften und warmen elfenbeinfarbenen Seiten. Ein lavendelfarbener Vorteilsstreifen führt zu bildbasierten redaktionellen Kollektionen, zurückhaltenden Neuheitenkarten und einem dunklen Modekampagnenpanel. Das Theme besitzt alle zehn Seitenvorlagen, gestaltet alle dreißig gemeinsamen Abschnitte und unterstützt die sieben vorhandenen Anfrageformulare. Navigationslinks, übergeordnete Elemente und „Mehr“ teilen lavendelfarbene Hover- und Auswahlzustände, auch wenn eine Unterseite ausgewählt ist. „Mehr“ und mobile Menüs verwenden vollbreite Zeilen mit verschachtelten Links unter ihrem übergeordneten Element. Katalogsuche, native verschachtelte Navigation, tastaturbedienbare Tabs und Bildslider behalten die Plattformverträge bei. Die Beispielinhalte von Violette Edit sind fiktiv; die Kollektion verwendet Anfragelinks statt eines Warenkorbs oder Checkouts.

9. Von der Aktivierung bis zur Veröffentlichung

1. Vorlage installieren und aktivieren. Eyivo validiert das Paket, speichert Schlüssel und Version und stellt Einstellungen und Komponentenschemas in der App bereit.
2. Seitentyp auswählen. Eyivo verwendet die passende Liquid-Datei und Bereichsdefinition des aktiven Themes, falls vorhanden, andernfalls den passenden Fallback aus theme-core.
3. Zulässige Abschnitte hinzufügen. Die App bietet nur die unter allowed_components aufgeführten Typen an. Sie speichert Text, Medienreferenzen und Übersetzungen für die gewählte Komponenteninstanz.
4. Sicher rendern. Eyivo bereitet Unternehmens-, Seiten-, SEO- und Navigationsdaten auf, rendert gespeicherte Bereichskomponenten sowie direkt platzierte Komponenten und anschließend Seitentyp und Layout des aktiven Themes.
5. Veröffentlichen. Besucher erhalten Ihr HTML und CSS, aber keine Datenbankzugangsdaten, internen Modelle oder Anwendungscode.

10. Validierung und häufige Fehler