Vill du skapa en anpassad sidfot i DIVI?
En av de viktigaste delarna av Divis temabyggare är möjligheten att dynamiskt lägga till globala sidfötter till dina webbsidor och inlägg.
När du har designat en sidfot kan du automatiskt lägga till den på vilken typ av sida eller inlägg du vill med hjälp av Divis temabyggare.
I den här handledningen tar vi dig steg för steg genom processen att skapa och lägga till en global sidfot till din webbplats.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en titt på sidfoten vi ska designa.
office
Gå till Divi Theme Builder och lägg till en global sidfot
- Gå till Divi > Theme Builder och klicka på " Lägg till en global sidfot«
- Att välja " Bygg en global sidfot«
Anpassa avsnitt #1
Bakgrundsfärg
Öppna avsnittet du hittar på sidan och ändra bakgrundsfärgen för avsnittet.
- Bakgrund: #000000
avstånd
Byt till flik Stil och ändra sedan avståndsinställningarna för avsnittet.
- Marginal (överst, vänster och höger): 6vw
- Intern marginal (vänster och höger): 30px
gräns
Lägg sedan till en övre kant till vänster och höger.
- Upptill vänster rundad rektangel: 20px
- Upptill höger rundad rektangel: 20px
Skugga låda
Inkludera även en boxskugga i avsnittsinställningarna.
- Bow Shadow Blur Styrka: 135px
- Textningstypsnittsfärg: rgba(0,0,0,0.18)
Lägg till en ny rad i avsnittet
Strukturen av kolonnen
Fortsätt genom att lägga till en rad i ditt avsnitt med följande kolumnstruktur:
Lägg till en textmodul i kolumnen
Lägg till en titel i storlek H2 (Rubrik 2)
Infoga en textmodul med innehåll storlek H2.
H2 textinställningar
Växla till fliken för Stil i modulen och ändra parametrarna för H2-texten i enlighet med detta:
- Header Font: Poppins
- Dämpad ljus rubrik: halvfet
- Textjustering: Centrerad
- Rubrikens textfärg: #ffffff
- Rubriktextstorlek: 31px (dator), 24px (surfplatta), 18px (telefon)
- Rubrikradshöjd: 1,6 em
dimensionering
Lägg även till en maximal bredd på modulen.
- Maximal bredd: 700 pixlar
Lägg till knappmodul till kolumn
Lägg till text på knappen
Infoga en knappmodul precis under textmodulen i din kolumn och ange en text som du väljer.
uppriktning
Växla till fliken för Stil av modulen och ändra inriktningen av knappen till mitten.
- Knappinriktning: centrerad
Knappinställningar
Fortsätt genom att anpassa knappen.
- Använd anpassade stilar för Knapp: Ja
- Knapptextstorlek: 12px
- Knappens textfärg: #000000
- Bakgrundsknapp: #FFFFFF
- Kantbreddsknapp: 0 pixlar
Läs också: Hur man visar en bloggsida som en karusell i DIVI
- Knappkantradie: 100 px
- Knappbokstavsavstånd: 1 px
- Button Font: Poppins
- Mjuk ljusknapp: halvfet
- Kopiera stilknapp: TT
avstånd
Lägg även till anpassade inre marginalvärden.
- Intern marginal (topp och botten): 14px
- Inre marginal: Vänster (40px); Höger (58px)
Sektion 2
Lägg till ett andra "normalt" avsnitt under det föregående.
Bakgrundsfärg
Ändra bakgrundsfärg
- Bakgrund: #ffffff
avstånd
Ta sedan bort alla interna marginaler (Överst och Nederst).
- Intern marginal (topp och botten): 0px
gräns
Lägg även till en kantradie till avsnittet.
- Rundad rektangel (överst till vänster): 20px
- Rundad rektangel (överst till höger): 20px
Skugga låda
Och slutför avsnittsinställningarna genom att lägga till en subtil boxskugga.
- Box Shadow Blur Styrka: 135px
- Textningstypsnittsfärg: rgba(0,0,0,0.18)
Lägg till en ny rad i avsnittet
Strukturen av kolonnen
När du har slutfört avsnittsinställningarna lägger du till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna radinställningarna och ändra dem enligt följande:
- Använd anpassad rännbredd: Ja
- Kolumnavstånd: 1
- Harmonisera kolumnhöjder: Ja
- Maximal bredd: 100%
- Maximal bredd: 100%
avstånd
Ta sedan bort standardinre marginaler (överst och nedre) från raden.
- Intern marginal (topp och botten): 0px
Kolumnavstånd
Fortsätt genom att öppna kolumninställningarna för att lägga till anpassade utfyllnadsvärden.
- Inre marginal (topp och botten): 100px (dator), 50px (surfplatta och telefon)
- Inre marginal (vänster och höger): 100px (dator), 50px (surfplatta och telefon)
Lägg till text #1-modul till kolumnen
Lägg till innehåll
Vi kan nu lägga till moduler till den. Lägg till en textmodul i kolumnen och infoga innehåll som du väljer.
Textinställningar
Växla till fliken för Stil i modulen och ändra textparametrarna i enlighet med detta:
- Text teckensnitt: Poppins
- Texttypsnittsvikt: Fet
- Textfärg: #000000
- Textstorlek: 17px
- Textjustering: Centrerad
avstånd
Lägg sedan till anpassade (övre och nedre) marginaler.
- Toppmarginal: 10 px
- Nedre marginal: 30px
Lägg till en separatormodul i kolumnen
Precis under textmodulen lägger du till en separatormodul.
synlighet
Se till att alternativet " Visa separator Är aktiverad.
- Visa separator: Ja
Linje
Ändra linjefärgen till svart.
- Etikettfärg: #000000
dimensionering
Ändra även inställningarna för splitterstorlek.
- Maximal bredd: 15%
- Textjustering: Center
Lägg till text #2-modul till kolumnen
Lägg till innehåll
Fortsätt genom att lägga till ytterligare en textmodul i kolumnen samt en innehåll som du väljer.
Lägg till en länk
Infoga en länk till sidan du vill att denna modul ska referera till.
Textinställningar
Byt sedan till fliken Stil och ändra textinställningarna enligt följande:
- Textfont: Poppins
- Mjukt ljus text: klar
- Textfärg Text: #777777
- Text Textstorlek: 15 px
- Textjustering: Centrerad
avstånd
Lägg också till en marginal (Överst och Nederst).
- Marginal (överst och neder): 10 px
Klona textmodul #2 efter behov
När du har slutfört den andra textmodulen kan du klona den så många gånger du behöver (beroende på hur många klickbara sidfotselement du vill inkludera).
Redigera innehåll och länkar
Se till att redigera modulens innehåll och länkar för varje dubblett.
Klona hela kolumnen två gånger
När du har slutfört kolumnen och dess moduler kan du klona den två gånger.
Kolumn 2 bakgrundsfärg
Öppna sedan inställningarna för kolumn 2 och ändra bakgrundsfärgen.
- Bakgrund: #f9f9f9
Redigera innehåll och länkar
Se till att redigera allt innehåll och länkar i varje dubblettkolumn.
Lägg till en ny kolumn
Lägg sedan till en fjärde kolumn i raden.
Bakgrundsfärg
Ändra bakgrundsfärgen för den nya kolumnen.
- Bakgrund: #0fffc7
avstånd
Ändra de inre marginalerna enligt följande:
- Intern marginal (topp och botten): 70px
- Intern marginal (vänster och höger): 50px
Lägg till modulen "Följ oss på sociala medier" i kolumn 4
Lägg till sociala nätverk
Fortsätt genom att lägga till en modul " Följ oss på sociala nätverk i kolumn 4 och infoga de sociala nätverk du väljer.
Återställ ikonstilar för sociala medier
Klicka på Återställ stilar för rollelement för vart och ett av de sociala nätverken.
uppriktning
Byt sedan till fliken Stil och ändra inriktningen av modulen.
- Textjustering: Center
Ikoninställningar
Ändra också färgen på sociala medier-ikoner.
- Ikonfärg: #000000
Lägg till e-postoptinmodul till kolumn 4
Infoga en mod " E-post Optin "under modulen" Följ oss på sociala nätverk«
Tydligt modulinnehåll och titel
Email konto
Lägg sedan till ett e-postkonto. Om du inte lägger till ett e-postkonto kommer modulen inte att dyka upp efter att du har avslutat temabyggaren.
Ta bort bakgrundsfärg
- Använd bakgrundsfärg: Nej
Fältinställningar
Byt till flik Stil och ändra fältinställningarna enligt följande:
- Bakgrundsfärgfält: rgba(0,0,0,0)
- Textfärgfält: #000000
- Champs Font: Poppins
- Textstorleksfält: 13px
- Kantbreddsfält: 1 px
Knappinställningar
Anpassa även knappen för din modul.
- Använd anpassade stilar för Knapp: Ja
- Knapptextstorlek: 12px
- Knappens textfärg: #000000
- Bakgrundsknapp: #FFFFFF
- Kantbredd: 0px
- Knappkantradie: 100 px
- Knappbokstavsavstånd: 1 px
- Button Font: Poppins
- Dämpad ljusknapp: halvfet
- Kopiera stilknapp: TT
Se även: Hur man skapar ett klibbigt kontaktformulär i DIVI
- Knappstoppning (topp och botten): 15px
Lägg till dynamisk textmodul till kolumn 4
Nästa och sista modul vi behöver för att slutföra denna design är en textmodul.
Aktivera alternativet " Använd dynamiskt innehåll".
Välj sedan alternativet " dagens datum".
Och ändra inställningarna för dynamiskt innehåll enligt följande:
- Framsida: Copyright ©
- Efter: | Alla rättigheter förbehållna
- Datumformat: Tullen
- Anpassat datumformat: 20 år
Textinställningar
Växla sedan till stilfliken och ändra textinställningarna:
- Textfont: Poppins
- Textfärg Text: #000000
- Text Textstorlek: 16 px
avstånd
Komplettera modulparametrarna genom att lägga till marginal och voila!
- Toppmarginal: 50 px
Spara alternativ för global sidfot och temabyggare
När du är klar, se till att spara ditt arbete innan du lämnar byggaren. Divi-tema.
Så fort du är ute ur malllayouten, spara hela dina ändringar av temabyggaren och du är klar!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på resultatet.
Ladda ner DIVI nu!!!
Slutsats
I den här handledningen visade vi hur enkelt det är att skapa en vacker anpassad global sidfot med Divis temabyggare.
Vi hoppas att den här handledningen kommer att inspirera dig att skapa vackra globala sidfötter för dina nästa Divi-projekt.
Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
