Förvandla Divi Shop-modulen till dynamiska produktkartor på mobil

Förvandla Divi Shop-modulen till dynamiska produktkartor på mobil

När du skapar en målsida för specifika produkter, oavsett om det är en ny lansering eller en försäljning du förbereder dig för, är chansen stor att du kommer att använda Shop-modulen någon gång. Med Divis Shop-modul kan du dynamiskt extrahera produkter från WooCommerce-plugin och utforma dem med Divis inbyggda alternativ. 

Nu levereras som standard butiksmodulen med några kolumnstrukturer som alla översätts till två kolumner på mindre skärmstorlekar. Detta innebär att ju fler produkter du väljer att visa desto mer vertikal rullning krävs för att komma till nästa del av din målsida.

I modern webbdesign är en teknik som ofta används för att begränsa vertikala rullnings- och visningselement enligt dina besökares preferenser att använda magnetkort. I den här handledningen visar vi dig hur du omvandlar Divi-butiksmodulen till dynamiska produktkartor på mindre skärmstorlekar utan att använda ett plugin. 

Vi börjar med att förbereda de olika elementen i vår produktsektion och använder en liten mängd CSS-kod för att aktivera svepeffekten. Det är ett utmärkt sätt att visa upp ett brett utbud av produkter på din målsida utan att överväldiga dina besökare. 

Möjligt resultat

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet. Vi aktiverar endast produktens magnetkort på surfplattor och mobiler. På skrivbordet behåller vi kolumnstrukturen som vi bestämmer i Shop-modulen.

Divi produktmodul butik animation

1. Konfigurera WooCommerce och produktsidor

Innan du går in i Divi-delen av den här självstudien är det viktigt att plugin-programmet WooCommerce är installerat och aktiverat på din webbplats. Om du inte redan har gjort det, lägg till flera produkter, beroende på antalet produkter du vill visa i din butiksmodul.

Skapa woocommerce-produkter

2. Skapa en ny sida och ladda ner sidan för brevpapper

Skapa en ny sida

När produkterna är på plats lägger du till en ny sida i din WordPress-backend. Ge din sida en titel, publicera sidan och aktivera Divi Visual Builder.

Skapa en divisida
Skapa en ny divisida

Ladda ner målsidans layout

När du väl har kommit in på din nya sida, navigerar du till dina förinställda layouter och laddar ner målsideslayouten för brevpapper. Även om vi använder denna specifika layout är du fri att använda vilken annan layout du vill, så länge du lägger till eller hittar en butiksmodul inuti denna layout.

Välj en divi-layout

3. Ändra butiksavsnittet

Leta reda på avsnittet med Shop-modulen

Om vi ​​bläddrar ner till vår nya sida som vi skapade med hjälp av hemsidans layout för pappersvaror kommer vi att stöta på ett avsnitt med en butiksmodul. Vi använder det här avsnittet genom nästa steg i denna handledning.

Leta reda på butiksmodulen

Linjeinställningar

Lyhörd storlek

Börja med att öppna radinställningarna för raden som innehåller Shop-modulen. Som nämnts tidigare behåller vi samma design på skrivbordet, vi aktiverar bara produktens svepkort på mindre skärmstorlekar. 

För att skapa en enkel upplevelse tillåter vi raden att röra vid vänster och höger sida av vår skärm genom att ändra bredden i storleksinställningarna.

  • Använd en anpassad rännbredd: 1
  • Bredd: 80% (skrivbord), 100% (surfplatta och telefon)
Responsiv designändring

synlighet

Vi kommer också att se till att ingenting går utöver radbehållaren genom att ställa in synlighetsinställningarna till dolda.

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Divi synlighet konfiguration

Handla modulinställningar

Välj antalet produkter och önskad kontorsstruktur

Därefter öppnar vi inställningarna för Shop-modulen. De ändringar vi gör i vår CSS-kod (som vi kommer att lägga till senare) beror på antalet produkter vi visar. 

Vi börjar med att visa hur du gör en butiksmodul med åtta produkter till produktkort. Du kan välja vilken kolumnlayout du vill ha på skrivbordet.

  • Antal produkter: 8
  • Kolumnlayout: 4 kolumner
Ändra divi kolonn design

Lyhörd storlek

För att öka storleken på vår butiksmodul ändrar vi storleksparametrarna på fliken design. Observera att vi bara gör detta för surfplattan och telefonen.

  • Bredd: 100% (skrivbord), 250% (surfplatta och telefon)
  • Maximal bredd: 100% (skrivbord), 250% (surfplatta och telefon)
Responsiv designkonfiguration

CSS klass

Vi lägger också till en CSS-klass i vår butiksmodul. Senare, när vi lägger till CSS-koden, kan vi förvandla Shop-modulen som bara bär den här CSS-klassen. Med andra ord, om du vill att en annan Shop-modul ska visas i normalt tillstånd kan du göra det om du lämnar denna CSS-klass.

  • CSS-klass: produkt-svep-kort
Ändra attribut css divi shop-modul

Reaktiva överflöd

Vi kommer att komplettera radinställningarna genom att ändra synlighetsinställningarna på olika skärmstorlekar. Som du kan se i inställningarna vill vi bara att rullningseffekten ska uppstå på mindre skärmstorlekar.

  • Horisontellt överflöd: dold (skrivbord), rullning (surfplatta och telefon)
  • Vertikalt överflöde: dold
Konfiguration av överflöde

Lägg till en kodmodul under Shop-modulen

När du har modifierat Shop-modulen kan du lägga till en kodmodul precis nedan.

Lägg till kodmodul under divi shop-modulen

Lägg till CSS-kod i modulen

Följande CSS-kod förvandlar automatiskt vår butiksmodul med 8 produkter till reaktiva magnetkort:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Lägg till css divi-kod

Matcha olika produktkonton

