Eksiksiz bir şirket sitesi şablonunu güvenli bir şekilde oluşturun.

1. Zihinsel model

Sistemde üç ayrı sorumluluk vardır. Bunları ayırmak v1'i anlamanın anahtarıdır.

Sayfa oluşturucu değildir: site sahibi main bölgesine izin verilen bir bölüm ekleyebilir ve sayısal sırasını seçebilir. Yeni bir bölge oluşturamaz, hero bölümünü altbilgiye taşıyamaz, HTML'yi veya temanın CSS'ini değiştiremez.

2. Hızlı başlangıç: asgari işlevsel tema

Her v1 teması yerleşimini, stillerini ve betiklerini bütünüyle kendisi sağlar; tasarımcı bunları istediği gibi düzenleyebilir. Temalar başka bir temanın yerleşimini veya varlığını devralmaz. Ortak eyivo: bileşenleri ve yedi yedek sayfa türü theme-core içinden gelir; tema yalnızca yerine kendi sürümünü koyduğu sayfa türlerini ve theme: ad alanında tanımladığı bileşenleri içerir.

Her v1 temasının varsayılan bir düzen dosyasına ihtiyacı vardır. Paket yalnızca çekirdek geri dönüşleri kullandığında hem page-types/ hem de components/ isteğe bağlıdır:

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 her zaman etkin temadan gelir ve HTML belgesinin tamamını tanımlar. Eyivo istenen sayfa türünü önce temada arar, bulamazsa theme-core/page-types içindeki yedeği kullanır. Çekirdek yerleşim veya varlık sağlamaz; bu nedenle yedek sayfa içeriği de etkin temanın paketi ve stilleriyle sunulur.

3. theme.json'daki şablonu açıklayın

Manifest hem yetenekleri bildirir hem de uygulamadaki formların oluşturulacağı sözleşmeyi tanımlar. Üç soruya yanıt verir: hangi sayfa yapıları var, her yapıda hangi bölgeler bulunuyor ve hangi bileşenler saklanabilir? Yerleşik temalar, on standart sayfa türünün tamamını açıkça tanımlar ve bunlara karşılık gelen Liquid dosyalarını içerir. Özel temalar, tanımlanmamış sayfa türleri için çekirdek şablonları kullanmaya devam edebilir.

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

Sayfa türü geri dönüş: Yerleşik türler home, page, gallery, contact, products, product ve videos'dur. theme-core'daki tanımını ve Liquid dosyasını kullanmak için bunlardan herhangi birini çıkarın. Yalnızca tema aynı zamanda eşleşen page-types/<type>.liquid geçersiz kılmayı da sağladığında bir tür bildirin.

Düzenleyici, birleştirilmiş sayfa türü API'sini alır: etkin tema tanımları eşleşen çekirdek tanımlarının yerini alırken, atlanan her tür çekirdekte kullanılabilir durumda kalır.

4. Demo içeriğini demo.json'da tamamlayın

Her yüklemede taşınabilir, salt taslak demo.json fikstürü ve bu fikstür yüklüyken çekilen en az bir ekran görüntüsü bulunmalıdır. Yerleşik temalar aynı şemayı kullanır. Veritabanı kimliklerini, kiracı etki alanlarını, kimlik bilgilerini veya nesne depolama kimlik bilgilerini eklemeyin.

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

Sayfalar ve bileşenler

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

Bileşen türleri ve alanları, etkin tema bildiriminde veya theme-core'da bildirilmelidir. Aynı site bağlantıları için /contact gibi göreli yollar kullanın. Yerleşik ana sayfa demoları mevcut hero görselini okunabilir bir katman ve duyarlı metinle tam genişlikte arka plan olarak kullanır: çoğu temada immersive, Compact temasında ise görselli centered. Diğer hero varyantları kendi düzenlerini korur.

Demo dilleri ve yedek dil

İngilizce zorunlu temel dildir: default_locale değerini en olarak ayarlayın. Eski verilerde bu alanın bulunmaması da İngilizce anlamına gelir. Desteklenen diğer site dilleri isteğe bağlıdır; İngilizce metni başka bir dilin altına kopyalayıp çeviri olarak sunmayın.

Şirket metinleri, tema ayarları, sayfalar, bileşenler, ürünler, galeriler, galeri görsellerinin açıklamaları ve alternatif metinleri, videolar ve blog yazıları için translations.en ve isteğe bağlı dil nesneleri sağlayın. Eski, dil anahtarı olmayan İngilizce alanlar desteklenir. Oluşturma sırasında sitenin ana dili seçilir; eksik her alan için İngilizce kullanılır. Diziler İngilizce dizinin tamamının yerini alır; açıkça boş bırakılan değerler korunur. Yalnızca seçilen site dili içe aktarılır; İngilizce veya diğer diller otomatik etkinleştirilmez.

Site içi bağlantılarda ve taşınabilir menü öğelerinde İngilizce kaynak slug değerlerini kullanın. İçe aktarma, zengin metin ve blog belgelerindeki bağlantılar dahil bunları seçilen çevirinin slug değerine dönüştürür. Menü öğeleri açık slugs ve labels haritaları içerebilir. Eksik etiket çevirileri için İngilizce kullanılır. Harici URL’ler değiştirilmez.

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

İçe aktarma ve medya güvenliği

Panelde oluşturulan yeni sitelerde demo verileri varsayılan olarak seçilidir ve seçilen dilde hemen yayınlanır; kullanıcı bu seçeneği kapatabilir. Mevcut bir sitede Marka ayarlarından demo yüklemek taslak oluşturur ve yayınlanmış içeriği korur. Merkezi App, görselleri yeni sitenin medya kitaplığına kopyalar ve referansları Dahili API üzerinden iletir. Master sunucular ve temalar nesne depolama kimlik bilgilerini almaz. Temalar sağlanan media.public_url değerini kullanır.

data_source: "demo_data" ile ekran görüntülerini theme.json.preview'da bildirin. Paket, bildirilen her preview görüntüsünü içermelidir.

5. Temanızın ihtiyaç duyduğu düzeni yazın

Varsayılan yerleşim HTML belgesinin tamamını tanımlar. Etkin temanın dışındaki hiçbir şey üstbilgiyi, altbilgiyi, stil dosyasını, JavaScript'i veya görsel yapıyı sağlamaz.

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

Sayfa türü dosyası dinamik bölgelerin tam olarak nerede görüneceğini belirler. Bölge bileşenleri önceden oluşturulmuş HTML dizeleridir; bu nedenle bunları | raw ile ekleyin. Diğer değerler varsayılan olarak HTML için kaçışlanır.

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

Bir bileşeni doğrudan işleme

Tasarımcı, kayıtlı bir bileşeni doğrudan bir düzen veya sayfa tipi dosyaya yerleştirebilir. Bu yerleşim temaya göre sabitlenir ve panelde yeniden sıralanmaz veya kaldırılmaz. Bir nesneyi data:'dan, bireysel şema alanlarından veya her ikisinden geçirin; adlandırılmış alanlar data:'daki eşleşen anahtarları geçersiz kılar.

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

Tür, tırnak içine alınmış bir ad alanı değişmez değeri olmalıdır. Doğrudan işleme, alan örneği olarak aynı şemayı, varyantları, bileşen dosyasını ve normalleştirilmiş component nesnesini kullanır. Bileşen dosyaları diğer bileşenleri oluşturamaz.

Varlıklar: her zaman {{ 'css/theme.css' | asset_url }} ifadesini kullanın. Eyivo dosyayı etkin paketten /theme-assets/<theme>/css/theme.css adresinde sunar; başka bir tema adını veya dosya sistemi yolunu sabit kodlamayın.

HTML head, yollar ve arayüz sözlükleri

Her yerleşim {% eyivo_head %} etiketini tam olarak bir kez oluşturmalıdır. Eyivo başlık, açıklama, robots, canonical, hreflang, Open Graph ve yapılandırılmış veri çıktısını yönetir. Sabit kodlanmış genel yollar yerine routes.home, routes.contact, routes.catalog, routes.gallery ve routes.videos kullanın. Düzenlenebilir URL ayarlarını | localized_url filtresinden geçirin; böylece bilinen iç yollar etkin dil önekini alırken dış URL'ler değişmeden kalır.

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

Temanın eklediği arayüz etiketleri için isteğe bağlı locales/<locale>.json dosyaları oluşturun. Arama sırası çekirdek İngilizce, çekirdek yerel dil, tema İngilizcesi ve tema yerel dilidir. Böylece theme-core içindeki ortak etiketler dosyaları kopyalamadan çalışır. İşletmeye özgü metinler sözlüklerde değil, çevrilebilir içerikte, bileşen alanlarında veya tema ayarı alanlarında tutulmalıdır.

Özel bir bileşen dosyası

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

Çevrilebilir alanlar için Eyivo, oluşturma öncesinde ziyaretçinin yerel ayarını seçer. Dolayısıyla bir Türk ziyaretçi ve bir İngiliz ziyaretçi aynı bileşen yapısını farklı component.data.heading değerleriyle görüyor.

Kayıtlı menüler

Temalar theme.json içinde ek düz menüler tanımlayabilir. Main ayrılmıştır: navigation.main sayfa görünürlük seçeneğini ve otomatik liste kurallarını korur. Her ek menü için kalıcı anahtar, etiket, açıklama ve gerçekten kullanılan bir gösterim alanı gerekir.

Ana gezinmede iç içe sayfa bağlantıları

Her navigation.main öğesi bir children dizisi içerir. Bir sayfanın üst sayfası olduğunda, o üst sayfanın children listesinde görünür. Platform, site üst bilgisindeki eşleşen bağlantılara erişilebilir bir açılır menü ekler; temalar children dizisini doğrudan da işleyebilir:

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

Alt sayfalar kendi URL’lerini ve yayın durumlarını korur. Ana gezinme yalnızca etkin dil için yayımlanmış bir çevirisi olan, yayımlanmış ve görünür sayfaları içerir. Üst sayfa ilişkileri tek seviyelidir: ana sayfa olmayan üst düzey bir sayfa seçin. navigation.footer gibi kayıtlı menüler düz kalır.

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

navigation.footer veya başka bir tanımlı anahtarı item.label, item.url, item.active ve item.kind ile gösterin. Sağlanan etiketi kullanın, çıktıyı kaçırın, açıklayıcı bir gezinme etiketi ekleyin ve boş alanları gizleyin. Boş ek menüler Main menüsüne dönmez.

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

Düzenleyiciler sayfa, yazı, ürün, galeri ve videoları birden fazla ek menüye atayabilir. Menüler ekranı liste hedeflerini, özel bağlantıları, bağımsız sıralamayı ve isteğe bağlı çevrilmiş etiketleri destekler. Yapı diller arasında ortaktır; yayımlanmamış çeviriler gösterilmez.

İçeriği kaydetmek seçimleri taslağa alır; içeriği yayımlamak yalnızca kendi seçimlerini uygular. Menü taslaklarını Menüler ekranında ayrı kaydedip yayımlayın. Menüyü yayımlamak hedef içeriği yayımlamaz. Tema değişiminde desteklenmeyen seçimler korunur ve anahtar yeniden desteklendiğinde kullanılabilir.

İsteğe bağlı initialize_from_main alanı geriye uyumluluk için menüyü bir kez doldurur; sonrasında eşitlemez. Menü tanımı olmayan eski temalar desteklenir. Demo bağlantıları içerik türü ve kaynak slug, liste anahtarı veya özel URL kullanır; siteye ait kayıt kimlikleri kullanmaz.

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

Rich-text alanlarını ve page.body çıktısını Liquid içinde kaçırarak gösterin; platform kendi düzenleyici işaretlerini ve sayfa seçici bağlantılarını güvenle işler. Yalnızca blog.post.body_html gibi önceden üretilmiş güvenilir HTML için raw kullanın. Sayfa bağlantıları slug değişikliklerini izler; hedef çeviri yayımlanmamışsa kullanılamaz.

6. Kullanabileceğiniz güvenli Liquid verileri

Liquid, Laravel veya veritabanı modellerini değil, düz, normalleştirilmiş verileri alır. Bir değer bu tabloda yoksa onu v1'de mevcut değil olarak değerlendirin.

Yerel ayar açısından güvenli düzen örneği

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

Mevcut dil öğelerinin her biri aynı zamanda label, direction, is_default, current ve has_translation'yu da gösterir. Eyivo yalnızca eşdeğer yayınlanmış çevirileri sağlar, bu nedenle temalar /en veya başka herhangi bir önek oluşturmak yerine language.url kullanmalıdır.

