Vil du oprette en brugerdefineret sidefod i DIVI?
En af de vigtigste dele af Divi's temabygger er muligheden for dynamisk at tilføje globale sidefødder til dine websider og indlæg.
Når du har designet en sidefod, kan du automatisk tilføje den til enhver type side eller indlæg, du ønsker, ved hjælp af Divis temabygger.
I denne vejledning tager vi dig trin-for-trin gennem processen med at oprette og tilføje en global sidefod til din Websted.
undersøgelse
Før vi dykker ned i selvstudiet, lad os tage et kig på den sidefod, vi skal designe.
kontor
Gå til Divi Theme Builder og tilføj en global sidefod
- Gå til Divi > Theme Builder og klik på " Tilføj en global sidefod«
- At vælge " Byg en global sidefod«
Tilpas sektion #1
Baggrundsfarve
Åbn den sektion, du kan finde på siden, og skift sektionens baggrundsfarve.
- Baggrund: #000000
afstand
Skift til fanen stil og ændre derefter afstandsindstillingerne for afsnittet.
- Margin (øverst, venstre og højre): 6vw
- Intern margen (venstre og højre): 30px
Border
Tilføj derefter en øverste kant til venstre og højre.
- Øverst venstre afrundet rektangel: 20px
- Øverst højre afrundet rektangel: 20px
Skyggeæske
Medtag også en boksskygge i sektionsindstillingerne.
- Bow Shadow Blur Styrke: 135px
- Undertekstskriftfarve: rgba(0,0,0,0.18)
Føj en ny linje til sektionen
Struktur af søjlen
Fortsæt ved at tilføje en række til din sektion ved hjælp af følgende kolonnestruktur:
Tilføj et tekstmodul til kolonnen
Tilføj en titel i størrelse H2 (Overskrift 2)
Indsæt et tekstmodul med indhold i størrelse H2.
H2 tekstindstillinger
Skift til fanen for stil af modulet og modificere parametrene for H2-teksten i overensstemmelse hermed:
- Header-skrifttype: Poppins
- Afdæmpet lys overskrift: halvfed
- Tekstjustering: Centreret
- Sidehovedtekstfarve: #ffffff
- Sidehovedtekststørrelse: 31px (desktop), 24px (tablet), 18px (telefon)
- Header line højde: 1,6 em
dimensionering
Tilføj også en maksimal bredde til modulet.
- Maksimal bredde: 700 pixels
Tilføj knapmodul til kolonne
Tilføj tekst til knappen
Indsæt et knapmodul lige under tekstmodulet i din kolonne, og indtast en tekst efter eget valg.
tilpasning
Skift til fanen for stil af modulet og ændre justeringen af knappen til midten.
- Knapjustering: centreret
Knapindstillinger
Fortsæt ved at tilpasse knappen.
- Brug brugerdefinerede stilarter til knap: Ja
- Knaptekststørrelse: 12px
- Knaptekstfarve: #000000
- Baggrundsknap: #FFFFFF
- Knap til kantbredde: 0 pixels
Læs også: Sådan viser du en blogside som en karrusel i DIVI
- Knapkantradius: 100 px
- Knapbogstavafstand: 1 px
- Knapskrifttype: Poppins
- Blødt lys knap: Semi fed
- Kopistil-knap: TT
afstand
Tilføj også tilpassede indre margenværdier.
- Intern margen (øverst og nederst): 14px
- Indre margen: Venstre (40px); Højre (58px)
Afsnit #2
Tilføj en anden "normal" sektion under den forrige.
Baggrundsfarve
Skift baggrundsfarve
- Baggrund: #ffffff
afstand
Fjern derefter alle interne margener (øverst og nederst).
- Intern margen (øverst og nederst): 0px
grænse
Tilføj også en kantradius til sektionen.
- Afrundet rektangel (øverst til venstre): 20px
- Afrundet rektangel (øverst til højre): 20px
Skyggeæske
Og fuldfør sektionsindstillingerne ved at tilføje en subtil boksskygge.
- Box Shadow Blur Styrke: 135px
- Undertekstskriftfarve: rgba(0,0,0,0.18)
Føj en ny linje til sektionen
Struktur af søjlen
Når du har gennemført sektionsindstillingerne, skal du tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillingerne og ændre dem som følger:
- Brug tilpasset tagrendebredde: Ja
- Kolonneafstand: 1
- Harmoniser søjlehøjder: Ja
- Maksimal bredde: 100%
- Maksimal bredde: 100%
afstand
Fjern derefter de indvendige standardmargener (øverst og nederst) fra linjen.
- Intern margen (øverst og nederst): 0px
Kolonneafstand
Fortsæt ved at åbne kolonneindstillinger for at tilføje tilpassede udfyldningsværdier.
- Indre margen (øverst og nederst): 100px (desktop), 50px (tablet og telefon)
- Indre margen (venstre og højre): 100px (computer), 50px (tablet og telefon)
Tilføj tekst #1 modul til kolonne
Tilføj indhold
Vi kan nu tilføje moduler til det. Tilføj et tekstmodul til kolonnen og indsæt indhold de votre choix.
Tekstindstillinger
Skift til fanen for stil af modulet og modificere tekstparametrene i overensstemmelse hermed:
- Tekst skrifttype: Poppins
- Tekstskrifttypevægt: Fed
- Tekstfarve: #000000
- Tekststørrelse: 17px
- Tekstjustering: Centreret
afstand
Tilføj derefter brugerdefinerede (øverste og nederste) margener.
- Topmargin: 10 px
- Bundmargen: 30px
Tilføj et separatormodul til kolonnen
Lige under tekstmodulet skal du tilføje et separatormodul.
synlighed
Sørg for indstillingen " Vis separator Er aktiveret.
- Vis separator: Ja
Linje
Skift linjefarven til sort.
- Etiketfarve: #000000
dimensionering
Skift også indstillingerne for splitterstørrelse.
- Maksimal bredde: 15%
- Tekstjustering: Center
Tilføj tekst #2 modul til kolonne
Tilføj indhold
Fortsæt ved at tilføje endnu et tekstmodul til kolonnen samt et indhold de votre choix.
Tilføj et link
Indsæt et link til den side, du ønsker, at dette modul skal henvise til.
Tekstindstillinger
Skift derefter til fanen stil og ændre tekstindstillingerne som følger:
- Tekstskrifttype: Poppins
- Blødt lys tekst: Klar
- Tekstfarve Tekst: #777777
- Tekst Tekststørrelse: 15 px
- Tekstjustering: Centreret
afstand
Tilføj også en margen (top og bund).
- Margen (øverst og nederst): 10 px
Klon tekstmodul #2 efter behov
Når du har gennemført det andet tekstmodul, kan du klone det så mange gange, som du har brug for (afhængigt af hvor mange klikbare sidefodselementer du vil inkludere).
Rediger indhold og links
Sørg for at redigere modulindholdet og links for hver dublet.
Klon hele kolonnen to gange
Når du har gennemført kolonnen og dens moduler, kan du klone den to gange.
Kolonne 2 baggrundsfarve
Åbn derefter indstillingerne for kolonne 2, og skift baggrundsfarven.
- Baggrund: #f9f9f9
Rediger indhold og links
Sørg for at redigere alt indhold og links i hver dubletkolonne.
Tilføj en ny kolonne
Tilføj derefter en fjerde kolonne til rækken.
Baggrundsfarve
Skift baggrundsfarven for den nye kolonne.
- Baggrund: #0fffc7
afstand
Rediger de indre marginer som følger:
- Intern margen (øverst og nederst): 70px
- Intern margen (venstre og højre): 50px
Tilføj modulet 'Følg os på sociale medier' til kolonne 4
Tilføj sociale netværk
Fortsæt ved at tilføje et modul " Følg os på sociale medier i kolonne 4 og indsæt de sociale netværk efter eget valg.
Nulstil ikonstile på sociale medier
Klik på Nulstil Rolle Elements Styles for hvert af de sociale netværk.
tilpasning
Skift derefter til fanen stil og ændre justeringen af modulet.
- Tekstjustering: Center
Ikonindstillinger
Skift også farven på sociale medier-ikoner.
- Ikonfarve: #000000
Tilføj e-mailoptin-modul til kolonne 4
Indsæt en mod " E-mail tilvalg "under modulet" Følg os på sociale medier«
Klart modulindhold og titel
Email konto
Tilføj derefter en e-mail-konto. Hvis du ikke tilføjer en e-mail-konto, vises modulet ikke, når du har afsluttet temabyggeren.
Fjern baggrundsfarve
- Brug baggrundsfarve: Nej
Feltindstillinger
Skift til fanen stil og ændre feltindstillingerne som følger:
- Baggrundsfarvefelter: rgba(0,0,0,0)
- Tekstfarvefelter: #000000
- Champs Font: Poppins
- Tekststørrelsesfelter: 13px
- Kantbredde felter: 1 px
Knapindstillinger
Tilpas også knappen på dit modul.
- Brug brugerdefinerede stilarter til knap: Ja
- Knaptekststørrelse: 12px
- Knaptekstfarve: #000000
- Baggrundsknap: #FFFFFF
- Kantbredde: 0px
- Knapkantradius: 100 px
- Knapbogstavafstand: 1 px
- Knapskrifttype: Poppins
- Dæmpet lys knap: Semi fed
- Kopistil-knap: TT
Se også: Sådan opretter du en klæbrig kontaktformular i DIVI
- Knappolstring (top og bund): 15px
Tilføj dynamisk tekstmodul til kolonne 4
Det næste og sidste modul, vi skal bruge for at færdiggøre dette design, er et tekstmodul.
Aktiver indstillingen " Brug dynamisk indhold".
Vælg derefter indstillingen " nuværende dato".
Og ændre de dynamiske indholdsindstillinger som følger:
- Forside: Copyright ©
- Efter: | Alle rettigheder forbeholdes
- Datoformat: Told
- Brugerdefineret datoformat: 20 år
Tekstindstillinger
Skift derefter til stilfanen og skift tekstindstillingerne:
- Tekstskrifttype: Poppins
- Tekstfarve Tekst: #000000
- Tekst Tekststørrelse: 16 px
afstand
Fuldfør modulparametrene ved at tilføje margen og voila!
- Topmargin: 50 px
Gem muligheder for global sidefod og temabygger
Når du er færdig, skal du sørge for at gemme dit arbejde, før du forlader bygherren. Divi-tema.
Så snart du er ude af skabelonlayoutet, gem hele dine ændringer i temabyggeren, og du er færdig!
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på resultatet.
Download DIVI nu!!!
Konklusion
I denne vejledning viste vi dig, hvor nemt det er at skabe en smuk tilpasset global sidefod med Divis temabygger.
Vi håber, at denne tutorial vil inspirere dig til at skabe smukke globale sidefødder til dine næste Divi-projekter.
Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
