Crie um modelo completo de site da empresa com segurança.

1. O modelo mental

Há três responsabilidades distintas. Mantê-las separadas é essencial para entender a v1.

Não é um editor livre de páginas: o titular pode adicionar uma secção permitida a main e escolher a sua posição. Não pode criar outra área, mover uma secção hero para o rodapé, alterar o HTML ou modificar o CSS do tema.

2. Início rápido: um modelo mínimo e utilizável

Cada tema v1 controla todo o seu layout, estilos e scripts e pode organizá-los segundo o design escolhido pelo autor. Um tema não herda layouts nem ficheiros de outro tema. Os componentes partilhados eyivo: e os sete tipos de página de reserva vêm de theme-core; o tema guarda apenas os tipos de página que substitui e os componentes que declara no espaço de nomes theme:.

Cada tema v1 precisa de um ficheiro de layout predefinido. As pastas page-types/ e components/ são opcionais quando o pacote usa apenas os recursos de reserva de core:

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

layouts/default.liquid sempre vem do tema ativo e controla todo o documento público. Eyivo procura o tipo de página solicitado primeiro no tema e depois em theme-core/page-types. Core nunca fornece layout nem ficheiros visuais; por isso, mesmo o conteúdo de fallback usa o layout e o estilo do tema ativo.

3. Descreva o tema em theme.json

O manifesto declara as capacidades do tema e define o contrato usado para gerar os formulários da aplicação. Ele responde a três perguntas: quais estruturas de página existem, quais áreas cada estrutura contém e quais dados cada componente pode armazenar. Os temas integrados declaram explicitamente os dez tipos de página padrão e incluem os arquivos Liquid correspondentes. Temas personalizados podem continuar usando os modelos de fallback do núcleo para tipos não declarados.

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

Tipos de página de reserva: os tipos integrados são home, page, gallery, contact, products, product e videos. Omita um tipo para usar a definição e o ficheiro Liquid de theme-core. Declare-o apenas quando o tema fornecer o ficheiro substituto page-types/<type>.liquid.

O editor recebe a API combinada dos tipos de página: as definições do tema ativo substituem as correspondentes de core, enquanto os tipos omitidos continuam disponíveis em core.

4. Conteúdo de demonstração completo em demo.json

Cada pacote enviado deve incluir um ficheiro demo.json portátil, cujo conteúdo serve apenas de rascunho, e pelo menos uma captura de ecrã feita com esses dados de demonstração. Os temas integrados usam o mesmo esquema. Não inclua IDs da base de dados, domínios de clientes, credenciais nem chaves de armazenamento de objetos.

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

Páginas e componentes

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

Os tipos e áreas de componentes devem ser declarados no manifesto do tema ativo ou theme-core. Use caminhos relativos, como /contact, para links do mesmo site. As demonstrações de início incluídas usam a imagem hero existente como fundo de largura total, com uma camada para facilitar a leitura e texto responsivo: immersive na maioria dos temas e centered com imagem no Compact. As outras variantes mantêm seus próprios layouts.

Idiomas de demonstração e alternativa

O inglês é o idioma base obrigatório: defina default_locale como en. A ausência em dados antigos também significa inglês. Os outros idiomas suportados são opcionais; não apresente cópias em inglês como traduções.

Forneça translations.en e objetos de idioma opcionais para empresa, definições, páginas, componentes, produtos, galerias, legendas e textos alternativos, vídeos e artigos. Os campos antigos em inglês sem chave de idioma continuam válidos. A criação escolhe o idioma principal do site e usa inglês em cada campo em falta. Os arrays substituem todo o array inglês; valores explicitamente vazios são preservados. Apenas o idioma escolhido é importado, sem ativar outros automaticamente.

Use slugs de origem em inglês nos links internos e menus portáteis. A importação converte-os nos slugs traduzidos, incluindo links em texto formatado e artigos. Os menus podem fornecer mapas explícitos slugs e labels. Etiquetas em falta usam inglês. Os URLs externos não são alterados.

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

Importação e segurança de multimédia

Os novos sites no painel incluem dados de demonstração por predefinição e publicam imediatamente o idioma escolhido; o proprietário pode desmarcar a opção. Num site existente, importar a partir de Marca continua a criar rascunhos e preserva o conteúdo publicado. A App central copia imagens para a biblioteca do novo site e envia referências pela API interna. Masters e temas nunca recebem credenciais do armazenamento de objetos. Os temas usam o valor media.public_url fornecido.

Declare as capturas de ecrã em theme.json.preview com data_source: "demo_data". O pacote deve conter todas as imagens preview declaradas.

5. Crie o layout de que o seu tema precisa

O layout predefinido contém todo o documento HTML. Nada fora do tema ativo fornece o cabeçalho, rodapé, folha de estilos, JavaScript ou estrutura visual.

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

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

O ficheiro de tipo de página determina onde aparecem as suas áreas dinâmicas. Os componentes das áreas já são cadeias HTML geradas; insira-as com | raw. Os valores comuns são escapados por predefinição.

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

Renderizar um componente diretamente