Ayarlara dayalı token örneği: style="--brand: {{ theme.settings.primary_color }}". Ayarın ilk önce theme.json'da bildirilmesi gerekir.

7. Bileşenler: doğrudan ve dinamik

Bileşenlerin iki yerleştirme yolu vardır. Doğrudan bileşenin yeri, tasarımcı tarafından yerleşimde veya sayfa türünde belirlenir. Dinamik bileşen ise sayfa bölgesi örneği olarak saklanır ve düzenleyiciden yönetilir. Dinamik örneklerin sabit kimliği, ad alanlı türü, bölgesi, sıra numarası, isteğe bağlı varyantı, verileri ve çevirileri vardır. Sıra numarası yalnızca sıralama içindir, kimlik değildir.

Evrensel bileşen: uyumlu sayfa türlerinin tüm bölgelerinde kullanılabilmesi için bileşen tanımında "universal": true ayarını yapın. Bileşenin yine de geçerli bir şeması ve Liquid dosyası olmalıdır.

Ortak işlem bağlantıları, sorgu parametrelerini ve bölüm işaretlerini koruyarak bilinen iç yolları etkin dile uyarlar. Zengin metin, iç içe düzenleyici kapsayıcılarındaki güvenli biçimlendirmeyi korur. Boş galeri görselleri gösterilmez, hedefi olmayan harita görselleri bağlantı olmaz; slayt ve arama etiketleri ziyaretçinin arayüz dilini kullanır.

Visual Atelier (visual-01), tarayıcı azaltılmış hareket istediğinde de dahil olmak üzere dekoratif ana sayfa kayan yazısını otomatik olarak akıtmaya devam eder. Fareyle üzerine gelmek metni duraklatır; ayrılmak yeniden başlatır. Özgün görünüm ve yalnızca CSS ile çalışan döngü korunur.

8. Mevcut bileşen kataloğu

Bu 30 paylaşılan eyivo: bileşenleri, v1 kitaplığının tamamını oluşturur ve theme-core'dan çözümlenir. Bir tema ayrıca kendi theme: bileşenlerini bildirebilir ve uygulayabilir.

Foundation Impact: bir vakıf web sitesi oluşturmak

Foundation Impact (foundation-impact) bir vakfın amacını, programlarını, yönetimini, etkisini, etkinliklerini, galerisini ve taleplerini sunar. Düzeni uzun gezinme etiketlerini alt satıra kaydırır ve küçük ekranlarda genişletilebilir bir menüye geçer. Kayıtlı header, footer ve useful_links menüleri gezinmeyi denetler. Kayıtlı menüsü boş olduğunda üst bilgi otomatik sayfa gezinmesine geri döner. Seçilmiş fotoğraf sayfası /in-pictures adresini kullanır; /gallery yerel albüm listesi olarak kalır.

Foundation Impact, on yerleşik sayfa şablonunun tamamına sahiptir: Ana Sayfa, Sayfa, İletişim, Ürünler, Ürün, Galeri, Videolar, Blog, Blog Kategorisi ve Blog Yazısı. Mevcut içerik alanları ve kayıtlı formlar uyumludur. Üst menüler, normal bağlantılarla aynı şeffaf ve altı çizili üzerine gelme ve etkin sayfa stilini kullanır; seçili alt sayfa üst menüsünü de işaretler. Alt menü bağlantıları masaüstünde ve mobilde aynı görünümü izler.

Görselsiz alt sayfa başlıkları, yakın aralıklı gezinme bağlantıları, küçük bir üst etiket ve ölçülü bir başlık içeren kompakt lavanta renkli bir bant kullanır. Görselli alt sayfa başlıklarında koyu bir katman ve beyaz başlık, gezinme bağlantıları ve özet bulunur; metin görsel ve karartma katmanlarının üzerinde kalır. Karartma yönü sağdan sola düzenlere uyarlanır.

Ortak eyivo:rich_text bileşeni hem editör işaretli gövdeleri hem eski HTML gövdelerini kabul eder. Her ikisi de mevcut izin verilen biçimlendirme listesinden geçer; paragraflar, başlıklar, listeler ve güvenli bağlantılar içerik olarak gösterilirken betikler, olay işleyicileri ve güvensiz bağlantılar kaldırılır. Diğer metin alanları normal kaçış kurallarını korur. Foundation demosundaki zengin metin gövdeleri de editör işaretini kullanır.

Tema mevcut eyivo:hero, project_grid, image_text, event_list, media_gallery, feature_grid, team_grid, stats, rich_text, faq, cta ve lead_form bileşenlerini bir araya getirir. Ertelenmiş tema betiği görsel kaydırıcı kontrollerini, klavyeyle kullanılabilen sekmeleri ve katalog filtrelemeyi etkinleştirir. Mobil menü yerel HTML kontrolleriyle genişler. İstatistikler açık sarı bir yüzey üzerinde koyu başlıklar, etiketler ve notlar ile mavi değerler kullanır. Program kartları normal içerik sayfalarına bağlanır. Etkinlik kartları etkinlikleri tanımlar ve bir talep sayfasına bağlanır; rezervasyon veya katılım kaydı oluşturmaz.

İletişim sayfası, eyivo/contact tarafından sağlanan taşınabilir iletişim bağlamasıyla eyivo:lead_form kullanır. Bir demoyu içe aktarmak bu bağlamayı her site için ayrı ayrı çözümler. Bağışlar, hibe başvuruları ve gönüllü onayları dahil değildir.

Yerleşik demo içe aktarmaları, ortak tema demo medya kataloğundaki etkin kayıtları yeniden kullanır. Nesneye merkezi uygulama sahiptir ve master’lara başvurular sağlar; içe aktarılmış bir başvuruyu silmek korunan ortak nesneyi silmez. Bir tema önizlemesi ve özel bir SEO örneği ayrı sitelerdir.

Village Commons: ikincil gezinme ve kenar çubukları

Village Commons (village-commons) bir duyuru panosunu, yerel mekânları, köy tarihini, etkinlikleri, fotoğrafları, ziyaretçi bilgilerini ve siteye özel bir iletişim formunu bir araya getirir. Orman yeşili, fildişi ve kehribar yüzeylerin açıkça tanımlanmış ön plan renkleri vardır. İçeriği mevcut Eyivo bileşenleri sağlar; etkinlik kartları rezervasyon sunmaz ve toplantı notu sayfaları resmî bir kayıt sistemi oluşturmaz. Bilgi sayfalarındaki görsel ve metin bölümleri metnin çevresinde duyarlı iç boşluk korur. Alt sayfalardaki etkinlik ve SSS panellerinin duyarlı iç boşluğu vardır. SSS’ler kompakt bir başlık ve net genişletme kontrollerine sahip, üst üste dizilmiş yuvarlatılmış açılırlar kullanır.

header, secondary, sidebar, footer ve useful_links menülerini theme.json içinde kaydedin. İkincil gezinme yardımcı çubukta görünür; kenar çubuğu menüsü sıradan sayfaların ve iletişim sayfalarının yanında görünür. Her ikisi de standart menü düzenleyicisiyle düzenlenir ve yayımlanır. Ana gezinmeyi kısa tutun. Küçük ekranlarda ana menü genişler ve kenar çubuğu sayfa içeriğinin altına taşınır.

Kenar çubuğu yeni bir bileşen türü değil, bir düzen bölgesidir. page ve contact şemaları rich_text, announcement, download_list ve contact_actions için en fazla üç örnekli bir sidebar alanı bildirir. areas.sidebar alanını navigation.sidebar ile birlikte bir aside öğesi içinde işleyin. Village life sayfası düzenlenebilir bir metin bileşenini gösterir. Tema ayarları ek iletişim kartını sağlar. Her özel alan, onu kullanan her sayfa türünde ayrı ayrı bildirilmelidir.

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

Genel tema önizlemesi ve WT-003 İngilizce özel demosu ayrı admin-1 siteleridir. Görseller merkezi uygulama tarafından içe aktarılır ve ortak demo medya kataloğunda korunur. Ayrı yayımlanan test demo içeriklerinin ekran görüntüleri dağıtımdan önce yerel olarak alınır ve tema ile Apex’e paketlenir. Prepare, yakalama revizyonunu oluşturulan demoya bağlamadan önce taslak özetini ve tema sürümünü doğrular. Herkese açık katalog, korunan önizlemesini kimliği doğrulanmış App API üzerinden bulur. Ekran görüntüleri müşteri medyasından ayrıdır. Tema, eyivo/contact eklentisinin taşınabilir iletişim formu bağlamasını kullanır.

Formlar ve kayıt geçmişi

Forms API 1 yedi onaylı işleyici sağlar. Temalar düzen ve stili; eklentiler şema, doğrulama ve iş akışını yönetir. Kayıt, insan doğrulaması ve bildirimleri platform yürütür.

Bir form, birden çok yerleşim

Kurulum her site/eklenti/tür için kalıcı bir varsayılan UUID oluşturur. Yerleşimi yeniden kullanmak kimliği korur; adlandırılmış yeni form ayrı UUID alır. Tema değişikliği ve yeniden kurulum geçmişi korur. Tema taşınabilir takma adlar kullanır; müşteri UUID yazmadan kayıtlı formu seçer.

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

İletişim şablonunda forms.contact, iletişim bölümlerinde component.form kullanın. form_preset yerine form_binding kullanın. Sağlanan alanları, yönlendirmeleri, action, CSRF, imzalı form_context ve verification_html değerlerini gösterin. Yalnızca bildirilen sunum değişiklikleri ve izinli ek alanlar geçerlidir; zorunlu doğrulama zayıflatılamaz.

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

İki gelen kutusu, tek kayıt

Ortak gelen kutusu ile eklentinin liste/detay sayfaları aynı kayıtları gösterir. Form paketleri Panel API 2 submission-list/submission-detail bileşenlerini ve tek düzey menü bağlantısını gerektirir. Panel API 1 desteklenir. Görüntülemek okundu yapmaz; okuma/arşiv/iş akışı ayrıdır ve değişiklikler record_revision kullanır. Devre dışı eklentinin menüleri kaybolur; ortak kutu geçmişi korur.

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

Müşteri verileri ve izinler

Form kayıtları sitenin içerik veritabanında tutulur ve diğer içerikle aynı max_db_bytes paket hakkını kullanır. Ayrı kayıt sayısı veya saklama kotası yoktur. Yapılandırma master veritabanında 50 alan, 32 KB ve üç düzey sınırını korur. Üyeler görüntüler; değişiklikler sahip/yönetim izni gerektirir. Eklenti doğrudan veritabanına erişmez; PHP/Blade uygulamaya aktarılmaz.

Doğrulanmış kayıt ve bildirim

Platform imzalı bağlamı, cevapları ve insan doğrulamasını denetler; kayıt, kullanım ve bildirim işini birlikte kaydeder. Aynı deneme ve içerik 24 saat içinde çoğalmadan geri alınabilir. SMTP sonra çalışır ve yeniden deneyebilir; e-posta hatası kaydı silmez. Form alıcısı belirtilmezse şirket e-postası kullanılır; iki adres de geçerli değilse kayıt e-posta olmadan saklanır.

Tüm yerleşik temalar bu sözleşmeyi kullanır. Eski contact POST istekleri 410 döndürür; iletişim sayfası GET bağlantıları çalışır. Randevu ve rezervasyon talepleri kesin rezervasyon oluşturmaz. Üçüncü taraf işleyiciler, dosya yükleme ve keyfi dış adresler kapsam dışıdır.

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

Field Guide: okunabilir rehberler ve kaynak kütüphaneleri

Field Guide (field-guide), editoryal başlık yazı tipini okunabilir gövde metni, lacivert zemin, yeşil işlemler ve ölçülü altın vurgularla birleştirir. Hero ve isteğe bağlı orientation alanı duyarlı bir giriş oluşturur. Arka plan fotoğrafı metnin gerisinde kalır; orientation alanı boş olduğunda giriş tam genişlik kullanır.

Masaüstü üstbilgisinde ilk dört üst düzey sayfa bağlantısı görünür; kalan bağlantılar Diğer menüsünde yer alır. Alt sayfası olan üst sayfalar kendi bağlantılarını ve ayrı alt menü düğmelerini korur. Küçük ekranlardaki açılır Menü tüm sayfaları ve alt bağlantıları gösterir. Escape tuşu ve dışarı tıklama menüleri kapatır. Dil bağlantıları yalnızca birden fazla dil varsa görünür.

