Vai al contenuto

Documentazione per gli sviluppatori · Theme API v1.0

Crea in sicurezza un tema completo per siti aziendali.

I temi Eyivo definiscono un sistema visivo completo: struttura delle pagine, tipografia, componenti e stile. Il titolare dell’azienda inserisce i contenuti consentiti nell’app, senza spostare blocchi, modificare codice o compromettere il design.

Principio fondamentale

Liquid decide come appare il sito web; Eyivo Core decide quale contenuto aziendale viene visualizzato lì.

1. Il modello mentale

Ci sono tre responsabilità distinte. Tenerle separate è fondamentale per comprendere la versione v1.

Eyivo Core

Conserva dati aziendali, pagine, media, SEO, navigazione e stato di pubblicazione. È la fonte autorevole dei contenuti.

Pacchetto del tema

Definisce forme di pagina fisse, sezioni consentite, schemi di componenti personalizzati e CSS. Non interroga mai i dati né esegue il codice dell'applicazione.

Editor dell'app

Genera moduli sicuri dallo schema. I proprietari possono aggiornare testo, immagini, pagine e ordine delle sezioni all'interno di un'area.

Non è un page builder: il titolare può aggiungere una sezione consentita a main e sceglierne la posizione. Non può creare nuove aree, spostare una sezione hero nel piè di pagina, modificare l’HTML o cambiare il CSS del tema.

2. Guida rapida: un tema minimo e funzionante

Ogni tema v1 controlla l’intero layout, gli stili e gli script e può organizzarli secondo il design scelto dall’autore. Un tema non eredita layout o risorse da altri temi. I componenti condivisi eyivo: e i sette tipi di pagina predefiniti provengono da theme-core; il tema include solo i tipi di pagina che sostituisce e i componenti che dichiara nello spazio dei nomi theme:.

Ogni tema v1 necessita di un file di layout predefinito. Sia page-types/ che components/ sono opzionali quando il pacchetto utilizza solo fallback core:

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

layouts/default.liquid proviene sempre dal tema attivo e possiede il documento pubblico completo. Eyivo cerca prima il tipo di pagina richiesto in quel tema, quindi torna a theme-core/page-types. Core non fornisce mai un layout o risorse, quindi il contenuto della pagina di fallback è ancora racchiuso e stilizzato dal tema attivo.

3. Descrivere il modello in theme.json

Il manifest è sia una dichiarazione di capacità che il contratto utilizzato per generare moduli dell'app. Risponde a tre domande: quali strutture di pagina esistono, quali aree ha ciascuna struttura e cosa un componente può memorizzare. I temi integrati dichiarano esplicitamente tutti i dieci tipi di pagina standard e includono i relativi file Liquid. I temi personalizzati possono continuare a usare i modelli di fallback del core per i tipi non dichiarati.

{
  "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 }
      }
    }
  }
}
ChiaveSignificatoEsempio
versionLa versione immutabile della release del tema (versionamento semantico).1.2.0
eyivo_theme_apiIl contratto API pubblico Eyivo supportato dal tuo pacchetto.1.0
areasSlot denominati di cui il file di pagina Liquid esegue il rendering in posizioni fisse.hero, main, bottom
allowed_componentsQuali componenti l'editor può aggiungere a un'area.["eyivo:hero"]
componentsLe definizioni dei componenti theme: personalizzati del tema attivo. Le definizioni eyivo: condivise rimangono in theme-core.featured_course
min/maxLimiti facoltativi al numero di sezioni in quell'area.max: 1

Fallback dei tipi di pagina: i tipi integrati sono home, page, gallery, contact, products, product e videos. Ometti un tipo per usare la definizione e il file Liquid di theme-core. Dichiaralo solo se il tema fornisce anche il file sostitutivo page-types/<type>.liquid.

L’editor riceve l’API combinata dei tipi di pagina: le definizioni del tema attivo sostituiscono quelle corrispondenti di core, mentre i tipi omessi restano disponibili da core.

4. Completa il contenuto demo in demo.json

Ogni caricamento deve includere un file demo.json portabile, usato solo come bozza, e almeno uno screenshot acquisito con quei dati demo. I temi integrati usano lo stesso schema. Non includere ID del database, domini dei clienti, credenziali o chiavi dello storage a oggetti.

{
  "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": []
}
ChiaveScopo
mediaURL pubblici di origine e metadati indicizzati tramite identificatori portabili delle risorse. Riutilizza l’identificatore per hero_asset, cover_asset, media_asset, asset degli elementi della galleria, logo_asset e favicon_asset.
companyProfilo aziendale, collegamenti social, colori del marchio, risorse logo/favicon opzionali e traduzioni con chiave locale.
theme_settingsImpostazioni iniziali del tema, con traduzioni opzionali con chiave locale.
pagesTipo, ordinamento, stato di navigazione, SEO, impostazioni della pagina, componenti e contenuto con chiave locale.
catalogVoci di catalogo con contenuto con chiave locale e cover_asset opzionale.
galleriesMetadati della galleria e immagini. Ogni elemento richiede un asset e un alt_text non vuoto.
videosUno source_url esterno o uno media_asset, modalità di presentazione e contenuto con chiave locale.

Pagine e componenti

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

I tipi e le aree dei componenti devono essere dichiarati nel manifest del tema attivo o in theme-core. Utilizza percorsi relativi come /contact per i collegamenti allo stesso sito. Le demo della home incluse usano la loro immagine hero esistente come sfondo a tutta larghezza, con una sovrapposizione leggibile e testo adattivo: immersive nella maggior parte dei temi e centered con immagine in Compact. Le altre varianti mantengono i propri layout.

Lingue demo e lingua di riserva

L’inglese è la lingua di base obbligatoria: imposta default_locale su en. Se manca nei dati precedenti, si intende comunque inglese. Le altre lingue supportate sono facoltative; non presentare copie inglesi come traduzioni.

Fornisci translations.en e oggetti lingua facoltativi per azienda, impostazioni, pagine, componenti, prodotti, gallerie, didascalie e testi alternativi, video e articoli. I vecchi campi inglesi senza chiave lingua restano validi. La creazione sceglie la lingua principale del sito e usa l’inglese per ogni campo mancante. Gli array sostituiscono l’intero array inglese; i valori esplicitamente vuoti vengono conservati. Si importa solo la lingua scelta, senza attivarne altre automaticamente.

