The basic Mailchimp templates are easy to use, effective and best of all look great across almost all devices. In Mailchimp classes I always recommend that attendees use the basic 1 column template.
The problem with the Mailchimp button content block
Some people however find that there is too much white space in the basic templates and it isn’t easily possible to remove much of the white space. Also, Mailchimp training participants often ask if it’s possible to have an inline button rather than the button below or above content i.e. to the left or right of, usually, text.
In order to add an inline button we need to add the button as HTML rather than using the button content block. Fortunately, even if you aren’t familiar with HTML, it’s actually simple to add a button.
Instructions to add a button next to text
Instead of using the button content block for your campaign email, follow the instructions below to add an inline button.
- Add a text content block to your campaign builder.
- While in the text content block edit screen click Settings (to the top right of the screen).
- Under Number of columns select 2 Columns.
- Select the third Column split i.e. two-thirds for the first column and one third for the second column.
- Click Content (to the left of Settings) then Column 2.
- Click the Source <> icon.
- Delete the existing text and copy and paste the HTML as below.
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#009688;" width="100%"> <tbody> <tr> <td align="center" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="https://organicweb.com.au" style="color:#FFFFFF; text-decoration:none;" target="_blank">Read More</a></td> </tr> </tbody> </table>
- Edit the destination URL in the HTML to your own.
- Click Save & Close.
Congratulation. You now have an inline button that is responsive (looks good on desktop computers, tablets and mobile phones.
please make button completely clickable
Thank you for this! How do I change the color of the button? Want to change it to #e72f78
In step 7, change
style="background-color:#009688;"to
style="background-color:#e72f78;"in the anchor tag , under STYLE, add ‘width:100%’. That should make the button completely clickable.
does this allow it to open the link in a new window?
Thanks so much! I’ve just created a ‘Donate’ button. I read your script and managed to figure out how to adjust a few bits and pieces by referencing it against the standard Mailchimp button block. I am very happy with the result!
This was super helpful! Thank you so much! Is there also a way to make it a round button? Thank you so much!
Sol, you’ll be able to round the corners using CSS border-radius.
You cant use border radius on table, but just add a div tag on top with border radius, and close at the end
Thank you very much for this, very useful !
can you please give an example of the border corner html? sorry new to html coding. thanks!
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
How do I change it to go to an email rather than opening up a web browser?
Hi Hannah,
Where I have the URL of
https://organicweb.com.auyou’ll havemailto:[email protected](obviously with the correct email address).Is there a possibility to make the button responsive?
How do you make the button centered?
@makenzie, the button will be as wide as the container in which the button is placed. Usually this means that the button is as wide as the content block into which it is placed. It is possible to create a three column table and using the middle column for your button (and use a width of 33.3333% to center the button) however when viewed on a small screen then the button will be very small.
Is it possible to have the button inline with text of a “Image+Text” Content block instead of this version?
Hi Bryan, please expand on your question; what are you trying to achieve?