Subscription forms on Gutenberg: Divi Layout Block opens the door to many convenient ways to integrate the powerful design features of Divi Builder with the default WordPress block editor (Gutenberg). This allows you to write most of your blog post content using the familiar Gutenberg block interface, then inject Divi layouts where custom design or functionality is needed. A Divi layout-block can include anything you can create in Divi Builder, but it’s also great for including something as simple and essential as subscription forms on Gutenberg.
Importing the JSON layout-block
Download the layout in the Divi library
To import the JSON file that you were able to download above, go to your Divi library in the backend of your WordPress dashboard and click on ‘Import and export’.
Then select the JSON file in your download folder and click on “Import Divi Builder layouts”.
Add a new Divi Block inside the Gutenberg post
Once your layout has been imported, you can go to your Gutenberg post and add a new Divi layout block.
Import a JSON file from saved presentations
Then, click on “Load from Library”, go to “Your saved layouts” and select the layout to import the Divi CTA layout-block into your blog post. That’s it!
Add an Optin email module to your Gutenberg blog post
Create or edit a blog post
To get started, we need to create a new blog post or edit an existing one. For this example, let’s add dummy content to the post title and body using a few headers and paragraph blocks. Then add a selected image and choose “No sidebar” for the layout under the Divi page settings.
Add a Divi layout-block online
Once you’ve created most of the post, all we need to do is add a new Divi layout-block wherever we want in the post’s content area. We could add it somewhere closer to the end of the post to capture a qualified prospect who is interested in the content of the post.
To add it, hover the mouse over the area where you want to add the option email, then click the blue plus icon to add a new block. In the list of contextual blocks, select the Divi Layout block.
Create a new layout in the Divi layout-block
Once the Divi layout block has been selected, we will have the option of “Create a new layout” or “Load from the library”. Since we need to create the email option from scratch, choose the “Create New Layout” option.
Section design
In the layout editor, we can start designing the email option to be included in our post. Everything we design in this editor will be displayed in the Divi Layout Block area of the post.
To get started, open section settings from the default section already there.
For the layout, we will choose a two-column layout.
Then we will add the Email Optin module to one of the columns, I leave the choice of the column to you.
Next, we’ll customize the background of the section. You can always change the values to make your design unique. However, we used the following values:
- Background: # ff6100
- Top & Bottom Separator: the 13th counting from the top.
- Divider element width: 40px (top and bottom).
We will now add on the opposite column of the text. Here, you’ll use prompt text to get the visitor to subscribe.
Read more: Discover the new scrolling animation effects on Divi
You will then have to make the various modifications:
- Font Text: Montserrat
- Font Color: #FFF
- Text Font Subtitle H2: Montserrat
- Text Subheading H2 Size: 2.5em
- Text Sub-Title H2 Color: #FFF
Remember to configure the messaging system you will be using. You should know that Gutenberg is compatible with MailChimp.
Final thoughts on subscription forms on Gutenberg
Adding an opt-in email to your Gutenberg message has become incredibly easy with the Divi layout block. Not only can you add a fully functional (and easy to use) email option in seconds, but you can also use Divi Builder to add custom design, hover effects, and animation. All this without having to use a plugin!
For website maintenance service contact us.