Giriş ve hızlı yönlendirme için hero ve orientation alanlarını, mevcut Eyivo bileşenleri için main alanını kullanın. Editoryal içeriğin ardından gelen özellik gridi geniş ekranda destekleyici kontrol listesi olarak yanında, mobilde altında görünür. Kartlar, fotoğraflar, iletişim formları ve altbilgi ortak boşluk ve renk düzenini kullanır. Kurgusal Northwater Brief katalog demosu BACC-GA taşıma verisinden ayrıdır; katalog demosunu yenilemek bir müşteri sitesini içe aktarmaz.

Automotive Care: servis sayfaları ve medya

Automotive Care (automotive-care), blog şablonlarına ek olarak Home, Page, Contact, Products, Product, Gallery ve Videos şablonlarını içerir. Mevcut bileşen alanları uyumludur. Koyu ve altın renkli tasarım ölçülü başlıklar, numaralı hizmet kartları, ayrı güvence başlıkları ve açıklamaları, metinle düğme arasında boşluk bulunan eylem alanları kullanır. Alt sayfalardaki hero görselleri koyu katmanın arkasındadır; görselsiz sayfalarda sade bir giriş gösterilir.

Masaüstünde ilk altı üst düzey bağlantı, kalanlar Diğer menüsünde gösterilir. Üst sayfa bağlantıları ve ayrı alt menü düğmeleri aynı üzerine gelme ve geçerli sayfa görünümünü paylaşır. Mobil Menü tüm sayfaları ve alt bağlantıları içerir. Escape ve dışarı tıklama menüyü kapatır. Dil bağlantıları yalnızca birden fazla dil varsa görünür.

Katalog görselleri, büyük fotoğraflar dahil, sınırlı çerçevelerde oranlarını korur. Ortak temel şablonlar da ürün görsellerini sınırlar ve alt sayfa arka planlarını doğru konumlandırır. Galeride ilk fotoğraf öne çıkar; görsele tıklama erişilebilir bir pencere açar, Escape kapatır ve odak bağlantıya döner. JavaScript olmadan özgün görsel yeni sekmede açılır. Kaydırıcılar dokunma, ok düğmeleri, klavye ve azaltılmış hareket tercihini destekler; katalog araması yerel filtreleme yapar. Ürün detay fotoğrafları, ortalanmış kırpma ile çerçevenin tüm genişliğini doldurur. Güvence öğeleri altın kalkan simgeli koyu bir bant oluşturur; özellikler altın rozetli geniş sütunlarda gösterilir ve küçük ekranlarda alt alta dizilir.

Wellness & Beauty: kişisel bakım ve uygulama koleksiyonları

Wellness & Beauty (wellness-beauty), blog şablonlarına ek olarak Home, Page, Contact, Products, Product, Gallery ve Videos şablonlarını içerir. Mevcut bileşen alanları ve form bağlantıları uyumludur. Pudra tonları, gül rengi vurgular, ölçülü serif başlıklar ve kemerli fotoğraflar yumuşak bir stüdyo görünümü oluşturur. Metin ve işlemler arasında belirgin boşluklar vardır. Uygulama detaylarında geniş bir giriş, ortalanmış kırpılan fotoğraf ve okunabilir içerik bulunur. Katalog kartlarında görseller, açıklamalar ve işlemler ayrıdır; galeri fotoğrafları açıklamalı albüm çerçevelerinde gösterilir.

Normal bağlantılar ve alt sayfalı bağlantılar aynı gül rengi üzerine gelme ve geçerli sayfa görünümünü paylaşır. Üst sayfalar ayrı alt menü düğmelerini korur; masaüstünde sığmayan bağlantılar Diğer menüsünde, mobilde tüm sayfalar ve alt bağlantılar yerel Menü içinde görünür. Escape ve dışarı tıklama menüleri kapatır. Galeri tam boy fotoğrafı pencerede açar ve kapanınca odağı geri verir; JavaScript olmadan görsel yeni sekmede açılır. Katalog araması yereldir. Kaydırıcılar ve sekmeler klavye ile azaltılmış hareket tercihini destekler. Marka renkleri korunur; tema yeni bir randevu altyapısı eklemez.

Veterinary Care: hizmetler, ekip ve açık iletişim bilgileri

Veterinary Care (veterinary-care), blog şablonlarına ek olarak Home, Page, Contact, Products, Product, Gallery ve Videos şablonlarını içerir. Mevcut bileşen alanları ve kayıtlı formlar uyumludur. Nane yeşili paneller, koyu yeşil metinler, kayısı rengi işlemler ve ölçülü yuvarlak başlıklar sıcak bir klinik görünümü oluşturur. Ekip kartları fotoğraf, ad, görev ve biyografiyi ayırır. İletişim yöntemleri ve adres alanlarında etiketler değerlerin üstünde, telefon ve e-posta bağlantıları okunabilir biçimde yer alır. Altbilgi şirket adı, kısa slogan, açıklama ve iletişim bilgilerini gösterir.

Normal ve alt sayfalı bağlantılar aynı nane yeşili üzerine gelme ve geçerli sayfa durumlarını paylaşır. Üst sayfaların ayrı alt menü düğmeleri vardır; ek masaüstü bağlantıları Diğer menüsünde, tüm sayfalar ve alt bağlantılar mobil Menü içinde görünür. Escape ve dışarı tıklama menüleri kapatır. Katalog kartlarının belirgin işlemleri ve yerel araması vardır; detay fotoğrafları sınırlı çerçeveleri ortalanmış kırpma ile doldurur. Galeride büyük bir fotoğrafı destekleyen görseller bulunur; özgün fotoğraflar pencerede açılır, kapanınca odak geri döner. JavaScript olmadan görseller yeni sekmede açılır. Kaydırıcı ve sekmeler klavye ile azaltılmış hareket tercihini destekler.

Early Learning: okullar için neşeli sayfalar

Early Learning (early-learning), blog şablonlarının yanında Ana Sayfa, Sayfa, İletişim, Ürünler, Ürün, Galeri ve Videolar şablonlarına sahiptir. Mevcut bileşen alanları ve kayıtlı formlar uyumludur. Krem zeminler, mercan, nane yeşili ve sarı vurgular, yuvarlak başlıklar ve yapı taşı ayrıntıları okul öncesi ortamlara uygundur. Ekip profilleri ile Hakkımızda bölümündeki üç kart; görselleri, rolleri ve açıklamaları ayırır. İletişim bilgileri etiketli panellerde, program ayrıntıları ferah bir giriş ve ortalanmış kapak fotoğrafıyla, galeri ise açıklamalı albüm çerçeveleriyle sunulur.

Bağlantılar ve üst menüler aynı çerçeveli üzerine gelme stilini ve sarı etkin sayfa görünümünü kullanır. Alt menü düğmeleri ayrıdır; Diğer, masaüstündeki fazla bağlantıları, yerel mobil Menü ise tüm sayfaları ve alt öğeleri içerir. Galeri fotoğrafları kapanınca odağı geri veren bir iletişim kutusunda, JavaScript yoksa yeni sekmede açılır. Yerel katalog araması, klavyeyle kullanılan sekmeler ve kaydırıcılar azaltılmış hareket tercihini destekler. Demo okula uygun ekip ve program metinleri kullanır; yeni bir kayıt altyapısı eklemez.

Tasarım koleksiyonundaki temalar

Her tema on standart sayfa şablonunun tamamına sahiptir ve otuz ortak Eyivo bileşeninin tamamını biçimlendirir. Dahil edilen bileşen ve talep örneği sayfaları, ana sayfanın ötesindeki bölümleri gösterir. İletişim, teklif, ürün talebi, randevu, kurs başvurusu, rezervasyon ve gayrimenkul talebi bağlamaları mevcut eklentileri ve İnsan Doğrulamasını kullanır. Katalog filtreleme, klavyeyle kullanılabilen sekmeler, görsel kaydırıcılar ve yerel gezinme açılırları; masaüstü, mobil ve sağdan sola düzenlerde aynı içerik sözleşmelerini destekler.

Seafood Restaurant

Seafood Restaurant (seafood-restaurant), okyanus lacivertini narenciye turuncusu, serin beyaz sayfalar ve ölçülü Manrope başlıklarıyla birleştirir. Fotoğraflı bir deniz ürünleri giriş alanı kompakt bir avantajlar şeridine, imza yemeklere, bir sahil hikâyesine, yuvarlak yemek galerilerine ve lacivert bir ziyaret nedenleri paneline geçiş yapar. Kurgusal Tide & Table demo içeriği rezervasyon taleplerini, on sayfa türünü, otuz ortak bölümün tamamını ve mevcut yedi form bağlamasının tamamını içerir. Gezinme bağlantıları, üst bağlantılar ve Daha Fazla menüsü aynı fareyle üzerine gelme ve geçerli sayfa durumlarını paylaşır; seçili alt sayfalar üst öğelerini vurgular. Mobil menüler alt bağlantıları üst öğelerinin altında tutar. Sekmeler, kaydırıcılar, yemek filtreleme ve sağdan sola düzenler platform sözleşmelerini korur. Rezervasyon talepleri onay gerektirir; ödeme veya canlı masa uygunluğu sistemi ima edilmez.

Family Insurance

Family Insurance (family-insurance), mor bir üst alanı ve içe yerleştirilmiş beyaz gezinmeyi aile fotoğrafları, yumuşak lavanta bilgi panelleri ve ölçülü Manrope başlıklarıyla birleştirir. Hearthway Insurance demo içeriği kurgusaldır. Düz ve üst gezinme bağlantıları aynı fareyle üzerine gelme ve geçerli sayfa görünümünü paylaşır; seçili bir alt sayfa üst öğesini vurgular. Kompakt alt sayfa başlıkları, açıklamalı galeriler, kırpılmış katalog görselleri ve etiketli iletişim panelleri tasarımı ana sayfanın ötesine taşır.

Barbershop

Barbershop (barbershop), ortalanmış serif yazı logolu koyu yeşil iki satırlı bir üst alan, okuma tarafından gölgelendirilmiş tam genişlikte fotoğraflı bir giriş alanı ve Playfair Display başlıkları ile pirinç tonlu düğmeler içeren krem sayfalar kullanır. Özellik kartları çizgi ikonlar çizer ve her ikon değerini kısa altın bir etiket olarak gösterir; yeterlilikler bölünmüş koyu bir bantta yer alır, görsel kaydırıcı dört kare saç kesimi gösterir, ürün özellikleri iki sütunlu bir fiyat listesine ve fiyat teklifleri kesik çizgili rozet bir panele dönüşür. Ana sayfadaki ve hizmetler sayfasındaki katalog kartları koyu fotoğraflı kutulardır. Northline Barber demo içeriği kurgusaldır.

Recruitment & Staffing

Recruitment & Staffing (recruitment-staffing), beyaz yuvarlatılmış gezinme, kemerli fotoğraflı lavanta bölünmüş bir giriş alanı, mor eylem düğmeleri, nane yeşili müşteri yorumları ve mavi-mor bir alt bilgi kullanır. Kurgusal Brightlane Talent demo içeriği işe alıma özgü hizmetler, ekip profilleri ve talep metinleri içerir. Plus Jakarta Sans başlıkları ölçülü kalır. Üst ve alt gezinme, katalog ayrıntıları, galeriler, yazılar ve kayıtlı tüm talep formları aynı görsel dili izler.

Airline Booking

Airline Booking (airline-booking), uçak işaretli beyaz bir üst bilgi, metni ve eylemleri yüzen beyaz bir rezervasyon çubuğunda duran yuvarlatılmış tam genişlikte bir gün batımı girişi ve turkuaz ile mürekkep tonlarında Figtree başlıkları kullanır. Katalog kartları numaralı rozetli destinasyon kutularına dönüşür, görsel ve metin turkuaz açıklama etiketli nane yeşili bir panelde yer alır, istatistikler yuvarlatılmış turkuaz bir banda, özellik kartları ok işaretli iki sütunlu bir listeye dönüşür ve alt bilgi, iletişim eylemi içeren yuvarlatılmış turkuaz bir paneldir. Skyvane Travel demo içeriği kurgusaldır.

Architecture Studio

Architecture Studio (architecture-studio), buzlu hap biçimli gezinmeye sahip şeffaf bir üst bilgiyi okuma tarafından kum tonuyla yıkanmış tam genişlikte bir konut fotoğrafının üzerine yerleştirir; ince Montserrat başlıkları, beyaz ok diskli espresso hap düğmeler ve yüzen bir proje açıklaması kullanır. Katalog ve hizmet kartları asimetrik görsel köşeli yumuşak kum tonlu kutulardır, proje ızgarası koyu bir öne çıkan projeler bandına dönüşür, görsel ve metin yuvarlatılmış görsel kenarıyla kenardan kenara uzanır, istatistikler çizgili bir sütunda yer alır ve potansiyel müşteri formları espresso tonlu bir iletişim bandına dönüşür. Solace Architecture demo içeriği kurgusaldır.

