How to Add a Divi Email Optin to Your Gutenberg Blog Post

Last Updated on September 17, 2022 by 10 Comments

How to Add a Divi Email Optin to Your Gutenberg Blog Post
Blog / Divi Resources / How to Add a Divi Email Optin to Your Gutenberg Blog Post

The Divi Layout Block opens the door for many convenient ways to bring the powerful design features of the Divi Builder to WordPress’s default block editor (Gutenberg). This allows you to write the bulk of your blog post content using the familiar Gutenberg block interface and then inject Divi Layouts where custom design or functionality is needed. A Divi Layout Block can include anything you can build within the Divi Builder, but it is also great for including something as simple and essential as an Email Optin.

In this tutorial, we will cover how to add a beautiful Divi Email Optin to a Gutenberg Blog Post using the Divi Layout Block.

Let’s get started!

Sneak Peek

Gutenberg Divi Email Optin

Gutenberg Divi Email Optin

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Importing The Layout Block JSON

Upload Layout to Divi Library

To import the JSON file you were able to download above, go to your Divi Library in the backend of your WordPress dashboard and click on ‘Import & Export’.

Gutenberg Divi Email Optin

Then, select the JSON file inside your download folder and click on ‘Import Divi Builder Layouts’.

Gutenberg Divi Email Optin

Add New Divi Block Block Inside Gutenberg Post

Once your layout has been imported, you can go to your Gutenberg post and add a new Divi layout block.

Gutenberg Divi Email Optin

Import JSON File From Saved Layouts

Then, click on ‘Load From Library’, navigate to ‘Your Saved Layouts’ and select the layout to import the Divi CTA Layout Block to your blog post. That’s it!

Gutenberg Divi Email Optin

Gutenberg Divi Email Optin

And that’s it!

Gutenberg Divi Email Optin

Let’s get to the tutorial, shall we?

Adding a Divi Email Optin to Your Gutenberg Blog Post

Create or Edit a Blog Post

To start, we need to create a new blog post or edit an existing one. For this example, let’s add some mock content to the post title and body using a few Heading and Paragraph Blocks. Then add a featured image and choose “No Sidebar” for the Page Layout under the Divi Page Settings.

Gutenberg Divi Email Optin

Add Inline Divi Layout Block

Once you have the bulk of the post created, all we need to do is add a new Divi Layout Block anywhere we want within the post content area. We could add it somewhere closer to the end of the post to capture a qualified lead that is obviously interested in the content of the post.

To add it, hover over the area you want to add the email optin and then click the blue plus icon to add a new block. In the popup block list, select the Divi Layout block.

Gutenberg Divi Email Optin

Build New Layout Within the Divi Layout Block

Once the Divi Layout Block has been selected, we will have the option to either “Build New Layout” or “Load from Library”. Since we need to build the email optin from scratch, choose the option, “Build New Layout”.

Gutenberg Divi Email Optin

Section Design

Inside the Layout Block editor, we can begin designing the email optin to be included in our post. Anything we design in this editor will be displayed in the Divi Layout Block area of the post.

To begin, open the section settings of the default section already there.

Gutenberg Divi Email Optin

Background Gradient

Then add a background gradient as follows:

  • Background Gradient Left Color: #ff9945
  • Background Gradient Right Color: #f86a4c

Gutenberg Divi Email Optin

Dividers

Next, go to the design tab and a top and bottom section divider as follows:

  • Top Divider Style: see screenshot
  • Top Divider Color: #f86a4c
  • Top Divider Horizontal Repeat: 0.8x

Gutenberg Divi Email Optin

  • Bottom Divider Style: see screenshot
  • Bottom Divider Color: #ff9945
  • Bottom Divider Horizontal Repeat: 0.8x
  • Bottom Divider Flip: horizontal and vertical

Gutenberg Divi Email Optin

Margin and Border

After the dividers are in place, give the section a little margin above and below and then finish it off with a border and an animation as follows:

  • Margin: 20px top, 20px bottom
  • Rounded Corners: 30px
  • Border Width: 2px
  • Border Color: #ff9945
  • Animation Style: Flip

Gutenberg Divi Email Optin

Add Column and Set Row Width

Now that the section is complete, add a one-column structure to the row.

Gutenberg Divi Email Optin

Then update the row settings as follows:

  • Width: 100%
  • Max Width: 100%

Gutenberg Divi Email Optin

Build the Email Optin

Add Email Optin Module

Next, add an email optin module to the row.

Gutenberg Divi Email Optin

Email Optin Content

For the email optin content settings, update the following:

  • Title: “Get FREE Tips Every Week!”
  • Body: [keep default mock content]
  • Mailchimp List: [add a list]
  • Use Single Name Field: YES
  • Use Background Color: NO

Gutenberg Divi Email Optin

Email Optin Design

Fields

Jump over to the design tab and design the email optin fields by updating the following:

  • Layout: Body on Right, Form on Left
  • Fields Background Color: #f86a4c
  • Fields Text Color: #ffffff
  • Fields Font: IBM Plex Sans
  • Fields Text Size: 18px
  • Fields Letters Spacing: 2px
  • Fields Line Height: 2em

Gutenberg Divi Email Optin

Title

Update the title text settings as follows:

  • Title Font: IBM Plex Sans Condensed
  • Title Font Weight: Semi Bold
  • Title Text Color: #ffffff
  • Title Text Size: 60px (desktop), 30px (phone)
  • Title Line Height: 1.2em (desktop), 1.6 (phone)

Gutenberg Divi Email Optin

Button

For the button, update the following:

  • Use Custom Styles for Button: YES
  • Button Text Color: #ff9945
  • Button Background Gradient Left Color: #ff9945
  • Button Background Gradient Right Color: #ffffff
  • Gradient Direction: 90deg
  • End Position: 34%
  • Button Border Width: 0px
  • Button Letter Spacing: 2px
  • Button Font: IBM Plex Sans
  • Button Font Weight: Bold
  • Button Font Style: TT
  • Button Padding: 15px top, 15px bottom

Gutenberg Divi Email Optin

Padding

And for one last touch, add the following padding:

  • Padding: 5% left, 5% right

Gutenberg Divi Email Optin

Final Result

Once we are finished designing the layout within the Divi Layout editor, make sure and save the layout. Then save the post so you can see a preview of the email optin on a live page. Here is what it looks like.

Gutenberg Divi Email Optin

Gutenberg Divi Email Optin

Here is the slight animation of the email optin as you scroll down the post.

Gutenberg Divi Email Optin

Final Thoughts

Adding an email optin to your Gutenberg post just got amazingly simple with the Divi Layout Block. Not only can you add a fully functional ( and easy to use) email optin in seconds, but you also can use the Divi Builder to add custom design, hover effects, and animation. All this without having to use a plugin!

I look forward to hearing from you in the comments.

Cheers!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

10 Comments

  1. I using this theme it’s amazing themes

    • Glad to hear that. Thanks for commenting.

  2. Good Information, But most of the designers now a days shifting to elementor .

    • Yes, But innovation is very important in every design element.

  3. Thanks for this Information

    • You’re welcome.

  4. Thanks for sharing such good information with us. i hope you will share more information. Please keep sharing!

    • You’re welcome. Will do!

  5. Hi,
    Very great strategy you shared sir. Thanks to posting such kind of useful info and keep posting.

    • Thanks! Will do.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today