Gå till innehållet

Så här infogar du prenumerationsformulär på Gutenberg med 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]

Divi Layout Block öppnar dörren för många praktiska sätt att integrera de kraftfulla designfunktionerna i Divi Builder med standard WordPress-blockredigeraren (Gutenberg). Detta gör att du kan skriva det mesta av ditt blogginläggsinnehåll med det välkända Gutenberg-blockgränssnittet och sedan injicera Divi-layouter där anpassad design eller funktionalitet behövs. Ett Divi-layoutblock kan innehålla allt du kan skapa i Divi Builder, men det är också bra för att inkludera något så enkelt och viktigt som ett prenumerationsformulär.

I den här handledningen kommer vi att se hur man lägger till ett prenumerationsformulär i ett Gutenberg-blogginlägg med hjälp av Divi-layoutblocket.

Möjligt resultat

Slutresultat divi

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-inlägget

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

Divi-design

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 !

Injicera ett formulär på gutenberg

Och det är allt!

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]

Injicera en divi-formmodul

Låt oss gå vidare till handledningen, okej?

Lägg till en Optin-e-postmodul till ditt Gutenberg-blogginlägg

Skapa eller redigera ett blogginlägg

För att komma igång måste vi skapa ett nytt blogginlägg eller redigera ett befintligt. För det här exemplet, låt oss lägga till dummyinnehåll i inläggets titel och kropp med några rubrik- och styckeblock. Lägg sedan till en vald bild och välj 'Inget sidofält' för layouten under Divi-sidinställningarna.

Lägg till ett Divi-layoutblock online

När du väl har skapat det mesta av inlägget är allt vi behöver göra att lägga till ett nytt Divi-layoutblock var vi vill i inläggets innehållsområde. Vi kan lägga till det någonstans närmare slutet av inlägget för att fånga en kvalificerad prospekt som uppenbarligen är intresserad av inläggets innehåll.

För att lägga till det, håll musen över det område där du vill lägga till alternativet e-post och klicka sedan på den blå plusikonen för att lägga till ett nytt block. I listan över kontextuella block väljer du Divi Layout-blocket.

Skapa en ny layout i Divi-layoutblocket

När Divi-layoutblocket har valts har vi alternativet "Skapa en ny layout" eller "Ladda från biblioteket". Eftersom vi måste skapa e-postalternativet från grunden väljer du alternativet "Skapa ny layout".

Designa ny divi-design

Avsnitt design

I layoutredigeraren kan vi börja utforma e-postoptin som ska inkluderas i vårt inlägg. Allt vi utformar i den här redigeraren kommer att visas i Divi Layout Block-området i inlägget.

För att komma igång öppnar du avsnittinställningarna för standardsektionen som redan finns där.

För layouten väljer vi en två-kolumnslayout.

Välj divi-layout

Sedan lägger vi till e-postoptin-modulen till en av kolumnerna, jag lämnar kolumnens val till dig.

Optin divi e-postmodul

Därefter anpassar vi bakgrunden till avsnittet. Du kan alltid ändra värdena för att göra din design unik. Vi använde dock följande värden:

  • Bakgrund: # ff6100
  • Separator för topp och botten: den 13: e räknaren från toppen.
Divi-modulavskiljare
  • Avdelningselementets bredd: 40 pixlar (topp och botten).

Vi lägger nu till motsatt kolumn i texten. Här använder du snabbtext för att få besökaren att prenumerera.

Divi textmodul

Du måste då göra de olika ändringarna:

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]

  • Teckensnittstext: Montserrat
  • Teckensfärg: #FFF
  • Textsteckensnitt Undertexter H2: Montserrat
  • Text Undertext H2 Storlek: 2.5em
  • Text Undertext H2 Färg: #FFF
Divi-titel personalisering

Kom ihåg att konfigurera det e-postsystem du ska använda. Du borde veta att Gutenberg är kompatibel med MailChimp.

Avslutande tankar

Att lägga till ett e-postmeddelande i ditt Gutenberg-meddelande har blivit otroligt enkelt med Divi-layoutblocket. Inte bara kan du lägga till ett fullt fungerande (och lättanvänt) e-postalternativ på några sekunder, men du kan också använda Divi Builder för att lägga till anpassad design, svävaffekter och animering. Allt detta utan att behöva använda ett plugin!

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