The Divi Email Optin Module | Scoreapps

The Divi Email Optin Module

How to add, configure and customize the Divi email subscription module


Divi Email Subscription Modulesimplify the process of increasing your email subscribers by offering attractive registration forms and easy integration with 21 known email software providers. You can incorporate this module anywhere in your website design, such as headers and footers.

Example of Divi Email Subscription Module

Watch a live demo of this module

Example of the Divi Email Optin Module

How to add Divi Email Subscription Module to your page

  1. Add a new page or edit an existing page.
    By default, the Gutenberg standard editor is loaded when a new entry or page is added in WordPress.

  2. Click the purple button below the title of the page:Using the Divi Builder.

  3. Add a page and upload theVisual Builder.

Add a page and load the Visual Builder

Once you click, the page will be reloaded with theDivi Visual Builder.

You will see three options:

  • Build from scratch

  • Choose a pre-designed design

  • Build with AI

Build from scratch:

This option loads the Divi Builder with a blank page layout. Choose this option if you want to start your design from scratch.

Choose a pre-designed design:

Allows you to select from a large library of Divi pre-designed designs, whether from the Divi library or existing pages on your site that you can clone.

Build with AI:

Automatically create a complete page layout with Divi AI, using your text and website information.

Divi Page Flow


Add Divi Email Subscription Module:

  1. Click the green "+" icon to insert a row.

  2. Click the gray "+" icon in the row to open the Divi module library.

  3. Find the moduleEmail Opinand click to load it.
    The module library is also searchable from the top bar.

How to add the Divi Email Optin Module

All Divi email subscription module options explained

When you add the module will automatically open your settings. They are organized into three tabs:Content,DesignandAdvanced.

All Divi Email Optin Module settings explained

Content tab

Here you will find the content options of the module.

Divi Email Optin Module Content Tab settings

Text:

  • Title:Write the title of the module here. If left empty, it will not be displayed.

  • Button:Text of the button (default says "Subscribe").

  • Body:Write the main text. You can add an image from the library or upload a new one.

  • Footer:Text shown below the button. You can also add an image here.

Divi Email Optin Module Text settings

Email account

Connect your email provider here:

  • Service Provider:Choose from 21 services available (active account required).

  • List:Select the list of subscribers to use.

  • Add:Once you select the provider and list, clickAdd. Then you will have to enter:

    • Name of account

    • API Key

    • API Secret

Divi Email Optin Module Email Account settings

List of compatible suppliers

  • ActiveCampaign

  • Aweber

  • CampaignMonitor

  • ConstantContact

  • ConvertKit

  • Emma

  • Feedblitz

  • FeedBurner

  • FluentCRM

  • GetResponse

  • HubSpot

  • iContact

  • Infusionsoft (Keap)

  • MadMimi

  • MailChimp

  • MailerLite

  • MailPoet

  • Mailster

  • Ontraport

  • SalesForce

  • SendinBlue

Fields

First name:
Activate this option if you want to include a field for the name in the form.

Divi Email Optin Module Fields settings

Successful action

  • Action:Choose between displaying a successful message or redirecting to a custom URL after subscription.

  • Message:Write the custom message here. By default, it says "Success!".

Divi Email Optin Module Success Action settings

Protection against spam

Activate this option to avoid fake shipments. You can use a mathematical captcha or integrate Google reCAPTCHA.

  • Use a spam protection service:Turn it on to use reCAPTCHA.

  • Service Provider:Select "ReCaptcha".

  • ReCAPTCHA account v3:Add an account with the name, site key and secret key.

  • Minimum score:Defines the minimum level to determine whether he is a human or a bot (default: 0.5).

Divi Email Optin Module Spam Protection settings

Link

Apply a clickable link to the full module:

  • Link URL:Paste the URL here.

  • Destination of the link:

    • In the same window

    • In a new tab

Divi Email Optin Module Link settings

Fund

Available options:

  • Background color

  • Gradient of the background

  • Background image

  • Background video

  • Background pattern

  • Background mask

Add background color:

  1. Click the paint bucket icon.

  2. Select a color or use the color selector.

Divi Email Optin Module Background Color settings

Add a background gradient:

  1. Click the gradient icon.

  2. Add colors to the downgraduate stop points.

  3. You can:

    • Change the type of degradation

    • Change direction

    • Repeat degradation

    • Change the unity of the degradation

    • Place the gradient on the background image (if any)


Divi Email Optin Module Background Gradient settings

How to add a background image

  1. Click onthird tab(image icon).

  2. Click on the gray icon"+"to open the media library and select or upload a new image.

