Show Menu
TOPICS×

Designing a landing page

About landing page content design content design

Landing pages are created as any marketing activity .
When designing a landing page, you need to define the content of the page itself, the confirmation page, and the error page. Use the switcher under the action bar to display and configure each of these pages.
The content of landing pages is designed through Campaign content editor.
If your instance was installed before the Adobe Campaign Standard 19.0 release, you still have access to the legacy email content editor. The interface, principles of use and configuration are mostly the same as described below for landing pages. However, all features may not be available or maintained in the legacy email content editor, which is deprecated starting 19.0 release. To quickly edit your email content through a drag and drop interface with extended functionalities, use the Email Designer .
This page describes the specificities of the landing page content editor. For more on the actions that are common to one or more marketing activities, refer to these sections form the
Designing email content
guide:
If you have a landing page that is already predefined in HTML format, you can import it directly using the
Change content
button.
Before importing an HTML page in Adobe Campaign, make sure it opens and displays correctly in the various browsers. If the HTML page contains JavaScript scripts, they need to execute without errors outside of the editor. In general, avoid using scripts in message content to make sure it is correctly processed by email clients.

Landing page content editor interface

The landing page content editor allows you to easily define, modify, and personalize content in Adobe Campaign. To access it, click the
Content
block in a landing page dashboard.
The content editor is organized into three different sections. These sections allow you to view and edit the content.
  1. The
    palette
    on the left-hand side of the screen allows you to modify the general options linked to a selected block. The options that can be modified are: background color, border, text alignment, visibility condition, etc. See Inserting a personalization field .
  2. The
    action bar
    contains the general options for the page. You can select a template and change the display mode.
  3. The main
    editing zone
    allows you to directly interact with the content using the contextual toolbar: insert a link into an image, change the font, delete a field, etc.