Nu, om du vill lägga till färre (eller fler) produkter i din butiksmodul ändras koden något på två ställen. Båda dessa platser måste ändras manuellt för att matcha önskat resultat. Låt oss ändra till exempel antalet produkter i vår butiksmodul till '4'.

  • Antal produkter: 4
Matcha ett annat produktkonto

När vi kommer tillbaka till vår kod måste vi göra två ändringar. Först måste vi ändra kolumnerna i rutmallen. Istället för 8 använder vi 4 (samma antal som vårt antal produkter). Vi ökar också den procentuella storleken som dessa produkter upptar i våra produktblad (ju fler produkter, desto mindre utrymme).

rutmall-kolumner: upprepa (4, 14%)! viktigt;

Då ändrar vi också bredden på behållaren där produkterna placeras. För 4 produkter motsvarar detta 150%. Dessa värden är inte fasta, de erhålls genom att spela och hitta en harmoni mellan kolumnerna i rutnätmodellen och behållarens bredd. 

För att hitta rätt balans, byt till mobilvyn i Visual Builder och justera värdena noggrant medan du ser resultatet av dessa ändringar.

width: 150%!important;

Lägg till ytterligare divi css-kod

Lägg till ett ögonblick i rullningen

Om du vill ta användarupplevelsen ett steg längre i utformningen av ditt svepkort kan du också lägga till en rullning. Scroll capture tillåter dina besökare att bläddra genom att stirra i början av en ny produkt.

 Det betyder att deras skanning inte behöver vara exakt, bläddringsslam tar över någon gång och skärmen justerar sin position inuti sidrullmekanismen. 

För att möjliggöra rullning på din produkts svepkort, lägg till en rad CSS-kod till varje produkt individuellt i CSS-koden (se utskriftsskärmen nedan).

rulla-snap-align: start

Vi aktiverar också bläddring i vår butikmodul genom att lägga till följande rad med CSS-kod:

rulla-snap-typ: x obligatorisk

Anpassa css-kod

Återanvänd workshopmodulen för att visa andra kategorier

Klona en hel rad en gång

När du har slutfört den första uppsättningen magnetkort kan du klona hela linjen en gång.

Återanvänd divi-verkstadsmodulen

Ta bort kodmodulen i dubblettrad

Så länge din butiksmodul innehåller samma CSS-klass som den tidigare kommer en kodmodul att göra. Fortsätt och ta bort kodmodulen i din dubbla rad.

Duplicera divi-kodmodulen

Klona dubblettraden så mycket du vill

Och klona duplikatlinjen nu så många gånger som behövs, beroende på antalet uppsättningar magnetkort som du vill visa på din målsida!

Klon modulen så mycket som behövs
Duplicerad divi-modul

4. Spara sidförändringar och visa resultat på en mobil enhet

Se till att när du är klar med att lägga till produktens svepkort sparar du din sida innan du avslutar Visual Builder och du är klar!

Förhandsgranskning av demo på mobilenhet

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

Divi produktmodul butik animation

Avslutande tankar

I den här artikeln har vi visat dig hur du gör den integrerade Divi Shop-modulen till produktmagnetkort på mindre skärmstorlekar. På skrivbordet har vi behållit den ursprungliga kolumnstrukturen som tilldelats Shop-modulen. 

Genom att använda produktkartor kan du lägga till oändliga produkter i en horisontell svepmekanism utan att överväldiga dina vertikala rullningsbesökare.

Detta är en trend som ofta används i modern webbdesign eftersom den fokuserar på användarnas beteende och gör det lättare att komma åt ett brett spektrum av element på mindre skärmar.

 Du kan använda dessa produktblad på vilken sida som helst, men det är särskilt praktiskt för alla produktlandningssidor du skapar. Du kunde också ladda ner JSON-filen gratis! 

Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Hur man lägger till en animerad räknare för att rulla på Divi

Hur man lägger till en animerad räknare för att rulla på Divi

Animerade nummerräknare är populära på webben som ett sätt att visa numeriska data för att belysa värdet på tjänster, fallstudier etc. Divi har en dedikerad nummerräknarmodul som kan användas för att enkelt skapa animerade nummraräknare.

I denna handledning kommer vi dock att visa dig hur du skapar digitala räknare som animeras när du rullar med Divi. Med Divis positionsalternativ och rullningseffekter ska vi utforma en enkel layout för att visa ett datum med rullningsnummer.

Del 1: Skapa titelsektionen

I den första delen skapar vi en enkel titel för layouten.

Lägg först till en rad med en kolumn i avsnittet.

Registrera en divisektionsmodul

Lägg sedan till en ny textmodul till raden.

Uppdatera innehållet i textmodulen med följande:

Spara datumet
Spara datumet 1

Uppdatera sedan rubrikens textstil enligt följande:

  • Rubrik 2 typsnitt: Prata
  • Artikel 2 Textstorlek: 130 px (skrivbord), 70 px (surfplatta), 40 px (telefon)
Ändring av Divi-titel

Del 2: Skapa räknare med rullande animering

I den här nästa delen skapar vi de tre räknarna som animerar rullningsnumren tills de slutar för att visa ett datum (månad, dag och år). Varje räknare kommer att byggas med totalt 5 textmoduler och en separatormodul. Den första textmodulen fungerar som räknarens etikett (dvs. månad, dag, år). De kommande fyra textmodulerna kommer var och en att innehålla ett annat nummer (pågår) som kommer att animeras vid rullning med hjälp av de vertikala förskjutningarna i Divi. Den nedre separationsmodulen hjälper till att dölja överflödet av siffror.

Så här.

Lägg till en andra rad

Lägg till en ny rad i en kolumn under den befintliga raden.

Linjeinställningar

Innan du lägger till en modul, uppdatera radparametrarna enligt följande:

  • Rännbredd: 1
  • Polstring: 0px hög, 0px låg
Divi kantkonfiguration

Kolumnparametrar

