How do I create a footer?

First of all, it is useful to determine which elements you want to display in a footer. Think of a:

  • Logo
  • Contact details
  • Service links such as changing data and unsubscribe
  • Social media channels

Footer_Example.png

Getting started in Spotler

The order of elements, the alignment and the style depends of course on your corporate identity. This example uses a background color. This footer is structured as follows:

  1. In the section you place one row consisting of three columns.

    Footer_section.png

  2. Then you place elements in the rows. In the first column you place a logo and in the other two columns text. In the third column below the text you place another Social element.

    Elements_footer.png

  3. In the example, we gave the row a background color. Select the row and fill in the background color.

    Backgroundcolor_row.png

  4. You will draw up the elements to match your brand identity:
    Element Content
    Image Place your logo in the image element. If necessary, adjust it in terms of size and alignment by padding around the logo.
    Text 1 In the first text element you place the contact details. Adjust the style of the text to your brand identity. You do this by selecting the text element. On the left you will see the options to style the text. 
    Text 2 The second text element is links to service pages such as changing data and unsubscribe. In the next step we are going to apply the urls.
    Social

    You can adjust the Social element by selecting the element. On the left you will see the option Icon style. Use the dropdown to select a different style.
    Social.png

  5. Place urls behind the elements.
    Element Content
    Logo

    Post a link to your website. Select the logo. On the left you will see URL. Click the hyphen to place a url.

    url footer.png
    Choose Link type: External link with tracking, so you can see in your reporting when someone clicks on your logo. Enter a link name for your report and the URL.

    Service link
    Change data

    Place a link to change the web page details. Select the text and click the hyphen at the top. 

    Koppelteken.png

    Choose Link type: Link to landing page in Spotler or use External link with tracking, when data changes behind a login is done via your CRM.

    Service link
    Unsubscribe

    Place a link to the unsubscribe page. Select the text and click the hyphen at the top.

    Koppelteken.png

    Choose Link type: Special link. For Special link, select: Link to the unsubscribe page. In step 1 of composing a message, you have already selected an unsubscribe package. Based on this, Spotler knows which unsubscribe page to link to. 

    Other links

    Select the text you want to link. Then click on the hyphen at the top. 
    Koppelteken.png
    Choose External link with tracking, so that you can see in your report when someone clicks on this link.

    Social

    Select the Social element. On the left you can specify your different social media channels. If you want to show fewer channels, remove the unnecessary ones with the trash can icon. 

  6. Save the footer so you can easily reuse it. Click the section and then the star to save as block.

    Save_content.png

  7. From now on you will find your footer on the left under Content.

How can I use a different link style?

In the general settings of the post editor, define the general link style.

General_tab.png
All links you create in your post will have this style. This is not always desirable. If you have a dark background in your footer and light texts, you may need to style these links separately.

Adjust color

If you only want to adjust the color, take the following steps:

  1. Select the text with your cursor.
  2. Choose a different text color with the editor at the top.

    Tekst kleur.png

Apply or remove underlining

When you have indicated in the General tab that links should be underlined, or not. And if you want to achieve the opposite in your footer, you adjust this in the code of your message. Here's how: 

  1. Go to the SPML Center at the top:

    SPML Center.png

  2. You will then see the following screen:

    SPML_Center_UK.png


    Click on the code in the left screen and then on CTLR+F, so you can search.
  3. Search for the word behind which the link that you want to adjust in terms of style. For example, "Change data".

    Code.png

  4. We add a style to the link, so that it is displayed as desired.
    In the example, we only have to adjust the color, because all the links are underlined by default:

    <a style="color: #ffffff;"
    href="https://CT-change%20data-5233-m19.mailplus.nl/wpjvEHwaLBS2-1100-112010-[activityId]-{encId}" target-href="https://CT-change%20data-5233-m19.mailplus.nl/wpjvEHwaLBS2-1100-112010-[activityId]-{encId}" target="_blank" rel="noopener">Change data</a>

    You can change the color of the link and underline it.
    Style Content
    Adjust color style="color:#000000;"

    #000000 is black, but you can apply any color here.
    Underline style="text-decoration: underline;"
    Combination of the above elements style="color:#ffffff; text-decoration: underline;"
    Do not underline style="text-decoration: none;"