Nedre lådor är användbara tillägg till alla webbplats, eftersom de lagrar ytterligare innehåll som är lättillgängligt för användare. Sidfotslådor är behållare för webbinnehåll (som en Divi-sektion) som kan öppnas och stängas genom att klicka på en knapp eller hålla muspekaren över dem. Det är som att ha lite lager för premiuminnehåll.
I den här handledningen kommer vi att designa en flytande sidfotslåda i Divi. Vi kommer att lägga till sidfotslådan till det globala sidfotsområdet i webbplats mall så att sidfotslådan är tillgänglig för hela webbplatsen med normalt sidfotsinnehåll.
Med den process vi ska använda kan alla Divi-avsnitt (och dess innehåll) konverteras till en sidfotlåda på några minuter.
Så här lägger du till sidfotmallen på din Divi-webbplats
Lägga till denna modell kommer att ersätta webbplats mall som standard (om du har en) på din Divi-webbplats. Vi föreslår att du lägger till den på en testsajt så att du inte förstör något på en livesajt.
För att importera mallen för fast sidfotslådan på egen hand 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 JSON-filen du precis packade upp och väljer alternativet "Ladda ner säkerhetskopia före import", ifall du tidigare hade något i webbplats mall standard som du inte ville åsidosätta.
Klicka sedan på knappen Importera.
Spara slutligen ändringarna i temageneratorn och visa en live-sida för att se den fasta sidfoten.
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.
Välj sedan alternativet "Bygg global sidfot" i listrutan.
Lägg till en fördefinierad layout i en global sidfotlayout
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 alternativet "Välj en fördefinierad layout".
I popup-fönstret Ladda från bibliotek letar du efter landningssidans layout för brevpapper. Klicka sedan på "Använd denna layout".
Ta bort oönskat innehåll från premad-layouten
När layouten är laddad i redigeraren expanderar du popup-rutan Lager genom att klicka på lagerikonen i inställningsmenyn. Ta sedan bort alla delar av layouten utom de två sista.
Flytta och märk de två avsnitten
När sektionerna har tagits bort bör du ha två sektioner, en med titeln "Sidfot" och den andra med titeln "Hur det fungerar". Flytta avsnittet "Sidfot" till toppen av layouten.
Ändra formuleringen i det nedre avsnittet för att läsa "Footer Drawer". Detta kommer att vara det avsnitt som vi kommer att använda som innehåll i vår sidfotlåda.
Del 2: Skapa den fasta sidfackslådan
Nu när vi har utsett en av sektionerna som sidfoten och den andra som sidfotlådan är vi redo att börja bygga vår fasta sidfotlåda. Låt oss börja med att skapa blurb-ikonen som vi använder för att växla i sidfodslådan.
Skapande av sidfotsknappen
Lägg till en ny rad
Lägg till en ny rad i en kolumn i den nedre sidfoten.
Märk den nya raden "Lådknapp" eftersom det här är raden som innehåller knappen som används för att växla lådan öppen och stängd. Flytta sedan linjen till toppen av sektionen.
Radfyllning
Innan du lägger till en modul, öppna radinställningarna och uppdatera stoppningen enligt följande:
- Polstring: 0px hög, 0px låg
Avsnitt stoppning
Öppna sedan inställningarna i avsnittet "Footer låda" och uppdatera stoppningen enligt följande:
För att skapa den klickbara knappen som växlar mellan sidfoten, använder vi en blurb-modul med en ikon. Och vi kommer att ge den en unik droppform genom att kombinera den fyrkantiga formen på Blurb-behållaren med cirkelikonen.
Så här.
Lägg till en Blurb-modul
Lägg till en presentationstextmodul till raden "Låda-knappen" längst upp i avsnittet.
Förklara innehåll / ikon
Ta sedan bort standardtiteln och huvudinnehållet och välj pilikonen som pekar på det övre vänstra hörnet (se skärmdump). Vi använder den delvis roterade ikonen eftersom vi kommer att rotera den senare.
BlurbDesign
Ge sedan presentationsteksten enligt följande:
- Bakgrundsfärg: # 081540
Uppdatera sedan designparametrarna enligt följande:
- Ikonfärg: #eeeeee
- Cirkelikon: JA
- Cirkelfärg: # 081540
- Använd ikonstorlek för ikon: JA
- Ikonstorlek: 17 pixlar
Presentationens textstorlek
Ge modulen nu en höjd och en bredd enligt följande:
- Bredd: 30px
- Höjd: 30px
Detta kommer att få cirkelikonen att rinna över i textbehållaren för att skapa vattendroppsform.
Blurb -position
Ge sedan presentationsteksten en absolut position längst upp i mitten av avsnittet.
- Position: Absolut
- Plats: Top Center
Förstora transformationsinställningar
Nu kan vi använda transformeringsalternativen för att rotera blurb / ikonen uppåt och placera den precis ovanför sektionsbehållaren. Nu när vi gömmer avsnittet under webbläsarfönstret förblir ikonen synlig / klickbar.
Uppdatera följande objekt:
- Transformera Translate X-axel: -50%
- Transformera Y-axel översättning: -250%
- Transformera Z-axelrotation: -45 grader
Ta sedan bort standardikonen animering:
- Bild / ikonanimering: Ingen animering
Vi kommer att använda JQuery för att växla lådan, så vi måste rikta in texten / ikonen som ett klickbart element med en CSS-klass som vi använder senare i koden. Lägg till följande CSS-klass:
- CSS-klass: mållåda
Inställningar för sidfotens låda
Nu ska vi dölja avsnittet "Sidfotlåda" med alternativet translate transform. Öppna sektionsinställningar och uppdatera följande:
- Transformera Translate Y-axel: 100%
Det fina med att använda transformationen här är att procentvärdena baseras på elementets faktiska storlek. Således kommer 100% på Y-axeln att vara direkt relativt sektionens höjd (nomatter vad det är vid varje given tidpunkt). Med andra ord flyttas elementet ner exakt avstånd som sin egen höjd.
För att få tillbaka "Footer Drawer" måste vi vända omvandlingsöversättningen som vi just lagt till i avsnittet. För att göra detta måste vi rikta in elementet med en CSS-klass och inaktivera översättningstransformationen genom att klicka på ikonen (sätt tillbaka hela avsnittet till sin ursprungliga position).
Lägg till en CSS-klass i sidfotens lådesektion
Lägg till följande CSS-klass under den avancerade fliken:
- CSS-klass: has-transform
Sidfoten för lådan Fast position
För det sista steget måste vi fixa sidfotens låda så att den (med ikonen) flyter längst ner i webbläsarfönstret.
Uppdatera positionen för avsnittet "Footer Drawer" enligt följande:
- Position: fast
- Plats: längst ner till vänster
- Z-index: 13
Stäng av mobilinnehåll
Eftersom du har en begränsad mängd sidfotsinnehåll som passar både surfplatta och telefon (på grund av begränsad skärmhöjd) måste du stänga av / dölja icke-väsentliga objekt från skärmen. I det här exemplet kommer vi att dölja den mellersta raden i sektionslayouten.
Öppna inställningarna från den andra till sista raden i avsnittet ”Sidfotlåda”. Under den avancerade fliken uppdaterar du synlighetsalternativet för att stänga av linje på telefon och surfplatta.
Lägga till anpassad kod
För att lägga till klick- och växlingsfunktionaliteten i sidfotlådan måste vi lägga till anpassad CSS och JQuery på sidan. För att göra detta skapar du en ny kodmodul under Blurb-modulen som används för knappen.
Klistra sedan in följande kod i kodområdet:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Spara ändringar
Kom ihåg att spara layouten innan du avslutar redigeraren.
Spara också ändringarna i temageneratorn.
Slutresultat
Nu kan vi gå till vilken sida som helst på din sida webbplats för att se det slutliga resultatet.
Avslutande tankar
Hoppas den flytande sidfotslådan hjälper dig främja innehåll på ett roligt och tillgängligt sätt. Som vilken låda som helst kan du fylla den med nästan allt du kan tänka dig.
Andra resurser
Här är en lista med tutorials som kan hjälpa dig att göra mer med Divis interna funktioner.
- Hur man skapar en temavärdighetsbox på Divi
- Hur man skapar ett animerat reklamavsnitt om Divi
- Så här anpassar du rutnät på Divi
Översatt från: Elegant Teman