Background image options:

  • Use parallax effect:Activate this option if you want the background image to move faster than content (3D effect).

  • Image size:Choose the size from the drop-down menu.

  • Image position:Define your position (center, left, right, etc.).

  • Image repeat:Choose whether or not the image will be repeated.

  • Image merger:Controls how the background image is mixed with other elements.

Divi Email Optin Module Background Image settings

How to add a background video

  1. Click onfourth tab(video icon).

  2. Click on the gray icon"+"to upload a video or choose one from the library.

Recommendations and options:

  • MP4 and WebM formats:Upload both for maximum browser compatibility.

  • Width and height of video:Enter numerical values to define dimensions.

  • Pause when another video is played:Activate whether you want to pause the background when playing other videos.

Divi Email Optin Module Background Video settings

How to add a background pattern

  1. Click onfifth tab(pattern icon).

  2. Click"Add background pattern"and select the type.

Pattern options:

  • Pattern color:Use the palette or dropper to choose color.

  • Transformation:Change orientation, reverse or rotate the pattern.

  • Pattern size:Choose real size, cover, adjust or customized.

  • Origin of repetition:Define where it begins to repeat itself.

  • Horizontal/vertical displacement:Adjust the position of the pattern.

  • Melting mode:How it interacts with other layers (16 available modes).

Divi Email Optin Module Background Pattern settings

How to add a background mask

  1. Click onsixth tab(mask icon).

  2. Click"Add background mask"and select the type.

Mask options:

  • Color:Use the palette or dropper.

  • Transformation:Rotate, reverse or orient horizontally or vertically.

  • Aspect ratio:Defines proportions (width/high).

  • Size:Real, cover, adjust or customized.

  • Melting mode:How mixed with lower layers.

Divi Email Optin Module Background Mask settings

Administrator label

This option allows you to name the module with a label visible only to you, to keep order in the back-end. By default, the module is assigned, but you can change it.

Divi Email Optin Module Admin Label settings

Design tab

Here you can controlthe whole visual styleof the module.

Form design

  • Form design:Choose the layout from the drop-down menu.

  • Full width (name, last name, email):Activate if you want each field to use the full width. If not, they will be displayed online half wide.

Divi Email Optin Module Layout settings

Fields of the form

  • Background color and text:Define normal and focus colors (when written).

  • Margins and filling (padding):Adjust the internal and external space.

  • Text font and style:Defines source, weight, style (cursive, capital letters, underline, etc.).

  • Alignment:Left, center, right or justified.

  • Size, spacing and line height:Adjust with the slider or numerically.

  • Shadow of text:Apply shadow to the field text.

  • Rounded corners:Set values for rounding edges.

  • Bordes:Width, color, style (solid, dotted, double, etc.).

  • Shadow of the container:Customize the outer or interior shadow of the fields.

Divi Email Optin Module Fields settings

General text of the module

Settings forall the text of the moduleincluding:

  • Alignment, color, shadow, etc.

Divi Email Optin Module Text settings

Text of title

These are the settings for the specific style and configuration of the Title Text.

Text header level- Choose the header level assigned to the title text: h1, h2, h3, h4, h5 or h6.

Source of title- Choose the font you want to use for the title text. The default font is automatically selected; however, you can choose a different font or upload a custom font by clicking on the drop-down box.

Thickness of title source- Select the font thickness from the title text.

Title font style- Choose the font style of the title text:

  • Cursiva

  • Initial capital

  • Versalitas

  • Underlined

  • Crossed

Alignment of the title text- Choose the alignment of the text only for the title text:

  • Left

  • Centre

  • Right

  • Justificated

Title text color- Choose a specific color for the title text. Select from your site's color palette or click the dropper icon to find a new color.

Title text size- Choose the font size of the title text by dragging the slider or typing a numerical value.

Spacing between title letters- Choose the spacing between letters of the title text by dragging the slider or writing a numerical value. The spacing between letters is the space between each letter. The higher the number, the greater the space.

Title line height- Choose the line height of the title text by dragging the slider or writing a numerical value. Line height is the amount of space between each line of text. The higher the number, the greater the space.

Shadow of the title text- Add a shadow to the title text. Once a style is selected, you can set the direction of the shadow (horizontal and vertical), shadow blur intensity and shadow color.

Divi Email Optin Module Title Text settings

Text of the body

These are the settings for the specific style and configuration of the Body Text.

Body source- Choose the font you want for the body text. The default font is automatically selected; however, you can choose a different font or upload a custom font by clicking on the drop-down box.

Thickness of body source- Select the thickness of the font from the body text.

Body font style- Choose the font style of the body text:

  • Cursiva

  • Initial capital

  • Versalitas

  • Underlined

  • Crossed