Usa gli slug sorgente inglesi nei link interni e nei menu portabili. L’importazione li converte negli slug tradotti, anche nel testo formattato e negli articoli. I menu possono indicare mappe esplicite slugs e labels. Le etichette mancanti usano l’inglese. Gli URL esterni restano invariati.

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

Importazione e sicurezza dei media

I nuovi siti dalla dashboard includono i dati demo per impostazione predefinita e pubblicano subito la lingua scelta; il proprietario può deselezionare l’opzione. Su un sito esistente, il caricamento da Branding crea ancora bozze e conserva i contenuti pubblicati. L’App centrale copia le immagini nella libreria del nuovo sito e invia riferimenti tramite l’API interna. Master e temi non ricevono credenziali per lo storage di oggetti. I temi usano il valore media.public_url fornito.

Dichiara gli screenshot in theme.json.preview con data_source: "demo_data". Il pacchetto deve contenere ogni immagine preview dichiarata.

5. Scrivi qualsiasi layout di cui il tuo tema ha bisogno

Il layout predefinito possiede il documento HTML completo. Niente al di fuori del tema attivo fornisce l'intestazione, il piè di pagina, il foglio di stile, JavaScript o la struttura visiva.

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

Un file di tipo pagina decide quindi esattamente dove appaiono le sue aree dinamiche. I componenti dell'area sono già stringhe HTML sottoposte a rendering, quindi inseriscili con | raw. Per impostazione predefinita, i valori ordinari vengono sottoposti a escape.

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

Eseguire il rendering di un componente direttamente

Un progettista può inserire un componente registrato direttamente in un file di layout o di tipo pagina. Questo posizionamento è fissato dal tema e non viene riordinato o rimosso nel pannello. Passa un oggetto attraverso data:, singoli campi dello schema o entrambi; i campi denominati sovrascrivono le chiavi corrispondenti da 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"
%}

Il tipo deve essere un valore letterale con spazio dei nomi tra virgolette. Il rendering diretto utilizza lo stesso schema, varianti, file di componenti e oggetto component normalizzato come istanza di area. I file dei componenti non possono eseguire il rendering di altri componenti.

Asset: utilizza sempre {{ 'css/theme.css' | asset_url }}. Eyivo lo serve dal pacchetto attivo come /theme-assets/<theme>/css/theme.css; non codificare un altro nome di tema o percorso di filesystem.

Head, percorsi e dizionari dell’interfaccia

Ogni layout deve eseguire il rendering di {% eyivo_head %} esattamente una volta. Eyivo possiede quindi il titolo, la descrizione, i robot, il canonical, l'hreflang, l'Open Graph e l'output dei dati strutturati. Utilizza routes.home, routes.contact, routes.catalog, routes.gallery e routes.videos invece dei percorsi pubblici codificati. Passa le impostazioni URL modificabili tramite | localized_url in modo che i percorsi interni noti ottengano il prefisso locale attivo mentre gli URL esterni rimangano invariati.

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

Puoi creare file locales/<locale>.json per le etichette dell’interfaccia introdotte dal tema. L’ordine di ricerca è: inglese di core, lingua corrente di core, inglese del tema e lingua corrente del tema. Le etichette condivise di theme-core funzionano senza copiare file. Il testo dell’azienda va nei contenuti traducibili, nei campi dei componenti o nelle impostazioni del tema, non nei dizionari.

Un file del componente personalizzato

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

Per i campi traducibili, Eyivo seleziona la lingua del visitatore prima del rendering. Un visitatore turco e un visitatore inglese vedono quindi la stessa struttura dei componenti con valori component.data.heading diversi.

6. I dati Liquid sicuri che puoi utilizzare

Liquid riceve dati semplici e normalizzati, non Laravel o modelli di database. Se un valore non è presente in questa tabella, consideralo non disponibile nella versione v1.

OggettoCampi utiliUtilizzo tipico
sitename, localeNome del sito e lingua principale.
companyname, legal_name, description, address, phone, emailIntestazione, piè di pagina e informazioni di contatto.
pageid, type, title, slug, body, settingsContenuti generici della pagina e impostazioni per pagina.
seotitle, description e, se disponibili, valori canonical, robots e Open GraphSezione head del documento.
navigation.mainOgni voce contiene label, url e activeMenù del sito.
localecode, name, native_name, direction, is_default, home_url, availableLingua del documento, direzione RTL, collegamenti alla home localizzati e selettore della lingua.
routeshome, contact, catalog, gallery, videos, blogURL di sistema corretti per la lingua corrente; non costruire prefissi in Liquid.
blogtitle, url, categories, category, posts, post, paginationElenco del blog gratuito, archivio delle categorie e pagine degli articoli. I post espongono titolo, riepilogo, URL, date, categorie e immagine di copertina. Solo blog.post.body_html contiene HTML sicuro degli articoli generato dal server e richiede raw. La paginazione fornisce previous_url e next_url.
theme.settingsImpostazioni definite nel manifestUtilizza un'opzione di colore, spaziatura o design configurata.
products/productTitolo, URL, riepilogo e corpo tradottiPagine elenco e dettaglio dei prodotti.
galleriesTitolo e descrizione tradottiTipo di pagina della galleria.
videostitle, description, source_type, source_url, playback_url, mediaUsa playback_url per i file video caricati e source_url per i video HTTP(S) esterni, secondo source_type. Le immagini allegate non sono mai sorgenti video. Non usare il file video stesso come immagine di anteprima.
componentid, type, variant, dataSolo all'interno di un file componente.

Esempio di layout corretto per ogni lingua

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

Ciascun elemento della lingua disponibile espone anche label, direction, is_default, current e has_translation. Eyivo fornisce solo traduzioni pubblicate equivalenti, quindi i temi devono utilizzare language.url invece di costruire /en o qualsiasi altro prefisso.

Esempio di token basato sulle impostazioni: style="--brand: {{ theme.settings.primary_color }}". L'impostazione deve essere prima dichiarata in theme.json.

7. Componenti diretti e dinamici

I componenti condividono un unico contratto di rendering e hanno due modalità di posizionamento. Un componente diretto è fissato dal designer nel layout o nel tipo di pagina. Un componente dinamico è salvato come istanza di un’area della pagina e gestito nell’editor. Le istanze dinamiche hanno un ID stabile, tipo con spazio dei nomi, area, posizione, variante facoltativa, dati e traduzioni. La posizione determina solo l’ordine, non l’identità.

