Advanced content

  • Updated

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 navigation menu for your designs. 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 sidepanel_draghandle.png (drag handle) and drag the item to another position.

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.

Dynamic images

About dynamic images

Dynamic images are a popular use case of custom HTML elements. A dynamic image is displayed differently for each viewer of a landing page. For example, such an image may contain a salutation that uses the viewer's name. This can be achieved by adding a JavaScript program in a custom HTML element. This JavaScript program must provide the on-page functionality for the following procedure:

You send each viewer a custom link with URL parameters that contain user-specific information (e.g. a name). The JavaScript then processes the URL parameters and modifies the HTML code of an image element so that the image source becomes a request to an external service. The external service provides a customized image based on the information in the request.

The toggle Dynamic image

You must use placeholders when defining dynamic images. When working in the design editor, this could be a problem when editing and previewing your page, because the editor does not have the required URL parameters to create valid sources for the HTML <img> elements. Avoid this problem by activating the toggle Dynamic image in the image settings in the side panel. When Dynamic image is active, you can enter two sources for one image element:

  • The field URL is used for preview purposes and should contain a link to a neutral sample image.
  • The field Dynamic URL is used for showing your page to actual viewers and should contain the link to the external image processing service with placeholders.

Example

Let's say you have a customer you want to address with his first name John in an image on a landing page. We assume that there is a service at my-image-generator.com that can process an HTTP request to provide a customized image for your landing page. You can use any service with this functionality.

You send John a custom link that contains his name as a URL parameter:

https://example.com/page?customer_name=John

When John opens this link in his browser, a dynamic image on your page is transmitted as an HTML <img> element wich has the placeholder {NAME} in its src attribute.

<img src="https://my-image-generator.com/image?viewer_name={NAME}>

The JavaScript from the custom HTML element extracts the value "John" from Johns custom link and uses it to modify the image element so that it sends the value "John" to the image processing service:

<img src="https://my-image-generator.com/image?viewer_name=John">

This last code example will not be visible in the page's source code, but it shows what is requested from the external service. The image provided by the external service is then used to render the page as John sees it.