Um designer pode colocar um componente registado diretamente num ficheiro de layout ou de tipo de página. A posição fica definida pelo tema e não pode ser alterada nem removida no painel. Passe um objeto através de data:, campos individuais do esquema ou ambos; os campos identificados prevalecem sobre as chaves correspondentes de data:.

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

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

O tipo deve ser um literal entre aspas com namespace. A renderização direta usa o mesmo esquema, variantes, ficheiro de componente e objeto component normalizado de uma instância de área. Um ficheiro de componente não pode renderizar outros componentes.

Ficheiros do tema: use sempre {{ 'css/theme.css' | asset_url }}. Eyivo entrega o ficheiro do pacote ativo em /theme-assets/<theme>/css/theme.css; não fixe outro nome de tema nem um caminho do sistema de ficheiros.

Cabeçalho, rotas e dicionários de interface

Cada layout deve renderizar {% eyivo_head %} exatamente uma vez. Eyivo controla o título, a descrição, as diretivas robots, a URL canônica, hreflang, Open Graph e os dados estruturados. Use routes.home, routes.contact, routes.catalog, routes.gallery e routes.videos em vez de caminhos públicos fixos. Passe URLs editáveis pelo filtro | localized_url, que adiciona o prefixo do idioma aos caminhos internos conhecidos e mantém URLs externas inalteradas.

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

Pode criar ficheiros locales/<locale>.json para os rótulos de interface introduzidos pelo tema. A ordem de procura é: inglês de core, idioma atual de core, inglês do tema e idioma atual do tema. Os rótulos partilhados de theme-core funcionam sem copiar ficheiros. Os textos da empresa devem estar no conteúdo traduzível, nos campos dos componentes ou nas definições do tema, não nos dicionários.

Um ficheiro de componente personalizado

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

Para campos traduzíveis, o Eyivo seleciona a localidade do visitante antes da renderização. Portanto, um visitante turco e um visitante inglês veem a mesma estrutura de componentes com valores component.data.heading diferentes.

Menus registrados

Os temas podem registrar menus adicionais de um único nível em theme.json. Main é reservado: navigation.main mantém a visibilidade das páginas e os links automáticos de listagens. Cada menu precisa de chave estável, rótulo, descrição e local efetivamente renderizado.

Links de páginas aninhados na navegação principal

Cada item de navigation.main inclui um array children. Quando uma página tem uma página principal, aparece na lista children dessa página. A plataforma acrescenta um menu pendente acessível aos links correspondentes no cabeçalho do site; os temas também podem renderizar o array children diretamente:

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

As páginas secundárias mantêm os seus próprios URL e o seu estado de publicação. A navegação principal inclui apenas páginas publicadas e visíveis com uma tradução publicada no idioma ativo. As relações de página principal têm um só nível: escolha uma página de nível superior que não seja a página inicial. Os menus registados, como navigation.footer, mantêm-se planos.

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

Renderize navigation.footer ou outra chave declarada com item.label, item.url, item.active e item.kind. Respeite o rótulo, escape a saída e identifique a navegação de forma acessível. Menus adicionais vazios nunca usam Main como alternativa.

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

Páginas, artigos, produtos, galerias e vídeos podem pertencer a vários menus adicionais. A tela Menus também aceita listagens, links personalizados, ordenação independente e rótulos traduzidos. A estrutura é compartilhada entre idiomas; traduções não publicadas ficam ocultas.

Salvar conteúdo prepara suas atribuições; publicá-lo aplica apenas suas seleções. Rascunhos de menus são salvos e publicados separadamente. Publicar um menu não publica seus destinos. Atribuições não suportadas são preservadas ao trocar de tema.

initialize_from_main copia os links uma única vez, sem sincronização posterior. Temas antigos sem menus continuam compatíveis. As demos usam tipo e slug de origem, chaves de listagens ou URLs personalizados, nunca IDs de registros específicos de um site.

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

Os campos de texto formatado e page.body permanecem escapados no Liquid; a plataforma processa com segurança a formatação e as referências de páginas. Apenas HTML confiável já renderizado, como blog.post.body_html, usa raw. As referências acompanham alterações de slug e ficam indisponíveis sem uma tradução publicada.

6. Dados Liquid seguros que pode utilizar

Liquid recebe dados simples e normalizados – não Laravel ou modelos de banco de dados. Se um valor não estiver nesta tabela, trate-o como indisponível na v1.

Exemplo de layout correto para cada idioma

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

Cada item de idioma disponível também expõe label, direction, is_default, current e has_translation. A Eyivo fornece apenas traduções publicadas equivalentes, portanto os temas devem usar language.url em vez de construir /en ou qualquer outro prefixo.

Exemplo de token orientado por configurações: style="--brand: {{ theme.settings.primary_color }}". A configuração deve primeiro ser declarada em theme.json.

7. Componentes: diretos e dinâmicos

Os componentes seguem um contrato de apresentação com duas formas de posicionamento. Um componente direto é controlado pelo designer num layout ou tipo de página. Um componente dinâmico é guardado como instância de uma área de página e controlado pelo editor. As instâncias dinâmicas têm um ID estável, tipo com espaço de nomes, área, posição, variante opcional, dados e traduções. A posição indica apenas a ordem, não a identidade.

Componente universal: defina "universal": true na definição do componente para o permitir em todas as áreas de tipos de página compatíveis. Continua a precisar de um esquema válido e de um ficheiro Liquid.