Automation SaaS

Automation SaaS (automation-saas), beyaz bir üst bilgiyi ve gökyüzünden tepelere uzanan bir fotoğraf üzerinde ortalanmış Instrument Serif girişini adaçayı tonlu sayfalar, beyaz yuvarlatılmış kartlar ve parlak yeşil eylem düğmeleriyle birleştirir. İstatistikler, üçüncüsü orman yeşili olan dört karta dönüşür; görsel ve metin varyanta göre beyaz bir kart ile limon tonlu bir kart arasında değişir, video bölümü orman yeşili bir özellik kartına, proje ızgarası devamını okuma etiketli yatay içgörü kartlarına dönüşür ve SSS ortalanmış bir akordeondur. Alt bilgi, çizilmiş yeşil tepelerin üzerinde büyük bir serif yazı logosuyla biter. Fernflow demo içeriği kurgusaldır.

Business Analytics SaaS

Business Analytics SaaS (business-analytics-saas), beyaz bir üst bilgi, zümrüt yeşili vurgu biçimli ortalanmış bir Outfit girişi ve kenar çubuğu desenli lacivert bir ürün çerçevesi içinde giriş fotoğrafı kullanır. İstatistikler bölünmüş bir satırda yer alır, özellik ikonları zümrüt, mavi ve mor arasında değişir, görsel ve metin yüzen bir büyüme kartıyla nane yeşili bir bantta durur, logo bulutu entegrasyon kutularına ve fiyat teklifi vurgulanmış zümrüt yeşili bir plana dönüşür. Müşteri yorumları yıldızları ve avatar noktalarını gösterir; alt bilgi laciverttir. Metrova demo içeriği kurgusaldır.

Car Dealership

Car Dealership (car-dealership), iletişim satırı içeren koyu turkuaz iki satırlı bir üst bilgi, araç fotoğrafında puan etiketi bulunan nane yeşili bölünmüş bir giriş alanı ve girişin üzerine binen beyaz bir arama kartı kullanır. Görsel odaklı hizmet kartları altı kompakt kategori kutusuna, görsel ve metin koyu turkuaz bir alım-satım bandına, yeterlilikler ortalanmış ikonlu gerekçelere dönüşür; katalog kartları numaralı rozet taşır, müşteri yorumları koyu turkuaz üzerinde yer alır, fiyat teklifi nane yeşili bir finansman paneline dönüşür ve alt bilgi bir eylem çağrısıyla açılır. Corvane Motors demo içeriği kurgusaldır.

Car Rental

Car Rental (car-rental), yumuşak kenarlıklı ve limon vurgulu, siyaha yakın yeşil panellerden oluşan koyu bir temadır. Ortalanmış bir yazı logosu ve aralıklı bir kategori gezinmesinin üzerinde limon tonlu bir şerit bulunur; giriş alanı büyük harfli Archivo başlıklı ve ok diskli limon hap düğmeli, kenarlıklı fotoğraflı bir karttır. Yeterlilikler tek bir özellik şeridine, katalog kartları ortadaki seçeneği limon çerçeveli beyaz kiralama kartlarına, özellik kartları numaralı adımlara dönüşür ve alt bilgi, iletişime geçme eylemi içeren kenarlıklı bir paneldir. Laneway Rentals demo içeriği kurgusaldır.

Catering Services

Catering Services (catering-services), orman yeşili bir üst bilgi, krem sayfalar ve yaprak ayırıcılı Gilda Display başlıkları kullanır. Giriş alanı fotoğrafı oynatma işaretli kemerli bir çerçeveye yerleştirir; görselli hizmet kartları dört sütunlu bir satırda durur, özellik kartları ortadaki kartı zeytin yeşili olan orman yeşili bir banda dönüşür, görsel ve metin çentikli bir fotoğrafı kum tonlu bir metin kartı ve imza tarzı bir açıklamayla eşleştirir, yeterlilikler özenle hazırlanmış bir menü listesine dönüşür, görsel kaydırıcı yeşil üzerinde yuvarlak tabaklar gösterir ve SSS adaçayı tonlu bir kartın içinde yer alır. Sage & Table Catering demo içeriği kurgusaldır.

Coaching & Consulting

Coaching & Consulting (coaching-consulting), lacivert bir üst bilgi ve giriş alanını başlığa, düğmelere ve beyaz isim etiketli bir portre kutusuna uzanan turuncudan pembeye ve mora geçen bir renk geçişiyle birleştirir. Logo bulutu lacivert girişi bir müşteri şeridi olarak sürdürür, özellik kartları renk geçişli bir alt çizgi taşır, istatistikler bölünmüş renk geçişli ve lacivert bir topluluk paneline dönüşür, hizmet kartları renkli çerçeveli rozetler ve ok düğmeleri kazanır, proje ızgarası çerçeveli adım kartları gösterir, fiyat teklifi koyu öne çıkan bir plana dönüşür ve görsel ile metin leylak bir panelde yer alır. Northbeam Coaching demo içeriği kurgusaldır.

Construction Company

Construction Company (construction-company), beyaz bir sayfa üzerinde limon eylem düğmeli yüzen koyu turkuaz bir üst bilgi çubuğu ve fotoğrafı eğik bir kesimle kenara taşan, kesik çizgili yuvarlak bir damga içeren bir giriş alanı kullanır. İstatistikler girişin üzerine binen koyu bir çubukta yer alır, üçüncü hizmet kartı koyulaşır, görsel ve metin paralelkenar fotoğraflı adaçayı tonlu bir panelde durur, ekip ızgarası dört ekip portresi gösterir, yeterlilikler numaralı koyu bir süreç paneline dönüşür ve alt bilgi doğrudan iletişim bilgileri içeren yuvarlatılmış turkuaz bir paneldir. Ironleaf Builders demo içeriği kurgusaldır.

Cookie Bakery

Cookie Bakery (cookie-bakery), krem bir sayfa, beyazdan hardal sarısına dönen kalın Lilita One yazılı yuvarlatılmış çikolata tonlu bir giriş alanı, yuvarlak bir ürün fotoğrafı ve şeker serpintisi noktaları kullanır. Özellik kartları şeftali, pembe, gök mavisi ve tereyağı sarısı arasında döner, fiyat teklifi şeftali tonlu bir indirim paneline, ürün özellikleri koyu bir günün lezzeti listesine, görselli hizmet kartları yuvarlak ürün seçkilerine dönüşür; görsel ve metin mercan rengi damgalı damla çerçeveli bir fotoğraf kullanır, yeterlilikler koyu bir hizmet şeridine dönüşür ve alt bilginin dalgalı çikolata tonlu bir kenarı vardır. Crumb & Co. Bakery demo içeriği kurgusaldır.

Coworking Space

Coworking Space (coworking-space), sıcak kırık beyaz bir sayfayı koyu yeşil paneller, şeftali vurgular ve Gloock serif başlıklarla birleştirir; giriş başlığı satırlar arasında yeşilden şeftaliye geçer ve çalışma alanı fotoğrafı yeşil açıklama kartlı büyük yuvarlatılmış bir çerçevede durur. Yeterlilikler kompakt bir özellik şeridine, özellik kartları ikonlu bir listeye dönüşür; katalog kartları ortadaki kartı yeşil olan kum tonlu bir bandı paylaşır, istatistikler yeşil bir bant olarak akar, galeri görselleri koyu açıklamalar taşır, müşteri yorumları bir portre kutusu gösterir ve potansiyel müşteri formları şeftali gönderme düğmeli yeşil form kartlarına dönüşür. Greenhall Workspace demo içeriği kurgusaldır.

Creative Studio Coffee

Creative Studio Coffee (creative-studio-coffee), tam genişlikte bir espresso fotoğrafı üzerine şeffaf bir üst bilgi ve beyazdan pirince geçen büyük harfli bir Bodoni Moda başlığı yerleştirir, ardından sütlü kahve tonlu bej sayfalara geçer. Yeterlilikler beş bölümlü bir değerler şeridine, proje ızgarası ok halkalı altı koyu portre kutusuna dönüşür; görsel ve metin yuvarlak damga açıklamalı olarak kenardan kenara uzanır, potansiyel müşteri formları koyu kavrulmuş tonlu bir üyelik bandına dönüşür ve alt bilgi açık, çizgili bir sütun düzenidir. Crema Digital demo içeriği kurgusaldır.

Duck Farm

Duck Farm (duck-farm), beyaz ve açık yeşil sayfaları koyu çiftlik yeşili paneller ve güneş sarısı vurgularla korur. Giriş fotoğrafı kenara taşar ve son satırı yeşile dönen, el yazısı açıklamalı metne doğru solar. Katalog kartları dört ürün gösterir, görsel ve metin damla biçimli fotoğraflı ve kesik çizgili doğal rozetli koyu yeşil bir panele, özellik kartları bölünmüş güven ikonlarına, istatistikler koyu bir çiftçilik paneline, yeterlilikler numaralı bir çiftlikten sofraya sürecine dönüşür ve müşteri yorumları krem üzerinde yer alır. Brookmead Farm demo içeriği kurgusaldır.

Electrical Services

Electrical Services (electrical-services), telefon bağlantılı ve yeşil teklif düğmeli beyaz bir üst bilgiyi kömür grisi giriş alanları ve hizmet kartlarıyla birleştirir. Giriş fotoğrafı kömür grisine doğru solar ve başlığın son iki satırı elektrik yeşiline döner. İstatistikler girişin üzerine binen beyaz bir kartta yer alır, görsel ve metin fotoğrafını yuvarlak bir güvenlik rozetiyle altıgen biçiminde keser, hizmet kartları yeşil ikon daireli kömür grisine döner, yeterlilikler şimşek işaretli şirketi seçme gerekçelerine dönüşür ve eylem çağrısı yeşil bir acil durum paneline dönüşür. Brightwire Electric demo içeriği kurgusaldır.

Fashion Store Lavender

Fashion Store Lavender (fashion-store-lavender), kömür grisi bir üst alanı ve bölünmüş giriş alanını kemerli leylak bir fotoğraf, Cormorant Garamond başlıkları ve sıcak fildişi sayfalarla birleştirir. Lavanta tonlu bir avantajlar şeridi görsel odaklı editoryal koleksiyonlara, sade yeni ürün kartlarına ve koyu bir moda kampanyası paneline geçiş yapar. Tema on sayfa şablonunun tamamına sahiptir, otuz ortak bölümün tamamını biçimlendirir ve mevcut yedi talep formunu destekler. Gezinme bağlantıları, üst öğeler ve Daha Fazla menüsü, bir alt sayfa seçildiğinde de dahil olmak üzere aynı lavanta fareyle üzerine gelme ve seçili durum görünümünü paylaşır. Daha Fazla ve mobil menüler, iç içe bağlantıları üst öğelerinin altında gösteren tam genişlikte satırlar kullanır. Katalog arama, yerel iç içe gezinme, klavyeyle kullanılabilen sekmeler ve görsel kaydırıcılar platform sözleşmelerini korur. Violette Edit demo içeriği kurgusaldır; koleksiyon alışveriş sepeti veya ödeme yerine talep bağlantıları kullanır.

9. Tema etkinleştirmeden yayımlamaya süreç

1. Temayı yükleyin ve etkinleştirin. Eyivo paketi doğrular, anahtarını ve sürümünü kaydeder, ayarlarını ve bileşen şemalarını uygulamada gösterir.
2. Bir sayfa türü seçin. Eyivo varsa etkin temanın eşleşen Liquid dosyasını ve bölge tanımını, yoksa theme-core içindeki yedeği kullanır.
3. İzin verilen bölümleri ekleyin. Uygulama yalnızca allowed_components'da listelenen türleri sunar. Seçilen bileşen örneğine göre metin, medya referansları ve çevirileri saklar.
4. Güvenle oluşturun. Eyivo şirket, sayfa, SEO ve gezinme verilerini hazırlar; saklanan bölge bileşenlerini ve tasarımcının yerleştirdiği doğrudan bileşenleri oluşturur. Ardından etkin temanın sayfa türünü ve yerleşimini işler.
5. Yayımlayın. Ziyaretçi HTML ve CSS çıktısını alır; veritabanı kimlik bilgilerine, dahili modellere veya uygulama koduna erişmez.

10. Doğrulama ve yaygın hatalar