Socials

Encourage engagement beyond the email by including links to your social media profiles. The "Social" element makes it easy to add and style a set of social media icons.

Adding a Social Element

  1. Open the Content Tab: Ensure the Content tab is active in the right-hand sidebar, showing the available content elements.

  2. Drag and Drop:

    • Locate the "Social" element in the sidebar.

    • Click and drag the "Social" element onto your email canvas, placing it within a column or content area where you want the icons to appear.

    Upon dropping, a default set of social media icons (e.g., Facebook, X (Twitter), Instagram, LinkedIn) will appear on the canvas. The properties for this "Social" element (often referred to as "Icons" in the sidebar) will load in the right-hand sidebar.

Customising Social Icons

With the social element selected, use the options in the right-hand sidebar to configure the icons and their links.

Icon Style and Selection

  • Icon Type: Choose the visual style for your icons from the "Icon Type" dropdown. Options typically include:

    • Circle (Default)

    • Circle Black

    • Circle White

    • Round (Rounded corners)

    • Round Black

    • Square

    • Square Black The appearance of the icons on the canvas will update as you select a type.

Adding/Removing Icons ("Click the icons to add"):

  • Below the "Icon Type," you'll see a palette of available social media icons (e.g., Facebook, X, Instagram, LinkedIn, Pinterest, YouTube, TikTok, WhatsApp, etc.).

  • To Add an Icon: Click on an icon in the palette that is not currently active in your set. It will be added to the "Social Links" list below and appear on the canvas.

  • To Remove an Icon: Click on an already active icon in the palette (it will likely appear highlighted or selected). It will be removed from your set on the canvas and from the "Social Links" list.

  • Alternatively, each added social link in the "Social Links" list usually has a delete icon (trash can) next to it.

Configuring Individual Social Links

For each social icon you've added, you need to provide the URL to your profile.

  • Social Links List: Below the icon palette, each active social icon will have its own configuration block (e.g., "Facebook," "LinkedIn," "Pinterest").

  • URL: For each social network, enter the full URL to your profile page in the corresponding "URL" input field.

    • Example for Facebook: https://facebook.com/yourpage

    • Example for LinkedIn: https://linkedin.com/in/yourprofile

    • Example for Pinterest: https://pinterest.com/yourusername/

Icon Appearance and Layout

  • Align: Choose the horizontal alignment of the entire set of social icons within their container:

    • Left

    • Center (Often the default)

    • Right (Selected in the video)

  • Icon Size: Adjust the size of the icons in pixels using the input field or + / - buttons (e.g., default 32px, increased to 72px).

  • Icon Spacing: Control the amount of space (in pixels) between each icon (e.g., default 5px, increased to 21px).

4. General (Container Padding)

This section controls the padding around the entire social icons block.

  • Container Padding:

    • All Sides: Enter a pixel value to apply equal padding to the top, right, bottom, and left of the social icons container (e.g., default 10px, increased to 30px, then shown as 20px and 34px). The video shows some trial and error with this value.

    • More Options: Toggle for individual side padding control.

Responsive Design

Control the visibility of the social icons block on different devices.

  • Hide on Desktop: Toggle on to hide the social icons on desktop views.

PreviousVideosNextMenus

Last updated