Alignment of body text- Choose text alignment only for body text:

  • Left

  • Centre

  • Right

  • Justificated

Color of body text- Choose a specific color for the body text. Select from the color palette of your site or click the dropper icon to find a new color.

Body text size- Choose the font size of the body text by dragging the slider or writing a numerical value.

Spacing between body letters- Choose the spacing between letters of the body's text by dragging the slider or writing a numerical value. The spacing between letters is the space between each letter. The higher the number, the greater the space.

Body line height- Choose the line height of the body's text by dragging the slider or writing a numerical value. Line height is the amount of space between each line of text. The higher the number, the greater the space.

Shadow of body text- Adds a shadow to the body text. Once a style is selected, you can set the direction of the shadow (horizontal and vertical), shadow blur intensity and shadow color.

Divi Email Optin Module Body Text settings

Text of the result message

These are the specific style and configuration settings for the Text of the Results Message Text.

Source of results message- Choose the font you want to use for the Text of the Results Message. The default font is automatically selected; however, you can choose a different font or upload a custom font by clicking on the drop-down box.

Thickness of the source of the results message- Select the thickness of the source from the Text from the Text of the Results Message.

Outcome message font style- Choose the font style from the Text of the Text of the Text:

  • Cursiva

  • Initial capital

  • Versalitas

  • Underlined

  • Crossed

Alignment of the text of the results message- Choose text alignment only for the Text of the Text of the Results Message:

  • Left

  • Centre

  • Right

  • Justificated

Color of the text of the results message- Choose a specific color for the Text of the Results Message. Select from the color palette of your site or click the dropper icon to find a new color.

Text size of the result message- Choose the font size of the Text of the Results Message Text by dragging the slider or writing a numerical value.

Spacing between letters of the result message- Choose the spacing between letters from the Text of the Results Message by dragging the slider or writing a numerical value. The spacing between letters is the space between each letter. The higher the number, the greater the space.

Line height of the results message- Choose the line height of the Text of the Results Message by dragging the slider or writing a numerical value. Line height is the amount of space between each line of text. The higher the number, the greater the space.

Shadow of the text of the results message- Add a shadow to the Text of the Results Message. Once a style is selected, you can set the direction of the shadow (horizontal and vertical), shadow blur intensity and shadow color.

Divi Email Optin Module Results Message settings

Subscription button

Default, inherits global styles. To customize:

  • Turn on "Use custom styles for the button".

Available options:

  • Size, text color, background, width and border color.

  • Edge radius:For rounded corners.

  • Spacing between letters.

  • Source and style of the button (cursive, capital letters, etc.).

  • Icon on the button:Show/hide, color, position and if it only appears when passing the mouse.

  • Shadow of the button text:Direction, blur and color settings.

Divi Email Optin Module Button settings

Size



Width- Defines the width of the module. For more information, see the official documentation.
Maximum width- Defines the maximum width of the module.
Alignment of the module- If a Maximum Width or Width value is set, module alignment can be configured with these three options:

  • Aligned to the left

  • Centrating

  • Aligned to the right
    Minimum Height- Defines the minimum value of module height.
    Height- Defines the height of the module.
    Maximum height- Defines the maximum height value that the module can have.

Divi Email Optin Module Sizing settings

Spacing



You can add margins or fill to the module by writing numerical values.
Themarginadd space outside the module and thefilling (padding)within the module. To maintain equal proportions, click the string icon between the values.
Default margin values: 0
Padding default values: 0

Divi Email Optin Module Spacing settings

Bordes



Add an edge to the module. You can add a full edge or just aside.
Rounded corners- Write a numerical value. The higher the number, the more rounded the corners will be.
Edge Styles- Adds edge to all or specific sides.
Edge width- Defines the edge thickness.
Color of the Edge- Sets the color of the edge.
Edge Style- Choose between:

  • Solid

  • Scored

  • Striped

  • Double

  • Groove

  • Crest

  • Insert

  • Outgoing

  • None

Divi Email Optin Module Border settings

Shadow of Box


Add shade to the entire module.
Customize:

  • Horizontal position

  • Vertical position

  • Blur intensity

  • Recreation intensity

  • Color of shadow

  • Shadow position (in or outside the module)

Divi Email Optin Module Box Shadow settings

Filters

Adjust the filter in the module:

  • Matiz (Hue)

  • Saturation

  • Brightness

  • Contrast

  • Invest

  • Sepia

  • Opacity

  • Blur (Blur)
    Mixing mode- Defines how the module is mixed with the lower layers (default: normal)

Divi Email Optin Module Filters settings

Transform


Options:

  • Climbing

  • Move

  • Rotate

  • Tilt

  • Points of origin

Access each option by tabs and adjust with numerical values or dragging controls. You can block equal values with the string icon.

Divi Email Optin Module Transform settings

Animation

Apply animation to the module:

  • Duration- Time it takes for animation

  • Delay- When the animation begins

  • Initial opacity

  • Speed curve- Controls the smoothness of movement

  • Repeat- By default, it only runs once. Activate "loop" to repeat.

Divi Email Optin Module Animation settings

Advanced Tab


Includes options for advanced designers such as custom CSS.
You can:

  • ApplyCustom CSS

  • Assignclasses and IDsCSS to use in your child theme or custom code

Divi Email Optin Module Advanced tab settings

Privacy Policy


Include IP address- Turn on or off the sending of the user's IP to the mail provider. By default it is enabled.

Divi Email Optin Module Privacy settings

ID and CSS Classes
Assign a specific ID or CSS class for advanced customizations.

Divi Email Optin Module CSS ID and Classes settings

Custom CSS

  • Free CSS- Useselectorto apply rules

  • Module elements- Add CSS to specific sections within the module

Divi Email Optin Module Custom CSS settings

Attributes

Defines the relationship of the link between the source and the landing page.

Divi Email Optin Module Attributes settings

Conditions of Use

Defines when the module is displayed according to conditions such as:

  • User visiting the website

  • Customer who has already bought

  • Browser or OS you use
    You can add one or more conditions.

Divi Email Optin Module Display Conditions settings

Visibility

  • Disable in: Hide the module in Phones, Tablets or Desktop

  • Horizontal and vertical overflow:

    • Visible

    • Displacement (Scroll)

    • Hidden

    • Automatic (according to browser)

Divi Email Optin Module Visiblity settings

Transitions

Control animations when hovering the cursor (hover):

  • Transition time

  • Transition delay

  • Transition speed curve

Divi Email Optin Module Transition settings

Position

Defines the position of the module:

  • Relative(default)

  • Absolute

  • Fixed(ideal for creating sticky modules or sticky modules)
    Additional options:

  • Vertical and horizontal displacement

  • Z-index(determines which modules overlap)

Divi Email Optin Module Position setteings

Displacement Effects

Controls the behavior of the module when scroll:

  • Make it fixed at the top, bottom or both

  • Enablevertical movement(adjust speed without affecting other elements)

  • Motion trigger: Choose when the effect is triggered (when the top, middle or bottom of the item is visible)

Divi Email Optin Module Scroll Effects settings

Save Design

Click the green arrow to save the module changes. If you close unstored, they will be lost.

Save Page Design

  • Mac: CMD + S

  • Pc: ctrl + s
    You can also use the green button onSavein the lower bar of Divi.

Exit the Visual Builder

Click "Exit Visual Builder" from the top admin bar.

Continue Learning

  • How to set up your email account in the Email Optin module

  • How to use spam protection services

  • How to redirect after completing a form

  • How to create a fixed form (sticky)

  • How to include it in the footer

  • How to add a slide effect with scroll

  • How to insert it into blog posts with Gutenberg

  • How to activate it after page-specific visits




    • Popular Articles

    • How to Create an App for Restaurants (with or without Delivery)

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Radio

      The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • APPS: Audio & Music

      How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...

    • QR Promotions

      This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

    • Related Articles

    • Adding Custom Fields to the Divi Email Optin Module

      Adding custom fields to the Divi email subscription module allows you to create custom subscription forms and collect additional information. Divi Email Subscription module supports several email providers. You can create custom data fields within ...

    • The Divi Accordion Module

      Cómo agregar, configurar y personalizar el módulo acordeón de Divi. <br> El módulo acordeón de Divi ayuda a consolidar información en un grupo apilado verticalmente de pestañas que se pueden hacer clic para mostrar u ocultar su ...

    • The Divi Button Module

      Cómo agregar, configurar y personalizar el módulo de botón de Divi. <br> El módulo de botón de Divi es versátil y se puede usar en todo tu sitio web. Crea estilos divertidos al pasar el cursor, usa íconos personalizados y guía a ...

    • The Divi Accordion Module

      Cómo agregar, configurar y personalizar el módulo acordeón de Divi. <br> El Módulo Desplegable de Divi te permite mostrar u ocultar contenido con solo hacer clic en un botón. Es una manera sencilla de compartir información sin ...

    • The Divi Sidebar Module

      Cómo agregar, configurar y personalizar el módulo de barra lateral de Divi. El Módulo de Barra Lateral de Divi facilita añadir una barra lateral compatible con widgets en cualquier página, entrada, proyecto o plantilla de página. Este módulo funciona ...