Organik Hero

Bu bölüm ne yapar

Blob ile kesilmiş görseller, dalga ayraçları ve yumuşak el çizimi eğrilerle organik hero bölümü — kahve, fırın, kozmetik ve organik ürün mağazaları için ideal.

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.

• Organik Çerçeve

  Ücretsizblob-frame

  Solda metin, pill buton ve dairesel özellik rozetleri; sağda organik blob ile kesilmiş, üzerine binen yüzen rozetli görsel

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobStyle, blobTint, showFeatures, features, featureIconColor, floatingChipText, floatingChipBg, headingColor, textColor, accentColor, badgeBg, badgeColor

• Dalga Kesim

  Ücretsizwave-crest

  Ortalanmış metnin altında, üst kenarı süpüren organik bir dalga ile kesilen tam genişlikte görsel bandı

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, showWaveDivider, waveColor, waveHeight, headingColor, textColor, accentColor, badgeBg, badgeColor

• Katmanlı Bloblar

  Sayfa Düzenleyicilayered-blobs

  İki yarı saydam, tema tonlu organik blob üzerinde yüzen ortalanmış metin; görsel asimetrik köşeli bir blob içinde

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobTint, blobTint2, showDecor, decorColor, headingColor, textColor, accentColor, badgeBg, badgeColor

• Organik Panel

  Sayfa Düzenleyiciorganic-panel

  Büyük yuvarlak köşeli renkli panel: bir tarafta metin, buton ve özellik rozetleri, diğer tarafta organik eğri ile kesilmiş görsel

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, panelColor, imageSide, showFeatures, features, featureIconColor, headingColor, textColor, accentColor, badgeBg, badgeColor

• Yaprak Bölünme

  Sayfa Düzenleyicileaf-split

  Görselin yaprak şeklinde (iki karşıt köşe keskin) kesildiği bölünmüş hero; görsel tarafı kontrolü ve organik noktalı süsler

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, imageSide, showDecor, decorColor, headingColor, textColor, accentColor, badgeBg, badgeColor

• Organik Kemer

  Sayfa Düzenleyiciorganic-arch

  Bir tarafta kemer biçimli görsel portalı ve arkasında tonlu kemer yankısı, süslemeler; diğer tarafta metin ve iki buton

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobTint, showDecor, decorColor, imageSide, headingColor, textColor, accentColor, badgeBg, badgeColor

• Organik Kart

  Sayfa Düzenleyicioverlay-card

  Tam ekran görsel üzerinde, metni ve butonu taşıyan büyük yuvarlak köşeli organik kart ve altında isteğe bağlı dalga ayracı

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, panelColor, imageSide, showWaveDivider, waveColor, waveHeight, headingColor, textColor, accentColor, badgeBg, badgeColor

• İkili Blob

  Sayfa Düzenleyiciblob-duo

  İki görselli organik kolaj — büyük blob ile kesilmiş fotoğraf, köşesine binen küçük ikinci fotoğraf ve yüzen rozet; metin karşıda

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, image2, image2Alt, blobStyle, blobTint, floatingChipText, floatingChipBg, imageSide, headingColor, textColor, accentColor, badgeBg, badgeColor

• Kavisli Bölünme

  Sayfa Düzenleyicicurve-split

  Uçtan uca iki tonlu bölünme — metin ve butonları taşıyan düz renkli yarı, iç kenarı organik S-kavisiyle tam ekran fotoğrafa akıyor

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, panelColor, imageSide, showDecor, decorColor, headingColor, textColor, accentColor, badgeBg, badgeColor

• Yırtık Kağıt

  Sayfa Düzenleyicitorn-band

  Üst ve alt kenarları yırtık kağıt tırtıklı tam genişlikte görsel bandı; metin ve özellik rozetleri ton perdesi üzerinde ortada

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, scrimColor, showFeatures, features, featureIconColor, headingColor, textColor, accentColor, badgeBg, badgeColor

• Yörünge Baloncukları

  Sayfa Düzenleyiciorbit-bubbles

  Ortalanmış metin ve buton; çevresinde kesik çizgili yörünge halkası, üzerinde küçük yuvarlak fotoğraf baloncukları ve tonlu bir rozet baloncuğu, süslemeler

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, image2, image2Alt, blobTint, showDecor, decorColor, floatingChipText, floatingChipBg, headingColor, textColor, accentColor, badgeBg, badgeColor

• Üçlü Kemer

  Sayfa Düzenleyiciarch-trio

  Ortalanmış metnin altında üç kemer ritmi — iki fotoğraf kemeri ve rozet etiketi taşıyan tonlu bir kemer; altında iki buton

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, image2, image2Alt, blobTint, floatingChipText, floatingChipBg, headingColor, textColor, accentColor, badgeBg, badgeColor

• Kurdele Şerit

  Sayfa Düzenleyiciribbon-sash

  Blob ile kesilmiş görselin arkasından geçen çapraz organik kurdele; metin ve iki buton karşı tarafta

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobStyle, ribbonColor, imageSide, headingColor, textColor, accentColor, badgeBg, badgeColor

• Organik Pencere

  Sayfa Düzenleyiciportal-window

  Tam ekran fotoğrafın önünde, içine organik blob şeklinde delik açılmış düz renkli alan — ürün pencereden görünür; metin renkli alanda

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, panelColor, imageSide, showDecor, decorColor, headingColor, textColor, accentColor, badgeBg, badgeColor

• Organik Bilet

  Sayfa Düzenleyicistamp-ticket

  Kenarları oyuk delikli dikey pul/bilet paneli — görsel bandı, kesik çizgili perforasyon ayracı, ardından metin ve özellik rozetleri

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, panelColor, showFeatures, features, featureIconColor, headingColor, textColor, accentColor, badgeBg, badgeColor

• Çapraz Kurdeleler

  Sayfa Düzenleyiciribbon-cross

  İki organik kurdele ters çaprazlarda süpürerek yumuşak bir X oluşturur; ortadaki blob görselin arkasından geçer, metin ve iki buton üstte

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobStyle, ribbonColor, ribbonColor2, headingColor, textColor, accentColor, badgeBg, badgeColor

• Kurdele Sargısı

  Sayfa Düzenleyiciribbon-wrap

  Görseli saran bir kurdele — arkasından geçip alt üçte birinde önden yeniden çıkar, bağlanmış kuşak gibi; metin karşı tarafta

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobStyle, ribbonColor, imageSide, headingColor, textColor, accentColor, badgeBg, badgeColor

• Başlık Kuşağı

  Sayfa Düzenleyiciribbon-banner

  Başlık kalın eğik dalgalı bir kurdelenin üzerinde durur; rozet üstte, alt başlık ve buton altta, yanında blob ile kesilmiş görsel

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobStyle, ribbonColor, imageSide, headingColor, textColor, accentColor, badgeBg, badgeColor

• Kurdele Dalgaları

  Sayfa Düzenleyiciribbon-stack

  Faz kaydırmalı dalgalı kurdele bantları alt hero'yu doldurur; ortalanmış metin ve geniş blob ile kesilmiş görsel önde

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, blobStyle, ribbonColor, ribbonColor2, headingColor, textColor, accentColor, badgeBg, badgeColor

• Kurdele Şeridi

  Sayfa Düzenleyiciribbon-strip

  Tam ekran fotoğrafı çaprazlamasına kesen kalın bir kurdele; rozet, başlık ve butonu ton perdesi üzerinde taşır

  Bu stile özel: badge, title, subtitle, buttons, image, imageAlt, scrimColor, ribbonColor, headingColor, textColor, accentColor, badgeBg, badgeColor

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