Üst Menü

Bu bölüm ne yapar

Logo, menü ve eylemlerle site navigasyon başlığı

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.

• Klasik — Defter

  Ücretsizstandard

  Cetvel hassasiyeti: ince çizgili bar, indeks numaralı menü ve satırları animasyonlu bir deftere dönüşen arama.

• Üst Çubuk

  Ücretsiztopbar

  Temiz tek satırlı başlık: logo solda, menü ortada, eylemler sağda — duyuru çubuğuyla uyumlu çalışır

  Bu stile özel: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible

• Editoryal — Birinci Sayfa

  Sayfa Düzenleyicieditorial

  Dev serif manşet; arama, kocaman serif girişli bir dizgi sayfası ve editoryal sonuç listesi açar.

  Bu stile özel: editorialTagline

• Sinematik Lüks — Prömiyer

  Sayfa Düzenleyicicinematic-luxe

  Hero üzerinde şeffaf; arama sayfayı karartır, sonuçlar film şeridi gibi yanlardan kayar.

  Bu stile özel: taglineScript, scriptFont, scrollMorphEnabled, scrollShrinkAmount

• Manyetik Hap — Çekim

  Sayfa Düzenleyicimagnetic-pill

  İmleci izleyen sıvı damla; arama damlayı girişe dönüştürür, sonuçlar manyetik cam çipler olarak yayılır.

  Bu stile özel: magneticStrength, morphingHover, pillBlur

• Cam Hap — Kapsül

  Sayfa Düzenleyicifloating-island

  Yüzen buzlu kapsül; arama kapsülün kendisini genişletir, sonuçlar altında ayrı bir cam kart olarak süzülür.

• Marke — Bant Masası

  Sayfa Düzenleyicimarquee-editorial

  Kinetik kayan bant; arama bandı durdurup şeridi ele geçirir, sonuçlar iri satırlar hâlinde dökülür.

  Bu stile özel: marqueeItems, marqueeSpeed, marqueeDirection, marqueeRepeatToFill, marqueeBgColor, marqueeTextColor, oversizedNavSize, editorialLogoPosition

• Çekmece — Vestiyer

  Sayfa Düzenleyicidrawer-nav

  Askı etiketi gibi salınan bağlantılarla iki katmanlı çekmece; arama aynı çekmeceyi numaralı fiş sonuçlarına çevirir.

  Bu stile özel: drawerTriggerLabel

• Ticaret — Peron

  Sayfa Düzenleyicicommerce-mega

  Arama öncelikli reyon masası: sonuçları istasyon panosu gibi çevrilerek gelen, kategori raylı dev arama.

  Bu stile özel: utilityLinks

• Komut Çubuğu

  Sayfa Düzenleyicicommand-bar

  Ortada komut paleti çubuğu ve sade aksiyonlarla arama odaklı başlık

• Ada

  Sayfa Düzenleyicidynamic-island

  Kaydırınca akıcı biçimde yüzen bir ada hapına dönüşen çubuk; arama adayı geniş bir kapsüle uzatır.

• Dok

  Sayfa Düzenleyicidock-nav

  Menü öğeleri imlece yaklaştıkça dock gibi büyür; arama öğesi satır içi alana açılır, sonuçlar üzerine gelince büyür.

• Bento

  Sayfa Düzenleyicibento-board

  Başlıktaki her öğe yuvarlatılmış bir bento karosu; arama karosu şeride yayılır, sonuçlar bento panosu gibi dizilir.

• Origami

  Sayfa Düzenleyiciorigami-fold

  Kağıt gibi kırışan menü etiketleri; arama, pili pili açılan katlı bir sayfa açar.

• Frost — Tül

  Sayfa Düzenleyiciaurora-mega

  Dingin buzlu cam başlık: sakin alt çizgi vurguları, kaydırınca buzlanma ve sessiz tül arama. Işıltı yok, degrade yok.

  Bu stile özel: ctaText, ctaHref, ctaStyle

• Spot — Sahne

  Sayfa Düzenleyicispotlight-mega

  İmleci izleyen spot ışıklı hap; arama sayfayı karartıp girişe tek bir ışık düşürür, sonuçlar sahne ışıkları gibi yanar.

  Bu stile özel: ctaText, ctaHref, ctaStyle

• Kadife — Program

  Sayfa Düzenleyicivelvet-overlay

  Numaralı girişli tam ekran perde menü; arama perdenin içinde yaşar, bağlantıları dev numaralı sonuçlarla değiştirir.

  Bu stile özel: ctaText, ctaHref

