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.

Import Divi

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.

Ruani ndryshimet në divi

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.

Ndërtimi i këmbës

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".

Ndërtimi nga e para

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.

Seksion 3 rreshtash

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
Konfigurimi i lartësisë së seksionit Divi 1

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
Aksesi në cilësimet e linjës

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
Rregullo seksionin divi

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;
Shtoni një kod css

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
Pozicioni i këmbës

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.

Zgjedhja e menusë Wordpress

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.

Moduli i shtypjes së menusë së zgjedhjes

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.

Shto një logo

Hiq sfondin

Pastaj hiqni sfondin e menusë së paracaktuar në mënyrë që ajo të jetë transparente.

Fshi sfondin

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
Ndryshoni ngjyrën e shkronjave

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.

Divi i tekstit të modulit përzgjedhës

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.

Data e përzgjedhjes

Në dritaren e shfaqjes së datës aktuale, azhurnoni sa vijon:

  • para:
  • 01Copyright ©
  • pas:
  • 01| Tous Droits Reservés
  • Formati i datës : zakon
  • Formati i datës së personalizuar : 20 vjet
Përshtat datën

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
Moduli i tekstit të zgjedhjes së shkronjave Divi

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.

Shtoni modulin e monitorimit të rrjetit social

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)
Divon i policisë së personalizuesit

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
bar divi fiks

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.