Hero Banner

Bu bölüm ne yapar

Medya destekli tam genişlik hero bölümü

Nereye konulur

• Bir sayfada en fazla 1 kez kullanılabilir.
• Bu bölüm her pakette vardır, ayrıca eklenti gerekmez.

Stiller

Aynı bölümün farklı görünümleri. Stili sonradan da değiştirebilirsiniz; içeriğiniz olduğu gibi kalır.

Her bölümün ilk 2 stili her mağazada açıktır. Sonrakiler Sayfa Düzenleyici eklentisiyle açılır — stil stil değil, hepsi birden.

• Ortalanmış Esnek

  Ücretsizcentered

  Metin ve görselin yatay hizalamayı takip ettiği esnek hero

  Bu stile özel: badge, title, subtitle, buttons, media

• Bölünmüş Düzen

  Ücretsizsplit

  Bir tarafta metin, diğerinde tam boy görsel. Tarafları değiştirmek için Ters Düzen'i kullanın.

  Bu stile özel: badge, title, subtitle, buttons, media, reverseLayout, imageRatio

• Video Arka Plan

  Sayfa Düzenleyicivideo-background

  Üzerine metin bindirilmiş tam ekran video

  Bu stile özel: badge, title, subtitle, buttons, media, overlayOpacity

• Mozaik Bölünmüş

  Sayfa Düzenleyicimodern-dark

  Metin sütunu ve 2×2 görsel mozaiği ile bölünmüş hero, hafif animasyonlu gradyan vurgularıyla

  Bu stile özel: badge, title, subtitle, buttons, galleryImages, showFloatingOrbs

• Medya Galerisi

  Sayfa Düzenleyicimedia-gallery

  Görsel/video gösteren medya galeri ızgarasıyla hero

  Bu stile özel: badge, title, subtitle, buttons, mediaItems, galleryColumns

• Görsel Bağlantılar

  Sayfa Düzenleyiciimage-links

  Sayfalara bağlanan 6 tıklanabilir görsel kartıyla hero

  Bu stile özel: badge, title, subtitle, buttons, imageLinks

• Kartlı Hero

  Sayfa Düzenleyicicards-hero

  Öne çıkan ürün/kategori kartlarıyla hero

  Bu stile özel: badge, title, subtitle, buttons, imageLinks

• Görsel Galerisi

  Sayfa Düzenleyiciimage-gallery

  Çoklu görsellerle temiz açık temalı galeri

  Bu stile özel: badge, title, subtitle, buttons, galleryImages, galleryColumns

• Hercules Güç

  Sayfa Düzenleyicihercules-power

  Güçlü görsel etkili enerji dolu hero tasarımı

  Bu stile özel: badge, title, subtitle, buttons, media

• Dikey Videolar

  Sayfa Düzenleyiciportrait-videos

  Metin içeriğinin altında büyük 9:16 dikey videolar. Reels/TikTok tarzı vitrin.

  Bu stile özel: badge, title, subtitle, buttons, portraitVideos, portraitVideoLayout

• Neşe Blobu

  Sayfa Düzenleyicijoy-blob

  Yüzen ürün görselleriyle hareketli renkli blob, istatistik şeridi ve çift buton

  Bu stile özel: badge, title, subtitle, buttons, blobColor1, blobColor2, blobColor3, blobColor4, enableMorph, enableFloat, floatingItems, stats

• Sinematik Lüks

  Sayfa Düzenleyicicinematic-luxe

  Ken Burns arka planı, Pinyon Script vurgusu, maske-silme başlık açılışı ve renk-çevirme kremsi CTA'lar ile karanlık sinematik hero

  Bu stile özel: media, overlayOpacity, scriptAccent, badge, title, subtitle, buttons, kenBurnsEnabled

• Editoryal

  Sayfa Düzenleyicieditorial-marquee

  Asimetrik editoryal düzen — büyük başlık, hizalamaya uyan görsel montajı ve altta kayan marka kelimeleri

  Bu stile özel: badge, title, subtitle, buttons, galleryImages, marqueeItems, marqueeSpeed