Os links de ação partilhados adaptam os caminhos internos conhecidos ao idioma ativo, preservando os parâmetros de consulta e os fragmentos. O texto formatado mantém a formatação segura em contentores aninhados do editor. As imagens de galeria vazias são omitidas, as imagens de mapa sem destino não são links e as etiquetas de slides e pesquisa usam o idioma da interface do visitante.

Visual Atelier (visual-01) mantém a faixa decorativa da página inicial em movimento automático, mesmo quando o navegador pede movimento reduzido. Passar o cursor pausa o texto; sair retoma-o. A aparência original e o ciclo apenas em CSS são mantidos.

8. Catálogo de componentes disponíveis

Esses 30 componentes compartilhados eyivo: formam a biblioteca completa da v1 e vêm de theme-core. Um tema também pode declarar e implementar seus próprios componentes theme:.

Foundation Impact: compor o site de uma fundação

Foundation Impact (foundation-impact) apresenta o propósito, os programas, a governação, o impacto, os eventos, a galeria e os pedidos de uma fundação. O layout quebra as etiquetas de navegação longas e muda para um menu expansível em ecrãs mais pequenos. Os menus registados header, footer e useful_links controlam a navegação. Quando o menu registado está vazio, o cabeçalho recorre à navegação automática de páginas. A página de fotografias selecionadas usa /in-pictures; /gallery continua a ser a listagem nativa de álbuns.

Foundation Impact possui os dez modelos integrados: Início, Página, Contato, Produtos, Produto, Galeria, Vídeos, Blog, Categoria e Publicação. As áreas de conteúdo e os formulários registrados permanecem compatíveis. Os itens principais usam os mesmos estados transparentes e sublinhados dos links comuns ao passar o cursor e selecionar; um filho selecionado também destaca o pai. Os submenus seguem o mesmo estilo no computador e no celular.

Os cabeçalhos de subpáginas sem imagem usam uma faixa lavanda compacta com navegação próxima, uma pequena chamada e um título moderado. Com imagem, recebem uma camada escura e títulos, navegação e resumos brancos. O texto fica acima da imagem e da camada, cuja direção acompanha layouts da direita para a esquerda.

O componente compartilhado eyivo:rich_text aceita tanto conteúdo marcado pelo editor quanto HTML antigo. Ambos passam pela lista de formatação permitida: parágrafos, títulos, listas e links seguros são exibidos, enquanto scripts, manipuladores de eventos e links inseguros são removidos. Os demais campos mantêm o escape habitual. O texto enriquecido da demonstração Foundation também usa a marca do editor.

O tema combina os componentes existentes eyivo:hero, project_grid, image_text, event_list, media_gallery, feature_grid, team_grid, stats, rich_text, faq, cta e lead_form. O seu script de tema diferido ativa os controlos do carrossel de imagens, os separadores acessíveis por teclado e a filtragem do catálogo. O menu móvel expande-se com controlos HTML nativos. Os números usam títulos, etiquetas e notas escuros sobre uma superfície amarelo-pálido, com valores a azul. Os cartões de programas ligam a páginas de conteúdo normais. Os cartões de eventos descrevem eventos e ligam a uma página de pedido; não criam reservas nem registos de presença.

A página de contacto usa eyivo:lead_form com o vínculo de contacto portátil fornecido por eyivo/contact. Importar uma demonstração resolve este vínculo separadamente para cada site. Não estão incluídos donativos, candidaturas a subsídios nem aprovações de voluntários.

As importações de demonstrações integradas reutilizam as entradas ativas do catálogo partilhado de media de demonstração de temas. A aplicação central é a proprietária do objeto e fornece referências aos masters; eliminar uma referência importada não elimina o objeto partilhado protegido. Uma pré-visualização de tema e um exemplo SEO dedicado são sites separados.

Village Commons: navegação secundária e barras laterais

Village Commons (village-commons) reúne um quadro de avisos, locais da zona, a história da aldeia, eventos, fotografias, informações para visitantes e um formulário de contacto próprio do site. As superfícies verde-floresta, marfim e âmbar têm cores de primeiro plano explícitas. Os componentes Eyivo existentes fornecem o conteúdo; os cartões de eventos não permitem reservas e as páginas de atas não constituem um sistema oficial de registos. As secções de imagem e texto das páginas informativas mantêm um espaçamento interior responsivo à volta do texto. Os painéis de eventos e de perguntas frequentes das subpáginas têm espaçamento interior responsivo. As perguntas frequentes usam um título compacto e painéis expansíveis arredondados empilhados com controlos de expansão claros.

Registe header, secondary, sidebar, footer e useful_links em theme.json. A navegação secundária aparece na barra de utilidades; o menu lateral aparece ao lado das páginas normais e de contacto. Ambos são editados e publicados com o editor de menus padrão. Mantenha a navegação principal curta. Em ecrãs pequenos, o menu principal expande-se e a barra lateral passa para baixo do conteúdo da página.

