Gå till innehållet

Hur man skapar en fast sidfot med Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Fasta sidfot kan vara ett praktiskt sätt att behålla viktig information om din webbplats framför och mitt när användaren interagerar med ditt sidinnehåll på vilken enhet som helst. 

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! Om du lägger till den här mallen ersätts standardwebbplatsmallen (om du har en) på din Divi-webbplats. Vi föreslår att du lägger till det på en testwebbplats så att du inte förstör något på en livewebbplats.

För att importera den fasta sidfotsmallen till din egen 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 den JSON-fil som du just packade upp och väljer alternativet "Ladda ner säkerhetskopia före import", om du tidigare hade något i standardwebbplatsmallen som du inte hade. ville inte byta ut.

Klicka sedan på knappen Importera.

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

Spara divi-ändringar

Nu vidare till handledningen, okej?

Del 1: Lägga till en global sidfot

Med Divi-temageneratorn kan du byta ut sidfoten med en ny genom att uppdatera standardwebbmallen.

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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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.

3 rad sektion

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
Divi 1 sektions höjdkonfiguration

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
Åtkomst till linjeinställningar

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
Anpassa divisektionen

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;
Lägg till en css-kod

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 vid den nedre mittplatsen enligt följande:

  • Position: fast
  • Plats: nedre centrum
Sidfotposition

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Wordpress-menyval

Välj menyn

Välj sedan en av de menyer du redan har skapat på din webbplats. Se till att hålla menyalternativen 4 eller lägre.

Urvalsmeny wordpress-modul

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.

Lägg till en logotyp

Ta bort bakgrunden

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

Radera bakgrunden

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
Ändra teckensnittsfärgen

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.

Markeringsmodul text divi

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.

Urvalsdatum

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

  • tidigare:
  • 01Copyright ©
  • efter:
  • 01| Tous Droits Reservés
  • Datumformat : anpassad
  • Anpassat datumformat : 20 år
Anpassa datumet

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
Textmodul för val av Divi-typsnitt

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.

Lägg till övervakningsmodul för sociala nätverk

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)
Personalavdelningen

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:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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

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 med ytterligare resurser som kan hjälpa dig skapa i utformningen av din webbplats med Divi.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
3 aktier
del3
tweet
Enregistrer