Öppna sedan kolumninställningarna och uppdatera fyllningen enligt följande:

  • Polstring (skrivbord): 100px låg
  • Polstring (surfplatta och telefon): 0px låg
Konfiguration av divi-kolumnavstånd

Lägg till en textmodul

Lägg sedan till en textmodul i kolumnen.

Lägg till en divi-textmodul

Innehåll / etikett

Lägg till ordet "månad" för innehållet i textmodulen.

Ange månadsdelningen

Inställningar för textdesign

När du har lagt till innehåll ska du uppdatera designinställningarna enligt följande:

  • Bakgrundsfärg: #ffffff
  • Textstilsort: Prata
  • Textstorlek: 40px
  • Höjd på textrad: 2em
  • Bredd: 100%
  • Polstring: 20 pixlar längst upp, 20 pixlar längst ner, 20 pixlar till vänster, 20 pixlar till höger
  • Nedre kantbredd: 5 st
  • Färg på den nedre gränsen: #eeeeee
Placera

Uppdatera sedan placeringsalternativen på följande sätt på den avancerade fliken:

  • Position: Relativ
  • Z index 1
Prata wordpress-modul

Lägg till en textmodul för det första numret

När den första textmodulen är på plats kan vi börja lägga till siffrorna som kommer att flyttas på rullningen. För att lägga till det första numret, lägg till en ny textmodul under den befintliga "Månad" textmodulen.

Lägg till storyteller textmodul

Lägg till nummer / innehåll

Uppdatera sedan textmoduletiketten för att läsa “num1” för enklare referens. Uppdatera sedan innehållet med siffran “01”.

Lägg till divi-nummermodul

Designinställningar för nummer

Uppdatera följande under fliken Design:

  • Textsteckensnitt: Prata
  • Text Textfärg: # 8ab2d3
  • Texttextstorlek: 70px
  • Textbokstavsavstånd: 4px
  • Textradhöjd: 1.5em
  • Polstring: 20px kvar
Divi färgkonfiguration

OBS: Siffrorna har en textstorlek på 70px och en radhöjd på 1.5 em, vilket innebär att den totala höjden för textmodulen kommer att vara nära 100 px. Detta är viktigt att komma ihåg när vi börjar lägga till vertikala rörelseförskjutningar. Om du till exempel lägger till en vertikal förskjutning av ”1” i textmodulen flyttar textmodulen exakt 100px vilket är textmodulens höjd.

Ruleffekter för första nummer

Lägg till följande rullningseffekter i textmodulen.

