Gå till innehållet

Så lägger du till ett animerat block i din Gutenberg-artikel

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]

När du effektiviserar hur du skapar blogginlägg på din webbplats finns det en god chans att du vill inkludera en engagerande CTA någonstans i ditt inlägg. Nu, med Divis nya Gutenberg-layoutblockintegration, kan du enkelt lägga till ett nytt Divi-byggt block var som helst i ditt Gutenberg-blogginlägg. Detta gör att du kan behålla det övergripande innehållet i blogginlägget i Gutenberg-miljön, samtidigt som du fortsätter att skapa en personlig Divi CTA med Divis inbyggda alternativ. Det bästa av båda världar! I denna handledning visar vi dig hur du lägger till ett animerat Divi CTA-layoutblock online i ditt Gutenberg-inlägg. Vi delar också JSON-filen i Divi CTA-layoutblocket gratis!

Låt oss gå.

Möjligt resultat

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

Divi animationspresentation

Importerar JSON-layoutblocket

Ladda ner layouten i Divi-biblioteket

För att importera JSON-filen som du kunde ladda ner ovan, gå till ditt Divi-bibliotek i baksidan av din WordPress-instrumentpanel och klicka på 'Importera och exportera'.

Divi import

Välj sedan JSON-filen i din nedladdningsmapp och klicka på "Importera Divi Builder Layouts".

Importera json divi 1

Lägg till ett nytt Divi Block inuti Gutenberg

När din layout har importerats kan du komma åt ditt Gutenberg-meddelande och lägga till ett nytt Divi-layoutblock.

Lägg till en divi-layout

Importera en JSON-fil från sparade presentationer

Klicka sedan på "Ladda från bibliotek", gå till "Dina sparade layouter" och välj layouten för att importera Divi CTA-layoutblocket till ditt blogginlägg. Det är allt!

Ladda en divi-layout

Låt oss börja återskapa!

Använd publiceringsmallen för det tredje temapaketet

Använd det tredje temabuilderpaketet

Det är dags att börja skapa från grunden! Först och främst motsvarar designen som vi återskapar det tredje temapaketet som publicerades på Divi-bloggen. Gå till artikeln och ladda ner JSON-filerna för det här temapaketet.

Divi-tema wordpress-paket

Gå till Divi Theme Builder

När du har laddat ner det tredje temapaketet kan du komma åt Divi Theme Builder.

Temabyggare divi-meny

Ladda ner publiceringsmallen

Ladda ner postmallen för Theme Building Pack genom att klicka på ikonen i det övre högra hörnet.

Divi-modulportabilitet

Välj sedan inläggsmallen och klicka på "Importera Divi Theme Builder-mallar". Se till att också spara ändringarna i temabyggaren. Vid den här tiden har vi tilldelat blogginläggsmallen från Theme Building Pack till alla våra inlägg.

Skärmdump wordpress.go 2020.02.05 14 58 38

Öppna en befintlig Gutenberg-publikation eller skapa en ny

Nästa steg är att lägga till Divi CTA-layoutblocket i vårt Gutenberg-inlägg. För att göra detta, öppna en befintlig artikel eller skapa en ny.

Skapande av publikation på gutenberg

Lägg till ett nytt Divi-block online

Väl inne i meddelandet kan du lägga till ett nytt Divi-layoutblock.

Lägg till en divi-layout

Skapa en ny layout inuti Divi-blocket

Då har du två alternativ. Välj alternativet "Skapa en ny layout".

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]

Skapa en ny divi-layout

Avsnitt inställningar

avstånd

Väl inne i Divi-layoutblockredigeraren kommer du att märka ett avsnitt. Öppna det här avsnittet och lägg till anpassade marginalvärden för att skapa utrymme runt sektionsbehållaren.

  • Övre marginal: 50px
  • Nedre marginal: 50px
  • Vänster marginal: -10%
  • Höger marginal: -10%
Konfigurera sektionsavstånd på divi

Lägg till rad 1

Kolumnstruktur

Fortsätt att lägga till en ny rad med följande kolumnstruktur:

Välj en divikolumn

dimensionering

Utan att lägga till fler moduler, öppna linjeparametrarna och öka bredden och maximala bredden.

  • Bredd: 100%
  • Max bredd: 100%
Konfigurera storlek på delningslinjer

Lägg till separator # 1 i kolumnen

synlighet

Det är dags att lägga till moduler, som börjar med en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

  • Visa separator: Ja
Visa en diviseparator

Linje

Byt till fliken moduldesign och ändra radinställningarna enligt följande:

  • Linjefärg: # fc526e
  • Linjestil: solid
  • Linjeposition: hög
Konfigurera diviseparatorstil

dimensionering

Ändra även dimensioneringsparametrarna.

  • Divider vikt: 3px
  • Bredd: 30%
  • Modulens inriktning: höger
  • Höjd: 3px
Anpassa avdelaren

animering

Och ändra animationsinställningarna i enlighet med detta:

  • Animeringsstil: Bild
  • Animeringsriktning: vänster
  • Animeringstid: 2000ms
  • Animeringsfördröjning: 500 ms
  • Animationsintensitet: 100%
  • Animering start opacitet: 0%
Startar animatin divi separator-modul

Lägg divider # 2 i kolumnen

