Hur man skapar en fast sidfot med Divi

Fasta sidfotsfält kan vara ett bekvämt sätt att hålla viktig information på din webbplats i förgrunden när användaren interagerar med innehållet på din sida på valfri enhet. 

Som med Divi existerar vanligtvis en sidfot som ett statiskt element längst ner på sidan efter huvudfotsinnehållet. De innehåller saker som upphovsrättstext och ikoner för sociala medier. 

Men om du inte gömmer innehållet i sidfoten längst ner på sidan kan du skapa en anpassad sidfot som flyter längst ner på skärmen när användaren rullar.

I den här handledningen ska vi utforma en helt personlig fixerad sidfot med hjälp av Divi-temageneratorn. Detta kommer att vara till nytta för dig att hålla de små men viktiga innehållsdelarna i sikte hela tiden.

Möjligt resultat

Här är en översikt över den fasta sidfoten som vi ska utforma.

Så lägger du till den fasta sidfotsmallen för att ladda ner på din Divi-webbplats

VARNING!: Lägga till denna modell kommer att ersätta webbplats mall som standard (om du har en) på din Divi-webbplats. Vi föreslår att du lägger till den på en testsajt så att du inte förstör något på en livesajt.

För att importera mallen för fast sidfotsfält på egen hand webbplats, packa upp den nedladdade zip-filen för att komma åt JSON-filen.

Gå sedan till WordPress-instrumentpanelen och gå till Divi> Theme Builder.

Klicka sedan på bärbarhetsikonen längst upp till höger på sidan.

I portabilitetsfönstret väljer du JSON-filen du precis packade upp och väljer alternativet "Ladda ner säkerhetskopia före import", ifall du tidigare hade något i webbplats mall standard som du inte ville åsidosätta.

Klicka sedan på knappen Importera.

Spara slutligen ändringarna i temageneratorn och visa en live-sida för att se den fasta sidfoten.

Nu vidare till handledningen, okej?

Del 1: Lägga till en global sidfot

Divis temabyggare låter dig ersätta standardsidfoten med en ny genom att uppdatera webbplats mall Standard.

För att skapa en global sidfot, gå till WordPress-instrumentpanelen och gå till Divi> Theme Builder. Klicka sedan på "Lägg till global sidfot" i standardwebbplatsmallen.

Välj sedan alternativet "Skapa en anpassad sidfot" från rullgardinsmenyn.

Detta kommer att distribuera Model Layout Editor där du omedelbart kommer att uppmanas med de tre alternativen för hur du vill börja bygga. Välj "Bygg från repor".

Del 2: Skapa en fast sidfot

Nu när vi redigerar från malllayoutredigeraren kan vi börja designa den fasta sidfoten. När du är klar kommer du att ha en fast sidfot med tre kolumner som är redo för innehåll.

Lägg till en tre kolumnlayout på raden

Lägg först till en layout med tre kolumner i raden.

Sektionens höjd

När de tre kolumnerna har lagts till, låt oss ge en definierad höjd till avsnittet. Detta är viktigt för att skapa utrymme längst ner på sidan där fasta nätet slutligen slutar. Vi tar också bort standarddynan för topp och botten.

För att ställa in höjd och stoppning öppnar du avsnittinställningarna och uppdaterar följande:

• Höjd: 85px
• Polstring: 0px hög, 0px låg

Linjeinställningar

Nu när vår sektion är klar är vi redo att anpassa raden så att den fungerar som en fast sidfot. Öppna radinställningarna och uppdatera sedan följande:

sammanhang

• Bakgrundsfärg: # 1a1e36

Storlek och avstånd

• Rännbredd: 1
• Bredd: 100%
• Max bredd: 100%
• Polstring: 0 st upp, 0 st ned, 3% vänster, 3% höger

Anpassad CSS

Även om raden är fixad vill vi att radhöjden ska matcha höjden på den överordnade sektionen så att utrymmet längst ner på sidan korrekt innehåller raden. Och vi vill se till att innehållet i raden förblir vertikalt inriktat. För att göra detta, lägg till följande anpassade CSS till huvudelementet på raden:

office

höjd: ärva! viktigt; display: flex; justera objekt: mitt;

Telefon

höjd: ärva! viktigt; display: block;

Fast positionering

För att göra linjen fixerad så att den flyter längst ner på skärmen måste vi ge den en fast position längst ner i mitten enligt följande:

• Position: fast
• Plats: nedre centrum

Del 2: Skapa innehållet i den fasta sidfoten

