Divi Layout Block åbner døren til mange praktiske måder at integrere Divi Builders kraftfulde designfunktioner med WordPress' standard blokeditor (Gutenberg). Dette giver dig mulighed for at skrive det meste indhold af dit blogindlæg ved hjælp af den velkendte Gutenberg-blokgrænseflade, og injicer derefter Divi-layouts, hvor der er behov for tilpasset design eller funktionalitet. En Divi-layoutblok kan indeholde alt, hvad du kan oprette i Divi Builder, men den er også fantastisk til at inkludere noget så enkelt og væsentligt som en formular af abonnement.

I denne tutorial vil vi se, hvordan du tilføjer en formular abonnement på et Gutenberg-blogindlæg ved hjælp af Divi-layoutblokken.

Muligt resultat

Slutresultat divi

Import af JSON-layoutblokken

Download layoutet i Divi-biblioteket

For at importere den JSON-fil, som du kunne downloade ovenfor, skal du gå til dit Divi-bibliotek i backend på dit WordPress-dashboard og klikke på 'Import og eksport'.

Divi import

Vælg derefter JSON-filen i din downloadmappe, og klik på "Import Divi Builder Layouts".

Import json divi 1

Tilføj en ny Divi-blok inde i Gutenberg-posten

Når dit layout er importeret, kan du få adgang til din Gutenberg-meddelelse og tilføje en ny Divi-layoutblok.

Divi design

Importer en JSON-fil fra gemte præsentationer

Klik derefter på "Indlæs fra bibliotek", gå til "Dine gemte layouts" og vælg det layout, der skal importeres Divi CTA-layoutblokken til dit blogindlæg. Det er det !

Injicér en formular på gutenberg
Divi layout e-mail abonnement

Og det er alt!

Injicer et divi-formularmodul

Lad os gå videre til vejledningen, okay?

Tilføj et Optin-e-mail-modul til dit Gutenberg-blogindlæg

Opret eller rediger et blogindlæg

For at komme i gang skal vi oprette et nyt blogindlæg eller redigere et eksisterende. For dette eksempel, lad os tilføje indhold dummy titlen og brødteksten på artiklen ved hjælp af nogle få overskrifts- og afsnitsblokke. Tilføj derefter et fremhævet billede og vælg "Ingen sidebjælke" til layoutet under Divi-sideindstillingerne.

Vare design

Tilføj en Divi-layoutblok online

Når du har oprettet det meste af indlægget, skal vi bare tilføje en ny Divi-layoutblok, hvor vi vil i indlægsområdet. indhold af udgivelsen. Vi kan tilføje det et sted tættere på slutningen af ​​beskeden for at fange en kvalificeret kundeemne, som åbenlyst er interesseret i indholdet af beskeden.

For at tilføje det skal du holde musen over det område, hvor du vil tilføje indstillings-e-mailen, og derefter klikke på det blå plus-ikon for at tilføje en ny blok. På listen over kontekstuelle blokke skal du vælge Divi Layout-blokken.

Tilføj divi designblok

Opret et nyt layout i Divi-layoutblokken

Når Divi-layoutblokken er valgt, har vi muligheden for "Opret et nyt layout" eller "Indlæs fra biblioteket". Da vi har brug for at oprette e-mail-indstillingen fra bunden, skal du vælge "Opret nyt layout".

Design nyt divi-design

Sektionsdesign

I layouteditoren kan vi begynde at designe e-mail-optin, der skal inkluderes i vores indlæg. Alt, hvad vi designer i denne editor, vises i Divi Layout Block-området på indlægget.

For at komme i gang skal du åbne sektionsindstillingerne for standardsektionen, der allerede er der.

Til layoutet vælger vi et to-kolonnes layout.

Vælg divi-layout

Derefter vil vi tilføje Email Optin-modulet til en af ​​kolonnerne, jeg overlader valget af kolonne til dig.

Optin divi-e-mail-modul

Dernæst tilpasser vi baggrunden for sektionen. Du kan altid ændre værdierne for at gøre dit design unikt. Vi brugte dog følgende værdier:

  • Baggrund: # ff6100
  • Top- og bundudskiller: den 13. optælling fra toppen.
Divi modul separator
  • Skilleelementbredde: 40 px (top og bund).

Vi vil nu tilføje tekst til den modsatte kolonne. Her vil du bruge incitamentstekst til at bringe besøgende at abonnere.

Divi-tekstmodul

Derefter skal du foretage de forskellige ændringer:

  • Skrifttekst: Montserrat
  • Skriftfarve: #FFF
  • Tekstskrifts undertekst H2: Montserrat
  • Tekst undertekst H2 Størrelse: 2.5em
  • Tekst undertekst H2 Farve: #FFF
Divi titel personalisering

Husk at konfigurere det e-mail-system, du bruger. Du skal vide, at Gutenberg er kompatibel med MailChimp.

endelige tanker

Tilføjelse af en optin-e-mail til din Gutenberg-besked er blevet utrolig let med Divi-layoutblokken. Ikke kun kan du tilføje en fuldt funktionel (og nem at bruge) e-mail-mulighed på få sekunder, men du kan også bruge Divi Builder til at tilføje brugerdefineret design, svæveeffekter og animation. Alt dette uden at skulle bruge et plugin!