Predstavitve pripomočkov
Komponente uporabniškega vmesnika
Trženje
Prikaz vsebine
Navigacija
Obvestila
Vizualni učinki
Interaktiven
Postavitev
Postavitev
Pripomoček za razdelek junakov
Nastavljivi glavni razdelki za ciljne strani. Podpira značke, naslove, podnapise, več gumbov, slike/barve ozadja, odseke polne višine in različne slogovne različice.
Osnovni junak
Preprost junak z naslovom, podnaslovom in gumbom za poziv k dejanju.
Koda
<?php echo HeroSectionWidget::widget([
'title' => 'Welcome to Our Platform',
'subtitle' => 'Build amazing applications with our powerful template.',
'primaryButton' => ['label' => 'Get Started', 'url' => ['#']],
]); ?>Demo v živo
Junak z značko in dvema gumboma
Junak z značko, primarnimi in sekundarnimi gumbi.
Koda
<?php echo HeroSectionWidget::widget([
'badge' => 'New Release',
'title' => 'Production-Ready Yii2 Template',
'subtitle' => 'Everything you need to build professional web applications.',
'primaryButton' => ['label' => 'Explore Features', 'url' => ['#']],
'secondaryButton' => ['label' => 'View Docs', 'url' => ['#']],
]); ?>Demo v živo
Nova izdaja
Predloga Yii2, pripravljena za proizvodnjo
Vse, kar potrebujete za izdelavo profesionalnih spletnih aplikacij.
Temna varianta
Junak s temno različico ozadja.
Koda
<?php echo HeroSectionWidget::widget([
'title' => 'Dark Mode Hero',
'variant' => 'dark',
'primaryButton' => ['label' => 'Learn More', 'url' => ['#']],
]); ?>Demo v živo
Polna višina s sliko ozadja
Junak v polni višini vidnega polja s sliko ozadja in prekrivanjem.
Koda
<?php echo HeroSectionWidget::widget([
'title' => 'Amazing Product',
'fullHeight' => true,
'backgroundImage' => '@web/images/hero-bg.jpg',
'overlay' => true,
'overlayOpacity' => 0.6,
'primaryButton' => ['label' => 'Get Started', 'url' => ['#']],
]); ?>Demo v živo
Možnosti konfiguracije
| Možnost | Vrsta | Privzeto | Opis |
|---|---|---|---|
badge | string | null | Besedilo značke nad naslovom |
title | string | '' | Glavno besedilo naslova |
subtitle | string | null | Podnaslov/opisno besedilo |
primaryButton | array | null | Konfiguracija primarnega gumba |
secondaryButton | array | null | Konfiguracija sekundarnega gumba |
variant | string | light | Različica: svetlo, temno, primarno, gradient |
fullHeight | bool | false | Naredi junaka polno višino vidnega polja |
backgroundImage | string | null | URL slike ozadja |
overlay | bool | false | Dodajte temno prekrivno ozadje |
centered | bool | true | Vsebino centrirajte vodoravno |