
Earlier in this week's Design Inspiration post, we looked at how different brands use social media buttons in email: where they put them, how the color/shape/size is customized, and what purpose they serve (to share or follow).
Today's workshop
Today, we'll show you how to customize social media buttons in Beefreeso next time you're designing anemail campaign, you can give a little extra thought to those very important little buttons.Follow along as we show you:
- How and where to place social media buttons in your email
- How to add or remove different buttons
- How to customize the look of the buttons
- How to fine-tune with alignment, spacing, and padding
4. Fine-tuning: how to apply alignment, spacing, and padding
Now we can fine-tune the exact position of our buttons--and the space around and between them--so we're happy with the layout and balance of our header. To match Everyday Food's header, the icons need to come down and to the left, so they're centered within their structure.Back in the Content Properties menu, beneath the collection customization options, we have three more properties to configure: Align, Iconspacing, and Padding.

First, we'll change the alignment so the icons are center-adjusted (selecting the middleoption). This moves our icons over, so we go from this....

...to this:

Next, we can increase the spacing between the icons themselves with the Icon spacing option.It's set to a default of 5px between each, which looks good, but if we wanted to, we could increase to 10, 15, or 20:



Lastly, we can adjust the padding around the buttons. By turning on the More options switch, wecan increase padding specifically on the top, bringing the buttons downward.They're going in the right direction, but I'd still like them to come down a bit, even after adjusting the top padding to its 30px max:

To get more white space over top, we can further adjust the padding, not just on the buttons, but on the content container holding our buttons. Here's how: Select the row of content containing our entire header. The menu will change to view Row properties and Column properties.

Since our social media buttons sit in the second column of our two-column header (remember that 2-column row structure we selected at the very beginning?), we can select Column 2 under Column Properties and continue to increase the top padding! Now it's just right. What do you think?

Adding and editing social media icons takes just seconds in the Beefree. Once you format the look of your buttons, you can also drag and drop them to the header or footer and test which position works best for your company and audience. Give it a try! And let us know how you do in the comments.