Tipi di campo

text, textarea, richtext, number, boolean, select, url, email, image, video, file, color, icon, page, product e repeater.

Spazi dei nomi

eyivo: si risolve da theme-core/components, theme: si risolve dal tema attivo e plugin: è riservato per plugin futuri. Utilizza il tipo esatto dello spazio dei nomi in un'area o in un tag eyivo_component.

Componente universale: imposta "universal": true su una definizione del componente per consentirlo in tutte le aree dei tipi di pagina compatibili. Deve comunque avere uno schema valido e un file Liquid.

I collegamenti di azione condivisi adattano i percorsi interni noti alla lingua attiva, mantenendo i parametri di query e i frammenti. Il testo formattato conserva la formattazione sicura nei contenitori annidati dell’editor. Le immagini vuote della galleria vengono omesse, le immagini della mappa senza destinazione non sono collegamenti e le etichette delle diapositive e della ricerca usano la lingua dell’interfaccia del visitatore.

Visual Atelier (visual-01) mantiene in scorrimento automatico il nastro decorativo della home page, anche quando il browser richiede movimento ridotto. Il passaggio del mouse mette in pausa il testo; allontanandosi riprende. L’aspetto originale e il ciclo solo CSS vengono mantenuti.

8. Catalogo dei componenti disponibili

Questi 30 componenti condivisi eyivo: costituiscono l’intera libreria v1 e provengono da theme-core. Un tema può inoltre dichiarare e implementare i propri componenti theme:.

Varianti: spliteditorialcenteredimmersive

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text Sì Sì —
summary textarea No Sì —
image_url url No No —
image_alt text No Sì —
primary_label text No Sì —
primary_url url No No —
secondary_label text No Sì —
secondary_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
body richtext No Sì —

Varianti: image_leftimage_rightoverlap

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
body richtext No Sì —
image_url url No No —
image_alt text No Sì —
badge text No Sì —
button_label text No Sì —
button_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
intro textarea No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
intro textarea No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
intro textarea No Sì —
button_label text No Sì —
button_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
text textarea No Sì —
submit_label text No Sì —
form_binding select No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
heading text No Sì —
text textarea No Sì —
whatsapp_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
address textarea No Sì —
map_url url No No —
image_url url No No —
image_alt text No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
heading text No Sì —
placeholder text No Sì —
categories repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
summary textarea No Sì —
video_url url No No —
poster_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
price text No Sì —
period text No Sì —
features repeater No Sì —
button_label text No Sì —
button_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
label text No Sì —
heading text No Sì —
body textarea No Sì —
button_label text No Sì —
button_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

Il componente condiviso eyivo:faq mantiene gli stessi campi e lo stesso markup in ogni tema. Ogni tema lo presenta con il proprio carattere, la propria spaziatura e il proprio colore.

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
text textarea No Sì —
button_label text No Sì —
button_url url No No —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
heading text No Sì —
items repeater No Sì —

Varianti: nessuna

CampoTipoNecessarioTraducibileOpzioni
eyebrow text No Sì —
heading text No Sì —
intro textarea No Sì —
items repeater No Sì —

Foundation Impact: comporre il sito di una fondazione

Foundation Impact (foundation-impact) presenta lo scopo, i programmi, la governance, l’impatto, gli eventi, la galleria e le richieste di una fondazione. Il layout manda a capo le etichette di navigazione lunghe e passa a un menu espandibile sugli schermi più piccoli. I menu registrati header, footer e useful_links controllano la navigazione. Quando il menu registrato è vuoto, l’intestazione ricorre alla navigazione automatica delle pagine. La pagina delle fotografie selezionate usa /in-pictures; /gallery resta l’elenco nativo degli album.

Foundation Impact dispone di tutti i dieci modelli integrati: Home, Pagina, Contatti, Prodotti, Prodotto, Galleria, Video, Blog, Categoria e Articolo. Le aree di contenuto e i moduli registrati restano compatibili. Le voci principali usano gli stessi stati trasparenti e sottolineati dei link normali al passaggio del mouse e alla selezione; una sottovoce selezionata evidenzia anche il genitore. I sottomenu seguono questo stile su desktop e mobile.

Le intestazioni delle sottopagine senza immagine usano una fascia lavanda compatta con breadcrumb ravvicinati, una piccola etichetta e un titolo misurato. Con immagine, una sovrapposizione scura e titoli, breadcrumb e riepiloghi bianchi assicurano la leggibilità. Il testo resta sopra l’immagine e la sovrapposizione, la cui direzione segue i layout da destra a sinistra.

Il componente condiviso eyivo:rich_text accetta contenuti marcati dall’editor e vecchi contenuti HTML. Entrambi passano attraverso l’elenco dei formati consentiti: paragrafi, titoli, elenchi e link sicuri vengono visualizzati, mentre script, gestori di eventi e link non sicuri vengono rimossi. Gli altri campi mantengono il normale escaping. Anche i testi della demo Foundation usano il marcatore dell’editor.

Il tema compone i componenti esistenti eyivo:hero, project_grid, image_text, event_list, media_gallery, feature_grid, team_grid, stats, rich_text, faq, cta e lead_form. Il suo script del tema differito attiva i controlli dello slider di immagini, le schede utilizzabili da tastiera e il filtro del catalogo. Il menu mobile si espande con controlli HTML nativi. I numeri usano titoli, etichette e note scuri su una superficie giallo chiaro, con valori in blu. Le schede dei programmi rimandano a normali pagine di contenuto. Le schede degli eventi descrivono gli eventi e rimandano a una pagina di richiesta; non creano prenotazioni né registrazioni di partecipazione.

La pagina di contatto usa eyivo:lead_form con il collegamento di contatto portabile fornito da eyivo/contact. L’importazione di una demo risolve questo collegamento separatamente per ogni sito. Donazioni, domande di contributo e approvazioni dei volontari non sono incluse.

Le importazioni delle demo integrate riutilizzano le voci attive del catalogo condiviso dei media delle demo dei temi. L’app centrale possiede l’oggetto e fornisce riferimenti ai master; eliminare un riferimento importato non elimina l’oggetto condiviso protetto. Un’anteprima del tema e un esempio SEO dedicato sono siti separati.

Village Commons: navigazione secondaria e barre laterali