Uppdatera följande under fliken Vertikal rörelse:

  • Aktivera vertikal rörelse: JA
  • Startförskjutning: 1 (vid 10%)
  • Genomsnittlig offset: 0 (vid 20%)
  • Slutförskjutning: -1 (vid 30%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Aktivera fade in och ut: JA
  • Initial opacitet: 0% (vid 10%)
  • Genomsnittlig opacitet: 100% (vid 20%)
  • Slut opacitet: 0% (till 30%)

Se till att ställa in utlösaren för rörelseeffekten högst upp på klippet:

  • Motion Effect Trigger: Element Top
Konfigurationsanimationsmodul divi-text

Skapa textmodulen för det andra numret

Duplicera det första numret

När det första numret har skapats duplicerar du det för att skapa den andra nummermodulen. Uppdatera sedan etiketten i lagervyn för bättre referens.

Duplicera divi 1 textmodul

Uppdatera nummer / innehåll

Öppna parametrarna för den andra digitala textmodulen och uppdatera innehållet med siffran "02".

Spara nummer 2 divi

Uppdatera position

Uppdatera sedan positionsalternativen enligt följande:

  • Position: Absolut
  • Vertikal offset: 126px
Ändrar position för divi-textmodul

Uppdatera rullningseffekter

Uppdatera sedan rullningseffekterna enligt följande:

Uppdatera följande på fliken Vertikal rörelse:

  • Startförskjutning: 1 (vid 20%)
  • Genomsnittlig offset: 0 (vid 30%)
  • Slutförskjutning: -1 (vid 40%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Initial opacitet: 0% (vid 20%)
  • Genomsnittlig opacitet: 100% (vid 30%)
  • Slut opacitet: 0% (till 40%)
Animering rullningseffekt divi

Skapa en textmodul för det tredje numret

Duplicera det andra numret

Du skapar textmodulen för det tredje numret genom att duplicera textmodulen för det andra numret.

Kopiera textmodul nummer 3

Uppdatera nummer / innehåll

Uppdatera innehållet med siffran "03".

Ändra divi-textmodulen

Uppdatera rullningseffekter

Uppdatera sedan rullningseffekterna:

Uppdatera följande på fliken Vertikal rörelse:

  • Startförskjutning: 1 (vid 30%)
  • Genomsnittlig offset: 0 (vid 40%)
  • Slutförskjutning: -1 (vid 50%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Initial opacitet: 0% (vid 30%)
  • Genomsnittlig opacitet: 100% (vid 40%)
  • Slut opacitet: 0% (till 50%)
Redigera textmodulanimering

Skapa en textmodul för det fjärde numret

Tredje duplikatfrågan

För att skapa det fjärde numret för rullningsräknan, kopiera textmodulen för det tredje numret.

Dubblett textmodul divi nummer 4

Uppdatera nummer / innehåll

Uppdatera innehållet med siffran "04".

Konfigurera divi-textmodulvärde

Uppdatera rullningseffekter

Uppdatera sedan rullningseffekterna:

Uppdatera följande på fliken Vertikal rörelse:

  • Startförskjutning: 1 (vid 40%)
  • Genomsnittlig offset: 0 (vid 50%)
  • Slutförskjutning: 0 (vid 60%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Initial opacitet: 0% (vid 40%)
  • Genomsnittlig opacitet: 100% (vid 50%)
  • Slut opacitet: 100% (till 60%)
Animationskonfigurationsmodul 4 divi

Lägg till en nedre separator

Lägg till en ny separatormodul under den sista textmodulen. Detta kommer att användas för att dölja det undre överflödet av den rullande texten i vyn.

Lägg till diviseparator-modul

Välj sedan NO för att visa separatorn.

Visa inte diviseparatorn

Stil- och positionsinställningar

Uppdatera separatorkonstruktionen enligt följande:

  • Bakgrundsfärg: #ffffff
  • Bredd: 100%
  • Höjd: 100px
  • Övre kantbredd: 5px

På fliken Avancerat uppdaterar du följande:

  • Inaktivera på: telefon och surfplatta
  • Position: Absolut
  • Plats: längst ner till vänster

VIKTIGT: Utrymmet som avgränsaren kommer att uppta skapades tidigare genom att lägga till 100 pixlar nedre vaddering i kolumnen. Om du inte lägger till den här stoppningen överlappar avgränsaren siffrorna.

Skapa ytterligare räknare och kolumner

Duplicera kolumn 1 och uppdatera innehållet

För att skapa en ny räknare, duplicera kolumn 1. Detta skapar en andra kolumn med alla element på plats automatiskt.

Då behöver du bara uppdatera innehållet i alla textmoduler med nya texter och nummer.

Duplicera hela kolumn divi

Duplicera kolumn 2 och uppdatera innehållet

När innehållet i alla textmoduler har uppdaterats i kolumn 2, duplicera kolumn 2 för att skapa en tredje räknare för året. Uppdatera sedan innehållet i varje textmodul efter behov.

Slutresultat

Här är det slutliga resultatet.

Andra resurser

Avslutande tankar

Denna enkla layout med animerade rullningsnummerräknare bör vara användbar för att visa digitala data på ett nytt och unikt sätt. Tveka inte att rensa datumkonceptet och använd diskarna för allt du kan drömma om!

Hur man skapar animerade lådor på Divi

Hur man skapar animerade lådor på Divi

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.

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
BlurbDesign

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:

  • 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:

.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

Skapa en flytande kontaktsektion med rullningseffekter på Divi

Skapa en flytande kontaktsektion med rullningseffekter på Divi

Varje webbplats behöver ett kontaktsektion, men det betyder inte att du måste gå för en standarddesign. Med Divis rullningseffekter kan du skapa ett flytande kontaktavsnitt som sticker ut. Förbättra din användarinteraktion med en vertikal rullande kontaktavsnittslayout som bjuder in besökare att interagera med ditt kontaktformulär. I den här artikeln ska vi visa dig hur du skapar ett flytande kontaktavsnitt i full bredd som du kan lägga till på vilken sida som helst. Du kan till och med lägga till det högst upp på en sidfot med Divi Theme Builder.

Nedan hittar du en gratis nedladdningsbar fil med JSON-layout som kan laddas ner i ditt eget Divi-bibliotek. Vi har också inkluderat en PSD-mall som hjälper dig att återskapa kartbakgrunden, samt en SVG för kartnål så att du kan anpassa den med dina egna färger.

Skapa en elementstruktur

I den här designen kommer vi att använda en bakgrundsbild som representerar på Google Map den plats du vill markera. Du kan göra detta med Photoshop eller någon annan bildredigerare.

Lägg till en ny sektion

Nu är det dags att börja skapa den flytande kontaktsektionen med Divi Builder! Det första vi ska göra är att öppna en ny eller befintlig sida och lägga till ett nytt avsnitt.

Lägg till bakgrunden på kartan som du skapade i Photoshop på innehållsfliken.

  • Bakgrundsbild: din modifierade karta
Divi bakgrundsbild

avstånd

Anpassa sedan sektionsavståndsinställningarna på designfliken.

  • Övre och undre marginal: 50vh
  • Botten stoppning: 0vw
Divi 1 sektionsavståndskonfiguration

synlighet

Ställ sedan överflödena till synliga.

  • Horisontellt och vertikalt överflöde: synligt
flytande kontaktsektion

Placera

Slutligen ställer du in Z-index för avsnittet till 10.

  • Z-index: 10
Divisektionens position

Lägg till en ny rad

Kolumnstruktur

Nu är det dags att lägga till några saker. Lägg först till en rad med två kolumner.

Rad har två kolumner divi

dimensionering

Öppna linjeparametrarna och justera storleken på följande sätt.

  • Bredd
    • Kontor: 90%
    • Tablet och telefon: 80%
  • Max bredd: 90%
Divi line parameter

synlighet

Klicka på den avancerade fliken och justera sedan överflödet.

  • Horisontellt och vertikalt överflöde: synligt
Konfiguration av överflödesdelning

Placera

Slutför radinställningarna genom att ändra positionsinställningarna.

  • Position: Relativ
  • Offset-ursprung: övre vänster
  • Vertikal förskjutning
    • Skrivbord: -8vw
Konfigurera delningslinjens position

Kolumn 1 Inställningar

Bakgrund

Innan du lägger till moduler måste vi utforma de enskilda kolumnerna. Lägg till en bakgrundsfärg i kolumn 1.

  • Fast färg: # 25274d
Kolumnfärg 1 divi

Förband

Justera avståndsinställningarna nästa

  • Övre och nedre stoppning
    • Skrivbord och surfplatta: 7vw
  • Vänster och höger stoppning
    • Skrivbord: 3vw
    • Tablet och telefon: 6vw
Konfiguration av avstånd med två kolumner

Border

Lägg sedan till några avrundade hörn i kantinställningarna.

  • Rundade hörn: 10px alla fyra hörnen
Avdelade rundade kanter

Ruleffekter

Sist men inte minst, använd viss vertikal rörelse i rullningseffektinställningarna. Detta hjälper oss att skapa en flytande effekt.

  • Scroll Transform Effects: Vertical Motion
  • Vertikal rörelse / stationär uppsättning
    • Starta offset: 4
    • Mid Offset: 0 (50%)
    • Avsluta offset: -4
  • Vertikal rörelse / surfplatta och telefonuppsättning
    • Starta offset: 4
    • Mid Offset: 0 (40% och 60%)
    • Slutförskjutning: -3
  • Trigger motion-effekt: mitt i elementet
Anpassa rullningseffekt för divisektion

Inställningar för kolumn 2

Placera

Låt oss nu gå vidare till parametrarna i den andra kolumnen. Justera positionsinställningarna därefter.

  • Position: Relativ
  • Offsetens ursprung: uppe till vänster
  • Vertikal offset
    • Kontor: 25vw
Divi kolumn anpassning

Rullaffekter

Vi lägger också till en vertikal rörelse i den här kolumnen.

  • Effekter för rullningsomvandling: vertikal rörelse
  • Definiera vertikal / stationär rörelse
    • Startförskjutning: 2
    • Genomsnittlig offset: 0 (vid 50%)
    • Slutförskjutning: -2
  • Definiera vertikal rörelse / surfplatta och telefon
    • Startförskjutning: 0
    • Genomsnittlig offset: 0 (vid 50%)
    • Slutförskjutning: -2
  • Motion Effect Trigger: Element Top
Divi rullningseffekt

Lägg till en textmodul i 1-kolumnen

Innehåll

Det är dags att lägga till moduler, med en textmodul i kolumn 1. Lägg till H2-innehåll du vill ha.

Innehållsmodul för kolumn 1

Titeltext

Gå till fliken design och utforma H2-texten enligt följande.

  • Titelnivå: H2
  • Typsnitt: Palanquin Dark
  • Teckensnitt vikt: fetstil
  • Teckensnittstyp: TT
  • Färg: gul # ffd868
  • storlek
    • Kontor: 5vw
    • Tablet: 10vw
    • Telefon: 12vw
  • Brevavstånd: 4px
Divi-teckensnittsanpassning överst

Lägg till en kontaktformulärmodul i kolumn 1

Innehåll

Lägg till ett kontaktformulär under textmodulen. Det här är de fält vi använder:

  • namn
  • E-post
  • material
  • Meddelande
Lägg till divi-kontaktformulär

spam skydd

Innan du utformar kontaktformulärsmodulen. aktivera skräppostskydd och anslut ditt ReCaptcha-konto.

  • Använd en skräpposttjänst: Ja
  • Tjänsteleverantör: ReCaptcha
  • Välj ett konto
Divi-kontaktformulär skräppostskydd

fält

Byt till designfliken och utforma fälten enligt följande.

  • Bakgrundsfärg: Mörkblå # 25274d
  • Textfärg: ljusgrå # d1d1d1
  • Fokus bakgrundsfärg: Mörkblå # 25274d
  • Fokustextfärg: ljusgrå # d1d1d1
  • Typsnitt: Palanquin
  • Stil: TT
  • Textstorlek
    • Kontor: 0.9vw
    • Tablet: 2vw
    • Telefon: 3vw
  • Brevavstånd: 1px
Anpassa färgfält 1

knapp

Styliser sedan knappen.

  • Anpassade stilar: Ja
  • Textstorlek: 20px
  • Textfärg: mörkblå # 25274d
  • Bakgrundsfärg: gul # ffd868
  • Gränseradie: 7px
  • Ikonfärg: Mörkblå # 25274d
  • Övre marginal: 5px
Anpassa divi-knappstil 1
Divi-knappens färgkonfiguration

dimensionering

Vi modifierar sedan dimensioneringsparametrarna.

  • Bredd: 100%
  • Max bredd: 100%
Konfiguration av delningsstorlek

avstånd

Vi kommer också att lägga till toppfyllning.

  • Övre stoppning: 4vw
Divi-avstånd

gräns

Slutför modulparametrarna genom att anpassa gränsparametrarna.

  • Ingångar med rundade hörn: 6px vid de fyra hörnen
  • Poster Border-stilar: alla fyra sidor
  • Ingångsbredd: 2px
  • Poster Gränsfärg: gul # ffd868
Divi kantkonfiguration

Lägg till spårningsmodulen för sociala medier i kolumn 2

Innehåll

Gå till kolumn 2 och lägg till en modul för sociala medier. Använd alla sociala nätverk du behöver.

  • Facebook
  • Twitter
  • LinkedIn
Modulen följer oss på sociala nätverk

Lien

Lägg till länkar till motsvarande nätverk innan du stylar.

Artikelns sammanhang

Öppna nu det första sociala nätverket och ändra bakgrundsfärgen.

  • Färg: Mörkblå # 25274d
Ändra divi 1-bakgrund

Element-ikonen

På designfliken för samma element ändrar du ikoninställningarna enligt följande.

  • Färg: gul # ffd868
  • Ikon teckenstorlek
    • Skrivbord och surfplatta: 31 st
    • Telefon: 26 st
Anpassa färg divi

Objektavstånd

Lägg sedan till en liten marginal för att skilja ikonerna från varandra.

  • Höger marginal: 1vw
Konfiguration av socialt delningsavstånd

Kopiera och klistra in artikelformat

För att utforma de återstående sociala nätverken, gå tillbaka till huvudinnehållsfönstret och kopiera elementstilarna från den första ikonen. Klistra sedan in elementstilarna på återstående sociala nätverk.

Kopiera stilelement
Klistra in stilelement divi

uppriktning

Byt till huvuddesignfliken och se till att modulen är vänsterjusterad.

  • Justering av modulen: vänster
Välj inriktning

dimensionering

Justera sedan storleken på modulen.

  • Bredd: 100%
Konfigurera delningsstorlek

avstånd

Ta också bort alla standardfyllningar.

  • Övre, nedre, vänster och höger stoppning: 0vw
Konfigurera divi-avstånd

gräns

Slutligen lägg till rundade hörn i gränsinställningarna. Detta justerar gränserna för alla ikoner samtidigt.

  • rundade hörn
    • Upp till vänster och höger: 7 pixlar
    • Nedre vänster och höger: 0px
Divi-modul kantkonfiguration

Lägg till en textmodul i 2-kolumnen

Innehåll

Lägg till en annan textmodul under modulen sociala medier. Lägg till innehåll efter eget val. Vi lade till två adresser, ett telefonnummer och ett e-postmeddelande. Använd fetstil på titeln på varje artikel i alla versaler.

  • Allmänt område: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
  • Försäljningspunkt : Emporium Mall, 2: a våningen
  • telefon: (321) 564 2398
  • e-post: [e-postskyddad]
Adresskonfiguration för Divi-textmodul

sammanhang

Ändra modulens bakgrundsfärg.

  • Färg: Mörkblå # 25274d
Textmodulens bakgrundskonfiguration

Texte

Byt till designfliken och utforma texten.

  • Typsnitt: Palanquin
  • Färg: gul # ffd868
  • Storlek: 18px
Divi-modul text typsnitt

avstånd

Lägg också till anpassade avståndsvärden.

  • Övre marginal
    • Kontor: -60px
    • Tablet och telefon: -50 pixlar
  • Övre, nedre, vänster och höger stoppning
    • Kontor: 3vw
    • Tablet: 6vw
    • Telefon: 8vw
Divi-avståndsmarginal

gräns

Och slutför modulen genom att lägga till rundade hörn i kantinställningarna. Det är allt!

  • Rundade hörn: 10 pixlar längst upp till höger, nedre vänstra och nedre höger.
Rundad delad textmodul

undersökningen

Nu när vi har återskapat avsnittet med flytande kontakter, ta en sista titt på resultatet på olika skärmstorlekar.

flytande kontaktsektion

Ytterligare resurser

Dess resurser kan komplettera det du just läst. De kan användas förutom eller av dem som inte har Divi-temat.

att avsluta

Med de nya Divi-rullningseffekterna förvandlas alla standardlayouter till en fin design. Genom att skapa din egen bakgrund har du mer kontroll över utseendet på den färdiga designen. Om du har några frågor eller förslag, lämna en kommentar i kommentarfältet nedan!

Hur man skapar en färgstark textbakgrundsrullningsanimation med Divi

Hur man skapar en färgstark textbakgrundsrullningsanimation med Divi

Skapa en textbakgrundsrullningsanimation är ett unikt sätt att lägga till färgglada animerade texturer till din webbplatstext medan en användare rullar på sidan. Med Divi är processen överraskande lätt när du har lärt dig några viktiga tekniker.

I den här handledningen använder vi bara kraften i Divis inbyggda inställningar för att skapa 3 unika mönster som har färgglad textbakgrundsrullningsanimering. Vi visar till och med hur du skapar en mörk version av varje design för ett helt nytt utseende.

Låt oss börja!

Möjligt resultat

Här är en titt på de mönster vi kommer att bygga idag.

Design 1: Textbakgrundsgradient med horisontell rullningseffekt

Denna första design kommer att ha en horisontell rullningseffekt som animerar en färgad separatormodul bakom en textmodul med skärmfiltret.

Lägg till en kolumn

För att komma igång, lägg till en rad med en kolumn i standardavsnittet.

Välj divi-kolumnlayout

Lägg till en textmodul

Lägg sedan till en ny textmodul i kolumnen.

Lägg till divi-textmodul

Innehåll

För kolumnens innehåll klistra in följande HTML-kod i innehållsområdet:

Spara fragmentkod

Formatera texten

Uppdatera sedan textdesignen enligt följande:

  • Bakgrundsfärg: #ffffff
  • Textstilsstil: TT
  • Textfärg: # 000000
  • Textstorlek: 100 px (skrivbord), 40 px (telefon)
  • Avstånd mellan textbokstäver: 0.15 em
  • Höjd på textrad: 1em
  • Justering av texten: centrum
  • Titel Typsnitt: Merriweather
  • Titel typsnitt vikt: fetstil
  • Titelstilsstil: TT
  • Rubriktextjustering: Mitt
  • Rubriktextfärg: # 000000
  • Rubriktextstorlek: 200 pixlar (skrivbord), 80 pixlar (telefon)
  • Titelbokstavsavstånd: 0.15 em
  • Titelradens höjd: 1em

Polstring och filter

Nu måste vi lägga till lite stoppning och skärmfilter i textmodulen. Filtret behövs för att denna design ska fungera eftersom det är det som gör att bakgrundsfärger / mods kan visas bakom texten.

För att lägga till fyllning och filter uppdaterar du följande:

  • stoppning: 15px hög, 20px låg
  • Blandningsläge: skärm

Obs! Skärmblandningsläget fungerar bäst med svart text på en vit bakgrund. Om vi ​​ville använda vit text på svart bakgrund skulle vi använda läget Multiply blend.

Divi textmodulavståndskonfiguration

Övre och nedre separator

När vår textmodul är klar, låt oss lägga till några separatorer (ovan och en under textmodulen) för ett ytterligare designelement.

Lägg till en nedre separator

Lägg till en ny separationsmodul under textmodulen.

Lägg till diviseparator-modul
Högre separationsinställningar

Öppna separatorinställningarna och välj NEJ för att visa separatorn.

divi text bakgrundsrullningseffekter

Uppdatera sedan bakgrunden och ge avdelaren samma blandningsläge som textmodulen enligt följande:

  • Bakgrundsfärg på vänster lutning: # 000000
  • Lutningsbakgrundsfärg till höger: #ffffff
  • Lutningsriktning: 90deg
  • Startposition: 48%
  • Slutposition: 0%
  • Blandningsläge: skärm
Konfiguration av färgavgränsare

Uppdatera sedan avdelarens höjd på telefonskärmen enligt följande:

  • Höjd: 15px (telefon)
Divi separator konfiguration

Lägg till övre separator

För att skapa den översta avdelaren, duplicera den föregående nedre avdelaren och dra den över textmodulen med hjälp av lagrets visningsområde.

Avdelareinsats

Vänd sedan in färgerna på lutningsbakgrunden.

Gradient bakgrundsinsättning

Uppdatera radparametrar

När våra övre och nedre separatorer är på plats uppdaterar du radparametrarna enligt följande:

  • Rännbredd: 1 (för att ta bort de lägre marginalerna mellan modulerna)
  • Maximal bredd: 600 pixlar (för att hålla en sammanhängande design på skrivbordet och surfplattan)
  • Linjeinriktning: mitt
  • Polstring: 0px hög, 0px låg
  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Anpassa delningslinjeparametern

Skapa en avgränsare för bakgrundsfärgen på den animerade texten

Det sista elementet i denna första design är avdelaren som vi använder för att animera bakgrundsfärgen på texten på rullningen. För att göra detta, lägg till en ny separationsmodul under den nedre avdelaren.

Separatorinsättning

Välj sedan NO för att visa separatorn.

Visa avdelare

Inställningar för bakgrundsdelare

Uppdatera separatorn med en lutningsbakgrund enligt följande:

  • Bakgrundsfärg på vänster lutning: # e02b20
  • Höger bakgrundsgradientfärg: # 8300e9
  • Lutningsriktning: 90deg
  • Startposition: 30%
  • Slutposition: 70%
Divi bakdelare

Vi vill att separatorns höjd ska vara tillräckligt hög för att färga all vår text i textmodulen och de övre och nedre separatorerna. För denna design ställer du in höjden till 400 pixlar.

  • Höjd: 400px
Avdelare höjddelare

Ge sedan avdelaren en absolut position för att placera den direkt ovanför de andra modulerna. Använd Z-index för att placera avdelaren bakom de andra modulerna.

  • Position: Absolut
  • Z-index: -1
Indexavgränsare
Bakgrundsavdelare rullar effekter

Med avgränsaren i läge är allt vi behöver göra att flytta avgränsaren bakom texten med Divis rullningseffekter. För den här designen kommer vi bara att lägga till horisontell rörelse i rullningen.

Uppdatera följande objekt:

Under fliken Horisontell rörelse ...

office

  • Aktivera horisontell rörelse: JA
  • Startförskjutning: 6 (vid 20%)
  • Genomsnittlig offset: 0 (40-60%)
  • Slutförskjutning: -6 (vid 80%)

Telefon

  • Startförskjutning: 3
  • Slutförskjutning: -3

Se också till att ställa in utlösaren för rörelseeffekten i mitten av klippet:

  • Trigger motion-effekt: mitt i elementet
Animeringskonfiguration

Lägg till sektionsavstånd

Lägg till följande i avsnittet för att skapa ett tillfälligt rullningsutrymme för att testa designen:

  • Marginal: 80vh ovan, 80vh nedan
Konfigurationsstorleksavdelning

Avslutande tankar

Textbakgrundsanimationsdesignerna som visas i den här artikeln skulle faktiskt fungera bra som en statisk design utan att lägga till rörelse på rullningen. De ytterligare rullningseffekterna tar dock designen till en helt ny nivå. Experimentera gärna med fler färger och effekter!

Jag kan inte vänta med att höra från dig i kommentarerna.

Till din hälsa!

Hur man skapar en fast sidfot med Divi

Hur man skapar en fast sidfot med Divi

Fasta sidfot kan vara ett praktiskt sätt att behålla viktig information om din webbplats framför och mitt när användaren interagerar med ditt sidinnehåll på vilken enhet som helst. 

Som med Divi existerar vanligtvis en sidfot som ett statiskt element längst ner på sidan efter huvudfotsinnehållet. De innehåller saker som upphovsrättstext och ikoner för sociala medier. 

Men om du inte gömmer innehållet i sidfoten längst ner på sidan kan du skapa en anpassad sidfot som flyter längst ner på skärmen när användaren rullar.

I den här handledningen ska vi utforma en helt personlig fixerad sidfot med hjälp av Divi-temageneratorn. Detta kommer att vara till nytta för dig att hålla de små men viktiga innehållsdelarna i sikte hela tiden.

Möjligt resultat

Här är en översikt över den fasta sidfoten som vi ska utforma.

Så lägger du till den fasta sidfotsmallen för att ladda ner på din Divi-webbplats

VARNING! 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.

För att importera den fasta sidfotsmallen 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.

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

Spara divi-ändringar

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 "Skapa en anpassad sidfot" från rullgardinsmenyn.

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 "Bygg från repor".

Del 2: Skapa en fast sidfot

Nu när vi redigerar från malllayoutredigeraren kan vi börja designa den fasta sidfoten. När du är klar kommer du att ha en fast sidfot med tre kolumner som är redo för innehåll.

Lägg till en tre kolumnlayout på raden

Lägg först till en layout med tre kolumner i raden.

3 rad sektion

Sektionens höjd

När de tre kolumnerna har lagts till, låt oss ge en definierad höjd till avsnittet. Detta är viktigt för att skapa utrymme längst ner på sidan där fasta nätet slutligen slutar. Vi tar också bort standarddynan för topp och botten.

För att ställa in höjd och stoppning öppnar du avsnittinställningarna och uppdaterar följande:

  • Höjd: 85px
  • Polstring: 0px hög, 0px låg
Divi 1 sektions höjdkonfiguration

Linjeinställningar

Nu när vår sektion är klar är vi redo att anpassa raden så att den fungerar som en fast sidfot. Öppna radinställningarna och uppdatera sedan följande:

sammanhang

  • Bakgrundsfärg: # 1a1e36
Åtkomst till linjeinställningar

Storlek och avstånd

  • Rännbredd: 1
  • Bredd: 100%
  • Max bredd: 100%
  • Polstring: 0 st upp, 0 st ned, 3% vänster, 3% höger
Anpassa divisektionen

Anpassad CSS

Även om raden är fixad vill vi att radhöjden ska matcha höjden på den överordnade sektionen så att utrymmet längst ner på sidan korrekt innehåller raden. Och vi vill se till att innehållet i raden förblir vertikalt inriktat. För att göra detta, lägg till följande anpassade CSS till huvudelementet på raden:

office

höjd: ärva! viktigt; display: flex; justera objekt: mitt;

Telefon

höjd: ärva! viktigt; display: block;
Lägg till en css-kod

Fast positionering

För att göra linjen fixerad så att den flyter längst ner på skärmen måste vi ge den en fast position vid den nedre mittplatsen enligt följande:

  • Position: fast
  • Plats: nedre centrum
Sidfotposition

Del 2: Skapa innehållet i den fasta sidfoten

Vid den här tiden har vi en sidfot med fast position redo för innehåll. Vi kan lägga till vilket innehåll vi vill i var och en av de tre kolumnerna. Men eftersom detta är en sidfot "bar" som är begränsad till 85 pixlar i höjd, måste vi begränsa mängden innehåll. Av denna anledning kommer vi att lägga till en liten meny med en dynamisk logotyp och fyra menyalternativ i kolumn 4. I kolumn 1 kommer vi att lägga till copyright-text med ett dynamiskt innevarande år. I kolumn 2 lägger vi till tre ikoner för spårning av sociala medier.

Lägg till en meny i kolumn 1

Lägg till en menymodul i kolumn 1.

Wordpress-menyval

Välj menyn

Välj sedan en av de menyer du redan har skapat på din webbplats. Se till att hålla menyalternativen 4 eller lägre.

Urvalsmeny wordpress-modul

Lägg till webbplatslogotypen som dynamiskt innehåll

För logotypmenyn kommer vi dynamiskt att lägga till webbplatslogotypen. Klicka på ikonen "Använd dynamiskt innehåll" medan du svävar över området för förhandsgranskning av logotypen. Välj sedan Webbplatslogotyp i listrutan.

Lägg till en logotyp

Ta bort bakgrunden

Ta sedan bort standardmenybakgrunden så att den är transparent.

Radera bakgrunden

Meny Design

Vid denna tidpunkt är vi redo att lägga till lite design i menyn. För den här designen kommer vi att hålla det enkelt och litet. Uppdatera följande designparametrar:

  • Teckensnittmeny: Overpass
  • Meny textfärg: # b59c61
  • Sepia-bild: 100%
  • Maximal logohöjd: 50px
Ändra teckensnittsfärgen

Lägg till copyright-text i kolumn 2

När menyn är på plats, gå till kolumn 2 för att lägga till upphovsrättstexten.

Lägg till en textmodul

Lägg till en ny textmodul i kolumn 2.

Markeringsmodul text divi

Lägg till det aktuella datumet dynamiskt med före och efter text

Här kommer vi att bli kreativa med dynamiskt innehåll för att visa innevarande år i copyrighttext. Detta kommer att säkerställa att året uppdateras automatiskt under hela webbplatsens livstid.

För att göra detta, klicka på ikonen "Använd dynamiskt innehåll" och välj "Aktuellt datum" i listan.

Urvalsdatum

Uppdatera följande i popup-fönstret Aktuellt datum:

  • tidigare:
  • 01Copyright &copy;
  • efter:
  • 01| Tous Droits Reservés
  • Datumformat : anpassad
  • Anpassat datumformat : 20 år
Anpassa datumet

Formatera texten

Uppdatera textdesignen och marginalen enligt följande:

  • Textstilsort: Övergångsställe
  • Textfärg: # b59c61
  • Justering av texten: centrum
  • Marginal (endast telefon): 10 pixlar längst upp, 10 pixlar längst ner
Textmodul för val av Divi-typsnitt

Detta stöder upphovsrättstext.

Lägg till spårningssymboler för sociala medier i kolumn 3

Lägg till en spårningsmodul för sociala medier i kolumn 3.

Lägg till sociala nätverk

Lägg till nödvändiga sociala nätverk på webbplatsen på fliken Innehåll. För denna design använder vi tre av dem.

Lägg till övervakningsmodul för sociala nätverk

Inställningar för spårning av sociala medier

Uppdatera sedan designinställningarna för alla sociala mediaspårningsikoner enligt följande:

  • Modulinriktning: rak (skrivbord och surfplatta), mitt (telefon)
  • Ikonfärg: # 1a1e36
  • Använd anpassad ikonstorlek: JA
  • Ikonstorlek: 16 pixlar (skrivbord och surfplatta), 14 pixlar (telefon)
Personalavdelningen

Uppdatera inställningar för sociala medier

För att uppdatera utformningen av den enskilda sociala nätverksikonen öppnar du inställningarna för det första nätverket och uppdaterar följande:

  • Bakgrundsfärg: #ffffff
  • Polstring: 8 pixlar till höger, 8 pixlar till vänster
  • Rundade hörn: 8px
fast fotstång divi

Utöka inställningarna för sociala medier till alla

Öppna sedan menyn för ytterligare inställningar för det första nätverket och välj " Förläng artikelstilar " i listan. I popup-fönstret Förläng stilar väljer du att förlänga stilar i " Denna kolumn "Och klicka sträcker .

Detta kommer att utvidga designen till resten av ikonerna i kolumnen.

Avslutande tankar

Att lägga till en fast sidfot är i vissa fall meningsfull. Barens höjd är liten nog för att inte distrahera eller ta för mycket utrymme på mobilen. Och det ger dig möjlighet att lägga till viktiga uppmaningar för bättre omvandlingar och en smidigare användarupplevelse.

För denna design skapas utrymmet längst ner på sidan genom att ställa in en fast höjd för sektionen och sedan låta den fasta linjen ärva sektionens höjd (även om den är fixerad). 

Andra resurser

Här är en lista med ytterligare resurser som kan hjälpa dig skapa i utformningen av din webbplats med Divi.