Shiritat e fiksuar të futbollit mund të jenë një mënyrë e përshtatshme për të mbajtur informacione të rëndësishme në tuaj Site Web në plan të parë kur përdoruesi ndërvepron me përmbajtjen e faqes tuaj në çdo pajisje.
Ashtu si me Divi, një shirit i këmbës zakonisht ekziston si një element statik në fund të faqes pas përmbajtjes së faqes kryesore. Ato përfshijnë gjëra të tilla si teksti për të drejtat e autorit dhe ikonat e mediave sociale.
Por, nëse nuk e fshehni përmbajtjen e shiritit të fundin në fund të faqes, mund të krijoni një shirit të poshtme të futbollit që noton në fund të ekranit ndërsa përdoruesi lëviz.
Në këtë udhëzim, ne do të projektojmë një shirit të fiksuar plotësisht të personalizuar në fund të faqes duke përdorur gjeneratorin e temës Divi. Kjo do t'ju vijë në ndihmë që t'i mbani në vëmendje ato pjesë të vogla, por të rëndësishme të përmbajtjes, gjatë gjithë kohës.
Rezultati i mundshëm
Këtu është një përmbledhje e shiritit të këmbëve fikse që do të hartojmë.
Si të shtoni modelin e shiritit të këmbëve fikse për ta shkarkuar në faqen tuaj Divi
PARALAJMËRIM!: Shtimi i këtij modeli do të zëvendësojë shabllonin e faqes në internet si parazgjedhje (nëse keni një të tillë) në faqen tuaj Divi. Ne sugjerojmë ta shtoni atë në një sajt testimi në mënyrë që të mos ngatërroni asgjë në një sajt të drejtpërdrejtë.
Për të importuar vetë shabllonin e shiritit të këmbës fikse Site Web, hiqni skedarin zip të shkarkimit për të hyrë në skedarin JSON.
Pastaj shkoni në panelin e WordPress dhe shkoni te Divi> Theme Builder.
Pastaj klikoni në ikonën e transportueshmërisë në të djathtë të faqes.
Në dritaren e transportueshmërisë, zgjidhni skedarin JSON që sapo keni zhbllokuar dhe zgjidhni opsionin "Shkarko kopje rezervë përpara importimit", vetëm në rast se më parë keni pasur diçka në shabllonin e faqes në internet parazgjedhje që ju nuk dëshironi të anashkaloni.
Pastaj klikoni në butonin Import.
Më në fund, ruani ndryshimet në gjeneratorin e temës dhe shfaqni një faqe live për të parë shiritin e këmbëve fikse.
Tani në tutorial, në rregull?
Pjesa 1: Shtimi i një Footer Global
Ndërtuesi i temave të Divi ju lejon të zëvendësoni fundin e paracaktuar me një të ri duke përditësuar shabllonin e faqes në internet Default.
Për të krijuar një botim global, shkoni në panelin e WordPress dhe shkoni te Divi> Theme Builder. Pastaj klikoni në hapësirën "Shto Global Footer" brenda Modelit të Uebfaqes së Paracaktuar.
Pastaj zgjidhni opsionin "Ndërto një fund të personalizuar" nga lista zbritëse.
Kjo do të vendosë Redaktorin e Layout Model, ku menjëherë do t'ju kërkohet me tre zgjedhje për mënyrën se si doni të filloni ndërtimin. Zgjidhni "Ndërto nga gërvishtja".
Pjesa 2: Krijimi i shiritit fiks të këmbës
Tani që po redaktojmë nga redaktori i faqosjes së shabllonit, mund të fillojmë të hartojmë shiritin e fiksuar të faqes kryesore. Sapo të keni mbaruar, do të keni një shirit të fiksuar në fund të faqes me tre kolona që janë gati për përmbajtje.
Shtoni një plan urbanistik me tre kolona në rresht
Së pari, shtoni një paraqitje me tre kolona në rresht.
Lartësia e seksionit
Pasi të shtohen tre kolonat, le t'i japim një lartësi të përcaktuar seksionit. Kjo është e rëndësishme për të krijuar hapësirë në fund të faqes ku përfundimisht do të përfundojë linja fikse. Ne gjithashtu do të heqim mbushjen e paracaktuar të sipërme dhe të poshtme.
Për të vendosur lartësinë dhe mbushjen, hapni cilësimet e seksionit dhe azhurnoni si vijon:
- Lartësia: 85px
- Mbushje: 0px e lartë, e ulët 0px
Cilësimet e linjës
Tani që seksioni ynë është gati, ne jemi gati të rregullojmë rreshtin për të shërbyer si një shirit i fiksuar i fiksuar. Hapni cilësimet e rreshtit, pastaj azhurnoni sa vijon:
Contexte
- Ngjyra e sfondit: # 1a1e36
Madhësia dhe ndarja
- Gjerësia e zorrës së trashë: 1
- Gjerësia: 100%
- Gjerësia maksimale: 100%
- Mbushje: 0px lart, 0px poshtë, 3% majtas, 3% djathtas
Custom CSS
Megjithëse rreshti është fiks, ne duam që lartësia e rreshtit të përputhet me lartësinë e seksionit prind në mënyrë që hapësira në fund të faqes të përmbajë siç duhet rreshtin. Dhe, duam të sigurohemi që përmbajtja e rreshtit të qëndrojë e rreshtuar vertikalisht. Për ta bërë këtë, shtoni CSS të mëposhtme të personalizuar në elementin kryesor të rreshtit:
zyrë
lartësia: trashëgimi! e rëndësishme; ekrani: fleks; align-artikujt: qendra;
Telefon
lartësia: trashëgimi! e rëndësishme; shfaqja: bllok;
Pozicionimi i fiksuar
Për ta bërë vijën të fiksuar në mënyrë që të notojë në fund të ekranit, duhet t'i japim një pozicion fiks në vendndodhjen e poshtme qendrore si më poshtë:
- Pozicioni: i fiksuar
- Vendndodhja: qendra e ulët
Pjesa 2: Krijimi i përmbajtjes së shiritit të këmbëve fikse
Në këtë pikë kemi një shirit të fiksuar të fiksuar gati për përmbajtje. Ne mund të shtojmë çdo përmbajtje që duam në secilën nga tre kolonat. Por meqenëse kjo është një "shirit" fundor që është e kufizuar në 85 piksel në lartësi, ne duhet të kufizojmë sasinë e përmbajtjes. Për këtë arsye ne do të shtojmë një menu të vogël me një logo dinamike dhe 4 artikuj të menusë në kolonën 1. Në kolonën 2 do të shtojmë tekstin e të drejtës së kopjimit me një vit dinamik aktual. Në kolonën 3, ne do të shtojmë tre ikona të ndjekjes së mediave sociale.
Shtoni një menu në kolonën 1
Në kolonën 1, shtoni një modul menuje.
Zgjidhni menunë
Pastaj zgjidhni një nga menytë që keni krijuar tashmë në tuaj Site Web. Sigurohuni që të mbani artikujt e menusë në 4 ose më pak.
Shtoni logon e faqes si përmbajtje dinamike
Për menunë e logos, ne do të shtojmë dinamikisht logon e faqes. Klikoni në ikonën "Përdorni përmbajtje dinamike" ndërsa rri pezull mbi zonën e vrojtimit të logos. Pastaj zgjidhni Logon e Sajtit nga lista zbritëse.
Hiq sfondin
Pastaj hiqni sfondin e menusë së paracaktuar në mënyrë që ajo të jetë transparente.
Menuja e projektimit
Në këtë pikë, ne jemi gati të shtojmë disa dizajne në menu. Për këtë dizajn, ne do ta mbajmë të thjeshtë dhe të vogël. Përditësoni parametrat e mëposhtëm të dizajnit:
- Menyja e shkronjave: Mbikalimi
- Ngjyra e tekstit të menusë: # b59c61
- Imazhi i Sepisë: 100%
- Lartësia maksimale e logos: 50px
Shtoni tekstin e të drejtës së autorit në kolonën 2
Pasi të jetë krijuar menuja, shkoni te kolona 2 për të shtuar tekstin e të drejtës së autorit.
Shto një modul teksti
Shtoni një modul të ri teksti në kolonën 2.
Shtoni dinamikisht datën aktuale me tekstin para dhe pas
Këtu do të bëhemi krijues me përmbajtje dinamike për të shfaqur vitin aktual në tekstin e të drejtës së autorit. Kjo do të sigurojë që viti do të azhurnohet automatikisht për gjithë jetën e faqes.
Për ta bërë këtë, klikoni në ikonën "Përdor përmbajtjen dinamike" dhe zgjidhni "Data aktuale" nga lista.
Në dritaren e shfaqjes së datës aktuale, azhurnoni sa vijon:
- para:
- 01
Copyright ©
- pas:
- 01
| Tous Droits Reservés
- Formati i datës : zakon
- Formati i datës së personalizuar : 20 vjet
Formatimi i tekstit
Azhurnoni modelin dhe diferencën e tekstit si më poshtë:
- Shkronja e tekstit: Mbikalimi
- Ngjyra e tekstit: # b59c61
- Shtrirja e tekstit: qendra
- Margjina (vetëm në telefon): 10 piksele në krye, 10 piksele në fund
Ky mbështet tekstin e të drejtës së autorit.
Shtoni ikona të ndjekjes së mediave sociale në kolonën 3
Në kolonën 3, shtoni një modul të përcjelljes së mediave sociale.
Shtoni rrjetet sociale
Në skedën Përmbajtja, shtoni rrjetet e nevojshme shoqërore në sit. Për këtë dizajn, ne përdorim tre prej tyre.
Cilësimet e përcjelljes së mediave sociale
Tjetra, azhurnoni cilësimet e projektimit për të gjitha ikonat e ndjekjes së mediave sociale si më poshtë:
- Rreshtimi i modulit: drejt (desktop dhe tablet), qendër (telefon)
- Ngjyra e ikonës: # 1a1e36
- Përdorni madhësinë e ikonës së personalizuar: PO
- Madhësia e shkronjës së ikonës: 16px (desktop dhe tablet), 14px (telefoni)
Përditësoni cilësimet e mediave sociale
Për të azhurnuar modelin e ikonës individuale të rrjetit social, hapni cilësimet për rrjetin e parë dhe azhurnoni sa vijon:
- Ngjyra e sfondit: #ffffff
- Padding: 8 pixel në të djathtë, 8 piksele në të majtë
- Qoshet e rrumbullakosura: 8px
Zgjatni cilësimet e mediave sociale për të gjithë
Pastaj hapni menunë e cilësimeve shtesë për rrjetin e parë dhe zgjidhni " Zgjasni stilet e artikullit "në listë. Në dritaren pop-up Extend Styles, zgjidhni të Extend Styles in " Kjo kolonë "Dhe kliko shpreh .
Kjo do të zgjasë dizajnin në pjesën tjetër të ikonave në kolonë.
Mendimet e fundit
Shtimi i një shiriti fiks në fund të faqes ka kuptim në disa raste. Lartësia e shiritit është mjaft e vogël për të mos shpërqendruar ose zënë shumë hapësirë në celular. Dhe kjo ju jep mundësinë të shtoni CTA të rëndësishme për shndërrime më të mira dhe një përvojë më të butë të përdoruesit.
Për këtë dizajn, hapësira në fund të faqes krijohet duke vendosur një lartësi fikse për seksionin dhe më pas duke lejuar që linja fikse të trashëgojë lartësinë e seksionit (megjithëse është fikse).
Burimet e Tjera
Këtu është një listë e RESSOURCES shtesë që mund t'ju ndihmojnë të krijoni në hartimin e faqes tuaj të internetit me Divi.