Barele fixe de subsol pot fi o modalitate convenabilă de a păstra informații importante pe dvs site-ul web în prim-plan atunci când utilizatorul interacționează cu conținutul paginii dvs. de pe orice dispozitiv.
Ca și în cazul Divi, o bară de subsol există de obicei ca element static în partea de jos a paginii după conținutul subsolului principal. Acestea includ lucruri precum textul drepturilor de autor și pictogramele de pe rețelele sociale.
Dar, dacă nu ascundeți conținutul barei de subsol din partea de jos a paginii, puteți crea o bară de subsol personalizată care să plutească în partea de jos a ecranului în timp ce utilizatorul derulează.
În acest tutorial, vom proiecta o bară de subsol fixă complet personalizată utilizând generatorul de teme Divi. Acest lucru vă va fi util pentru a păstra acele bucăți mici, dar importante de conținut la vedere în orice moment.
Rezultat posibil
Iată o prezentare generală a barei de subsol fix pe care urmează să o proiectăm.
Cum să adăugați șablonul fix al barei de subsol pentru a fi descărcat pe site-ul Divi
AVERTISMENT!: Adăugarea acestui model va înlocui șablon de site implicit (dacă aveți unul) pe site-ul dvs. Divi. Vă sugerăm să îl adăugați la un site de testare, astfel încât să nu încurcați nimic pe un site live.
Pentru a importa singur șablonul barei de subsol fix site-ul web, dezarhivați fișierul zip descărcat pentru a accesa fișierul JSON.
Apoi accesați tabloul de bord WordPress și accesați Divi> Theme Builder.
Apoi faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii.
În fereastra de portabilitate, alegeți fișierul JSON pe care tocmai l-ați dezarhivat și selectați opțiunea „Descărcați backup înainte de import”, doar în cazul în care ați avut anterior ceva în șablon de site implicit pe care nu ați vrut să o înlocuiți.
Apoi faceți clic pe butonul Import.
În cele din urmă, salvați modificările generatorului de temă și afișați o pagină live pentru a vedea bara de subsol fixă.
Acum trecem la tutorial, bine?
Partea 1: Adăugarea unui subsol global
Generatorul de teme Divi vă permite să înlocuiți subsolul implicit cu unul nou prin actualizarea șablon de site Implicit.
Pentru a crea un subsol global, accesați tabloul de bord WordPress și accesați Divi> Theme Builder. Apoi faceți clic pe spațiul „Adăugați subsol global” din șablonul de site implicit.
Apoi selectați opțiunea „Construiți un subsol personalizat” din lista derulantă.
Aceasta va implementa Editorul de aspect al modelului, unde vi se va solicita imediat cele trei opțiuni pentru modul în care doriți să începeți construirea. Selectați „Construiți din zgârieturi”.
Partea 2: Crearea barei de subsol fixe
Acum că edităm din editorul de aspect al șablonului, putem începe să proiectăm bara de subsol fixă. După ce ați terminat, veți avea o bară de subsol fixă cu trei coloane care sunt pregătite pentru conținut.
Adăugați un aspect de trei coloane la linie
Mai întâi, adăugați un rând cu trei coloane.
Înălțimea secțiunii
Odată adăugate cele trei coloane, să dăm o înălțime definită secțiunii. Acest lucru este important pentru a crea spațiu în partea de jos a paginii, unde linia fixă se va termina în cele din urmă. De asemenea, vom elimina căptușeala implicită de sus și de jos.
Pentru a seta înălțimea și umplutura, deschideți setările secțiunii și actualizați următoarele:
- Înălțime: 85px
- Garnitură: 0px înaltă, 0px mică
Setări de linie
Acum că secțiunea noastră este gata, suntem gata să personalizăm rândul pentru a servi ca o bară de subsol fixă. Deschideți setările rândului, apoi actualizați următoarele:
context
- Culoare fundal: # 1a1e36
Mărime și distanțare
- Lățimea jgheabului: 1
- Lățime: 100%
- Lățime maximă: 100%
- Căptușire: 0px în sus, 0px în jos, 3% stânga, 3% dreapta
CSS personalizate
Deși rândul este fix, dorim ca înălțimea rândului să se potrivească cu înălțimea secțiunii părinte, astfel încât spațiul din partea de jos a paginii să conțină corect rândul. Și vrem să ne asigurăm că conținutul rândului rămâne aliniat vertical. Pentru aceasta, adăugați următorul CSS personalizat la elementul principal al rândului:
Birou
înălțime: moștenire! important; afișare: flex; aliniere elemente: centru;
Telefon
inaltime: mostenire! important; afisare: bloc;
Poziționare fixă
Pentru a fixa linia astfel încât să plutească în partea de jos a ecranului, trebuie să îi oferim o poziție fixă în locația centrală de jos, după cum urmează:
- Poziție: fix
- Locație: centru inferior
Partea 2: Crearea conținutului barei de subsol fixe
În acest moment, avem o bară de subsol cu poziție fixă pregătită pentru conținut. Putem adăuga orice conținut dorim la fiecare dintre cele trei coloane. Dar, deoarece aceasta este o "bară" de subsol limitată la 85 de pixeli în înălțime, trebuie să limităm cantitatea de conținut. Din acest motiv vom adăuga un mic meniu cu o siglă dinamică și 4 elemente de meniu în coloana 1. În coloana 2 vom adăuga text cu drepturi de autor cu un an curent dinamic. În coloana 3, vom adăuga trei pictograme de urmărire pe rețelele sociale.
Adăugați un meniu la coloana 1
În coloana 1, adăugați un modul de meniu.
Selectați meniul
Apoi selectați unul dintre meniurile pe care le-ați creat deja pe dvs site-ul web. Asigurați-vă că păstrați elementele din meniu la 4 sau mai puțin.
Adăugați logo-ul site-ului ca conținut dinamic
Pentru meniul cu sigle, vom adăuga dinamic sigla site-ului. Faceți clic pe pictograma „Utilizați conținut dinamic” în timp ce plasați cursorul peste zona de previzualizare a siglei. Apoi selectați logo-ul site-ului din lista derulantă.
Eliminați fundalul
Apoi eliminați fundalul meniului implicit, astfel încât să fie transparent.
Proiectare meniu
În acest moment, suntem gata să adăugăm un design în meniu. Pentru acest design, îl vom păstra simplu și mic. Actualizați următorii parametri de proiectare:
- Meniu font: pasaj
- Culoarea textului meniului: # b59c61
- Imagine sepia: 100%
- Înălțimea maximă a logo-ului: 50px
Adăugați text de copyright la coloana 2
După ce meniul este pe loc, accesați coloana 2 pentru a adăuga textul de copyright.
Adăugați un modul de text
Adăugați un nou modul text la coloana 2.
Adăugați dinamic data curentă cu text înainte și după text
Aici vom fi creativi cu conținut dinamic pentru a afișa anul curent în text cu drepturi de autor. Acest lucru va asigura că anul va fi actualizat automat pe toată durata site-ului.
Pentru a face acest lucru, faceți clic pe pictograma „Utilizați conținut dinamic” și selectați „Data curentă” din listă.
În fereastra pop-up Data curentă, actualizați următoarele:
- înainte de:
- 01
Copyright ©
- după:
- 01
| Tous Droits Reservés
- Formatul datei : obicei
- Formatul de date personalizat : 20 ani
Formatarea textului
Actualizați designul și marja textului după cum urmează:
- Font text: depasire
- Culoarea textului: # b59c61
- Alinierea textului: centru
- Marja (doar pentru telefon): 10 pixeli în partea de sus, 10 pixeli în partea de jos
Aceasta acceptă textul de copyright.
Adăugați pictograme de urmărire social media la coloana 3
În coloana 3, adăugați un modul de urmărire social media.
Adăugați rețele sociale
În fila Conținut, adăugați rețelele sociale necesare pe site. Pentru acest design, folosim trei dintre ele.
Setări de urmărire social media
Apoi, actualizați setările de proiectare pentru toate pictogramele de urmărire a rețelelor de socializare după cum urmează:
- Alinierea modulului: drept (desktop și tabletă), centru (telefon)
- Culoare pictogramă: # 1a1e36
- Utilizați dimensiunea pictogramei personalizate: DA
- Dimensiunea fontului pictogramei: 16 px (desktop și tabletă), 14 px (telefon)
Actualizați setările pentru social media
Pentru a actualiza designul pictogramei individuale a rețelei sociale, deschideți setările pentru prima rețea și actualizați următoarele:
- Culoare fundal: #ffffff
- Padding: 8 pixeli în dreapta, 8 pixeli în stânga
- Colțuri rotunjite: 8px
Extindeți setările de social media pentru toată lumea
Apoi, deschideți meniul de setări suplimentare pentru prima rețea și selectați " Extindeți stilurile articolelor " În listă. În fereastra pop-up Extinde Stiluri, alege să Extinde Stiluri în „ Această coloană „Și faceți clic extinde .
Aceasta va extinde designul la restul pictogramelor din coloană.
Ultimele gânduri
Adăugarea unei bare de subsol fix are sens în unele cazuri. Înălțimea barei este suficient de mică pentru a nu distrage atenția sau a ocupa prea mult spațiu pe mobil. Și vă oferă posibilitatea de a adăuga CTA-uri importante pentru conversii mai bune și o experiență mai ușoară a utilizatorului.
Pentru acest design, spațiul din partea de jos a paginii este creat prin setarea unei înălțimi fixe pentru secțiune și apoi permițând liniei fixe să moștenească înălțimea secțiunii (deși este fixă).
Alte resurse
Iată o listă cu Resurse suplimentar care vă poate ajuta să creați în designul site-ului dvs. web cu Divi.
- Cum se creează o pagină de conectare personalizată pe Divi
- Cum se adaugă un modul de navigație cu lățime completă pe Divi
- Cum se creează un glisor pe ecran complet pe Divi
- Cum se adaugă un contor circular pe Divi
