It is crucial to carefully consider all aspects when designing an email campaign, including the placement of buttons. The positioning of buttons can greatly influence the overall appearance of your email.
In this article, I will guide you through the process of putting two buttons side by side in Mailchimp. As a long-time Mailchimp user, I have experimented with various techniques and found a reliable method to achieve this.
Before we begin, it’s important to note that Mailchimp uses a drag-and-drop editor, making it easy for users to customize the layout and design of their emails. However, placing two buttons side by side requires a little bit of HTML and CSS knowledge.
Step 1: Creating the Buttons
The first step is to create the buttons that you want to place side by side. To do this, open the Mailchimp editor and click on the “Design” tab. Look for the “Button” element in the elements panel on the left side of the screen and drag it onto your email template.
Once you’ve added the button element, you can customize its text, color, size, and other properties according to your preferences. Repeat this step to add a second button to your template.
Step 2: Adding Custom HTML
Now that we have the buttons in place, it’s time to add some custom HTML to align them side by side. To do this, click on the “Code” icon in the top right corner of the Mailchimp editor.
In the HTML editor, locate the section of code that represents the first button you added. It should look something like this:
<td align="center" style="padding: 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate !important;">
<tr>
<td align="center" bgcolor="#0068a5" style="border-radius: 3px;padding: 15px;">
<a href="YOUR_BUTTON_URL" style="color: #ffffff;text-decoration: none;font-size: 16px;font-weight: bold;display: inline-block;padding: 12px 25px;background-color: #0068a5;border-radius: 3px;">YOUR_BUTTON_TEXT
</td>
</tr>
</table>
</td>
Next, copy the entire block of code and paste it below the first button’s code. Replace the placeholder values (YOUR_BUTTON_URL and YOUR_BUTTON_TEXT) with the appropriate URL and text for the second button.
After adding code for the second button, you should have two identical blocks of code, each representing a button.
Step 3: Modifying CSS
Now that we have both buttons in place, we need to modify the CSS to display them side by side. To do this, add the following CSS code below the HTML code:
<style type="text/css">
.btn-container {
display: flex;
justify-content: space-between;
}
</style>
This CSS code creates a container for the buttons and uses flexbox properties to align them side by side with equal spacing between them.
Step 4: Preview and Test
Now that you have completed the steps above, it’s time to preview and test your email template. Click on the “Preview” tab in the Mailchimp editor to see how your email will look.
Pay close attention to the buttons and make sure they are aligned properly. Test the buttons by clicking on them and verifying that they lead to the correct URLs. You can also send a test email to yourself or a colleague to see how it appears in an actual inbox.
Conclusion
Adding two buttons side by side in Mailchimp can greatly enhance the visual appeal of your email campaigns. By following the steps outlined in this article, you can easily achieve this layout and create more engaging and interactive emails.
Remember to experiment with different button styles, colors, and placements to find what works best for your brand and audience. And most importantly, don’t be afraid to add your own personal touches and commentary to make your emails stand out!