synlighet

Låt oss gå vidare till nästa separationsmodul. Återigen, se till att alternativet "Visa separator" är aktiverat.

  • Visa separator: Ja
Lägg till en ny diviseparator

Linje

Gå sedan till fliken moduldesign och ändra radinställningarna enligt följande:

  • Linjefärg: # e1e3e8
  • Linjestil: solid
  • Linjeposition: hög
Lägg till ny divi-linje

dimensionering

Ändra sedan modulens storlek på parametrarna.

  • Divider vikt: 3px
  • Höjd: 3px
Avdelningsdelare vikt

avstånd

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

  • Vänster marginal: 10%
  • Höger marginal: -20%
Konfigurera mellanseparationsmodulavstånd

animering

Och slutför modulinställningarna genom att ändra animationsinställningarna 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]

  • Animeringsstil: Bild
  • Animeringsriktning: vänster
  • Animeringstid: 2000ms
  • Animeringsfördröjning: 500 ms
  • Animationsintensitet: 100%
  • Animering start opacitet: 100%
Anpassa animeringsavgränsare 2

Du kan lägga till så många separatorer som du vill justera din animering.

Lägg till en rad # 2

Kolumnstruktur

Lägg till en ny rad i avsnittet med följande kolumnstruktur:

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och modifierar dimensioneringsparametrarna enligt följande:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Bredd: 70%
  • Linjeinriktning: mitt
Anpassning av rad 2-storlek

Lägg till textmodul nr 1 i kolumnen

Lägg till H2-innehåll

Lägg sedan till en första textmodul i radkolumnen med H2-innehåll du väljer.

Lägg till text i divikolumnen

H2 textinställningar

Byt till fliken Design och ändra H2-textinställningarna i enlighet med detta:

  • Textfärg på artikel 2: # fc526e
  • Rubrik 2 Textstorlek: 28px
Divi text avsnitt

avstånd

Lägg sedan till anpassade fyllningsvärden.

  • Övre stoppning: 50px
  • Botten stoppning: 50px
  • Vänster padding: 50px
Anpassa divi-textavsnittet

gräns

Vi använder också en vänstergräns.

  • Vänster kantbredd: 2px
  • Vänster kantfärg: # fc526e
Använd en divi-gräns

animering

Och slutför modulparametrarna genom att lägga till en personlig animation.

  • Animeringsstil: Vänd
  • Animeringsriktning: Center
  • Animeringsfördröjning: 1500 ms
Divi-modulens textparameter

Lägg till textmodul # 2 i kolumnen

Lägg till innehåll

Lägg till en annan textmodul precis under den föregående med innehåll du väljer.

Lägg till en ny divi-modultext

avstånd

Gå till modulens designflik och ändra vadderingsvärdena i enlighet med detta:

  • Övre stoppning: 50px
  • Botten stoppning: 50px
  • Höger stoppning: 50px
Konfigurera vaddering av divi-textmodul

gräns

Lägg sedan till en övre och högra kant.

  • Övre och högra kant: 2 pixlar
  • Färg på övre och högra kant: # fc526e

animering

Och slutför modulinställningarna genom att ändra animationsinställningarna enligt följande:

  • Animeringsstil: Vänd
  • Animeringsriktning: Center
  • Animeringsfördröjning: 1700 ms

Lägg till en knappmodul i kolumnen

Lägg till en kopia

Nästa och sista modul vi behöver i den här raden är en knappmodul. Lägg till en kopia efter eget val.

Lägg till en divi-knapp

Knappinställningar

Byt till fliken moduldesign och ändra knappinställningarna enligt följande:

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]

  • Använd anpassade stilar för knappen: Ja
  • Knapptextstorlek: 13px
  • Knapptextfärg: #ffffff
  • Färggradient 1: # ff5b84
  • Färggradient 2: # f94857
  • Lutningstyp: linjär
  • Lutningsriktning: 165deg
  • Knappens bredd: 0px
Gradient divi-knappkonfiguration
  • Knappens radie: 0px
  • Avstånd för knappbokstäver: 1px
  • Knappsnitt: Montserrat
  • Knappsteckens vikt: Halv fet
  • Knappsnittstil: versaler
Anpassa knappstil divi

avstånd

Lägg sedan till anpassad övre och nedre stoppning.

  • Övre stoppning: 16px
  • Botten stoppning: 16px
Konfigurera avståndet för divi-knappmodul

animering

Och slutför modulparametrarna genom att lägga till följande animering:

  • Animeringsstil: Vänd
  • Animeringsfördröjning: 1900 ms
Divi CTA-layoutblock

Klona rad 1 och placera den längst ner i avsnittet

När du är klar med den första och andra raden kan du klona den första raden och placera duplikatet längst ner i avsnittet.

Ändra ordningen på separatorer

Byt platser för den första och sista separationsmodulen.

Avslutande tankar

I den här artikeln har vi visat dig hur du kan utnyttja Divis nya Gutenberg-integration och lägga till ett online och animerat Divi CTA-presentationsblock i ditt Gutenberg-blogginlägg. Det är ett utmärkt sätt att markera ditt val till åtgärd som du väljer medan besökare läser innehållet i ditt blogginlägg. 

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
2 aktier
del2
tweet
Enregistrer