• Emporium — Çarşı Bankosu

  Sayfa Düzenleyiciemporium-mega

  Üç bölgeli banko, harf çevirmeli menü düğmesi; arama bankoya yayılır, zımbalı kenarlı medya kartı tepsisi açılır.

  Bu stile özel: social, showUtilityRow, announcementText, announcementHref, utilityLinks, menuToggleLabel, navCollapsedByDefault

• Maison

  Sayfa Düzenleyicimaison

  Sessiz lüks — ince çizgi üzerinde ortalanmış, harf aralıklı serif marka adı; simgesinden büyüyen satır içi arama ve ortadan büyüyen vurgu alt çizgili büyük harf menü. Kampanya panelli editoryal mega menü.

• Glasshouse

  Sayfa Düzenleyiciglasshouse

  Cam efekti — gradyan bir hero üzerinde yüzen şeffaf başlık, kaydırınca buzlu katı yüzeye döner. Buzlu mega menü, tam genişlik arama katmanı ve avatar menüsü.

• Nightdrive

  Sayfa Düzenleyicinightdrive

  Koyu tema teknoloji — tek neon vurgulu derin mürekkep, köşeli kesim, kayan neon alt çizgi, teknik özellik mega menüsü, yana açılan arama ve canlı bildirim zili.

• Botanica

  Sayfa Düzenleyicibotanica

  Yumuşak organik — sıcak nötr tonlar, yuvarlak hap menü, yaprak amblemi, kapatılabilir duyuru çubuğu, 'Yeni' rozetli yuvarlak görselli mega menü ve alttan açılan mobil çekmece.

  Bu stile özel: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible

• Volt

  Sayfa Düzenleyicivolt

  Cesur gradyan — kalın marka adı, yüzen hap biçimli menü ve logo, buton ve vurgu şeridinde indigo→macenta→amber gradyan. Tıklanan mega kutular ve animasyonlu sepet rozeti.

  Bu stile özel: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible, gradientFrom, gradientVia, gradientTo, ctaText, ctaHref, ctaStyle, searchHintChips, searchSuggestHeading, secondaryAccentColor, profileTrigger

• Aurora Island

  Sayfa Düzenleyiciaurora-island

  Yüzen ada — kaydırınca küçülüp bulanıklaşan animasyonlu aurora hero üzerinde yüzen yuvarlak cam ada; yüzen mega kart, adayı dönüştüren arama ve avatar menüsü.

  Bu stile özel: gradientFrom, gradientVia, gradientTo

• Vertica

  Sayfa Düzenleyicivertica

  Yan ray — üzerine gelince etiketleri açığa çıkaran ince sol simge rayı, açılır alt menüler ve alta sabitlenmiş profil + sepet. Mobilde üst çubuk ve sol çekmeceye dönüşür.

  Bu stile özel: railExpandOnHover

• Bazaar

  Sayfa Düzenleyicibazaar

  Pazar yeri — üst şerit ve büyük çerçeveli arama artı 'Tüm Kategoriler' bölümü olan iki katlı başlık, canlı öneriler, kategori şeridi ve iç içe akordeonlu sol departman çekmecesi.

  Bu stile özel: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible, showCategoryRibbon, searchCategorySelect, departmentsLabel, showUtilityRow, utilityLinks

• Kiosk

  Sayfa Düzenleyicikiosk

  Taze market — renk bloklu çift katlı başlık, kavisli hap arama, teslimat slotu, her çipte mega menü açan kaydırılabilir kategori çip satırı ve canlı ara toplamlı sağ sepet çekmecesi.

  Bu stile özel: showCategoryRibbon, deliverySlotText, deliverySlotHref, cartTrigger

• Buzlu Cam Panel

  Sayfa Düzenleyiciglass-shell

  Sayfanın üstünde yüzen, yuvarlak köşeli buzlu cam kart: ortada büyük logo, altında ortalanmış menü. Sabitlenmez.

• İkon Kutucuklu Mega

  Sayfa Düzenleyiciicon-tile-mega

  Kaydırınca küçülen beyaz bir çubuk: logo, hover panelleri ikon kutucuklarından oluşan (yan görsel, yan paneller, tanıtım kartı, öne çıkan, yeni ve yakında kutucukları) sola hizalı menü, satır içi arama, sepet ve dolu bir giriş butonu.

  Bu stile özel: accountButtonText, shrinkOnScroll