The
action bar
contains different buttons that allow you to interact with the content that is being created.
Icon
Button name
Channel
Description
Change content
Landing page and email
Allows you to select out-of-the-box content or import your own HTML content. Refer to Loading an existing content .
Undo
All
Cancels the last action carried out.
Redo
All
Redoes the last action that you canceled.
Show blocks
Landing page and email
Allows you to show the boxes around the content blocks (corresponds to the
<div>
HTML tag).
Show source
Landing page and email
Allows you to show the HTML source code of the page.
The
toolbar
is a contextual element of the editor interface that offers various functionalities depending on the zone selected. It contains action buttons and buttons that allow you to change the style of the text. The modifications carried out always apply to the zone selected. Once you select a block, you can delete or duplicate it for example. After selecting the text inside a block, you can turn it into a link or make it bold.
Certain toolbar functions let you format the HTML content. However, if the page contains a CSS style sheet, the
instructions
from the style sheet may prove to take
priority
over the instructions specified via the toolbar.
Icon
Button name
Context
Description
Link to an external URL
Any element
Allows you to add a link to a URL. Details of how to configure a link are presented in the Inserting a link section.
Link to a landing page
Any element
Allows access to an Adobe Campaign landing page. Details of how to configure a link are presented in the Inserting a link section.
Subscription link
Any element
Allows you to insert a service subscription link. Details of how to configure a link are presented in the Inserting a link section.
Unsubscription link
Any element
Allows you to insert a service unsubscription link. Details of how to configure a link are presented in the Inserting a link section.
Remove link
Link
Allows you to delete the link, as well as all the configurations linked to it, after confirming.
Insert a personalization field
Text element
Allows you to add a field from the database to the content. Refer to Inserting a personalization field .
Insert a content block
Text element
Allows you to add a personalization block to the content. Refer to Adding a content block .
Enable dynamic content
Text element
Allows you to insert dynamic content in the content. Refer to Defining dynamic content .
Disable dynamic content
Text element
Allows you to delete dynamic content.
Enlarge font
Text element
Increases the size of the selected text (adds
<span style="font-size:">
).
Reduce font
Text element
Reduces the size of the selected text (adds
<span style="font-size:">
).
Bold
Text element
Adds the bold style to the selected text (wraps the text with the
<strong>
</strong>
tags).
Italic
Text element
Adds the italic style to the selected text (wraps the text with the
<em>
</em>
tags).
Underline
Text element
Underlines the selected text (wraps the selected text with the
<span style="text-decoration: underline;">
tag).
Change background color
Text element
Allows you to change the background color of the block selected (adds style="background-color: rgba(170, 86, 255, 0.87)).
Change font color
Text element
Allows you to change the color of all the text in the block or just the text selected in the block (
<span style="color: #56ff56;">
).
Image
Block containing an image
Allows you to insert an image from a file saved locally.
Delete
Any block
Deletes the block and its content.
Duplicate
Any block
Duplicates the block including any styles linked to it.

Managing landing page structure and style

Managing blocks in the content editor

The different HTML content elements are displayed in the landing page as blocks, corresponding to the
<div>
</div>
tag. Select a block to interact with it. It will then be surrounded by a blue box.
If a block is selected, the parent objects of the corresponding HTML element will show in a breadcrumb located at the bottom of the editing zone.
When the mouse hovers over one of the breadcrumb elements, the element concerned is highlighted. You can therefore navigate easily between the different blocks and select exactly the HTML element you would like to modify.
Use the options from the palette and the contextual toolbar to modify, delete, or duplicate the block.
For the blocks containing text, click again in the block to enable text editing mode. The frame around the block turns green. You can then select or enter text. Use the options from the palette and the contextual toolbar to add a link or modify the text formatting.
The parameters defined for an element in a block (links, personalization fields, content blocks, etc.) can be modified at any time from the palette.

Adding a border and a background in the content editor

You can also define a
background color
by selecting a color from the chart. This color is applied to the selected block.
You can add a
border
to the selected block.

Changing the text style in the content editor

To change the style of the text, you have to click inside a text block.
To change the text alignment, select one of the following three icons in the palette on the left:
  • Align left
    : aligns the text to the left of the selected block (adds style="text-align: left;").
  • Center
    : centers the text in the block selected (adds style="text-align: center;").
  • Align right
    : aligns the text to the right of the selected block (adds style="text-align: right;").
You can also use the toolbar to change the font attributes: adapt the font size, make the text bold or italic, underline or change the color of the text. Refer to this section .

Inserting images in a landing page

  1. In a landing page content, select a block containing an image.
  2. Select the
    Insert
    button.
  3. Choose
    Local image
    from the contextual toolbar.
  4. Select a file.
  5. Adjust the image properties as needed.

Defining dynamic content in a landing page

To define dynamic content in a landing page, select a block using the breadcrumb or by directly clicking an element.
Certain blocks, such as images, cannot be directly selected. In this case, select the parent block using the breadcrumb. You can then modify all of the elements included in this parent element, including images. The condition will be applied to all child elements within the parent block.
The breadcrumb is presented in the Managing blocks section.
The next steps for defining dynamic content in a landing page are similar to the steps to follow for an email. See this section .
If a variant element is outlined in red, this means that an expression has not yet been defined.
You can navigate between the different dynamic contents of a block. To do this:
  1. Select the block.
    Arrows appear on the right- and left-hand sides of the image.
  2. Click the right arrow to browse through the available dynamic contents.
    The arrows on each side dim according to whether you have reached the last or first available dynamic contents.
  3. To delete all the conditions applied to a block, select that block and click the
    Disable dynamic content
    icon.
  4. Select the dynamic content that you would like to keep.
In the palette:
  • The contents which have an expression entered are no longer outlined in red, they are shown in gray.
  • The content that is currently selected appears in blue.

Confirm a landing page submission

When a landing page is submitted by a visitor, you can configure the actions triggered. To do this:
  1. Edit the landing page properties accessed via the icon in the landing page dashboard, and display the
    Job
    parameters.
  2. Under the
    Specific actions
    section, select
    Start sending message
    to determine the sending of an automatic message, for example to confirm subscription to a service. You need then to select an email delivery template.
    Note that if a confirmation message is already configured at the service level, you should not select one in this screen to avoid sending multiple confirmation messages. Refer to Configure a service .
  3. Create
    Additional data
    to enable storing additional data when the landing page is being submitted. This data is not visible to people who visit the page. Only constant values are taken into account.

Setting permissions and pre-loading data

Access to a landing page can be restricted to identified visitors, who come from a link in a message sent by Campaign for example, or to a specific organizational unit. In the case of identified visitors, you can preload their data in the landing page. To do this:
  1. Edit the landing page properties accessed via the icon in the landing page dashboard, and display the
    Access & loading
    parameters.
  2. Select
    Preload visitor data
    .
    If a visitor to the page corresponds to a profile in the database, their data is displayed in the form's fields that are mapped with the database data and the landing page's personalization elements are taken into account.
You can also:
  • Use the URL parameters to identify the visitors, using the
    Authorize visitor identification via URL parameters
    option: then you must choose the loading key and map the filter parameters with the parameters of the corresponding URL.
  • Authorize any visitor to access the landing page, using the
    Authorize unidentified visitors
    option.
Landing pages can also be linked to an organizational unit. This will define the users' access to the different landing pages. To assign an organizational unit:
  1. Access your landing page properties via the
    Edit properties
    icon.
  2. Unfold the
    Access authorization
    .
  3. Click the drop-down menu and select your organizational unit. For more information on how to create organization unit, refer to this page .
  4. The
    Created by
    ,
    Created
    ,
    Access authorization
    and
    Last modified
    fields are automatically completed.
  5. Click
    Confirm
    then
    Save
    .
Your landing page can now only be accessed and managed by users within the chosen organizational unit.

Setting Google reCAPTCHA

You can set up Google reCAPTCHA V3 with your landing page to protect it from spam and abuse caused by bots. To be able to use it with your landing page, you first need to create an external account. For more information on how to configure it, refer to this section .
Once your Google reCAPTCHA V3 external account has been set up, you can add it to your landing page:
  1. Before publishing your landing page, access the page properties accessed via the icon from you landing page dashboard.
  2. Unfold the
    Access & loading
    menu.
  3. Check the
    Use reCAPTCHA to protect your site from spam and abuse
    option.
  4. Select your previously created Google reCAPTCHA external account.
  5. Click
    Confirm
    .
Your landing page is now set up with Google reCAPTCHA which can be seen at the bottom of your page.
Google reCAPTCHA will then return a score based on users' interactions with your page. To check your score, connect to your Google admin console .