Village Commons (village-commons) riunisce una bacheca, luoghi locali, la storia del paese, eventi, fotografie, informazioni per i visitatori e un modulo di contatto specifico del sito. Le superfici verde bosco, avorio e ambra hanno colori di primo piano espliciti. I componenti Eyivo esistenti forniscono i contenuti; le schede degli eventi non offrono prenotazioni e le pagine dei verbali non costituiscono un archivio ufficiale. Le sezioni immagine e testo delle pagine informative mantengono una spaziatura interna responsive intorno al testo. I pannelli di eventi e FAQ delle sottopagine hanno una spaziatura interna responsive. Le FAQ usano un titolo compatto e pannelli espandibili arrotondati impilati con controlli di espansione chiari.

Registra header, secondary, sidebar, footer e useful_links in theme.json. La navigazione secondaria compare nella barra di servizio; il menu laterale compare accanto alle pagine ordinarie e di contatto. Entrambi si modificano e si pubblicano con l’editor dei menu standard. Mantieni breve la navigazione principale. Sugli schermi piccoli il menu principale si espande e la barra laterale si sposta sotto il contenuto della pagina.

Una barra laterale è un’area del layout, non un nuovo tipo di componente. Gli schemi page e contact dichiarano un’area sidebar per rich_text, announcement, download_list e contact_actions, con un massimo di tre istanze. Visualizza areas.sidebar dentro un elemento aside, accanto a navigation.sidebar. La pagina Village life mostra un widget di testo modificabile. Le impostazioni del tema forniscono la scheda di contatto aggiuntiva. Ogni area personalizzata deve essere dichiarata separatamente in ogni tipo di pagina che la usa.

{% 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’anteprima generale del tema e la demo dedicata in inglese WT-003 sono siti admin-1 separati. Le immagini vengono importate dall’app centrale e protette nel catalogo condiviso dei media demo. Gli screenshot dei contenuti di prova pubblicati separatamente vengono acquisiti localmente prima della distribuzione e inclusi nel tema e in Apex. Prepare verifica l’hash del blueprint e la versione del tema prima di collegare la revisione dell’acquisizione alla demo generata. Il catalogo pubblico individua la sua anteprima protetta tramite la App API autenticata. Gli screenshot sono separati dai media dei clienti. Il tema usa il collegamento portabile del modulo di contatto di eyivo/contact.

Moduli e storico delle richieste

Forms API 1 offre sette processori approvati. I temi gestiscono layout e stile; i plugin definiscono schema, validazione e flusso. La piattaforma gestisce persistenza, verifica e notifiche.

Plugin di sistemaTipo di modulo
eyivo/contactContatto contact
eyivo/quote-requestRichiesta di preventivo quote_request
eyivo/product-inquiryInformazioni prodotto product_inquiry
eyivo/appointment-requestRichiesta di appuntamento appointment
eyivo/course-applicationDomanda per un corso course_application
eyivo/reservation-requestRichiesta di prenotazione reservation
eyivo/property-inquiryInformazioni immobiliari property_inquiry

Un modulo, più posizioni

La configurazione crea un UUID predefinito stabile per sito/plugin/tipo. Riutilizzare una posizione conserva l’identità; creare un modulo con nome genera un altro UUID. Cambi di tema e reinstallazione conservano lo storico. I temi usano alias portabili; l’editor seleziona i moduli salvati senza inserire 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"}
  }
}

Usa forms.contact nei contatti e component.form nelle sezioni modulo. Sostituisci form_preset con form_binding. Renderizza campi, aiuti, action, CSRF, form_context firmato e verification_html forniti. Sono ammesse solo modifiche di presentazione dichiarate e campi aggiuntivi consentiti; la validazione obbligatoria resta attiva.

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

Due viste, un record

La casella condivisa e le pagine elenco/dettaglio del plugin mostrano gli stessi record. I moduli richiedono Panel API 2, submission-list/submission-detail e un collegamento di menu senza sottolivelli. Panel API 1 resta supportata. Aprire non segna come letto; lettura, archivio e flusso sono separati e le modifiche usano record_revision. Disabilitare rimuove le pagine del plugin; la casella condivisa conserva gli snapshot storici.

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

Dati e autorizzazioni

I record usano il database dei contenuti del sito e il limite max_db_bytes del pacchetto. Nessuna quota separata per numero o conservazione. La configurazione resta sul master con 50 campi, 32 KB e tre livelli. I membri visualizzano; modificare richiede proprietario/gestione. Nessun accesso diretto al database dei plugin o trasferimento di PHP/Blade all’app.

Salvataggio verificato e notifica

La piattaforma convalida contesto, risposte e Human Verification, poi salva record, utilizzo e notifica insieme. Lo stesso tentativo si recupera per 24 ore senza duplicati. SMTP interviene dopo con possibili tentativi successivi; un errore email non elimina il record. Senza destinatario del modulo si usa l’email aziendale; se nessun indirizzo è valido, il record viene salvato senza email.

Tutti i temi inclusi usano questo contratto. I vecchi POST contact restituiscono 410; le pagine GET dei contatti funzionano. Le richieste di appuntamento o prenotazione non confermano prenotazioni. Processori di terzi, caricamenti e destinazioni esterne arbitrarie sono esclusi.

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

Field Guide: guide leggibili e raccolte di risorse

Field Guide (field-guide) unisce un serif editoriale a un testo leggibile, sfondi blu navy, azioni verdi e sobri accenti dorati. L’apertura e l’area di orientamento facoltativa condividono un’introduzione responsive. Le fotografie di sfondo restano attenuate dietro il testo; quando l’area di orientamento è vuota, l’introduzione usa tutta la larghezza.

L’intestazione su desktop mostra i primi quattro link di pagina di primo livello e raccoglie gli altri sotto Altro. Le pagine principali mantengono i propri link e pulsanti separati per i sottomenu. Sugli schermi piccoli, un Menu espandibile nativo mostra ogni pagina e ogni link figlio. Esc e un clic all’esterno chiudono i menu di navigazione. I link della lingua compaiono solo quando è disponibile più di una lingua.

Usa le aree hero e orientation per l’introduzione e un orientamento rapido, e l’area main per i componenti Eyivo esistenti. Una griglia di funzionalità che segue un contenuto editoriale diventa una checklist complementare sugli schermi ampi e lo segue su mobile. Gli articoli in testo formattato hanno una lunghezza di riga leggibile, spaziature chiare tra i titoli e fotografie contenute con crediti visibili. Quando un articolo termina con un unico sottotitolo seguito da una checklist o da una breve nota, lo script del tema presenta quel contenuto esistente come barra laterale complementare su desktop e sotto l’articolo su mobile; resta leggibile senza JavaScript. Una sezione finale di testo formattato nella home page, il cui corpo formattato è un paragrafo con link HTTPS, diventa una fascia di riferimenti blu navy a tutta larghezza con un titolo dorato più piccolo e link verde chiaro, anche senza JavaScript. Le raccolte di guide collegate usano un indice editoriale con campi image_url e alt facoltativi su ogni elemento di service_grid, link sull’intera voce e focus da tastiera. La home page inizia con due guide illustrate e poi presenta, nella raccolta successiva, una guida in evidenza accanto a righe compatte di risorse. Gli elenchi di servizi informativi o misti usano pannelli di lettura numerati; solo gli elementi con un URL indicato hanno un’azione. Le miniature usano gli URL dei media forniti e non recuperano mai le pagine di destinazione. I moduli di contatto e il piè di pagina usano le stesse spaziature e gli stessi colori. La demo fittizia del catalogo Northwater Brief resta separata dai contenuti di esempio della migrazione BACC-GA; aggiornare la demo del catalogo non importa il sito di alcun cliente.

Automotive Care: pagine e contenuti per officine

Automotive Care (automotive-care) include modelli propri Home, Page, Contact, Products, Product, Gallery e Videos, oltre al blog. Le aree dei componenti esistenti restano compatibili. Il design scuro e oro usa titoli misurati, servizi numerati, credenziali con descrizioni separate e spazio tra testo e pulsanti. Le immagini introduttive delle sottopagine sono dietro uno strato di contrasto; senza immagine viene mostrata una semplice introduzione.

Sul desktop la navigazione mostra sei collegamenti principali e raccoglie gli altri sotto Altro. I collegamenti principali e i pulsanti dei sottomenu condividono lo stesso stile al passaggio del mouse e per la pagina corrente. Il menu mobile include tutte le pagine e i collegamenti figli. Escape e un clic esterno chiudono il menu. I collegamenti delle lingue appaiono solo se sono disponibili più lingue.

Le immagini del catalogo mantengono le proporzioni in riquadri limitati. Anche i modelli di base limitano le immagini dei prodotti e posizionano correttamente gli sfondi delle sottopagine. La galleria evidenzia la prima foto; un clic apre una finestra accessibile, Escape la chiude e riporta il focus al collegamento. Senza JavaScript, la foto originale si apre in una nuova scheda. Gli slider supportano tocco, frecce, tastiera e movimento ridotto; la ricerca nel catalogo filtra localmente. Le foto dei dettagli dei prodotti riempiono tutta la larghezza del riquadro con un ritaglio centrato. Le credenziali formano una fascia scura con scudi dorati; le caratteristiche usano colonne spaziose con simboli dorati e si dispongono in verticale sui piccoli schermi.

Wellness & Beauty: cura personale e raccolte di trattamenti

Wellness & Beauty (wellness-beauty) dispone di modelli propri Home, Page, Contact, Products, Product, Gallery e Videos, oltre al blog. Le aree dei componenti e i moduli esistenti restano compatibili. Sfondi rosati, accenti delicati, titoli serif misurati e foto ad arco creano una morbida identità da studio. Testi e azioni sono ben distanziati. I dettagli dei trattamenti offrono una presentazione ampia, una foto con ritaglio centrale e contenuti leggibili. Le schede separano immagini, descrizioni e azioni; la galleria usa cornici da album con didascalie.

I collegamenti semplici e principali con figli condividono gli stati rosati al passaggio del mouse e per la pagina corrente. I sottomenu hanno pulsanti separati; gli altri collegamenti sono sotto Altro e il menu mobile contiene tutte le pagine e i figli. Escape e un clic esterno chiudono i menu. La galleria apre una finestra e restituisce il focus alla chiusura; senza JavaScript apre la foto in una nuova scheda. La ricerca filtra localmente. Slider e schede supportano tastiera e movimento ridotto. I colori del marchio sono rispettati; il tema non aggiunge un sistema di prenotazione.

Veterinary Care: servizi, personale e contatti chiari

Veterinary Care (veterinary-care) dispone di modelli propri Home, Page, Contact, Products, Product, Gallery e Videos, oltre al blog. Le aree dei componenti e i moduli registrati restano compatibili. Pannelli menta, testo verde scuro, azioni albicocca e titoli arrotondati misurati creano uno studio accogliente. Le schede separano foto, nomi, ruoli e biografie. Ogni etichetta di contatto appare sopra il valore, con collegamenti telefonici ed e-mail leggibili. Il piè di pagina mostra nome aziendale, breve motto, descrizione e contatti.

I collegamenti semplici e principali con figli condividono gli stati menta al passaggio del mouse e di pagina corrente. I genitori mantengono pulsanti separati per i sottomenu; gli altri collegamenti sono sotto Altro e il menu mobile include tutte le pagine e i figli. Escape e un clic esterno chiudono i menu. Il catalogo offre azioni chiare e ricerca locale; le foto riempiono riquadri limitati con ritaglio centrale. La galleria evidenzia una foto grande con viste di supporto e apre gli originali in una finestra con ripristino del focus. Senza JavaScript apre una nuova scheda. Slider e schede supportano tastiera e movimento ridotto.

Early Learning: pagine vivaci per le scuole

Early Learning (early-learning) offre modelli propri per Home, Pagina, Contatti, Prodotti, Prodotto, Galleria e Video, oltre al blog. Le aree dei componenti e i moduli registrati restano compatibili. Sfondi crema, accenti corallo, menta e giallo, titoli arrotondati e dettagli a blocchi si adattano alla prima infanzia. I profili e le tre schede Informazioni separano immagini, ruoli e descrizioni. I contatti usano pannelli etichettati, i programmi un’introduzione spaziosa con foto centrate e la galleria cornici da album con didascalie.

Link e voci principali condividono bordi al passaggio del mouse e un indicatore giallo per la pagina corrente. I sottomenu hanno controlli separati; Altro raccoglie i link aggiuntivi e il menu mobile nativo include tutte le pagine e le sottovoci. Le foto aprono un dialogo che ripristina il focus alla chiusura o una nuova scheda senza JavaScript. Ricerca locale, schede e cursori supportano tastiera e movimento ridotto. La demo usa testi scolastici e non aggiunge un sistema di iscrizione.