Ayarlar

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

Tüm stillerde ortak

• bg
• textColor
• accentColor
• backgroundOpacity
• backdropBlur
• borderBottom
• borderColor
• borderWidth
• shadow
• borderRadius
• logo
• overlayLogo
• logoSize
• logoBorderRadius
• showCompanyName
• companyName
• altLogo
• altLogoPages
• logoPosition
• companyNameStyle
• logoBackground
• logoPadding
• navLinks
• navStyle
• navFontFamily
• navFontSize
• navItemFontWeight
• navSpacing
• navAlignment
• submenuStyle
• submenuWidth
• megaMenuOpenStyle
• megaMenuAnimationDuration
• megaMenuShowOverlay
• megaMenuOverlayColor
• megaMenuOverlayOpacity
• megaMenuOverlayBlur
• megaMenuPanelStyle
• megaMenuPanelBackgroundColor
• megaMenuPanelOpacity
• megaMenuPanelBackdropBlur
• navItemBgColor
• navItemTextColor
• navItemHoverBgColor
• navItemHoverTextColor
• navItemActiveBgColor
• navItemActiveTextColor
• navItemTextTransform
• navItemLetterSpacing
• navItemBorderRadius
• showSearch
• searchPlaceholder
• searchDropdownMaxItems
• searchShowRecent
• searchIcon
• searchInProducts
• searchInCategories
• searchInBlog
• searchInServices
• searchInCampaigns
• searchVariant
• searchStyle
• searchTriggerAsInput
• searchSize
• searchIconPosition
• searchExpandable
• searchBackgroundColor
• searchBorderColor
• searchTextColor
• searchIconColor
• searchDropdownWidth
• searchShowCategories
• searchDropdownBackgroundColor
• searchDropdownOpacity
• searchDropdownBackdropBlur
• searchResultItemTextColor
• searchResultItemHoverBgColor
• searchResultItemHoverTextColor
• searchResultItemPriceColor
• searchResultItemBorderColor
• showCart
• cartIcon
• showWishlist
• wishlistIcon
• favoriteBadgeDisplay
• showNotifications
• iconSize
• iconStyle
• buttonStyle
• buttonShape
• badgeStyle
• actionsSpacing
• iconColor
• iconHoverColor
• actionButtonBgColor
• actionButtonHoverBgColor
• badgeColor
• badgeTextColor
• cartIconColor
• wishlistIconColor
• showUser
• profileIcon
• profileInitials
• guestIconStyle
• profileIconColor
• profileIconBackgroundColor
• showProfileAccountInfo
• showProfileOrders
• showProfileDownloads
• showProfileFavourites
• showProfileAddresses
• showProfileReviews
• showProfileAppointments
• showProfileReservations
• showProfileApplications
• showProfileNotifications
• showProfileContactMessages
• showThemeToggle
• showMobileProfileMenu
• profileDropdownBackgroundColor
• profileDropdownTextColor
• profileDropdownHoverBackgroundColor
• profileDropdownHoverTextColor
• sticky
• stickyOffset
• transparentUntilScroll
• scrollTriggerPixels
• transparentUntilScrollPages
• height
• paddingX
• overlayTextColor
• overlayLogoTextColor
• overlayNavItemBgColor
• overlayNavItemTextColor
• overlayNavItemHoverBgColor
• overlayNavItemHoverTextColor
• overlayNavItemActiveBgColor
• overlayNavItemActiveTextColor
• overlayBorderColor
• overlayIconColor
• overlayIconHoverColor
• overlayActionButtonBgColor
• overlayActionButtonHoverBgColor
• overlayBadgeColor
• overlayBadgeTextColor
• overlaySearchIconColor
• overlayCartIconColor
• overlayWishlistIconColor
• overlayProfileIconColor
• overlayProfileIconBackgroundColor
• overlaySearchTextColor
• overlaySearchBorderColor
• mobileBreakpoint
• mobileMenuStyle
• mobileDrawerSide
• mobileShowSearch
• mobileShowLogo
• hamburgerPosition
• hamburgerStyle
• mobileDrawerTone
• mobileDrawerBackgroundColor
• mobileDrawerTextColor
• mobileDrawerMutedTextColor
• mobileDrawerBorderColor
• mobileDrawerAccentColor
• mobileDrawerTitleMode
• mobileDrawerTitle
• mobileDrawerLinkSize
• contentMaxWidth
• logoFocal
• overlayLogoFocal
• altLogoFocal