In this documentation, we will show you how to customize the Mailchimp widget presented by Element Pack Pro.

Inserting The Mailchimp Widget

Inserting the widget by following this,

1. Search by the Mailchimp widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Layout Section

Go to Content > Layout

Make the layout section interactive by following,

1. Show Before Icon: Enable the switcher the show the before Icon.
2. Inline Before Icon: Enable the switcher to show Inline Before Icon.
3. Choose Icon: Select the icon from the icon library.

4. Before Text: Set the before text.
5. Email Field Placeholder: Set the email placeholder for field.
6. After Text: Set the after text.

7. Alignment: Set the alignment for the text.
8. Space Between: Set space between the text.
9. Show Name: Enable the switcher to show the name.
10. Name Field Placeholder: Set the name field placeholder.

11. Fullwidth Fields: Enable the switcher the show the full width fields.
12. Fullwidth Button: Enable it to show the fullwidth button.
13. Button Alignment: Set the alignment for the button.

Submit Button

Go to Content > Submit Button

Set the content for the button,

1. Button Text: Set text for the submit button.
2. Icon: Set the icon for the button.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Field Section

Go to Style > Field

Make the field section by following,

1. Placeholder Color: Set the placeholder color.
2. Text Color: Set the text color.
3. Background: Set the background for the field.
4. Typography: Set the typography for the field.

5. Border Style: Set the style for the border.
6. Border Type: Set the type for the border.
7. Border Width: Set border width.

8. Border Color: Set the border color.
9. Border Radius: Set the radius for the border.
10. Padding: Set the inner spacing by the padding.

Sign Up Button Section

Go to Style > Sign Up Button

Normal State for Sign Up Button

The changes will appears normally.

Make the sign up button interactive,

1. Text Color: Set the text color.
2. Background: Set the background.
3. Border Type: Set the border type.
4. Border Width: Set the width for the border.

5. Border Color: Set the border color.
6. Border Radius: Make the border radius.
7. Padding: Set the padding.

8. Box Shadow: Set the shadow for the box.
9. Typography: Set the typography for the sign up button.

Hover State for Sign Up Button

The changes will appear on mouse hover.

Make the hover tab stylish,

10. Text Color: Set the text color for the signup button.
11. Background: Set the background color.
12. Border Color: Set the border color.
13. Hover Animation: Set the hover animation for the button.

Before Text Section

Go to Style > Before Text

Make the before text stylish by following,

1. Color: Set the color for the before text.
2. Spacing: Set the spacing between the field and text.
3. Typography: Set the typography for it.

After Text Section

Go to Style > After Text

Make the after text stylish by following,

1. Color: Set the color for the after text.
2. Spacing: Set the spacing between the field and text.
3. Typography: Set the typography for it.

Video Assist

You can watch the video above to learn about the Mailchimp widget.
Please visit the demo page for examples.

Thanks for staying with us.