ElementsKit now supports Mailchimp integration. With it, you can personalize your sign-up form with attractive and multiple styles.

ElemntsKit MailChimp #

Pré-requisitos:

Upgrade to Elements Kit Pro to unlock the Mailchimp integration.

Step 1: Open any page or post where you want to use Mailchimp #

Vá para Elementor editor and procurar MailChimp

Now, you have to set the API key

Step 2: Generate Mailchimp API Key #

Vá para Kit de Elementos → USER SETTINGS → MAILCHIMP DATA

Step 3: Get Mailchimp API Key #

Para obter a chave API Criar uma conta Mailchimp e faça login com seu Usuário e senha.

1. Vá para sua account photo
2. Click on your Account & Billing

Expandir o Extras menu and click on API keys.

Click on the button “Create A Key”.

• Set an API Key Name
• Click on the button “Generate Key”

Your key is ready.

• Copy it by clicking on the “Copy To Clipboard”
• Clique no “Done” botão

Step 4: Insert the MailChimp API #

Now go back to your dashboard.

1. Go to USER SETTINGS
2. Insert MailChimp API Key
3. Salve as alterações

Step 5: Customizing the MailChimp Widget #

• Go to your page where you’ve draged and dropped Widget Mailchimp
• Selecione Lista no menu suspenso

Create a Campaign: Verificar how to create a campaign list from your Mailchimp account.

Double Opt-in: It means when someone submits their email, they get a confirmation email first. They must click the link in that email to actually join your list. Without clicking, they won’t be added.

NOTE: As the warning says — if you turn this On here, you must also enable it inside your Mailchimp audience settings, otherwise it won’t work.

Here, you add extra input fields to your signup form beyond the default ones.

When you click on a field (e.g. Endereço de email) to expand it, you get these options:

• Tipo: What kind of input the field accepts — Email, Text, Number, etc.
• Rótulo: Heading text shown above the input box.
• Espaço reservado: Faded hint text inside the empty input box, disappears when user types.
• Nome: Internal field ID — must match your Mailchimp MERGE tag exactly (e.g. email, FNAME).
• Obrigatório: If Yes, user cannot submit the form without filling this field.
• Mostrar Icone: Shows or hides the small icon inside the field.
• Ícone: Choose which icon appears inside the field.
• Posição do ícone: Sets icon placement — Before (left) or After (right) of the placeholder text.

Customize MailChimp’s form button.

• Submit Button Text: The label shown on the button. Currently set to “Sign Up.”
• Mostrar Icone: Toggles the icon on the button visible or hidden.
• Button Icons: Choose which icon appears on the button. Currently an arrow (→).
• Posição do ícone: Sets where the icon sits on the button. Before means left side, After means right side.
• Form Style: Controls the button layout. Full Width stretches the button across the entire form.
• Mensagem de sucesso: Text the user sees after successfully submitting the form. Currently “Successfully listed this email.”

To style the form, click the Estilo aba in the Edit MailChimp panel. Here are the available sections:

• Rótulo: You can change the color, typography and margin of the labels.
• Input Wrapper: It lets you change the column gap, row gap, icon gap, border type, color, box shadow, etc.
• Entrada: For inputs, you can show or hide the width, change typography, border radius, padding, etc.
• Botão: Customize the submit button by changing its position, color, background type, padding, and so on.
• Ícone de entrada: Controls the icon inside input fields with your chosen color, size, background type etc.
• Success & Error Message: You can style the messages shown after form submission by changing its width, padding, margin, text color, background type and others.

After finishing your customization, view the form, fill up the form and submit it.

Step 6: Do the Final Check #

• After submitting the form, go to Mailchimp → Audience → All Contacts
• Check your contact list. Here you can verify that the submitted details like email, first name, and last name are correctly saved.