Temi della collezione di design

Ogni tema include tutti e dieci i modelli di pagina standard e applica uno stile a tutti e trenta i componenti condivisi di Eyivo. Le pagine di esempio di componenti e richieste incluse mostrano sezioni oltre la home page. I collegamenti per contatto, preventivo, richiesta prodotto, appuntamento, iscrizione a un corso, prenotazione e richiesta immobiliare usano i plugin esistenti e la verifica umana. Il filtro del catalogo, le schede utilizzabili da tastiera, gli slider di immagini e i menu di navigazione nativi supportano gli stessi contratti di contenuto su desktop, su mobile e nei layout da destra a sinistra.

Seafood Restaurant

Seafood Restaurant (seafood-restaurant) unisce il blu oceano all’arancio agrume, pagine di un bianco fresco e titoli Manrope sobri. Un’apertura fotografica di pesce introduce una fascia compatta di vantaggi, piatti simbolo, una storia sul lungomare, gallerie circolari dei piatti e un pannello blu navy con i motivi per venire. I contenuti di esempio fittizi di Tide & Table includono richieste di prenotazione, dieci tipi di pagina, tutte e trenta le sezioni condivise e tutti e sette i collegamenti ai moduli esistenti. I link di navigazione, i link principali e Altro condividono gli stati al passaggio del mouse e di pagina corrente; le pagine figlie selezionate evidenziano la pagina principale. I menu mobili mantengono i link figli sotto la pagina principale. Schede, slider, filtro dei piatti e layout da destra a sinistra mantengono i contratti della piattaforma. Le richieste di prenotazione richiedono conferma; non è previsto alcun sistema di pagamento né di disponibilità dei tavoli in tempo reale.

Family Insurance

Family Insurance (family-insurance) unisce un’intestazione viola e una navigazione bianca rientrata a fotografie di famiglia, morbidi pannelli informativi lavanda e titoli sobri in Manrope. I contenuti di esempio di Hearthway Insurance sono fittizi. I link di navigazione semplici e principali condividono lo stesso effetto al passaggio del mouse e lo stesso stato di pagina corrente; una pagina figlia selezionata evidenzia la sua pagina principale. Titoli compatti nelle sottopagine, gallerie con didascalie, immagini del catalogo ritagliate e pannelli di contatto etichettati estendono il design oltre la home page.

Barbershop

Barbershop (barbershop) segue un’intestazione verde scuro su due righe con un logotipo serif centrato, un’apertura fotografica a tutta larghezza ombreggiata dal lato di lettura e pagine crema con titoli Playfair Display e pulsanti in ottone. Le schede delle funzionalità disegnano icone al tratto e mostrano ogni valore come breve etichetta dorata, le credenziali si trovano in una fascia scura divisa, lo slider mostra quattro tagli quadrati, le specifiche di prodotto diventano un listino prezzi su due colonne e le offerte un pannello a rosetta tratteggiata. Le schede del catalogo nella home page e nella pagina dei servizi sono riquadri fotografici scuri. I contenuti di esempio di Northline Barber sono fittizi.

Recruitment & Staffing

Recruitment & Staffing (recruitment-staffing) usa una navigazione bianca arrotondata, un’apertura divisa lavanda con fotografia ad arco, azioni viola, testimonianze verde menta e un piè di pagina blu-viola. I contenuti di esempio fittizi di Brightlane Talent includono servizi specifici per la selezione del personale, profili del team e testi di richiesta. I titoli in Plus Jakarta Sans restano misurati. La navigazione principale e secondaria, i dettagli del catalogo, le gallerie, gli articoli e tutti i moduli di richiesta registrati seguono lo stesso linguaggio visivo.

Airline Booking

Airline Booking (airline-booking) usa un’intestazione bianca con un simbolo di aereo, un’apertura arrotondata a tutta larghezza al tramonto il cui testo e le cui azioni si trovano in una barra di prenotazione bianca fluttuante, e titoli Figtree color ottanio e inchiostro. Le schede del catalogo diventano riquadri delle destinazioni con un badge numerato, immagine e testo si trovano in un pannello menta con un’etichetta color ottanio, i numeri diventano una fascia arrotondata color ottanio, le schede delle funzionalità un elenco su due colonne con frecce e il piè di pagina è un pannello arrotondato color ottanio con un’azione di contatto. I contenuti di esempio di Skyvane Travel sono fittizi.

Architecture Studio

Architecture Studio (architecture-studio) colloca un’intestazione trasparente con navigazione a pillola smerigliata sopra una fotografia a tutta larghezza di una residenza velata di sabbia dal lato di lettura, e usa titoli leggeri in Montserrat, pulsanti a pillola color espresso con dischi a freccia bianchi e una didascalia di progetto fluttuante. Le schede di catalogo e servizi sono morbidi riquadri color sabbia con un angolo dell’immagine asimmetrico, la griglia dei progetti diventa una fascia scura di progetti in evidenza, immagine e testo corrono da bordo a bordo con un bordo dell’immagine arrotondato, i numeri si trovano in una colonna con filetti e i moduli di contatto diventano una fascia di contatto color espresso. I contenuti di esempio di Solace Architecture sono fittizi.

Automation SaaS

Automation SaaS (automation-saas) unisce un’intestazione bianca e un’apertura centrata in Instrument Serif su una fotografia dal cielo alle colline a pagine verde salvia, schede bianche arrotondate e azioni verde brillante. I numeri diventano quattro schede, la terza verde bosco, immagine e testo si alternano tra una scheda bianca e una lime a seconda della variante, la sezione video diventa una scheda funzionalità verde bosco, la griglia dei progetti schede orizzontali di approfondimento con un’etichetta Leggi di più, e le FAQ sono una fisarmonica centrata. Il piè di pagina termina con un grande logotipo serif su colline verdi disegnate. I contenuti di esempio di Fernflow sono fittizi.

Business Analytics SaaS

