När du effektiviserar sättet du skapar blogginlägg på din webbplats, är chansen stor att du vill inkludera en attraktiv CTA någonstans i din artikel. Nu med Divis nya Gutenberg Layout Block-integration 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 innehåll övergripande blogginlägg i Gutenberg-miljön, samtidigt som man fortsätter att skapa en anpassad Divi CTA med hjälp av Divis inbyggda alternativ. Det bästa av båda världar! I den här handledningen visar vi dig hur du lägger till ett inline, animerat Divi CTA-layoutblock till ditt Gutenberg-inlägg. Vi kommer också att dela JSON-filen för 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.
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'.
Välj sedan JSON-filen i din nedladdningsmapp och klicka på "Importera Divi Builder Layouts".
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.
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!
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.
Gå till Divi Theme Builder
När du har laddat ner det tredje temapaketet kan du komma åt Divi Theme Builder.
Ladda ner publiceringsmallen
Ladda ner postmallen för Theme Building Pack genom att klicka på ikonen i det övre högra hörnet.
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.
Ö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.
Lägg till ett nytt Divi-block online
Väl inne i meddelandet kan du lägga till ett nytt Divi-layoutblock.
Skapa en ny layout inuti Divi-blocket
Då har du två alternativ. Välj alternativet "Skapa en ny 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%
Lägg till rad 1
Kolumnstruktur
Fortsätt att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till fler moduler, öppna linjeparametrarna och öka bredden och maximala bredden.
- Bredd: 100%
- Max bredd: 100%
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
Linje
Byt till fliken moduldesign och ändra radinställningarna enligt följande:
- Linjefärg: # fc526e
- Linjestil: solid
- Linjeposition: hög
dimensionering
Ändra även dimensioneringsparametrarna.
- Divider vikt: 3px
- Bredd: 30%
- Modulens inriktning: höger
- Höjd: 3px
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%
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
Linje
Gå sedan till fliken moduldesign och ändra radinställningarna enligt följande:
- Linjefärg: # e1e3e8
- Linjestil: solid
- Linjeposition: hög
dimensionering
Ändra sedan modulens storlek på parametrarna.
- Divider vikt: 3px
- Höjd: 3px
avstånd
Lägg också till anpassade avståndsvärden.
- Vänster marginal: 10%
- Höger marginal: -20%
animering
Och slutför modulinställningarna genom att ändra animationsinställningarna enligt följande:
- Animeringsstil: Bild
- Animeringsriktning: vänster
- Animeringstid: 2000ms
- Animeringsfördröjning: 500 ms
- Animationsintensitet: 100%
- Animering start opacitet: 100%
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
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 innehåll H2 efter eget val.
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
avstånd
Lägg sedan till anpassade fyllningsvärden.
- Övre stoppning: 50px
- Botten stoppning: 50px
- Vänster padding: 50px
gräns
Vi använder också en vänstergräns.
- Vänster kantbredd: 2px
- Vänster kantfärg: # fc526e
animering
Och slutför modulparametrarna genom att lägga till en personlig animation.
- Animeringsstil: Vänd
- Animeringsriktning: Center
- Animeringsfördröjning: 1500 ms
Lägg till textmodul # 2 i kolumnen
Lägg till innehåll
Lägg till ytterligare en textmodul strax under den föregående med innehåll som du väljer.
avstånd
Gå till modulens designflik och ändra vadderingsvärdena i enlighet med detta:
- Övre stoppning: 50px
- Botten stoppning: 50px
- Höger stoppning: 50px
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.
Knappinställningar
Byt till fliken moduldesign och ändra knappinställningarna enligt följande:
- 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
- Knappens radie: 0px
- Avstånd för knappbokstäver: 1px
- Knappsnitt: Montserrat
- Knappsteckens vikt: Halv fet
- Knappsnittstil: versaler
avstånd
Lägg sedan till anpassad övre och nedre stoppning.
- Övre stoppning: 16px
- Botten stoppning: 16px
animering
Och slutför modulparametrarna genom att lägga till följande animering:
- Animeringsstil: Vänd
- Animeringsfördröjning: 1900 ms
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 drar fördel av Divis nya Gutenberg-integration och lägger till ett inline, animerat Divi CTA-pitch-block till ditt Gutenberg-blogginlägg. Det här är ett bra sätt att lyfta fram din uppmaning till handling medan du väljer besökare läs innehållet i ditt blogginlägg.
