Advanced content

Videos in landing page designs

Options for showing videos

For landing pages, there are several options for adding videos:

• Thumbnail: A video from Youtube or Vimeo that is displayed as an image. Clicking on the image takes viewers to the video platform.
• Embedded: A video from Youtube or Vimeo that can be played directly on your landing page.
• Hosted: MP4 files from a permanent URL.

Externally hosted thumbnails must be served via HTTPS to ensure they remain visible. Editing an external thumbnail in the editor saves it locally.

Adding an embedded video

Prerequisites: You see the design editor.

1. Add a video content element (see Design editor basics: Adding an object).
2. Select the video element.
3. In the side panel, in the field Video url, select Embedded.
4. In the field Url, enter your video’s URL.
5. Press the Tab key or click outside of the field Url.
   → The video is added to the content element.

Menus

Overview

With the menu content element you can create a text-based collection of links. This works with various layout options and devices, sparing you the hassle of manual adjustments like text sizing and padding.

Defining a Menu

Prerequisites: You see the design editor.

1. Add a menu content element (see Design editor basics: Adding an object).
2. Select the menu element.
3. In the side panel, in the field Layout, choose between a horizontal and vertical layout.
   (For horizontal layouts, you can insert a text character as a separator between menu items via the field Separator)
4. In the side panel, click Add new item.
   → A new section for defining the menu item is displayed in the side panel.
5. Enter a display text
6. Select a link type.
7. Define a link target.
8. Optional: Use the Title field to set a hover-over text for the item.
9. Optional: Repeat steps 3 to 8 to add more items to the same menu.

More menu settings

Menus support multiple URL types such as email, SMS, and click-to-call. You can also specify whether a URL should open in the same window or a new tab.

If you've included multiple items within the same menu element, you can rearrange them in the side panel. In an item’s section, click (drag handle) and drag the item to another position.

Anchor Links for Emails

Overview

The Anchor element allows you to define link targets within your email message drafts. You can then create links that point to a specific anchor. Use cases for this is include creating a linked table of contents for a long newsletter.

By default, the anchor element is not available in the side panel but it can be activated in your client free of charge on request. Contact Optimizely customer support, if you want to use it.

Defining an Anchor

Prerequisites: You see a message draft in the Design Editor. The anchor element is available in your client.

1. Add an anchor content element (see Design Editor basics: Adding an object).
2. Select the anchor element.
3. Click Edit Anchor…
   The pop-up menu Edit Anchor displays.