Uma barra lateral é uma região do layout, não um novo tipo de componente. Os esquemas page e contact declaram uma área sidebar para rich_text, announcement, download_list e contact_actions, com um máximo de três instâncias. Renderize areas.sidebar dentro de um elemento aside, ao lado de navigation.sidebar. A página Village life mostra um widget de texto editável. As definições do tema fornecem o cartão de contacto adicional. Cada área personalizada tem de ser declarada separadamente em cada tipo de página que a 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>

A pré-visualização geral do tema e a demonstração dedicada em inglês WT-003 são sites admin-1 separados. As imagens são importadas pela aplicação central e protegidas no catálogo partilhado de media de demonstração. As capturas dos conteúdos de teste publicados em separado são feitas localmente antes da implantação e incluídas no tema e no Apex. O Prepare verifica o hash do blueprint e a versão do tema antes de associar a revisão da captura à demonstração gerada. O catálogo público encontra a sua pré-visualização protegida através da App API autenticada. As capturas estão separadas dos media dos clientes. O tema usa o vínculo portátil do formulário de contacto de eyivo/contact.

Formulários e histórico de pedidos

Forms API 1 fornece sete processadores aprovados. Os temas controlam disposição e estilo; os plugins definem esquema, validação e fluxo. A plataforma guarda, verifica e notifica.

Um formulário, várias posições

A configuração cria um UUID predefinido permanente por site/plugin/tipo. Reutilizar uma posição conserva a identidade; criar um formulário com nome gera outro UUID. Mudar de tema ou reinstalar preserva o histórico. Os temas usam nomes portáteis; o editor seleciona formulários guardados sem introduzir UUIDs.

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

Use forms.contact nos contactos e component.form nas secções de formulário. Substitua form_preset por form_binding. Renderize campos, ajuda, action, CSRF, form_context assinado e verification_html fornecidos. Só são permitidas alterações de apresentação declaradas e campos adicionais autorizados; a validação obrigatória mantém-se.

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

Duas vistas, um registo

A caixa partilhada e as páginas de lista/detalhe do plugin mostram os mesmos registos. Formulários exigem Panel API 2, submission-list/submission-detail e um link de menu sem subníveis. Panel API 1 continua suportada. Ver não marca como lido; leitura, arquivo e fluxo são separados e alterações usam record_revision. Desativar remove as páginas do plugin; a caixa partilhada mantém o histórico.

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

Dados e permissões

Os registos usam a base de conteúdo do site e o limite max_db_bytes do pacote existente. Não há quota adicional de quantidade ou retenção. A configuração continua no master com 50 campos, 32 KB e três níveis. Membros podem ver; alterações exigem proprietário/gestão. Plugins não têm acesso direto à base nem enviam PHP/Blade para a app.

Gravação verificada e notificação

A plataforma valida contexto, respostas e Human Verification e guarda registo, utilização e trabalho de notificação juntos. A mesma tentativa pode ser recuperada durante 24 horas sem duplicação. SMTP executa depois e pode repetir; uma falha de email não apaga o registo. Sem destinatário no formulário, usa-se o email da empresa; se nenhum endereço for válido, o registo é guardado sem email.

Todos os temas incluídos usam este contrato. POST contact antigos devolvem 410; as páginas GET de contacto funcionam. Pedidos de marcação ou reserva não confirmam reservas. Processadores de terceiros, ficheiros e destinos externos arbitrários estão excluídos.

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

Field Guide: guias legíveis e bibliotecas de recursos

Field Guide (field-guide) combina uma serif editorial com texto corrido legível, fundos azul-marinho, ações verdes e discretos destaques dourados. A abertura e a área de orientação opcional partilham uma introdução responsiva. As fotografias de fundo ficam atenuadas por trás do texto; quando a área de orientação está vazia, a introdução usa toda a largura.

O cabeçalho no computador mostra os primeiros quatro links de página de nível superior e coloca os restantes em Mais. As páginas principais mantêm os seus próprios links e botões de submenu separados. Em ecrãs mais pequenos, um Menu expansível nativo mostra todas as páginas e links secundários. Escape e um clique fora fecham os menus de navegação. Os links de idioma só aparecem quando há mais de um idioma disponível.

Use as áreas hero e orientation para a introdução e uma orientação rápida, e a área main para os componentes Eyivo existentes. Uma grelha de funcionalidades a seguir a conteúdo editorial torna-se uma lista de verificação complementar em ecrãs largos e fica a seguir a ele no telemóvel. Os artigos de texto formatado têm uma largura de linha legível, espaçamento claro entre títulos e fotografias contidas com créditos visíveis. Quando um artigo termina com um único subtítulo seguido de uma lista de verificação ou de uma nota curta, o script do tema apresenta esse conteúdo existente como barra lateral complementar no computador e abaixo do artigo no telemóvel; continua legível sem JavaScript. Uma secção final de texto formatado na página inicial cujo corpo formatado é um parágrafo com links HTTPS torna-se uma faixa de referências azul-marinho em largura total com um título dourado mais pequeno e links verde-claro, também sem JavaScript. As coleções de guias com links usam um índice editorial com campos opcionais image_url e alt em cada item de service_grid, links em toda a entrada e foco de teclado. A página inicial começa com dois guias ilustrados e depois apresenta, na coleção seguinte, um guia em destaque ao lado de linhas compactas de recursos. As listas de serviços informativas ou mistas usam painéis de leitura numerados; apenas os itens com um URL definido têm uma ação. As miniaturas usam os URL de media fornecidos e nunca obtêm as páginas de destino. Os formulários de contacto e o rodapé usam o mesmo espaçamento e as mesmas cores. A demonstração fictícia do catálogo Northwater Brief mantém-se separada do conteúdo de exemplo da migração BACC-GA; atualizar a demonstração do catálogo não importa o site de nenhum cliente.

Automotive Care: páginas de oficina e mídia

Automotive Care (automotive-care) possui modelos próprios Home, Page, Contact, Products, Product, Gallery e Videos, além do blog. As áreas de componentes existentes continuam compatíveis. O visual escuro e dourado usa títulos moderados, serviços numerados, credenciais com descrições separadas e espaço entre texto e botões. Imagens de destaque nas subpáginas ficam atrás de uma camada de contraste; páginas sem imagem usam uma introdução simples.

No computador, a navegação mostra seis links principais e agrupa os demais em Mais. Links de páginas principais e botões separados de submenu compartilham os estilos de foco do mouse e de página atual. O menu móvel inclui todas as páginas e links filhos. Escape e um clique fora fecham o menu. Links de idioma aparecem apenas quando há vários idiomas.

Imagens do catálogo mantêm suas proporções em quadros limitados. Os modelos básicos também limitam imagens de produtos e posicionam corretamente os fundos das subpáginas. A galeria destaca a primeira foto; clicar abre uma janela acessível, Escape fecha e devolve o foco ao link. Sem JavaScript, o original abre em outra aba. Os controles deslizantes aceitam toque, setas, teclado e movimento reduzido; a busca do catálogo filtra localmente. As fotos de detalhe do produto preenchem toda a largura do quadro com recorte centralizado. As credenciais formam uma faixa escura com escudos dourados; as características usam colunas espaçosas com distintivos dourados e ficam empilhadas em telas pequenas.

Wellness & Beauty: cuidados pessoais e coleções de tratamentos

Wellness & Beauty (wellness-beauty) possui modelos próprios Home, Page, Contact, Products, Product, Gallery e Videos, além do blog. As áreas de componentes e os formulários existentes continuam compatíveis. Fundos rosados, detalhes suaves, títulos serifados moderados e fotos em arco criam uma identidade delicada de estúdio. Textos e ações têm espaços claros. Os detalhes do tratamento incluem introdução ampla, foto com recorte centralizado e conteúdo legível. Os cartões separam imagens, descrições e ações; a galeria usa molduras de álbum com legendas.

Links comuns e links principais com filhos compartilham os mesmos estados rosados ao passar o mouse e para a página atual. Submenus têm botões separados; links extras ficam em Mais e o menu móvel inclui todas as páginas e filhos. Escape e um clique fora fecham menus. A galeria abre um diálogo e devolve o foco ao fechar; sem JavaScript, abre a imagem em outra aba. A busca filtra localmente. Controles deslizantes e abas aceitam teclado e movimento reduzido. As cores da marca são respeitadas; o tema não adiciona um sistema de agendamento.

Veterinary Care: serviços, equipe e contato legível

Veterinary Care (veterinary-care) possui modelos próprios Home, Page, Contact, Products, Product, Gallery e Videos, além do blog. As áreas de componentes e os formulários registrados continuam compatíveis. Painéis verde-menta, texto verde-escuro, ações em tom de damasco e títulos arredondados moderados criam uma clínica acolhedora. Os cartões separam fotos, nomes, funções e biografias. Cada rótulo de contato aparece acima do valor, com links de telefone e e-mail legíveis. O rodapé mostra nome da empresa, lema curto, descrição e contato.

Links comuns e links com filhos compartilham os estados verde-menta ao passar o mouse e de página atual. Os pais mantêm botões separados de submenu; links extras ficam em Mais e o menu móvel contém todas as páginas e filhos. Escape e um clique fora fecham menus. O catálogo tem ações claras e busca local; fotos de detalhe preenchem quadros limitados com recorte centralizado. A galeria destaca uma foto grande com vistas de apoio e abre originais em um diálogo que devolve o foco. Sem JavaScript, abre outra aba. Controles deslizantes e abas aceitam teclado e movimento reduzido.

Early Learning: páginas alegres para escolas

Early Learning (early-learning) possui modelos próprios de Início, Página, Contato, Produtos, Produto, Galeria e Vídeos, além do blog. As áreas de componentes e os formulários registrados permanecem compatíveis. Fundos creme, detalhes em coral, menta e amarelo, títulos arredondados e formas de blocos combinam com a educação infantil. Os perfis e os três cartões Sobre separam fotos, funções e descrições. O contato usa painéis identificados, os programas têm introduções espaçosas e fotos centralizadas e a galeria apresenta molduras de álbum com legendas.

Links e itens principais compartilham contornos ao passar o cursor e destaque amarelo para a página atual. Os submenus têm controles separados; Mais reúne links adicionais no computador e o Menu móvel nativo contém todas as páginas e subitens. As fotos abrem um diálogo que restaura o foco ao fechar ou uma nova aba sem JavaScript. Busca local, abas e controles deslizantes aceitam teclado e movimento reduzido. A demonstração usa textos escolares e não acrescenta um sistema de matrícula.

Temas da coleção de design

Cada tema inclui os dez modelos de página padrão e estiliza os trinta componentes partilhados da Eyivo. As páginas de exemplo de componentes e pedidos incluídas mostram secções para além da página inicial. Os vínculos de contacto, orçamento, pedido de produto, marcação, candidatura a curso, reserva e pedido imobiliário usam os plugins existentes e a verificação humana. A filtragem do catálogo, os separadores acessíveis por teclado, os carrosséis de imagens e os menus de navegação nativos suportam os mesmos contratos de conteúdo em computador, telemóvel e layouts da direita para a esquerda.

Seafood Restaurant

Seafood Restaurant (seafood-restaurant) combina azul-oceano com laranja cítrico, páginas em branco fresco e títulos discretos em Manrope. Uma abertura fotográfica de marisco conduz a uma faixa compacta de vantagens, pratos de assinatura, uma história à beira-mar, galerias circulares de pratos e um painel azul-marinho com motivos para visitar. O conteúdo de exemplo fictício da Tide & Table inclui pedidos de reserva, dez tipos de página, as trinta secções partilhadas e as sete ligações de formulário existentes. Os links de navegação, os links principais e Mais partilham os estados ao passar o cursor e de página atual; as páginas secundárias selecionadas destacam a respetiva página principal. Os menus móveis mantêm os links secundários sob a página principal. Os separadores, os carrosséis, a filtragem de pratos e os layouts da direita para a esquerda mantêm os contratos da plataforma. Os pedidos de reserva exigem confirmação; não se pressupõe nenhum sistema de pagamento nem de disponibilidade de mesas em tempo real.

Family Insurance

Family Insurance (family-insurance) combina um cabeçalho violeta e uma navegação branca recolhida com fotografias de família, suaves painéis informativos em lavanda e títulos discretos em Manrope. O conteúdo de exemplo da Hearthway Insurance é fictício. Os links de navegação simples e principais partilham o mesmo efeito ao passar o cursor e o mesmo estado de página atual; uma página secundária selecionada destaca a sua página principal. Títulos compactos nas subpáginas, galerias com legendas, imagens de catálogo recortadas e painéis de contacto identificados levam o design para além da página inicial.

Barbershop

Barbershop (barbershop) segue um cabeçalho verde profundo em duas linhas com um logótipo serif centrado, uma abertura fotográfica em largura total sombreada do lado da leitura e páginas creme com títulos em Playfair Display e botões em latão. Os cartões de funcionalidades desenham ícones de linha e mostram cada valor como uma curta etiqueta dourada, as credenciais ficam numa faixa escura dividida, o carrossel mostra quatro cortes quadrados, as especificações de produto tornam-se uma tabela de preços em duas colunas e as ofertas um painel com roseta tracejada. Os cartões do catálogo na página inicial e na página de serviços são blocos fotográficos escuros. O conteúdo de exemplo da Northline Barber é fictício.

Recruitment & Staffing

Recruitment & Staffing (recruitment-staffing) usa uma navegação branca arredondada, uma abertura dividida em lavanda com fotografia em arco, ações roxas, depoimentos em verde-menta e um rodapé azul-violeta. O conteúdo de exemplo fictício da Brightlane Talent inclui serviços próprios do recrutamento, perfis da equipa e textos de pedido. Os títulos em Plus Jakarta Sans mantêm-se discretos. A navegação principal e secundária, os detalhes do catálogo, as galerias, os artigos e todos os formulários de pedido registados seguem a mesma linguagem visual.

Airline Booking

Airline Booking (airline-booking) usa um cabeçalho branco com um símbolo de avião, uma abertura arredondada em largura total ao pôr do sol cujo texto e ações ficam numa barra de reserva branca flutuante, e títulos em Figtree em azul-petróleo e tinta. Os cartões do catálogo tornam-se blocos de destinos com um distintivo numerado, a imagem e o texto ficam num painel menta com uma etiqueta azul-petróleo, os números tornam-se uma faixa arredondada azul-petróleo, os cartões de funcionalidades uma lista em duas colunas com setas e o rodapé é um painel arredondado azul-petróleo com uma ação de contacto. O conteúdo de exemplo da Skyvane Travel é fictício.

Architecture Studio

Architecture Studio (architecture-studio) coloca um cabeçalho transparente com navegação em pílula fosca sobre uma fotografia em largura total de uma residência banhada em tom de areia do lado da leitura, e usa títulos leves em Montserrat, botões em pílula cor de espresso com discos de seta brancos e uma legenda de projeto flutuante. Os cartões de catálogo e serviços são suaves blocos cor de areia com um canto de imagem assimétrico, a grelha de projetos torna-se uma faixa escura de projetos em destaque, a imagem e o texto ocupam toda a largura com uma borda de imagem arredondada, os números ficam numa coluna com linhas e os formulários de contacto tornam-se uma faixa de contacto cor de espresso. O conteúdo de exemplo da Solace Architecture é fictício.

Automation SaaS

