Email Marketing Tool

KLack
Member

Looking for Help With Design Manager Social Sharing Module

SOLVE

I am having issues incorporating a custom Social Sharing Module into my drag-and-drop email. I have the module roughly built and can drag it into my email template, but the icons are all left aligned, and I am having an impossible time getting them to be centered instead. Coding is not my forte, and I don't see anywhere in the code that I could add the center align language. And the Style Fields - alignment option in the right-hand menu seems to do nothing.

 

The end goal is that we want our readers to be able to share the email content on social media.

 

Here's the code that I have:

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~";width:"~size~";border-radius:"~borderRadius~";border-width:0px;border:0px" %}
<center></center>

{% macro render_social_icon(networkName) %}
{% set network = module[networkName] %}
{% if (networkName == "pinterest" and network.pinterest_media and network.enabled) or (networkName != "pinterest" and network.enabled) %}
{% if networkName == "pinterest" %}
{% set pinterest_media = module.pinterest.pinterest_media.src %}
{% endif %}
{% set logo = networkName ~'-color.png' %}
{% set urlOperator = "&" if "?" in page_meta.canonical_url else "?" %}
{% if module.link %}
{% set social_link_url = module.link ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% elif content.email_type.blogRssChild %}
{% set social_link_url = content.rss_email_url %}
{% else %}
{% set social_link_url = page_meta.canonical_url ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% endif %}

<a href="{{ network.custom_link_format }}" target="_blank" rel="noopener" style="{{ linkStyle }}" >
<img src="{{ module_asset_url(logo) }}" class="hs-image-widget hs-image-social-sharing-24" style="{{ imgStyle }}" width="{{ size }}" hspace="0" alt='{{ "Share on " ~ networkName }}' />
</a>
{% endif %}
{% endmacro %}

<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing">
{{ render_social_icon('facebook') }}
{{ render_social_icon('linkedin') }}
{{ render_social_icon('twitter') }}
{{ render_social_icon('email') }}

</div>

0 Upvotes
1 Accepted solution
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Looking for Help With Design Manager Social Sharing Module

SOLVE

Hi @KLack 

 

Styling emails is challenging – lots of normal CSS works on some email clients some of the time.

 

I recommend creating an HTML Table, with an icon in each cell, then use inline CSS to center the icon.

 

Have fun

Mike

View solution in original post

2 Replies 2
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Looking for Help With Design Manager Social Sharing Module

SOLVE

Hi @KLack 

 

Styling emails is challenging – lots of normal CSS works on some email clients some of the time.

 

I recommend creating an HTML Table, with an icon in each cell, then use inline CSS to center the icon.

 

Have fun

Mike

PamCotton
Community Manager
Community Manager

Looking for Help With Design Manager Social Sharing Module

SOLVE

Hello @KLack, thank you for posting here!

I would like to add some of our top experts to this conversation @alyssamwilie @Mike_Eastwood any recommendations for @KLack matter?

 

Thank you,

Pam

 

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes