Divi Layout Block öppnar dörren till många bekväma sätt att integrera Divi Builders kraftfulla designfunktioner med WordPresss standardblockredigerare (Gutenberg). Detta gör att du kan skriva det mesta innehåll av ditt blogginlägg med det välbekanta Gutenberg-blockgränssnittet, injicera sedan 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 en formen av prenumeration.
I den här handledningen kommer vi att se hur du lägger till en formen prenumerera på ett Gutenberg-blogginlägg med Divi-layoutblocket.
Möjligt resultat
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-inlägget
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 !
Och det är allt!
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 innehåll dummy rubriken och brödtexten på artikeln med några rubrik- och styckeblock. Lägg sedan till en utvald bild och välj "Ingen sidofält" för layouten under Divi-sidans inställningar.
Lägg till ett Divi-layoutblock online
När du har skapat det mesta av inlägget behöver vi bara lägga till ett nytt Divi-layoutblock vart vi vill i inläggsområdet. innehåll av publicering. Vi kan lägga till det någonstans närmare slutet av meddelandet för att fånga en kvalificerad lead som uppenbarligen är intresserad av innehållet i meddelandet.
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".
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.
Sedan lägger vi till e-postoptin-modulen till en av kolumnerna, jag lämnar kolumnens val till dig.
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.
- Avdelningselementets bredd: 40 pixlar (topp och botten).
Vi kommer nu att lägga till text i den motsatta kolumnen. Här kommer du att använda incitamenttext för att ta med besökaren att prenumerera.
Du måste då göra de olika ändringarna:
- Teckensnittstext: Montserrat
- Teckensfärg: #FFF
- Textsteckensnitt Undertexter H2: Montserrat
- Text Undertext H2 Storlek: 2.5em
- Text Undertext H2 Färg: #FFF
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!