Automation SaaS (automation-saas) combina um cabeçalho branco e uma abertura centrada em Instrument Serif sobre uma fotografia do céu às colinas com páginas verde-salva, cartões brancos arredondados e ações em verde vivo. Os números tornam-se quatro cartões, o terceiro em verde-floresta, a imagem e o texto alternam entre um cartão branco e um cartão lima conforme a variante, a secção de vídeo torna-se um cartão de funcionalidade verde-floresta, a grelha de projetos cartões horizontais de artigos com uma etiqueta de ler mais e as perguntas frequentes são um acordeão centrado. O rodapé termina com um grande logótipo serif sobre colinas verdes desenhadas. O conteúdo de exemplo da Fernflow é fictício.

Business Analytics SaaS

Business Analytics SaaS (business-analytics-saas) usa um cabeçalho branco, uma abertura centrada em Outfit com uma forma de destaque esmeralda e a fotografia de abertura dentro de uma moldura de produto azul-marinho com um padrão de barra lateral. Os números ficam numa linha dividida, os ícones de funcionalidades alternam esmeralda, azul e violeta, a imagem e o texto ficam sobre uma faixa menta com um cartão de crescimento flutuante, a nuvem de logótipos torna-se blocos de integrações e a oferta de preço um plano esmeralda em destaque. Os depoimentos mostram estrelas e pontos de avatar, e o rodapé é azul-marinho. O conteúdo de exemplo da Metrova é fictício.

Car Dealership

Car Dealership (car-dealership) usa um cabeçalho azul-petróleo profundo em duas linhas com uma linha de contacto, uma abertura dividida em menta com uma etiqueta de avaliação sobre a fotografia da viatura e um cartão de pesquisa branco sobreposto à abertura. Os cartões de serviços com imagem tornam-se seis blocos compactos de categorias, a imagem e o texto uma faixa azul-petróleo escura de compra e venda, as credenciais motivos centrados com ícones; os cartões do catálogo têm um distintivo numerado, os depoimentos ficam sobre azul-petróleo profundo, a oferta de preço torna-se um painel de financiamento menta e o rodapé abre com um apelo à ação. O conteúdo de exemplo da Corvane Motors é fictício.

Car Rental

Car Rental (car-rental) é um tema escuro de painéis verde quase negro com bordas suaves e destaques em lima. Uma faixa lima fica sobre um logótipo centrado e uma navegação de categorias espaçada; a abertura é um cartão fotográfico com borda, um grande título em Archivo em maiúsculas e botões em pílula lima com discos de seta. As credenciais tornam-se uma única faixa de vantagens, os cartões do catálogo cartões de aluguer brancos com a opção central contornada a lima, os cartões de funcionalidades passos numerados e o rodapé é um painel com borda e uma ação de contacto. O conteúdo de exemplo da Laneway Rentals é fictício.

Catering Services

Catering Services (catering-services) usa um cabeçalho verde-floresta, páginas creme e títulos em Gilda Display com um separador em folha. A abertura coloca a fotografia numa moldura em arco com um símbolo de reprodução; os cartões de serviços com imagem ficam numa linha de quatro colunas, os cartões de funcionalidades tornam-se uma faixa verde-floresta com o cartão central em verde-oliva, a imagem e o texto combinam uma fotografia recortada com um cartão de texto cor de areia e uma legenda em estilo de assinatura, as credenciais tornam-se um menu cuidadosamente desenhado, o carrossel mostra pratos circulares sobre verde e as perguntas frequentes ficam dentro de um cartão verde-salva. O conteúdo de exemplo da Sage & Table Catering é fictício.

Coaching & Consulting

Coaching & Consulting (coaching-consulting) combina um cabeçalho e uma abertura azul-marinho com um gradiente de laranja para rosa e violeta que atravessa o título, os botões e um bloco de retrato com uma etiqueta branca com o nome. A nuvem de logótipos prolonga a abertura azul-marinho como faixa de clientes, os cartões de funcionalidades têm um sublinhado em gradiente, os números tornam-se um painel de comunidade dividido entre gradiente e azul-marinho, os cartões de serviços ganham distintivos com contorno colorido e botões de seta, a grelha de projetos mostra cartões de passos emoldurados, a oferta de preço torna-se um plano escuro em destaque e a imagem e o texto ficam num painel lilás. O conteúdo de exemplo da Northbeam Coaching é fictício.

Construction Company

Construction Company (construction-company) usa uma barra de cabeçalho flutuante azul-petróleo escuro com ações em lima sobre uma página branca, e uma abertura cuja fotografia chega à margem com um corte inclinado e um carimbo circular tracejado. Os números ficam numa barra escura sobreposta à abertura, o terceiro cartão de serviço fica escuro, a imagem e o texto ficam num painel verde-salva com uma fotografia em paralelogramo, a grelha da equipa mostra quatro retratos da equipa de obra, as credenciais tornam-se um painel escuro numerado do processo e o rodapé é um painel arredondado azul-petróleo com contactos diretos. O conteúdo de exemplo da Ironleaf Builders é fictício.

Cookie Bakery

Cookie Bakery (cookie-bakery) usa uma página creme, uma abertura arredondada cor de chocolate com letras robustas em Lilita One que passam de branco a mostarda, uma fotografia circular de produto e pontos de granulado. Os cartões de funcionalidades alternam pêssego, rosa, azul-céu e manteiga, a oferta de preço torna-se um painel de desconto pêssego, as especificações de produto uma lista escura de especialidades do dia, os cartões de serviços com imagem seleções de produtos circulares; a imagem e o texto usam uma fotografia com moldura orgânica e um carimbo coral, as credenciais tornam-se uma faixa escura de serviços e o rodapé tem uma borda ondulada cor de chocolate. O conteúdo de exemplo da Crumb & Co. Bakery é fictício.

Coworking Space

Coworking Space (coworking-space) combina uma página branco-sujo quente com painéis verde profundo, destaques em pêssego e títulos serif em Gloock; o título da abertura passa de verde a pêssego entre linhas e a fotografia do espaço fica numa grande moldura arredondada com um cartão de legenda verde. As credenciais tornam-se uma faixa compacta de vantagens, os cartões de funcionalidades uma lista com ícones, os cartões do catálogo partilham uma faixa cor de areia com o cartão central em verde, os números formam uma faixa verde, as imagens da galeria têm legendas escuras, os depoimentos mostram um bloco de retrato e os formulários de contacto tornam-se cartões verdes com um botão de envio pêssego. O conteúdo de exemplo da Greenhall Workspace é fictício.

Creative Studio Coffee

Creative Studio Coffee (creative-studio-coffee) coloca um cabeçalho transparente e um título em Bodoni Moda em maiúsculas que passa de branco a latão sobre uma fotografia de espresso em largura total, e continua com páginas em bege meia de leite. As credenciais tornam-se uma faixa de valores em cinco partes, a grelha de projetos seis blocos escuros de retrato com anéis de seta, a imagem e o texto ocupam toda a largura com uma legenda em carimbo circular, os formulários de contacto tornam-se uma faixa de adesão em tom de torra escura e o rodapé é um layout claro em colunas com linhas. O conteúdo de exemplo da Crema Digital é fictício.

Duck Farm

Duck Farm (duck-farm) mantém páginas brancas e verde-pálido com painéis em verde de quinta profundo e destaques amarelo-sol. A fotografia de abertura chega à margem e funde-se com o texto, cuja última linha fica verde, com uma legenda manuscrita. Os cartões do catálogo mostram quatro produtos, a imagem e o texto tornam-se um painel verde-escuro com uma fotografia de forma orgânica e um selo natural tracejado, os cartões de funcionalidades ícones de confiança divididos, os números um painel escuro sobre a quinta, as credenciais um percurso numerado da quinta para a mesa e os depoimentos ficam sobre creme. O conteúdo de exemplo da Brookmead Farm é fictício.

Electrical Services

Electrical Services (electrical-services) combina um cabeçalho branco com um link telefónico e um botão verde de orçamento com aberturas e cartões de serviços em cinza-carvão. A fotografia de abertura funde-se em cinza-carvão e as duas últimas linhas do título passam a verde elétrico. Os números ficam num cartão branco sobreposto à abertura, a imagem e o texto recortam a fotografia em hexágono com um selo circular de segurança, os cartões de serviços ficam cinza-carvão com círculos de ícones verdes, as credenciais tornam-se razões para escolher a empresa marcadas com raios e o apelo à ação um painel verde de urgências. O conteúdo de exemplo da Brightwire Electric é fictício.

Fashion Store Lavender

Fashion Store Lavender (fashion-store-lavender) combina um cabeçalho e uma abertura dividida em cinza-carvão com uma fotografia lilás em arco, títulos em Cormorant Garamond e páginas marfim acolhedoras. Uma faixa de vantagens em lavanda conduz a coleções editoriais com imagem, discretos cartões de novidades e um painel escuro de campanha de moda. O tema inclui os dez modelos de página, estiliza as trinta secções partilhadas e suporta os sete formulários de pedido existentes. Os links de navegação, as páginas principais e Mais partilham os estados em lavanda ao passar o cursor e de seleção, também quando uma página secundária está selecionada. Mais e os menus móveis usam linhas em largura total com os links aninhados sob a respetiva página principal. A pesquisa no catálogo, a navegação aninhada nativa, os separadores acessíveis por teclado e os carrosséis de imagens mantêm os contratos da plataforma. O conteúdo de exemplo da Violette Edit é fictício; a coleção usa links de pedido em vez de um carrinho de compras ou checkout.

9. O que acontece entre a ativação do tema e a publicação?

1. Instale e ative o tema. A Eyivo valida o pacote, regista a sua chave e versão e disponibiliza as definições e os esquemas de componentes na aplicação.
2. Escolha um tipo de página. Eyivo usa o ficheiro Liquid e a definição de área do tema ativo, quando existirem; caso contrário, usa o fallback correspondente de theme-core.
3. Adicione secções permitidas. A aplicação oferece apenas os tipos listados em allowed_components. Guarda texto, referências multimédia e traduções na instância do componente selecionado.
4. Renderize com segurança. Eyivo resolve dados de empresa/página/SEO/navegação, renderiza componentes de área salvos, renderiza componentes diretos onde o designer os colocou e, em seguida, renderiza o tipo de página e layout do tema ativo.
5. Publique. O visitante recebe HTML e CSS, mas não credenciais da base de dados, modelos internos ou código da aplicação.

10. Validação e erros comuns