Faste sidefodsbjælker kan være en praktisk måde at opbevare vigtige oplysninger på Websted i forgrunden, når brugeren interagerer med indholdet på din side på en hvilken som helst enhed.
Som med Divi eksisterer en sidefodsbjælke normalt som et statisk element nederst på siden efter hovedfodindholdet. De inkluderer ting som ophavsretstekst og sociale medieikoner.
Men hvis du ikke skjuler indholdet af sidefodslinjen nederst på siden, kan du oprette en brugerdefineret sidefodslinje, der flyder i bunden af skærmen, når brugeren ruller.
I denne vejledning skal vi designe en fuldt tilpasset fast sidefodsbjælke ved hjælp af Divi-temegeneratoren. Dette vil være nyttigt for dig at holde de små, men vigtige indholdsstykker til syne til enhver tid.
Muligt resultat
Her er en oversigt over den faste sidefodsstang, som vi skal designe.
Sådan tilføjes en fast sidefodsskabelon, der kan downloades på dit Divi-sted
ADVARSEL!: Tilføjelse af denne model vil erstatte hjemmeside skabelon som standard (hvis du har en) på din Divi-side. Vi foreslår, at du tilføjer det til en testside, så du ikke roder noget ud på et live-websted.
For at importere den faste sidefodsskabelon på egen hånd Websted, udpak download-zip-filen for at få adgang til JSON-filen.
Gå derefter til WordPress-dashboardet, og gå til Divi> Theme Builder.
Klik derefter på bærbarhedsikonet øverst til højre på siden.
I portabilitetsvinduet skal du vælge den JSON-fil, du lige har pakket ud, og vælge "Download backup før import", bare hvis du tidligere har haft noget i hjemmeside skabelon standard, som du ikke ønskede at tilsidesætte.
Klik derefter på knappen Importer.
Til sidst skal du gemme ændringerne i temageneratoren og vise en live side for at se den faste sidefodsbjælke.
Nu videre til vejledningen, okay?
Del 1: Tilføjelse af en global sidefod
Divis temabygger giver dig mulighed for at erstatte standardsidefoden med en ny ved at opdatere hjemmeside skabelon Standard.
For at oprette en global sidefod skal du gå til WordPress-dashboardet og gå til Divi> Theme Builder. Klik derefter på "Tilføj global sidefod" plads inde i standardwebsite skabelon.
Vælg derefter indstillingen "Byg en tilpasset sidefod" fra rullelisten.
Dette vil implementere Model Layout Editor, hvor du straks bliver bedt om de tre valg til, hvordan du vil begynde at bygge. Vælg "Byg fra bunden".
Del 2: Oprettelse af den faste sidefodsstang
Nu hvor vi redigerer fra skabelonlayouteditoren, kan vi begynde at designe den faste sidefodsbjælke. Når du er færdig, har du en fast sidefodsbjælke med tre kolonner, der er indholdsklare.
Føj et tre-kolonnes layout til linjen
Først skal du tilføje et tre kolonnelayout til rækken.
Sektionshøjde
Når de tre kolonner er tilføjet, lad os give en defineret højde til sektionen. Dette er vigtigt for at skabe plads nederst på siden, hvor fastnet til sidst ender. Vi fjerner også standardpolstringen øverst og nederst.
For at indstille højden og polstring skal du åbne sektionsindstillingerne og opdatere følgende:
- Højde: 85px
- Polstring: 0px høj, 0px lav
Linieindstillinger
Nu hvor vores sektion er klar, er vi klar til at tilpasse rækken til at fungere som en fast sidefodsbjælke. Åbn rækkeindstillingerne, og opdater derefter følgende:
contexte
- Baggrundsfarve: # 1a1e36
Størrelse og afstand
- Tagrendebredde: 1
- Bredde: 100%
- Maks bredde: 100%
- Polstring: 0px op, 0px ned, 3% tilbage, 3% højre
Tilpasset CSS
Selvom rækken er fast, ønsker vi, at rækkehøjden skal matche højden på den overordnede sektion, så mellemrummet nederst på siden indeholder rækken korrekt. Og vi vil sikre os, at indholdet af rækken forbliver lodret justeret. For at gøre dette skal du tilføje følgende brugerdefinerede CSS til hovedelementet i rækken:
kontor
højde: arve! vigtigt; display: flex; justere elementer: center;
Telefon
højde: arve! vigtigt; display: blok;
Fast positionering
For at få linjen fast, så den flyder i bunden af skærmen, skal vi give den en fast position nederst i midten som følger:
- Position: fast
- Placering: nedre centrum
Del 2: Oprettelse af indholdet af den faste sidefodsbjælke
På dette tidspunkt har vi en fast sidefodsbjælke klar til indhold. Vi kan tilføje ethvert indhold, vi ønsker, til hver af de tre kolonner. Men da dette er en sidefod "bar", der er begrænset til 85 pixels i højden, er vi nødt til at begrænse mængden af indhold. Af denne grund vil vi tilføje en lille menu med et dynamisk logo og 4 menupunkter i kolonne 1. I kolonne 2 tilføjer vi ophavsretstekst med et dynamisk indeværende år. I kolonne 3 tilføjer vi tre sporingsikoner på sociale medier.
Føj en menu til kolonne 1
I kolonne 1 skal du tilføje et menumodul.
Vælg menuen
Vælg derefter en af de menuer, som du allerede har oprettet på din Websted. Sørg for at holde menupunkter på 4 eller mindre.
Tilføj webstedets logo som dynamisk indhold
For logo-menuen tilføjer vi dynamisk webstedets logo. Klik på ikonet "Brug dynamisk indhold", mens du holder markøren over logoets eksempelområde. Vælg derefter Site logo fra rullelisten.
Fjern baggrund
Fjern derefter standardmenubaggrunden, så den er gennemsigtig.
Menu design
På dette tidspunkt er vi klar til at tilføje noget design til menuen. Til dette design vil vi holde det enkelt og lille. Opdater følgende designparametre:
- Skrifttype-menu: Overpass
- Menutekstfarve: # b59c61
- Sepia-billede: 100%
- Maksimal logohøjde: 50px
Føj copyright-tekst til kolonne 2
Når menuen er på plads, skal du gå til kolonne 2 for at tilføje copyright-teksten.
Tilføj et tekstmodul
Føj et nyt tekstmodul til kolonne 2.
Tilføj dynamisk den aktuelle dato med før og efter tekst
Her skal vi blive kreative med dynamisk indhold for at vise det aktuelle år i copyright-tekst. Dette vil sikre, at året opdateres automatisk i hele sitets levetid.
For at gøre dette skal du klikke på ikonet "Brug dynamisk indhold" og vælge "Aktuel dato" på listen.
Opdater følgende i pop op-vinduet Aktuel dato:
- før:
- 01
Copyright ©
- efter:
- 01
| Tous Droits Reservés
- datoformat : brugerdefineret
- Tilpasset datoformat : 20 år
Formatering af teksten
Opdater tekstdesign og margin som følger:
- Tekst font: Overpass
- Tekstfarve: # b59c61
- Justering af teksten: center
- Margin (kun telefon): 10 pixels øverst, 10 pixels i bunden
Dette understøtter copyright-tekst.
Føj sporingsikoner til sociale medier til kolonne 3
I kolonne 3 skal du tilføje et sporingsmodul på sociale medier.
Tilføj sociale netværk
På fanen Indhold skal du tilføje de nødvendige sociale netværk til webstedet. Til dette design bruger vi tre af dem.
Indstillinger for sporing af sociale medier
Opdater derefter designindstillingerne for alle sporingsikoner på sociale medier som følger:
- Moduljustering: lige (desktop og tablet), center (telefon)
- Ikonfarve: # 1a1e36
- Brug brugerdefineret ikonstørrelse: JA
- Ikon skrifttypestørrelse: 16 pixel (desktop og tablet), 14 pixel (telefon)
Opdater indstillinger for sociale medier
For at opdatere designet på det individuelle sociale netværksikon skal du åbne indstillingerne for det første netværk og opdatere følgende:
- Baggrundsfarve: #ffffff
- Polstring: 8 pixels til højre, 8 pixels til venstre
- Rundede hjørner: 8px
Udvid sociale medieindstillinger til alle
Åbn derefter menuen med yderligere indstillinger for det første netværk, og vælg " Udvid elementstilarter "på listen. I pop op-vinduet Udvid stilarter skal du vælge at Udvide stilarter i " Denne kolonne "Og klik forlænge .
Dette vil udvide designet til resten af ikoner i kolonnen.
endelige tanker
Tilføjelse af en fast sidefodslinje giver mening i nogle tilfælde. Barens højde er lille nok til ikke at distrahere eller tage for meget plads på mobilen. Og det giver dig mulighed for at tilføje vigtige CTA'er for bedre konverteringer og en jævnere brugeroplevelse.
Til dette design oprettes plads nederst på siden ved at indstille en fast højde for sektionen og derefter lade den faste linje arve sektionens højde (selvom den er fast).
Andre ressourcer
Her er en liste over ressourcer yderligere, der kan hjælpe dig med at skabe i designet af din hjemmeside med Divi.
- Sådan opretter du en brugerdefineret login-side på Divi
- Sådan tilføjes et navigationsmodul i fuld bredde på Divi
- Sådan opretter du en skyder på fuld skærm på Divi
- Sådan tilføjes en cirkulær tæller på Divi
