Gå till innehållet

Hur man skapar animerade lådor på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Sidfotlådor är användbara tillägg till alla webbplatser eftersom de lagrar ytterligare innehåll som är lättillgängligt för användarna. Sidfotlådor är behållare för webbinnehåll (som ett Divi-avsnitt) som kan öppnas och stängas genom att klicka på en knapp eller sväva över den. Det är som att ha lite stash för premiuminnehåll.

I denna handledning ska vi utforma en flytande sidfotlåda i Divi. Vi lägger till sidfotlådan i det övergripande sidfotområdet för webbplatsmall så att sidfotlådan är tillgänglig över hela webbplatsen med det normala sidfotsinnehållet.

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

Om du lägger till den här mallen ersätts standardwebbplatsmallen (om du har en) på din Divi-webbplats. Vi föreslår att du lägger till det på en testwebbplats så att du inte förstör något på en livewebbplats.

Om du vill importera den fasta sidfotens lådemodell till din egen 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 den JSON-fil som du just packade upp och väljer alternativet "Ladda ner säkerhetskopia före import", om du tidigare hade något i standardwebbplatsmallen som du inte hade. ville inte byta ut.

Klicka sedan på knappen Importera.

Importera modell divi

Spara slutligen ändringarna i temageneratorn och visa en live-sida för att se den fasta sidfoten.

Spara ändringarna för divi-layout

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.

Val av Divi-editor

Välj sedan alternativet "Bygg global sidfot" i listrutan.

Lägg till en sidmodell i divi

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".

Välj förkonstruerad modell divi

I popup-fönstret Ladda från bibliotek letar du efter landningssidans layout för brevpapper. Klicka sedan på "Använd denna layout".

Använd en divi-modell

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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Ta bort onödigt avsnitt

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.

Divi sidfot

Ä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.

Ändra etikett för sidfot

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.

fast fotlåda

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.

Urvalslayout divi

Radfyllning

Innan du lägger till en modul, öppna radinställningarna och uppdatera stoppningen enligt följande:

  • Polstring: 0px hög, 0px låg
Avstånd för konfiurationsdelning

Avsnitt stoppning

Öppna sedan inställningarna i avsnittet "Footer låda" och uppdatera stoppningen enligt följande:

Konfiguration av avdelningsavstånd

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.

Sidfot låda divi
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.

Välj ikon för sidfotlåda
Blurb Design

Ge sedan presentationsteksten enligt följande:

  • Bakgrundsfärg: # 081540
Ändra divi bakgrund

Uppdatera sedan designparametrarna enligt följande:

  • Ikonfärg: #eeeeee
  • Cirkelikon: JA
  • Cirkelfärg: # 081540
  • Använd ikonstorlek för ikon: JA
  • Ikonstorlek: 17 pixlar
Anpassa blurb divi-knappen
Presentationens textstorlek

Ge modulen nu en höjd och en bredd enligt följande:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Bredd: 30px
  • Höjd: 30px

Detta kommer att få cirkelikonen att rinna över i textbehållaren för att skapa vattendroppsform.

Redigera divi-knappdesign
Blurb Position

Ge sedan presentationsteksten en absolut position längst upp i mitten av avsnittet.

  • Position: Absolut
  • Plats: Top Center
Ändra delningsknappens position
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
Återgå divi-knappen

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
Definiera en divi-väljare

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.

Transformera sektionsdel

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
Lägg till klass har transformation divi

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
Ändra position i divi-hörnet

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.

Dölj avsnitt på mobilen

Ö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.

Kontrollera siktavdelningen

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.

Lägg till modulkod

Klistra sedan in följande kod i kodområdet:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

.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 );   
Lägg till divi-kodmodul

Spara ändringar

Kom ihåg att spara layouten innan du avslutar redigeraren.

Spara divi-modifieringar

Spara också ändringarna i temageneratorn.

Spara ändringar

Slutresultat

Nu kan vi gå till vilken sida som helst på din webbplats för att se slutresultatet.

Avslutande tankar

Hoppas att den flytande sidfoten hjälper dig att marknadsföra innehåll på ett roligt och tillgängligt sätt. Som alla lådor kan du fylla den med nästan vad du än 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.

Översatt från: Elegant Teman

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer