Fiksne trake podnožja mogu biti prikladan način za čuvanje važnih informacija na vašem web stranica u prvom planu kada korisnik komunicira sa sadržajem vaše stranice na bilo kojem uređaju.
Kao i kod Divi, traka podnožja obično postoji kao statički element na samom dnu stranice nakon glavnog sadržaja podnožja. Uključuju stvari poput teksta o autorskim pravima i ikona na društvenim mrežama.
Ali, ako ne sakrijete sadržaj trake podnožja na dnu stranice, možete stvoriti prilagođenu traku podnožja koja pluta na dnu zaslona dok se korisnik pomiče.
U ovom uputstvu dizajnirat ćemo potpuno personaliziranu traku s fiksnim podnožjem pomoću generatora tema Divi. To će vam pomoći da te male, ali važne dijelove sadržaja stalno držite na vidiku.
Mogući ishod
Evo pregleda fiksne trake podnožja koju ćemo dizajnirati.
Kako dodati predložak trake fiksnog podnožja za preuzimanje na svojoj Divi web stranici
UPOZORENJE!: Dodavanje ovog modela zamijenit će predložak web stranice prema zadanim postavkama (ako ga imate) na vašoj Divi stranici. Predlažemo da ga dodate na testnu stranicu kako ne biste ništa zabrljali na živoj stranici.
Za vlastiti uvoz fiksnog predloška trake podnožja web stranica, raspakirajte zip datoteku za preuzimanje da biste pristupili JSON datoteci.
Zatim idite na WordPress nadzornu ploču i idite na Divi> Graditelj tema.
Zatim kliknite ikonu prenosivosti u gornjem desnom dijelu stranice.
U prozoru prenosivosti odaberite JSON datoteku koju ste upravo raspakirali i odaberite opciju "Preuzmi sigurnosnu kopiju prije uvoza", samo u slučaju da ste prethodno imali nešto u predložak web stranice zadane postavke koje niste htjeli nadjačati.
Zatim kliknite na gumb Uvezi.
Na kraju, spremite promjene u generatoru tema i prikažite stranicu uživo da biste vidjeli fiksnu traku podnožja.
A sad na tutorial, u redu?
1. dio: Dodavanje globalnog podnožja
Divijev alat za izradu tema omogućuje vam da zadano podnožje zamijenite novim ažuriranjem predložak web stranice Zadana.
Da biste stvorili globalno podnožje, idite na nadzornu ploču WordPressa i idite na Divi> Graditelj tema. Zatim kliknite prostor "Dodaj globalno podnožje" unutar zadanog predloška web stranice.
Zatim s padajućeg popisa odaberite opciju "Izradi prilagođeno podnožje".
Ovo će rasporediti Uređivač izgleda modela gdje će se odmah zatražiti tri izbora kako želite započeti izgradnju. Odaberite "Izgradi iz ogrebotine".
Dio 2: Izrada fiksne trake podnožja
Sada kada uređujemo iz uređivača izgleda predloška, možemo početi dizajnirati traku fiksnog podnožja. Kada završite, imat ćete fiksnu traku podnožja s tri stupca koja su spremna za sadržaj.
Retku dodajte raspored tri stupca
Prvo dodajte retku raspored s tri stupca.
Visina odjeljka
Kad se dodaju tri stupca, dajmo definiranu visinu odjeljku. Ovo je važno za stvaranje prostora na dnu stranice na kojem će fiksni telefon na kraju završiti. Također ćemo ukloniti zadane gornje i donje uloške.
Da biste postavili visinu i obloge, otvorite postavke odjeljka i ažurirajte sljedeće:
- Visina: 85px
- Padding: 0px visoko, 0px low
Postavke linije
Sad kad je naš odjeljak spreman, spremni smo prilagoditi redak da služi kao fiksna traka podnožja. Otvorite postavke retka, a zatim ažurirajte sljedeće:
kontekst
- Boja pozadine: # 1a1e36
Veličina i razmak
- Širina oluka: 1
- Širina: 100%
- Maks. Širina: 100%
- Padding: 0px gore, 0px dolje, 3% lijevo, 3% desno
Prilagođeni CSS
Iako je redak fiksan, želimo da visina retka odgovara visini nadređenog odjeljka tako da prostor na dnu stranice pravilno sadrži red. I, želimo biti sigurni da sadržaj retka ostane okomito poravnat. Da biste to učinili, dodajte sljedeći prilagođeni CSS glavnom elementu retka:
Biro
visina: naslijediti! važno; prikaz: fleksibilno; poravnati predmete: centar;
Telefon
visina: naslijediti! važno; prikaz: blok;
Fiksno pozicioniranje
Kako bi linija bila fiksirana tako da pluta na dnu zaslona, moramo joj dati fiksni položaj na donjoj središnjoj lokaciji kako slijedi:
- Pozicija: fiksno
- Lokacija: donji centar
Dio 2: Izrada sadržaja fiksne trake podnožja
U ovom trenutku imamo traku podnožja fiksne pozicije spremnu za sadržaj. U svaki od tri stupca možemo dodati bilo koji sadržaj koji želimo. No budući da je ovo "traka" podnožja koja je ograničena na 85 piksela visine, moramo ograničiti količinu sadržaja. Iz tog ćemo razloga u stupac 4. dodati mali izbornik s dinamičkim logotipom i 1 stavke izbornika. U stupac 2 ćemo dodati tekst autorskih prava s dinamičnom tekućom godinom. U stupac 3 dodati ćemo tri ikone za praćenje društvenih mreža.
Dodajte izbornik u stupac 1
U stupcu 1 dodajte modul izbornika.
Odaberite izbornik
Zatim odaberite jedan od izbornika koje ste već izradili na svom web stranica. Pazite da stavke izbornika budu 4 ili manje.
Dodajte logotip web lokacije kao dinamični sadržaj
Za izbornik logotipa dinamički ćemo dodati logotip web lokacije. Kliknite na ikonu "Koristi dinamički sadržaj" dok lebdite iznad područja s pregledom logotipa. Zatim s padajućeg popisa odaberite Logotip web mjesta.
Uklonite pozadinu
Zatim uklonite zadanu pozadinu izbornika tako da bude prozirna.
Izbornik dizajn
U ovom smo trenutku spremni dodati neki dizajn izborniku. Za ovaj dizajn držat ćemo ga jednostavnim i malim. Ažurirajte sljedeće parametre dizajna:
- Izbornik fontova: Overpass
- Boja teksta izbornika: # b59c61
- Slika sepije: 100%
- Maksimalna visina logotipa: 50px
Dodajte tekst autorskih prava u 2. stupac
Nakon što je izbornik na mjestu, idite na stupac 2 da biste dodali tekst o autorskim pravima.
Dodajte tekstualni modul
Dodajte novi tekstualni modul u stupac 2.
Dinamično dodajte trenutni datum prije i nakon teksta
Ovdje ćemo postati kreativni s dinamičkim sadržajem za prikaz trenutne godine u tekstu o autorskim pravima. To će osigurati da se godina automatski ažurira za život web stranice.
Da biste to učinili, kliknite ikonu "Upotrijebi dinamički sadržaj" i s popisa odaberite "Trenutni datum".
U skočnom prozoru Trenutni datum ažurirajte sljedeće:
- prije:
- 01
Copyright ©
- nakon:
- 01
| Tous Droits Reservés
- Format datuma : običaj
- Prilagođeni format datuma : 20 godina
Formatiranje teksta
Ažurirajte dizajn teksta i marginu na sljedeći način:
- Font teksta: Overpass
- Boja teksta: # b59c61
- Usklađivanje teksta: središte
- Margin (samo telefon): 10 piksela na vrhu, 10 piksela na dnu
To podržava tekst autorskih prava.
Dodajte ikone za praćenje društvenih medija u 3. stupac
U stupcu 3 dodajte modul za praćenje društvenih medija.
Dodajte društvene mreže
Na kartici Sadržaj dodajte potrebne društvene mreže na web mjesto. Za ovaj dizajn koristimo ih tri.
Postavke praćenja društvenih medija
Zatim ažurirajte dizajnerske postavke za sve ikone za praćenje društvenih medija na sljedeći način:
- Poravnavanje modula: ravno (stolno računalo i tablet), središte (telefon)
- Boja ikone: # 1a1e36
- Koristite prilagođenu veličinu ikone: DA
- Veličina fonta ikone: 16 piksela (stolno računalo i tablet), 14 piksela (telefon)
Ažurirajte postavke društvenih medija
Da biste ažurirali dizajn ikone pojedinačne društvene mreže, otvorite postavke prve mreže i ažurirajte sljedeće:
- Boja pozadine: #ffffff
- Padding: 8 piksela s desne strane, 8 piksela s lijeve strane
- Zaobljeni uglovi: 8px
Proširite postavke društvenih medija svima
Zatim otvorite izbornik dodatnih postavki za prvu mrežu i odaberite " Proširite stilove predmeta "na popisu. U skočnom prozoru Proširi stilove odaberite Proširi stilove u " Ovaj stupac "I kliknite produžiti .
Ovo će proširiti dizajn na ostale ikone u stupcu.
Završne misli
Dodavanje trake fiksnog podnožja u nekim slučajevima ima smisla. Visina šipke je dovoljno mala da ne odvrati pažnju ili zauzme previše prostora na mobitelu. I daje vam mogućnost dodavanja važnih CTA-ova radi boljih konverzija i ujednačenijeg korisničkog iskustva.
Za ovaj dizajn prostor na dnu stranice stvara se postavljanjem fiksne visine za odjeljak, a zatim dopušta fiksnoj liniji da naslijedi visinu odjeljka (iako je fiksna).
Ostali izvori
Evo popisa sredstva dodatne koji vam mogu pomoći u izradi dizajna vaše web stranice s Divi.
- Kako stvoriti prilagođenu stranicu za prijavu na Divi
- Kako dodati navigacijski modul pune širine na Divi
- Kako stvoriti klizač preko cijelog zaslona na Divi
- Kako dodati kružni brojač na Divi
