Contributor II

Solved

Issue with Custom Nav Buttons Klaviyo

Forum|Forum|4 years ago
December 16, 2021
7 replies
301 views

Hi all! I’m including a photo here of an issue I am having (and have encountered before) with navs in Klaviyo. I’m not sure if I’m missing something, but I created these custom nav buttons for a client and although each image is the same height, they come into Klaviyo sized completely randomly. I’ve been able to adjust the width by eye in Klaviyo to make them match as closely as I could, but I would like to prevent this from happening at all. I am making these buttons in Illustrator.

I’ve tried:
-Images all being only as wide as the length of the words, but staying the same height.
-Images all being as wide as the longest nav button (Our Whiskey) but staying the same height.

This topic has been closed for replies.

Best answer by stephen.trumble

Hey @Nina W.

Just want to give a shoutout to @thepowerofcopy really quick for jumping in to help with this!! Love seeing peers collaborate together to solve various challenges. Thank you so much! I also just wanted to add a little to this conversation when using images in email templates.

Across the web, using 72dpi resolution is best practice. In general try to keep your images to 600px or less in width and less than 2000px in height, in order to balance image quality and loading speeds. The total width of Klaviyo emails are 600px, so subdividing that, each of your images should be no bigger than 150px wide and 500px in height. If you use the same font size and then save the image setting to these dimensions before saving the image, it may help you create consistency across the header you are trying to create.

I hope this helps!! Thank you again for being part of the Klaviyo Community!

thepowerofcopy

Partner - Silver

Hello Nina,

Have you tried using the new editor? And add column layout in your template.

Check it here: https://mega.nz/file/YpU11YqD#1V8UeHQWjN07_1wyR-R4Dzc0C3uUzHze_kRxbD8AMzQ

I was wondering if you could share those images you want to attach, in order for me to create a screen recording for you :)

Helping consumable products increase revenue by up to 20% by using customer retention strategies through email marketing.

N

Nina W.Author

Contributor II

Yep! I am doing this in the new editor, and the last time I encountered it was with a different client in the old editor. I am using the nav function, so I’m not sure how I would add columns to that as it already has a set design. Attached are the images I’m using. I am including the ones I would prefer to use, which have each nav button only being as wide as the word itself.

N

Nina W.Author

Contributor II

I can see that they all appear differently there as well ^, but on my computer, they are the same height so I’m not sure what I’m missing. Thanks!

thepowerofcopy

Partner - Silver

Good day, Nina.

Thank you for providing those images.

You'll need the "Our Whiskey" size, and use Canva to make a custom image then download those images.

Here's the screenrecord: https://mega.nz/file/A5FE0b5J#RfcX9NM1WVLmbk-Wr7uZzbkI0CC_3N1HxqOCRXomMcw

I hope it help you.

Helping consumable products increase revenue by up to 20% by using customer retention strategies through email marketing.

N

Nina W.Author

Contributor II

I’ve already tried making them all the size of “Our Whiskey” on illustrator and it didn’t work :/ Did you put those into columns? I am not doing that, I’m trying to use the header/link bar and that is where the sizing is acting weird.

stephen.trumbleAnswer

Klaviyo Alum

Hey @Nina W.

Just want to give a shoutout to @thepowerofcopy really quick for jumping in to help with this!! Love seeing peers collaborate together to solve various challenges. Thank you so much! I also just wanted to add a little to this conversation when using images in email templates.

Across the web, using 72dpi resolution is best practice. In general try to keep your images to 600px or less in width and less than 2000px in height, in order to balance image quality and loading speeds. The total width of Klaviyo emails are 600px, so subdividing that, each of your images should be no bigger than 150px wide and 500px in height. If you use the same font size and then save the image setting to these dimensions before saving the image, it may help you create consistency across the header you are trying to create.

I hope this helps!! Thank you again for being part of the Klaviyo Community!

-Stephen

N

Nina W.Author

Contributor II

Thank you @stephen.trumble and @thepowerofcopy! That makes sense, I’ll try it out. Thanks again!

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials