Het Divi Layout Block opent de deur naar veel handige manieren om de krachtige ontwerpfuncties van Divi Builder te integreren met de standaard blokeditor van WordPress (Gutenberg). Hierdoor kunt u het grootste deel van de tekst schrijven inhoud van uw blogpost met behulp van de vertrouwde Gutenberg-blokinterface en injecteer vervolgens Divi-lay-outs waar een aangepast ontwerp of functionaliteit nodig is. Een Divi-lay-outblok kan alles bevatten wat u in Divi Builder kunt maken, maar het is ook uitstekend geschikt voor het opnemen van zoiets eenvoudigs en essentieels als een formulier van abonnement.
In deze zelfstudie zullen we zien hoe u een formulier abonnement op een Gutenberg-blogbericht met behulp van het Divi-lay-outblok.
Mogelijk resultaat
Het JSON-layoutblok importeren
Download de lay-out in de Divi-bibliotheek
Om het JSON-bestand dat u hierboven kon downloaden te importeren, gaat u naar uw Divi-bibliotheek in de backend van uw WordPress-dashboard en klikt u op 'Importeren en exporteren'.
Selecteer vervolgens het JSON-bestand in uw downloadmap en klik op "Divi Builder Layouts importeren".
Voeg een nieuw Divi-blok toe in de Gutenberg-post
Nadat uw lay-out is geïmporteerd, kunt u uw Gutenberg-bericht openen en een nieuw Divi-lay-outblok toevoegen.
Importeer een JSON-bestand uit opgeslagen presentaties
Klik vervolgens op "Laden uit bibliotheek", ga naar "Uw opgeslagen lay-outs" en selecteer de lay-out om het Divi CTA-lay-outblok in uw blogbericht te importeren. Dat is het !
En dat is alles!
Laten we verder gaan met de tutorial, oké?
Voeg een Optin-e-mailmodule toe aan uw Gutenberg-blogpost
Maak of bewerk een blogpost
Om aan de slag te gaan, moeten we een nieuwe blogpost maken of een bestaande blog bewerken. Laten we voor dit voorbeeld toevoegen inhoud dummy de titel en de hoofdtekst van het artikel met behulp van een paar kop- en alineablokken. Voeg vervolgens een uitgelichte afbeelding toe en kies “Geen zijbalk” voor de lay-out onder de Divi-pagina-instellingen.
Voeg online een Divi-lay-outblok toe
Zodra je het grootste deel van het bericht hebt gemaakt, hoeven we alleen maar een nieuw Divi-lay-outblok toe te voegen waar we maar willen in het berichtgebied. inhoud van publicatie. We kunnen het ergens dichter bij het einde van het bericht toevoegen om een gekwalificeerde lead te vangen die duidelijk geïnteresseerd is in de inhoud van het bericht.
Om het toe te voegen, beweegt u de muis over het gebied waar u de optie-e-mail wilt toevoegen en klikt u vervolgens op het blauwe pluspictogram om een nieuw blok toe te voegen. Selecteer in de lijst met contextuele blokken het Divi Layout-blok.
Maak een nieuwe lay-out in het Divi-lay-outblok
Zodra het Divi-lay-outblok is geselecteerd, hebben we de optie "Een nieuwe lay-out maken" of "Laden uit de bibliotheek". Omdat we de e-mailoptie helemaal opnieuw moeten maken, kiest u de optie "Nieuwe lay-out maken".
Sectieontwerp
In de lay-outeditor kunnen we beginnen met het ontwerpen van de e-mailoptin die in onze post moet worden opgenomen. Alles wat we in deze editor ontwerpen, wordt weergegeven in het Divi Layout Block-gebied van het bericht.
Om te beginnen, opent u de sectie-instellingen van de standaardsectie die er al is.
Voor de lay-out kiezen we een lay-out met twee kolommen.
Vervolgens voegen we de Email Optin-module toe aan een van de kolommen, ik laat de keuze van de kolom aan jou over.
Vervolgens zullen we de achtergrond van de sectie aanpassen. U kunt de waarden altijd wijzigen om uw ontwerp uniek te maken. We hebben echter de volgende waarden gebruikt:
- Achtergrond: # ff6100
- Top & Bottom Separator: de 13e geteld vanaf de bovenkant.
- Breedte scheidingselement: 40 px (boven en onder).
We zullen nu tekst toevoegen aan de tegenoverliggende kolom. Hier gebruikt u aanmoedigingstekst om de bezoeker abboneren.
U moet dan de verschillende wijzigingen aanbrengen:
- Tekst lettertype: Montserrat
- Letterkleur: #FFF
- Tekstlettertype Ondertitel H2: Montserrat
- Tekst Ondertiteling H2 Grootte: 2.5em
- Tekst Ondertiteling H2 Kleur: #FFF
Vergeet niet om het e-mailsysteem dat u gaat gebruiken te configureren. U moet weten dat Gutenberg compatibel is met MailChimp.
Final gedachten
Het toevoegen van een optin-e-mail aan uw Gutenberg-bericht is ongelooflijk eenvoudig geworden met het Divi-lay-outblok. U kunt niet alleen binnen enkele seconden een volledig functionele (en gebruiksvriendelijke) e-mailoptie toevoegen, maar u kunt Divi Builder ook gebruiken om aangepast ontwerp, hover-effecten en animaties toe te voegen. Dit alles zonder een plug-in te gebruiken!
