Kunne du tænke dig at lave en klæbrig sidefod med DIVI, der afsløres fuldt ud, når du scroller ned?
Tilføjelse af en klæbrig sidefod til din Websted kan bringe det lille ekstra touch, du ledte efter, til din Websted. "Reveal"-effekten, som gør, at sidefoden kan afsløres, når du scroller ned, vil give et meget charmerende design til dine websider.
Normalt kræver denne effekt tilpasset CSS, som er begrænsende og svær at bruge. Men takket være DIVI kan du nemt opnå det.
I denne vejledning viser vi dig, hvordan du opretter en Reveal-effekt til din klæbrige sidefod. Alt det kræver er et par nemme trin.
Lad os starte!
undersøgelse
Her er en kort oversigt over den klæbrige sidefod med Reveal-effekt, som vi vil oprette i denne tutorial.
Opret en ny sidefodsskabelon
Besøg Divi >> Theme Builder fra WordPress-dashboardet.
Der, klik videre "Tilføj en global sidefod"
Vælg derefter "Opbygning af en global sidefod"
I denne tutorial bruger vi et præ-lavet layout til at fremskynde oprettelsesprocessen, men du kan også gøre det fra bunden. For at gøre dette, klik "Indlæs fra bibliotek".
Under pop op-vinduet Indlæs fra biblioteket, find og brug layoutet " Marina om side » fra Marina layout-pakken.
Når layoutet er indlæst, skal du slette alle sektioner undtagen sidefodsektionen. Vi vil bruge denne sidefodssektion til at tilføje Reveal-effekten.
Tilføj Reveal-effekt og gør sidefoden klæbrig
Gør sidefoden klæbrig
Se også: Hvordan opretter man en glidende og push-menu i DIVI?
Først skal vi gøre sidefoden klæbrig. For at gøre dette skal du åbne sektionsindstillingerne og klikke på fanen avanceret. Under "Rulningseffekter", skal du ændre indstillingerne som følger:
- Sticky Position: Hold dig til bunden
Opdater Z-indeks for klæbrig tilstand
Dernæst skal vi give vores sidefodssektion et z-indeks på 0, når sektionen er i klæbrig tilstand. Dette vil tillade sektionen at forblive bag andre sektioner eller elementer på sidens brødtekst, når du ruller.
For at gøre dette skal du opdatere Z Index-positionen ved at klikke på det klæbende ikon ved siden af Z Index-indstillingen. Opdater derefter Z-indekset til 0.
- Z-indeks (klæbende): 0
Opdater pladsholder Z-indeks for klæbende sidefod
Når et element tildeles en klæbende position i Divi, oprettes der også automatisk et dublet pladsholderelement. Dette giver den nødvendige funktionalitet til at placere og designe klæbrige elementer ved hjælp af Divi Builder.
Se også: Sådan opretter du en global header med Divi's Theme Builder
I dette tilfælde oprettes en sidefodssektionspladsholder med et standard z-indeks på 1. Vi vil ikke have vores faktiske sticky footer-sektion (nu med et Z-indeks på 0) bag pladsholdersektionen, så vi skal opdatere Z-indekset for pladsholderen til -1.
For at gøre dette skal du først tilføje en tilpasset CSS-klasse til sidefodssektionen som følger:
- CSS-klasse: sticky-footer-reveal
Åbn derefter sideindstillingerne ved hjælp af indstillingsmenuen på Temabygger.
Gå til " Fremskreden " og indtast følgende CSS i boksen Tilpas CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Dette vil tvinge pladsholdersektionen til at forblive bag den klæbrige sidefod.
Gem ændringer
Når du er færdig, skal du gemme ændringerne i sidefodskabelonen.
Gem også Divi Theme Builder-ændringerne.
Endelig resultat
For at se det endelige resultat, se en side og rul.
Download DIVI nu!!!
Konklusion
I Divi tilføjer du en klæbrig sidefod til din Websted kræver ikke et plugin eller kompliceret brugerdefineret CSS. Brug af konstruktøren temaer, kan du nemt oprette en sidefodsskabelon med Afsløre effekt om et par minutter.
Forhåbentlig vil dette give dit sidefodsdesign et subtilt løft med en attraktiv interaktion, som besøgende vil sætte pris på. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Se også 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.
...
