Vill du skapa en klibbig sidfot med DIVI som avslöjar helt när du rullar ner?
Lägga till en klibbig sidfot till din webbplats kan ge den där lilla extra touchen du letade efter till din webbplats. "Reveal"-effekten, som gör att sidfoten kan avslöjas när du rullar ner, kommer att ge en mycket charmig design till dina webbsidor.
Vanligtvis kräver denna effekt anpassad CSS som är begränsande och svår att använda. Men tack vare DIVI kan du enkelt uppnå det.
I den här handledningen visar vi dig hur du skapar en Reveal-effekt på din klibbiga sidfot. Allt som krävs är några enkla steg.
Låt oss börja!
undersökningen
Här är en kort översikt över den klibbiga sidfoten med Reveal-effekt som vi kommer att skapa i den här handledningen.
Skapa en ny sidfotsmall
Besök Divi >> Theme Builder från WordPress-instrumentpanelen.
Där, klicka på "Lägg till en global sidfot"
Sedan Välj "Bygga en global sidfot"
I den här handledningen kommer vi att använda en färdig layout för att påskynda skapandeprocessen, men du kan också göra det från grunden. För att göra detta, klicka "Ladda från biblioteket".
Nedanför popup-fönstret Ladda från biblioteket, hitta och använd layouten " Marina Om sida » från Marina layout pack.
När layouten har laddats tar du bort alla sektioner utom sidfotssektionen. Vi kommer att använda det här sidfotsavsnittet för att lägga till Reveal-effekten.
Lägg till Reveal-effekt och gör sidfoten klibbig
Gör sidfoten klibbig
Först måste vi göra sidfoten klibbig. För att göra detta, öppna avsnittsinställningarna och klicka på fliken advanced. Under "Rullningseffekter", ändra inställningarna enligt följande:
- Sticky Position: Håll dig till botten
Uppdatera Z-index för klibbigt tillstånd
Därefter måste vi ge vår sidfotssektion ett z-index på 0 när avsnittet är i klibbigt tillstånd. Detta gör att avsnittet stannar bakom andra avsnitt eller element på sidans brödtext när du rullar.
För att göra detta, uppdatera Z Index-positionen genom att klicka på den klibbiga ikonen bredvid alternativet Z Index. Uppdatera sedan Z-indexet till 0.
- Z-index (klibbig): 0
Uppdatera Z-index för platshållare för klibbig sidfot
När ett element tilldelas en klibbig position i Divi skapas också ett duplicerat platshållarelement automatiskt. Detta ger den funktionalitet som behövs för att placera och designa klibbiga element med Divi Builder.
Se även: Hur man skapar en global rubrik med Divis Theme Builder
I det här fallet skapas en platshållare för sidfotssektionen med ett standard z-index på 1. Vi vill inte ha vår faktiska klibbiga sidfotssektion (nu med ett Z-index på 0) bakom platshållarsektionen, så vi måste uppdatera Z-index för platshållaren till -1.
För att göra detta, lägg först till en anpassad CSS-klass i sidfotssektionen enligt följande:
- CSS-klass: sticky-footer-reveal
Öppna sedan sidinställningarna med hjälp av inställningsmenyn på Temabyggare.
Gå till " Avancerad " och skriv in följande CSS i rutan Anpassa CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Detta tvingar platshållardelen att stanna bakom den klibbiga sidfoten.
Spara ändringar
När du är klar sparar du ändringarna i sidfotsmallen.
Spara även Divi Theme Builder-ändringarna.
Slutresultat
För att se det slutliga resultatet, se en sida och rulla.
Ladda ner DIVI nu!!!
Slutsats
I Divi lägger du till en klibbig sidfot till din webbplats kräver inget plugin eller komplicerad anpassad CSS. Använder konstruktorn teman, kan du enkelt skapa en sidfotsmall med Avslöja effekt på några minuter.
Förhoppningsvis kommer detta att ge din sidfotsdesign ett subtilt lyft med en attraktiv interaktion som besökare kommer att uppskatta. Om du har några funderingar eller förslag, hitta oss kommentaravsnittet att diskutera det.
Se också 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.
.