Vid den här tiden har vi en sidfot med fast position redo för innehåll. Vi kan lägga till vilket innehåll vi vill i var och en av de tre kolumnerna. Men eftersom detta är en sidfot "bar" som är begränsad till 85 pixlar i höjd, måste vi begränsa mängden innehåll. Av denna anledning kommer vi att lägga till en liten meny med en dynamisk logotyp och fyra menyalternativ i kolumn 4. I kolumn 1 kommer vi att lägga till copyright-text med ett dynamiskt innevarande år. I kolumn 2 lägger vi till tre ikoner för spårning av sociala medier.

Lägg till en meny i kolumn 1

Lägg till en menymodul i kolumn 1.

Välj menyn

Välj sedan en av menyerna som du redan har skapat på din webbplats. Se till att hålla menyalternativ till 4 eller mindre.

Lägg till webbplatslogotypen som dynamiskt innehåll

För logotypmenyn kommer vi dynamiskt att lägga till webbplatslogotypen. Klicka på ikonen "Använd dynamiskt innehåll" medan du svävar över området för förhandsgranskning av logotypen. Välj sedan Webbplatslogotyp i listrutan.

Ta bort bakgrunden

Ta sedan bort standardmenybakgrunden så att den är transparent.

Meny Design

Vid denna tidpunkt är vi redo att lägga till lite design i menyn. För den här designen kommer vi att hålla det enkelt och litet. Uppdatera följande designparametrar:

• Teckensnittmeny: Overpass
• Meny textfärg: # b59c61
• Sepia-bild: 100%
• Maximal logohöjd: 50px

Lägg till copyright-text i kolumn 2

När menyn är på plats, gå till kolumn 2 för att lägga till upphovsrättstexten.

Lägg till en textmodul

Lägg till en ny textmodul i kolumn 2.

Lägg till det aktuella datumet dynamiskt med före och efter text

Här kommer vi att bli kreativa med dynamiskt innehåll för att visa innevarande år i copyrighttext. Detta kommer att säkerställa att året uppdateras automatiskt under hela webbplatsens livstid.

För att göra detta, klicka på ikonen "Använd dynamiskt innehåll" och välj "Aktuellt datum" i listan.

Uppdatera följande i popup-fönstret Aktuellt datum:

• tidigare:
• 01Copyright ©

• efter:
• 01| Tous Droits Reservés

• Datumformat : anpassad
• Anpassat datumformat : 20 år

Formatera texten

Uppdatera textdesignen och marginalen enligt följande:

• Textstilsort: Övergångsställe
• Textfärg: # b59c61
• Justering av texten: centrum
• Marginal (endast telefon): 10 pixlar längst upp, 10 pixlar längst ner

Detta stöder upphovsrättstext.

Lägg till spårningssymboler för sociala medier i kolumn 3

Lägg till en spårningsmodul för sociala medier i kolumn 3.

Lägg till sociala nätverk

Lägg till nödvändiga sociala nätverk på webbplatsen på fliken Innehåll. För denna design använder vi tre av dem.

Inställningar för spårning av sociala medier

Uppdatera sedan designinställningarna för alla sociala mediaspårningsikoner enligt följande:

• Modulinriktning: rak (skrivbord och surfplatta), mitt (telefon)
• Ikonfärg: # 1a1e36
• Använd anpassad ikonstorlek: JA
• Ikonstorlek: 16 pixlar (skrivbord och surfplatta), 14 pixlar (telefon)

Uppdatera inställningar för sociala medier

För att uppdatera utformningen av den enskilda sociala nätverksikonen öppnar du inställningarna för det första nätverket och uppdaterar följande:

• Bakgrundsfärg: #ffffff
• Polstring: 8 pixlar till höger, 8 pixlar till vänster
• Rundade hörn: 8px

Utöka inställningarna för sociala medier till alla

Öppna sedan menyn för ytterligare inställningar för det första nätverket och välj " Förläng artikelstilar " i listan. I popup-fönstret Förläng stilar väljer du att förlänga stilar i " Denna kolumn "Och klicka sträcker .

Detta kommer att utvidga designen till resten av ikonerna i kolumnen.

Avslutande tankar

Att lägga till en fast sidfot är i vissa fall meningsfull. Barens höjd är liten nog för att inte distrahera eller ta för mycket utrymme på mobilen. Och det ger dig möjlighet att lägga till viktiga uppmaningar för bättre omvandlingar och en smidigare användarupplevelse.

För denna design skapas utrymmet längst ner på sidan genom att ställa in en fast höjd för sektionen och sedan låta den fasta linjen ärva sektionens höjd (även om den är fixerad). 

Andra resurser

Här är en lista över medel ytterligare som kan hjälpa dig att skapa i designen av din webbplats med Divi.

• Hur man skapar en anpassad inloggningssida på Divi
• Hur man lägger till en navigationsmodul i full bredd på Divi
• Hur man skapar en skjutreglage på full skärm på Divi
• Hur man lägger till en cirkulär räknare på Divi