Business Analytics SaaS (business-analytics-saas) usa un’intestazione bianca, un’apertura centrata in Outfit con una forma d’accento smeraldo e la fotografia di apertura dentro una cornice di prodotto blu navy con un motivo a barra laterale. I numeri si trovano in una riga divisa, le icone delle funzionalità alternano smeraldo, blu e viola, immagine e testo si trovano su una fascia menta con una scheda di crescita fluttuante, la nuvola di loghi diventa riquadri delle integrazioni e l’offerta di prezzo un piano smeraldo in evidenza. Le testimonianze mostrano stelle e punti avatar, e il piè di pagina è blu navy. I contenuti di esempio di Metrova sono fittizi.

Car Dealership

Car Dealership (car-dealership) usa un’intestazione color ottanio scuro su due righe con una riga di contatti, un’apertura divisa menta con un’etichetta di valutazione sulla fotografia del veicolo e una scheda di ricerca bianca che si sovrappone all’apertura. Le schede dei servizi con immagini diventano sei riquadri compatti delle categorie, immagine e testo una fascia di compravendita color ottanio scuro, le credenziali motivazioni centrate con icone; le schede del catalogo portano un badge numerato, le testimonianze si trovano su ottanio scuro, l’offerta di prezzo diventa un pannello menta sui finanziamenti e il piè di pagina si apre con un invito all’azione. I contenuti di esempio di Corvane Motors sono fittizi.

Car Rental

Car Rental (car-rental) è un tema scuro di pannelli verde quasi nero con bordi morbidi e accenti lime. Una fascia lime si trova sopra un logotipo centrato e una navigazione per categorie spaziata; l’apertura è una scheda fotografica bordata con un grande titolo Archivo in maiuscolo e pulsanti a pillola lime con dischi a freccia. Le credenziali diventano un’unica fascia di vantaggi, le schede del catalogo schede di noleggio bianche con la scelta centrale contornata di lime, le schede delle funzionalità passaggi numerati e il piè di pagina è un pannello bordato con un’azione per mettersi in contatto. I contenuti di esempio di Laneway Rentals sono fittizi.

Catering Services

Catering Services (catering-services) usa un’intestazione verde bosco, pagine crema e titoli Gilda Display con un separatore a foglia. L’apertura colloca la fotografia in una cornice ad arco con un simbolo di riproduzione; le schede dei servizi con immagini si trovano in una riga a quattro colonne, le schede delle funzionalità diventano una fascia verde bosco con la scheda centrale verde oliva, immagine e testo abbinano una fotografia sagomata a una scheda di testo color sabbia e una didascalia in stile firma, le credenziali diventano un menu curato, lo slider mostra piatti circolari sul verde e le FAQ si trovano in una scheda verde salvia. I contenuti di esempio di Sage & Table Catering sono fittizi.

Coaching & Consulting

Coaching & Consulting (coaching-consulting) unisce un’intestazione e un’apertura blu navy a una sfumatura dall’arancione al rosa e al viola che attraversa il titolo, i pulsanti e un riquadro ritratto con un’etichetta bianca con il nome. La nuvola di loghi prolunga l’apertura blu navy come fascia di clienti, le schede delle funzionalità hanno una sottolineatura sfumata, i numeri diventano un pannello della community diviso tra sfumatura e blu navy, le schede dei servizi acquisiscono badge con contorno colorato e pulsanti a freccia, la griglia dei progetti mostra schede di passaggi incorniciate, l’offerta di prezzo diventa un piano scuro in evidenza e immagine e testo si trovano in un pannello lilla. I contenuti di esempio di Northbeam Coaching sono fittizi.

Construction Company

Construction Company (construction-company) usa una barra di intestazione fluttuante color ottanio scuro con azioni lime su una pagina bianca, e un’apertura la cui fotografia arriva al bordo con un taglio inclinato e un timbro circolare tratteggiato. I numeri si trovano in una barra scura sovrapposta all’apertura, la terza scheda servizio diventa scura, immagine e testo si trovano in un pannello verde salvia con una fotografia a parallelogramma, la griglia del team mostra quattro ritratti della squadra, le credenziali diventano un pannello scuro numerato sul processo e il piè di pagina è un pannello arrotondato color ottanio con contatti diretti. I contenuti di esempio di Ironleaf Builders sono fittizi.

Cookie Bakery

Cookie Bakery (cookie-bakery) usa una pagina crema, un’apertura arrotondata color cioccolato con robuste scritte Lilita One che passano dal bianco al senape, una fotografia circolare del prodotto e puntini di codette. Le schede delle funzionalità alternano pesca, rosa, azzurro e burro, l’offerta di prezzo diventa un pannello sconto pesca, le specifiche di prodotto un elenco scuro delle specialità del giorno, le schede dei servizi con immagini prodotti consigliati in cerchio; immagine e testo usano una fotografia con cornice organica e un timbro corallo, le credenziali diventano una fascia scura dei servizi e il piè di pagina ha un bordo smerlato color cioccolato. I contenuti di esempio di Crumb & Co. Bakery sono fittizi.

Coworking Space

Coworking Space (coworking-space) unisce una pagina bianco sporco calda a pannelli verde scuro, accenti pesca e titoli serif Gloock; il titolo di apertura passa dal verde al pesca tra una riga e l’altra e la fotografia dello spazio si trova in una grande cornice arrotondata con una scheda didascalia verde. Le credenziali diventano una fascia compatta di vantaggi, le schede delle funzionalità un elenco con icone, le schede del catalogo condividono una fascia color sabbia con la scheda centrale verde, i numeri scorrono in una fascia verde, le immagini della galleria hanno didascalie scure, le testimonianze mostrano un riquadro ritratto e i moduli di contatto diventano schede verdi con un pulsante di invio pesca. I contenuti di esempio di Greenhall Workspace sono fittizi.

Creative Studio Coffee

Creative Studio Coffee (creative-studio-coffee) colloca un’intestazione trasparente e un titolo Bodoni Moda in maiuscolo che passa dal bianco all’ottone su una fotografia di espresso a tutta larghezza, quindi prosegue con pagine beige caffellatte. Le credenziali diventano una fascia di valori in cinque parti, la griglia dei progetti sei riquadri ritratto scuri con anelli a freccia, immagine e testo corrono da bordo a bordo con una didascalia a timbro circolare, i moduli di contatto diventano una fascia per l’abbonamento in tostatura scura e il piè di pagina è un layout chiaro a colonne con filetti. I contenuti di esempio di Crema Digital sono fittizi.

Duck Farm

