Pevné lišty päty môžu byť pohodlným spôsobom, ako si uchovať dôležité informácie webové stránky v popredí, keď používateľ interaguje s obsahom vašej stránky na akomkoľvek zariadení.
Rovnako ako v prípade formátu Divi, pruh päty zvyčajne existuje ako statický prvok v dolnej časti stránky za hlavným obsahom päty. Zahŕňajú veci ako text autorských práv a ikony sociálnych médií.
Ak však neskryjete obsah pruhu päty v dolnej časti stránky, môžete vytvoriť vlastný pruh päty, ktorý sa bude pohybovať v dolnej časti obrazovky, kým sa používateľ posúva.
V tomto výučbe navrhneme plne prispôsobenú pevnú lištu päty pomocou generátora tém Divi. To sa vám bude hodiť, aby ste tieto malé, ale dôležité časti obsahu mali neustále na očiach.
Možný výsledok
Tu je prehľad pevnej päty, ktorú budeme navrhovať.
Ako pridať šablónu s pevným pätom na stiahnutie na svoje stránky Divi
UPOZORNENIE!: Pridanie tohto modelu nahradí šablóna webovej stránky predvolene (ak ho máte) na svojej stránke Divi. Odporúčame vám ho pridať na testovaciu stránku, aby ste na živej stránke nič nepokazili.
Ak chcete sami importovať šablónu panela s pevnou pätou webové stránky, rozbaľte stiahnutý súbor zip, aby ste získali prístup k súboru JSON.
Potom choďte na dashboard WordPress a choďte na Divi> Theme Builder.
Potom kliknite na ikonu prenosnosti v pravom hornom rohu stránky.
V okne prenosnosti vyberte súbor JSON, ktorý ste práve rozbalili, a vyberte možnosť „Prevziať zálohu pred importom“ pre prípad, že by ste predtým mali niečo v šablóna webovej stránky predvolenú hodnotu, ktorú ste nechceli prepísať.
Potom kliknite na tlačidlo Importovať.
Nakoniec uložte zmeny do generátora motívov a zobrazte živú stránku, aby ste videli pevný pätu.
Teraz k tutoriálu, dobre?
Časť 1: Pridanie globálnej päty
Tvorca tém Divi vám umožňuje nahradiť predvolenú pätu novou aktualizáciou šablóna webovej stránky Default.
Ak chcete vytvoriť globálnu pätu, prejdite na hlavný panel WordPress a prejdite na ikonu Divi> Tvorca tém. Potom kliknite na priestor „Pridať globálnu pätu“ v rámci predvolenej šablóny webovej stránky.
Potom z rozbaľovacieho zoznamu vyberte možnosť „Vytvoriť vlastnú pätu“.
Týmto sa nasadí editor rozloženia modelu, kde budete okamžite vyzvaní k trom možnostiam, ako chcete začať stavať. Vyberte možnosť „Budovať od nuly“.
Časť 2: Vytvorenie pevnej päty
Teraz, keď upravujeme z editora rozloženia šablón, môžeme začať navrhovať pevnú lištu päty. Po dokončení budete mať pevnú lištu päty s tromi stĺpcami, ktoré sú pripravené na obsah.
Pridajte k riadku rozloženie s tromi stĺpcami
Najskôr do riadku pridajte rozloženie troch stĺpcov.
Výška prierezu
Po pridaní troch stĺpcov dáme sekcii definovanú výšku. To je dôležité pre vytvorenie priestoru v dolnej časti stránky, kde bude nakoniec pevná linka končiť. Odstránime tiež predvolené horné a spodné polstrovanie.
Ak chcete nastaviť výšku a výplň, otvorte nastavenia sekcie a aktualizujte nasledujúce informácie:
- Výška: 85px
- Výplň: vysoká 0px, nízka 0px
Nastavenie linky
Teraz, keď je naša sekcia pripravená, sme pripravení prispôsobiť riadok tak, aby slúžil ako pevná lišta päty. Otvorte nastavenia riadkov a aktualizujte nasledujúce položky:
kontext
- Farba pozadia: # 1a1e36
Veľkosť a rozstup
- Šírka odkvapov: 1
- Šírka: 100%
- Maximálna šírka: 100%
- Výplň: 0px hore, 0px dolu, 3% vľavo, 3% vpravo
Vlastné CSS
Aj keď je riadok pevný, chceme, aby sa výška riadku zhodovala s výškou nadradenej časti, aby riadok správne obsahoval priestor v spodnej časti stránky. A chceme sa ubezpečiť, že obsah riadku zostane zvisle zarovnaný. Za týmto účelom pridajte do hlavného prvku riadku nasledujúce vlastné CSS:
kancelária
výška: zdediť! dôležité; displej: flex; zarovnané položky: stred;
Telefón
výška: zdediť! dôležité; zobrazenie: blok;
Pevné polohovanie
Aby bola čiara pevná tak, aby sa vznášala v spodnej časti obrazovky, musíme jej dať pevnú polohu v dolnej strednej polohe nasledovne:
- Poloha: pevná
- Poloha: dolný stred
Časť 2: Vytvorenie obsahu pevnej päty
V tomto okamihu máme pevnú lištu päty pripravenú na obsah. Do každého z troch stĺpcov môžeme pridať akýkoľvek požadovaný obsah. Ale keďže sa jedná o „lištu“ päty, ktorá je obmedzená na výšku 85 pixelov, musíme obmedziť množstvo obsahu. Z tohto dôvodu do stĺpca 4 pridáme malú ponuku s dynamickým logom a 1 položky ponuky. V stĺpci 2 pridáme text chránený autorskými právami s dynamickým aktuálnym rokom. V stĺpci 3 pridáme tri ikony sledovania sociálnych médií.
Pridajte ponuku do stĺpca 1
V stĺpci 1 pridajte modul ponuky.
Vyberte ponuku
Potom vyberte jednu z ponúk, ktoré ste už vytvorili webové stránky. Uistite sa, že počet položiek ponuky je 4 alebo menej.
Pridajte logo stránky ako dynamický obsah
Do ponuky loga dynamicky pridáme logo webu. Podržte kurzor nad oblasťou náhľadu loga a kliknite na ikonu „Použiť dynamický obsah“. Potom z rozbaľovacieho zoznamu vyberte logo webu.
Odstrániť pozadie
Potom odstráňte predvolené pozadie ponuky, aby bolo priehľadné.
menu design
V tomto okamihu sme pripravení pridať do ponuky nejaký dizajn. V prípade tohto dizajnu to ponecháme jednoduché a malé. Aktualizujte nasledujúce parametre návrhu:
- Ponuka písiem: Overpass
- Farba textu ponuky: # b59c61
- Obrázok sépia: 100%
- Maximálna výška loga: 50 px
Pridajte text autorských práv do stĺpca 2
Po nastavení ponuky prejdite do stĺpca 2 a pridajte text autorských práv.
Pridajte textový modul
Pridajte nový textový modul do stĺpca 2.
Dynamicky pridajte aktuálny dátum s textom pred a za text
Tu budeme kreatívni s dynamickým obsahom, aby sme zobrazili aktuálny rok v texte chránenom autorskými právami. To zabezpečí, že sa rok bude automaticky aktualizovať po celú dobu životnosti stránky.
Kliknite na ikonu „Použiť dynamický obsah“ a v zozname vyberte možnosť „Aktuálny dátum“.
V rozbaľovacom okne Aktuálny dátum aktualizujte nasledujúce údaje:
- pred:
- 01
Copyright ©
- after:
- 01
| Tous Droits Reservés
- date Format : custom
- Vlastný formát dátumu : 20 rokov
Formátovanie textu
Aktualizujte text a okraje nasledovne:
- Písmo textu: Overpass
- Farba textu: # b59c61
- Zarovnanie textu: stred
- Okraj (iba telefón): 10 pixelov hore, 10 pixelov dole
Toto podporuje text chránený autorskými právami.
Do stĺpca 3 pridajte ikony sledovania sociálnych médií
V stĺpci 3 pridajte modul sledovania sociálnych médií.
Pridajte sociálne siete
Na karte Obsah pridajte na web potrebné sociálne siete. Pre tento dizajn používame tri z nich.
Nastavenia sledovania sociálnych médií
Ďalej aktualizujte nastavenia dizajnu pre všetky ikony sledovania sociálnych médií takto:
- Zarovnanie modulu: priame (stolný počítač a tablet), stred (telefón)
- Farba ikony: # 1a1e36
- Použite vlastnú veľkosť ikony: ÁNO
- Veľkosť písma ikony: 16px (stolný počítač a tablet), 14px (telefón)
Aktualizujte nastavenia sociálnych médií
Ak chcete aktualizovať vzhľad ikony individuálnej sociálnej siete, otvorte nastavenia pre prvú sieť a aktualizujte nasledujúce položky:
- Farba pozadia: #ffffff
- Výplň: 8 pixelov napravo, 8 pixelov naľavo
- Zaoblené rohy: 8px
Rozšírte nastavenia sociálnych médií na všetkých
Potom otvorte ponuku ďalších nastavení pre prvú sieť a vyberte možnosť „ Rozšíriť štýly položiek "v zozname. V rozbaľovacom okne Rozšíriť štýly vyberte možnosť Rozšíriť štýly v časti „ Tento stĺpec „A kliknite predĺžiť .
Tým sa rozšíri návrh na ďalšie ikony v stĺpci.
záverečné myšlienky
Pridanie pevnej lišty päty má v niektorých prípadoch zmysel. Výška lišty je dostatočne malá, aby nerozptyľovala mobil alebo nezaberala príliš veľa miesta v mobile. A dáva vám možnosť pridávať dôležité výzvy na akciu pre lepšie konverzie a plynulejší používateľský zážitok.
Pre tento dizajn je priestor v dolnej časti stránky vytvorený nastavením pevnej výšky pre oddiel a následným povolením, aby pevná čiara zdedila výšku oddielu (aj keď je pevná).
Ostatné zdroje
Tu je zoznam zdroje ďalšie, ktoré vám môžu pomôcť vytvoriť dizajn vašej webovej stránky s Divi.
- Ako vytvoriť vlastnú prihlasovaciu stránku na Divi
- Ako pridať navigačný modul s plnou šírkou na Divi
- Ako vytvoriť posuvník na celej obrazovke na zariadení Divi
- Ako pridať kruhový pult na Divi
