Using The Inline Email Optin Module Content vs. Combining with Text Modules | Elegant Themes Blog

Divi’s email optin module has several text and content areas that can show additional content. These areas can be styled within the email optin module. Along with the module’s layout options, this provides a solid design for a simple email form. However, this does limit the design possibilities. Fortunately, we can use the email optin module with text modules to create even more design and styling options. In this post, we’ll compare using the text fields inside email optin module itself with using separate modules for your copy.

Let’s get started!

Inline Email Optin Module Content Elements

Aside from the form itself, Divi’s email optin module has three areas with content. They include the title, body content, and footer content. The Title is a single text field with no adjustments in the Content tab. The Body and Footer content have complete content editors that accept text, media, HTML, CSS, etc. You can also use dynamic content, customize them for individual device sizes, and adjust their hover state.

Inline Email Optin Module Design Tab

The Design tab has the basic styling settings for the title and content areas. Options include the Heading Level, Font, Font Weight (regular or bold), Style, Alignment, Color, Size, Spacing, Line Height, and Shadow. Let’s look at each one.

Email Optin Module Title Options

Here are the design settings for the Title. I’ve adjusted Heading Level through Text Color in this image.

I’ve adjusted Text Size through Text Shadow in this image.

Email Optin Module Body and Footer Text Options

The Body and Footer text is controlled by the same Design settings. The image below includes the Font through Font color options. This section also adds the standard text features such as bullets, a link, a quote, etc. The Title text follows the styling of the Body text unless it has its own styling. The button will use some of the text options unless it’s styled separately.

The image below adds the Text Size through Text Shadow options.

You can use inline CSS in the content editor, but anything that isn’t styled will follow the styling in the Design tab.

Inline Email Optin Module Content Layouts

Layout options allow us to place the title and body content above, below, to the right, or the left of the form. The example below places the body on top and the form on the bottom.

Pros and Cons with the Email Optin Content



Combining the Text with Modules

The alternative is to create the same text elements with individual text modules along with the email optin module. This option requires you to style multiple elements and you might need to use rows with multiple column options. However, it also provides you with the most features and options.

To use this method, simply leave the email optin module’s Title, Body, and Footer fields empty, as I’ve done in the example below. This gives you the form with no other text elements.

Then, use text modules to create the elements you want. I’ve added two text modules next to the form in the example below. As this example shows, the content editor is the same as the one in the email optin module.

Text Module Content Design Options

The text module has the same design settings for body text and heading text as the email optin module but adds a few more options. The heading text includes five font weights. Since you can use a different module for each set of text, you can have a different background, border, box shadow, etc., for each one.

The example below uses the email optin module for the form and adds three different text modules to create the title, body, and footer text. I’ve styled each module separately. This shows the settings for the Font, Weight, Style, Color, Size, Spacing, Line Height, and Text Shadow. I’ve also adjusted the Backgrounds, Spacing, and Borders.

Pros and Cons with Using Text Modules for the Email Optin Content



Email and Text Module Combination Examples

Next, let’s look at a few examples with combinations of email optin modules and text modules. For most of these examples, I’ll use the email optin form from the free NGO Layout Pack that’s available within Divi. I’ll show the desktop and wireframe views.

Firstly, here’s the email optin as it appears in the layout. It uses two text modules and the email optin module. The background styling is done in the row. It places a small title at the top, a large description under that, and then the form.

Here’s the wireframe view.

Email and Text Module Combination Example One

Our first example moves the description to the right of the form but keeps the title above the form. This layout is simple, but it’s not possible without using a text module above the form. I’ve changed the row to 2 columns.

Here’s the wireframe view.

Email and Text Module Combination Example Two

Our second example, I’ve changed the row to 3 columns and placed text modules in the outer columns. Each of the rows with text includes a title and description that provides numbered steps. The email optin module could display one step, but not both.

Here’s the wireframe view.

Email and Text Module Combination Example Three

Our third exanple uses a specialty section with multiple rows and column widths. It displays a title and two modules for descriptions on the left and the email form on the right.

Here’s the wireframe view.

Email and Text Module Combination Example Four

Here’s our fourth example. It uses the email optin form from the free Scooter Rental Layout Pack. I’ve added an image to the background of the title and changed the title’s font color to white. Everything else is the same as the original. The white background of the column makes it look like a single module.

Here’s the wireframe view.

Ending Thoughts

That’s our look at using the inline email optin module vs. combining it with text modules. The email optin module works well and provides a simple email form, but it is limited. Using text modules for the title and description gives you lots more design options. With a little bit of styling, multiple modules can look like a single module. Using multiple modules, you can create unique email optin forms with lots more layout and design options.

We want to hear from you. Do you use the content features in the Divi email optin module, or do you prefer to use text modules for that content? Let us know in the comments.

This content was originally published here.