4. Enter an anchor name. The name must start with a pound symbol (#) which is automatically put into the field and cannot be removed.
   Note: Anchor names are case sensitive. Following characters can be used: “A-Z, a-z, 0-9, -, _, :, .”
5. Click Apply.
   → The new anchor is displayed in the editor.

Creating a Text Link to an Anchor

Context: You can use part of a text as a link source.
Prerequisites: You see a message draft in the Design Editor. The message draft contains an anchor.

1. Select the text you want to use as the link source.
2. In the pop-up menu, click on Insert/edit link.
   → The menu Insert link displays.
3. In the field Url, enter a pound symbol (#) immediately followed by the anchor name (no space in between).
4. Click OK.
   → The selected text is linked with the anchor.

Creating an Element Link to an Anchor

Context: You can use content elements that show a link field in the side panel when selected, as link sources (e.g. images or menus).
Prerequisites: You see a message draft in the Design Editor. The message draft contains an anchor.

1. In the design area, select the content element you want to use as the link source.
2. In the side panel, find the URL field for links from the selected element (e.g. in the section Action for images)
   Note: For images, there is also a URL field for defining the source of an image, do not confuse this with the link URL field.
3. In the field Url, enter a pound symbol (#) immediately followed by the anchor name (no space in between).
   → The content element is linked with the anchor.

Anchor links in Menus

In Menu content elements, there is a separate link URL field for each menu entry. You must define entries before adding links. Using the whole menu as a link source is not possible. Leave the value in the field Target on Current page.

Testing an Anchor Link

Prerequisites: You see a message draft in the Design Editor. The message draft contains an anchor link.

1. Click on Preview.
   → The message draft preview displays.
2. In the message draft, click on your anchor link.
   → The view scrolls to the position of the anchor.
   Note: In the preview and in emails sent to recipients, the anchor element is invisible.

Custom HTML

Overview

The Custom HTML content element enables you to insert your own HTML code. In the design editor, this is as simple as adding a paragraph element, but the feature is primarily intended for those proficient in HTML. Using custom HTML can impact how your design adjusts to various screen sizes, so make sure the HTML you use is appropriate for your use case. Note that custom HTML typically falls outside of standard support.

Use cases

Here are a few scenarios where custom HTML can be valuable:

• Customized Content: You're not restricted to predefined settings, giving you more control over styling.
• Special Elements: Add content like HTML5 videos or anchor links, which are not standard elements in the editor.
• Advanced CSS Effects: CSS animations can make your web pages more engaging.
• Live Content: Embed real-time content like product recommendations or countdowns by pasting code from external vendors.

Adding custom HTML

Prerequisites: You see a design in the editor.

1. Add an HTML content element (see Design editor basics: adding an object).
2. Select the HTML element.
   → The HTML editor is displayed in the sidebar.
3. Enter your own HTML.

Attributes for Accessibility

Overview

For some content elements, you can add ARIA attributes to improve the accessibility of your content (see also Accessible HTML). Following attributes can be used:

• aria-label: Contains a text which describes the content and will be read to the user by a screen reader.
• aria-hidden: Contains true or false. Screen readers will ignore elements where this attribute is set to true.

These attributes are available for following content elements:

• Text links
• Buttons
• Images.

Adding an attribute to a button or image

Prerequisites: You see a design in the editor. The design contains a button or image.

1. Select a button or image.
2. In the side panel, in the section Attribute, click Add new attribute.
   → A drop-down list shows the available attributes.
3. Select the desired attribute.
   Note: Each attribute type can only be added once.
   → The attribute is displayed in the side panel.
4. Enter or select the desired value of the attribute.

Deleting an attribute from a button or image

Prerequisites: You see a design in the editor. The design contains a button or image with an attribute.

1. Select a button or image with an attribute
2. In the side panel, in the section Attribute, find the attribute you want to delete.
3. Below the attribute, click Delete.
   → The attribute is deleted.

Adding an attribute to a link

Prerequisites: You see a design in the editor. The design contains a link within a text.

1. Click on the link.
   → A pop-up menu displays.
2. In the pop-up menu, click on (insert/edit link).
   → The menu insert link displays.
3. Click on Custom Attributes.
4. Fill in the desired field(s) for attributes.
5. Click OK.

Removing an attribute from a link

Prerequisites: You see a design in the editor. The design contains a link within a text.

1. Click on the link.
   → A pop-up menu displays.
2. In the pop-up menu, click on (insert/edit link).
   → The menu insert link displays.
3. Click on Custom Attributes.
4. Empty the field aria-label and in the field aria-hidden, select false.
5. Click OK.

Attachments

Overview

You can add files to a message draft which will be sent as attachments with each message.

Uploading an attachment

Prerequisites: You see a message draft in the Design Editor for emails. The attachment you want to upload is available on your local system.

1. Above the message draft, click on More Options.
2. Select Attachments.
   → The menu Attachments displays.
3. Click Upload.
   → The menu Add File displays.
4. Click Choose File and select a file from your local drive.
   → The selected file's name is shown in the menu Add File.
5. Optional: In the field File Name, edit the name with which the file will be stored.
6. Optional: In the field Description, enter a description.
7. Click Upload File.
   → The file is added to the list in the menu Attachments.
   Note: The file is not yet added to your message draft!

Editing attachments of a message draft

Prerequisites: You see a message draft in the Design Editor for emails. The attachment you want to add is available in the list of attachments.

1. Above the message draft, click on More Options.
2. Select Attachments.
   → The menu Attachments displays.
3. Select or de-select attachments in the list as desired.
4. Click Attach X File(s).
   → The selected files will be attached to messages sent to recipients.

Deleting an Attachment

Prerequisites: You see a message draft in the Design Editor for emails.

1. Above the message draft, click on More Options.
2. Select Attachments.
   → The menu Attachments displays.
3. Select one attachment.
4. Click Delete.
5. Confirm that you want to permanently delete the file.
   → The file is deleted from the list of attachments.

Custom head HTML

Purpose

You can add custom code to the HTML <head> section of a message draft. By adding scripts, CSS or structured data, you can influence how your emails will be processed or rendered. This allows presenting emails more prominently and attractively in the recipient's inbox or providing additional functions. However, these features depend on each recipient's email provider or software and your specific adjustments may be ignored in some or most inboxes.

This feature is meant for experts. Make sure that any added content is well-formed, responsive, and secure!

Adding code

Prerequisites: You see a message draft in the Design Editor for emails.

1. In the side panel, open the tab Settings.
2. Find the section Custom Head HTML.
3. Optional: If you want a bigger input field, click Expand.
4. In the section Custom Head HTML, enter your code.
5. Save the message draft.
   → Messages created from this message draft will contain your code in the HTML <head> area.

Use cases

A common use case for custom <head> code is providing machine-readable information about an email as structured data. On schema.org you can learn how to encode such information.

Google Mail supports several types of email promotions based on structured data. With these you can display images or coupon codes directly in a recipient's Google Mail inbox.

United Internet offers trustedDialog Preview for its platforms web.de and gmx, which displays up to three images and a coupon code directly in the email inbox. This makes your emails stand out visually and also emphasizes that they are genuine and trustworthy. Using trustedDialog Preview requires a configuration for your domain at United Internet and a subscription. For more information on trustedDialog, please contact United Internet.