• Bento Manyetik

  Sayfa Düzenleyicibento-magnetic

  Sol başlık + sağ modüler bento kart ızgarası; kademeli kaydırma açılışı ve manyetik CTA

  Bu stile özel: badge, title, subtitle, buttons, bentoCards, cursorBlobEnabled, stats

• İstatistik Şeridi

  Sayfa Düzenleyicistat-band

  Ortalanmış başlık ve entegre temel metrik şeridi

  Bu stile özel: badge, title, subtitle, buttons, media, stats

• Bölünmüş Vitrin

  Sayfa Düzenleyicisplit-showcase

  Rozet, vurgulu kelimeli başlık, alt başlık ve iki buton büyük görselin yanında; altında metrik satırı ve küçük görsel şeridi

  Bu stile özel: badge, title, subtitle, buttons, media, reverseLayout, imageRatio, stats, stripImages

• Çapraz Bölünme

  Sayfa Düzenleyicidiagonal-split

  Solda metin, sağda çapraz kesimli tam görsel

  Bu stile özel: badge, title, subtitle, buttons, media

• Işıltılı Sahne

  Sayfa Düzenleyicispotlight-glow

  Koyu zemin, radyal ışık ve ışıltılı halkalı görsel

  Bu stile özel: badge, title, subtitle, buttons, media

• Polaroid Yığını

  Sayfa Düzenleyicipolaroid-stack

  Solda metin, sağda eğik polaroid foto kartları

  Bu stile özel: badge, title, subtitle, buttons, media, galleryImages

• Mega Tipografi

  Sayfa Düzenleyicimega-type

  Dev, tam genişlik başlık ve altında geniş görsel bandı

  Bu stile özel: badge, title, subtitle, buttons, media

• Tam Ekran Kapak

  Sayfa Düzenleyicifullscreen-cover

  Neredeyse tam ekran kapak görsel, sinematik degrade, sol altta dev başlık

  Bu stile özel: badge, title, subtitle, buttons, media

• Kaydırma Yakınlaşma

  Sayfa Düzenleyiciscroll-zoom

  Kaydırmayla büyüyen sahne: iç görsel tam ekrana açılır, başlık yerine oturur

  Bu stile özel: badge, title, subtitle, buttons, media, overlayOpacity

• Dizin Açılışı

  Sayfa Düzenleyiciindex-reveal

  Numaralı koleksiyon dizini; satıra gelince arka plan görseli belirir

  Bu stile özel: badge, title, subtitle, imageLinks, overlayOpacity

• Sinematik İstatistik

  Sayfa Düzenleyicicinematic-stats

  Tam ekran yaşam görseli, sol koyu perde, hap-etiket üst başlık, büyük başlık, çift buton ve mini istatistik şeridi

  Bu stile özel: badge, title, subtitle, buttons, media, overlayDirection, overlayOpacity, statColor, stats

• Stüdyo Bölünme

  Sayfa Düzenleyicistudio-split

  Solda dev başlık, sağda yuvarlak köşeli büyük foto kart; cam rozet, yüzen ürün kartı ve metrik şeridi

  Bu stile özel: badge, title, subtitle, buttons, media, imageRadius, imageShadow, imageAspect, overlayBadgeText, emphasisStyle, nameFont, metaStats, showChip, chipImage, chipTitle, chipPrice

• Arama Odaklı

  Sayfa Düzenleyicisearch-spotlight

  Arama öncelikli hero: gerçek ürün aramasına bağlı geniş bir arama alanı, altında popüler arama rozetleri ve isteğe bağlı arka plan görseli. Kataloğu geniş mağazalar için.

  Bu stile özel: badge, title, subtitle, searchPlaceholder, searchButtonText, suggestionsLabel, suggestions, searchWidth, overlayOpacity, buttons, media

Ayarlar

Bir bölümü seçtiğinizde sağdaki Bölüm Ayarları panelinde görebileceğiniz alanlar.

Tüm stillerde ortak

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height