Duck Farm (duck-farm) mantiene pagine bianche e verde chiaro con pannelli verde fattoria scuro e accenti giallo sole. La fotografia di apertura arriva al bordo e sfuma nel testo, la cui ultima riga diventa verde, con una didascalia scritta a mano. Le schede del catalogo mostrano quattro prodotti, immagine e testo diventano un pannello verde scuro con una fotografia dalla forma organica e un sigillo naturale tratteggiato, le schede delle funzionalità icone di fiducia separate, i numeri un pannello scuro sull’agricoltura, le credenziali un percorso numerato dalla fattoria alla tavola e le testimonianze si trovano su crema. I contenuti di esempio di Brookmead Farm sono fittizi.

Electrical Services

Electrical Services (electrical-services) unisce un’intestazione bianca con un link telefonico e un pulsante verde per il preventivo ad aperture e schede dei servizi antracite. La fotografia di apertura sfuma nell’antracite e le ultime due righe del titolo diventano verde elettrico. I numeri si trovano su una scheda bianca sovrapposta all’apertura, immagine e testo ritagliano la fotografia a esagono con un sigillo di sicurezza rotondo, le schede dei servizi diventano antracite con cerchi delle icone verdi, le credenziali diventano motivi per scegliere l’azienda contrassegnati da fulmini e l’invito all’azione un pannello verde per le emergenze. I contenuti di esempio di Brightwire Electric sono fittizi.

Fashion Store Lavender

Fashion Store Lavender (fashion-store-lavender) unisce un’intestazione e un’apertura divisa antracite a una fotografia lilla ad arco, titoli Cormorant Garamond e calde pagine avorio. Una fascia di vantaggi lavanda introduce collezioni editoriali con immagini, discrete schede delle novità e un pannello scuro della campagna moda. Il tema include tutti e dieci i modelli di pagina, applica uno stile a tutte e trenta le sezioni condivise e supporta i sette moduli di richiesta esistenti. I link di navigazione, le pagine principali e Altro condividono gli stati lavanda al passaggio del mouse e di selezione, anche quando è selezionata una pagina figlia. Altro e i menu mobili usano righe a tutta larghezza con i link annidati sotto la pagina principale. La ricerca nel catalogo, la navigazione annidata nativa, le schede utilizzabili da tastiera e gli slider di immagini mantengono i contratti della piattaforma. I contenuti di esempio di Violette Edit sono fittizi; la collezione usa link di richiesta anziché un carrello o un checkout.

9. Cosa succede dall'attivazione del modello alla pubblicazione?

  1. Installa/attiva il modello. Eyivo convalida il pacchetto, registra la sua chiave/versione ed espone le sue impostazioni e gli schemi dei componenti nell'app.
  2. Scegli un tipo di pagina. Eyivo utilizza il file Liquid corrispondente e la definizione dell'area del tema attivo quando presente, altrimenti il ​​fallback theme-core corrispondente.
  3. Aggiungi sezioni consentite. L'App offre solo le tipologie elencate in allowed_components. Memorizza testo, riferimenti multimediali e traduzioni rispetto all'istanza del componente selezionato.
  4. Rendering sicuro. Eyivo prepara i dati di azienda, pagina, SEO e navigazione; genera i componenti salvati nelle aree e quelli diretti nelle posizioni fissate dal designer; infine genera il tipo di pagina e il layout del tema attivo.
  5. Pubblica. Il visitatore riceve HTML e CSS, ma non credenziali del database, modelli interni o codice dell’applicazione.

10. Validazione ed errori comuni

Se vedi...Controlla prima questo
“Versione Eyivo Theme API non supportata”Imposta "eyivo_theme_api": "1.0".
Errore di tipo/layout/componente di pagina mancanteOgni tipo di pagina o componente dichiarato dal tema necessita del file .liquid corrispondente. Il tema attivo deve sempre fornire layouts/default.liquid; i tipi di pagina incorporati omessi ricadono nel core.
Componente non disponibile nell'editorIl suo tipo con spazio dei nomi deve trovarsi nell'elenco allowed_components di quell'area oppure la definizione deve essere universale.
Componente diretto sconosciutoUsa un tipo eyivo: tra virgolette del catalogo condiviso oppure dichiara nel tema attivo una definizione theme: e il file Liquid corrispondente.
Il campo è rifiutatoDichiararlo nello schema del componente e utilizzare un tipo di campo supportato. Utilizzare translatable: true per il testo specifico della locale.
Il modello appare senza stileUtilizza il filtro asset_url per CSS e conferma che il file si trova in assets/.
Il pacchetto è stato rifiutato per sintassi non sicuraRimuovi le chiamate PHP/Blade, env, config, DB/HTTP e l'accesso al filesystem. Liquid è di sola presentazione.

11. Domande frequenti

Un cliente può creare un nuovo layout o spostare una sezione hero sotto il piè di pagina?

No. Possono modificare i contenuti approvati e ordinare componenti approvati all'interno di un'area. Il tipo di pagina Liquid possiede il layout.

Un progettista può utilizzare un componente senza un'area modificabile?

Sì. Usa eyivo_component nel layout o nel tipo di pagina. Usa un’area quando il titolare del sito deve controllare l’istanza del componente e il suo ordine.

Un tema deve implementare ogni tipo di pagina?

Ogni tema deve supportare il blog. I tipi integrati blog, blog_category e blog_post possono usare le definizioni e i file Liquid di theme-core nel layout del tema attivo. Dichiara un tipo solo se fornisci il relativo file sostitutivo. I pacchetti di temi esistenti restano compatibili. I percorsi del blog sono /blog, /blog/category/{slug} e /blog/{slug}, con il prefisso della lingua quando necessario. Mantieni eyivo_head per metadati sicuri, stili responsive e schede con immagini di dimensioni contenute.

Un tema può eseguire query su una pagina, chiamare un'API o leggere una variabile di ambiente?

No. I dati vengono deliberatamente trasmessi come oggetti sicuri. Ciò mantiene i temi portatili, sicuri e prevedibili.

Come posso rilasciare un aggiornamento?

Pubblica una nuova versione del tema con numerazione semantica. Non modificare una release già pubblicata senza cambiare versione: i siti devono passare esplicitamente alla nuova versione.

Dove dovrebbero vivere le immagini?

Utilizza un URL multimediale Eyivo nei dati del componente o una risorsa del pacchetto a cui si fa riferimento tramite asset_url. Non utilizzare percorsi arbitrari del file system del server.