A

Anonymous

Solved

How do I put two buttons side by side in an email?

Forum|Forum|4 years ago
October 8, 2021
9 replies
11459 views

How do I get both buttons to be side by side

Best answer by Taylor Tarpley

Hi @Madmike,

Thanks for asking your question in the Community!

In order to insert buttons that would appear side-by-side under each picture, I would follow @Mailbox Manny’s awesome advice to add columns to the designated place you want to insert these buttons. Once you click to add to the Add Columns to Email’ option, it will ask you what many columns you want to insert with various options of how those columns can be formatted. You have the option of adding up to four columns to the width of your email. After inserting two columns the same size, you can insert a button block directly under each text block then deleted the text block if you do not need it.

Additionally, I would suggest checking out our Academy course on Email Design and this Community Post on further insight into adding columns to an email!

Thanks for being a part of the Community!

-Taylor

Mailbox Manny

Partner - Silver

Good question. Curious, how did you get the images above that to be side by side?

I would say the way to do it is by using columns. You can find the setting to add colulmns in the Blocks on the bottom right:

Also, I’m curious based on the email content, what is your site?

Subscribe. Segment. Send. Repeat.

Taylor TarpleyAnswer

Community Manager

Hi @Madmike,

Thanks for asking your question in the Community!

In order to insert buttons that would appear side-by-side under each picture, I would follow @Mailbox Manny’s awesome advice to add columns to the designated place you want to insert these buttons. Once you click to add to the Add Columns to Email’ option, it will ask you what many columns you want to insert with various options of how those columns can be formatted. You have the option of adding up to four columns to the width of your email. After inserting two columns the same size, you can insert a button block directly under each text block then deleted the text block if you do not need it.

Additionally, I would suggest checking out our Academy course on Email Design and this Community Post on further insight into adding columns to an email!

Thanks for being a part of the Community!

-Taylor

R

ramoncassel

Contributor I

Hi,

Thanks for the thread, very useful!

One question I have is on mobile screens. It seems like the 2, 3 or 4 columns block inserted via ‘Add Columns to Email’ works on Desktop only? 4 columns would obviosuly be an overkill on mobile, but I’m thinkgin on the 2 columns option. Is there any way to make it work?

Cheers, Ramon

Taylor Tarpley

Community Manager

Hi @ramoncassel,

Thank you for sharing your question with us!

Yes, that is correct! The button ‘Mobile Optimization’ is toggled on automatically on your template, which helps you to view what your template might look like on mobile and therefore will only show those columns stacked on top of each other, as is considered best for mobile display. However, you can toggle off the Mobile Optimization button under the Styles > Mobile section of your template.

I would recommend sending a test email to yourself and viewing it on your phone to see how it will render as testing this way is the most accurate know how it will look in your customer’s inboxes. Explained in a similar community topic linked below.

Thanks for participating in the Community!

-Taylor

R

ramoncassel

Contributor I

Hi @ramoncassel,

Thank you for sharing your question with us!

Yes, that is correct! The button ‘Mobile Optimization’ is toggled on automatically on your template, which helps you to view what your template might look like on mobile and therefore will only show those columns stacked on top of each other, as is considered best for mobile display. However, you can toggle off the Mobile Optimization button under the Styles > Mobile section of your template.

I would recommend sending a test email to yourself and viewing it on your phone to see how it will render as testing this way is the most accurate know how it will look in your customer’s inboxes. Explained in a similar community topic linked below.

Thanks for participating in the Community!

-Taylor

Brilliant, thank you!

R

rak-mktg

Contributor II

this doesnt work because you cannot add buttons into columns.

JessFosnough

Expert Problem Solver IV

Hi @rak-mktg,

If you need to put buttons side by side, add a columns layout from the content area to any section. You can choose the number of columns, up to 4. Then you can drag a button to the different columns. Let me know if I can explain further! Good luck!

Jessica

R

rak-mktg

Contributor II

hi JessFosnough, My Klaviyo interface wont allow me to add a button element into the column block. It forces the button either above or below it.

JessFosnough

Expert Problem Solver IV

@rak-mktg, I’m sorry to hear that. I just tried it in my account, and had no problem when I used the column layout (not the table block). Unfortunately I don’t have any other suggesions for you, maybe someone else has an idea. Sorry I can’t help further!😔

Jessica

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials