DocumentationJourney Optimizer B2BJourney Optimizer B2B Edition Documentation

[Beta]{class="badge informative" title="This feature is currently in a limited beta release"}

Landing page template design

Last update: Fri Aug 01 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User

After you create a landing page template, use the visual design space to author the structural and content components in your page template.

Add structure and content structure-content-landing-page

  1. To start your content design, drag an item from the Structures and drop it onto the canvas.

    Add as many items from Structures as you need and edit the settings for each in the pane on the right.

    note tip
    TIP
    Select the n:n column component to define the number of columns of your choice (between three and 10). You can also define the width of each column by moving the arrows below the column.

    Drag a structure onto the canvas and adjust the settings {width="800" modal="regular"}

    Each column size cannot be less than 10% of the total width of the structure component. Only empty columns can be removed.

  2. Expand the Contents section and add as many content components as you need into one or more structure components.

    Drag a content element onto the canvas and adjust the settings {width="800" modal="regular"}

  3. If needed, you can make additional customizations for each component in the Settings or Style tabs.

    For example, you can change the text style, padding, or margin of each component.

  4. To add conditional content and adapt the content to the targeted profiles based on conditional rules, select a content component and click the Enable conditional content icon in the component toolbar.

    For more information, see Conditional content.

Add custom CSS

You can add your own custom CSS directly within the landing page design space. Use custom CSS to apply advanced and specific styling, for greater flexibility and control over the appearance of your content. It is a best practice to add this highest-level styling before you include components such as images, buttons, and text.

With at least one content component in the canvas, select the Body component in the left navigation tree to access the custom CSS editor.

Access the body styles {width="800" modal="regular"}

  1. In the Styles tab that is displayed on the right, click Add custom CSS.

    note note
    NOTE
    The Add custom CSS button is available only when the Body component is selected. However, you can apply custom CSS styles to all the components within it.

    The Add custom CSS pop-up editor is displayed with placeholder code comments.

  2. Enter your CSS code in the editor.

    Make sure that the custom CSS is valid and follows the proper syntax. If the entered CSS is invalid, an error message is displayed and the CSS cannot be saved. To learn more, see CSS validity.

  3. Click Save to save the custom CSS.

    The custom style sheet is applied to the existing content. You can check that your custom CSS is applied according to your needs. For information about how to make changes and adjust the style sheet application, see Troubleshooting.

NOTE
If you remove all content, the CSS section no longer appears in the body styles panel and the previously defined custom CSS is no longer applied. If you add content back, the CSS styles section reappears and the custom CSS is applied again.

Add assets

In the visual content editor, select the Marketo Engage Assets ( Marketo Engage Assets icon ) icon or the Experience Manager Assets ( AEM Assets icon ) icon in the left navigation bar. From the asset selector, you can directly select assets stored in the source library.

NOTE
If you are provisioned with Adobe Experience Manager as a Cloud Services, you have access to the repositories for both Marketo Engage Design Studio and Adobe Experience Manager Assets as a Cloud Service when your user account has the required permissions. These repositories are separate and not in sync. You can use image assets from either source.

  • Add a new asset by dragging and dropping the image asset into a structure component.

    Drag a Marketo Engage asset onto the canvas and adjust the settings {width="800" modal="regular"}

  • Replace an existing image asset by selecting it on the canvas and click Select an asset in the image source tools.

    Select an asset from the source library {width="600" modal="regular"}

For more information about using assets from your source type, see Use assets for content authoring.

Add forms

A form is a reusable component that can be referenced by multiple landing pages and landing page templates across Adobe Journey Optimizer B2B Edition. It is a block of fields and a submit button that can be pre-created and quickly inserted to make page design quicker and more consistent.

The following example outlines steps to add a form as you design your page.

  1. Under the Contents section, drag the Form item and drop it into a structural component on the page design space.

    Drag a Form component into the visual design space {width="600"}

    note tip
    TIP
    To add the form so that it occupies the entire horizontal layout within the email, add a 1:1 column structure and then drag and drop the form into it.

  2. Click the Form icon in component toolbar, or use the Embed Form properties on the right to select the published form.

    Select the published form {width="600"}

  3. If you want to override the default Follow up type for the form, change the setting according to the requirements for your page or template.

    This is also know as the Thank you page for the form and this setting determines what happens when a visitor submits the form:

    • Stay on page - Choose this option to keep the visitor on the same page when the form is submitted.

    • Landing page - Choose this option to select any Journey Optimizer B2B Edition or Marketo Engage landing page as the follow-up.

    • External URL - Choose this option to specify any URL as the follow-up page. After the visitor submits the form, the browser loads the designated URL.

      note tip
      TIP
      If you want the use the form for downloading a file, you can specify a URL for the hosted file. With this configuration, the submit botton functions as a download button.

    Change the follow-up setting {width="280"}

  4. If you want to limit the form display by device type, change the Display Options setting:

    • Show only on desktop devices
    • Show only on mobile devices
    • Show on all devices (default)

  5. If needed, select the Styles tab in the right panel to set the form margins within the page.

As you work with the content in the visual design space, you can access the components, columns, and content elements using the navigation tree. Click the Navigation tree icon ( Navigation tree icon ) on the left to display the tree.

Access the content layers {width="800" modal="regular"}

The following example outlines steps to adjust padding and vertical alignment inside a structure component with columns.

  1. Select the column in the structure component directly in the canvas or using the Navigation tree displayed at the left.

  2. From the column toolbar, click the Select a column tool and choose the one that you want to edit.

    You can also select it from the structure tree. The editable parameters for that column are displayed in the Settings and Styles tabs on the right.

    Column components displayed in the visual designer {width="800" modal="regular"}

  3. To edit the column properties, click the Styles tab on the right and change them according to your needs:

    • For Background, change the background color as needed.

      Clear the check box for a transparent background. Enable the Background image setting to use an image as the background instead of a solid color.

    • For Alignment, select the Top, Middle, or Bottom icon.

    • For Padding, define the padding for all sides.

      Select Different padding for each side if you want to fine tune the padding. Click the Lock icon to break synchronization.

    • Exapnd the Advanced section to define inline styles for the column.

    Change the styles for the selected column {width="700" modal="regular"}

  4. If needed, repeat these steps to adjust the alignment and padding for the other columns in the component.

  5. Save your changes.

Personalize content

Journey Optimizer B2B Edition uses an inline simple syntax that allows you to create expressions with personalized content enclosed by double curly braces {}. You can add multiple expressions in the same content or field without restrictions.

Examples:

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

When processing the content, Journey Optimizer B2B Edition replaces the expression with the data contained in the Experience Platform database. So, the first example becomes Hello John Doe.

The following example outlines steps to personalize content using lead/account attributes and system tokens.

  1. Select the text component and click the Add personalization icon in the toolbar.

    Click the Personalize icon {width="600"}

    This action opens the Edit Personalization dialog.

  2. Click + or … to add a token to the blank space.

    Construct personalized text using tokens {width="700" modal="regular"}

  3. Click Save.

Edit linked URL tracking

  1. Click the Links icon ( Show links icon ) on the left to display all the linked URLs in your content to be tracked.

  2. If needed, click the Edit ( Edit icon ) icon and modify the Tracking Type or Label.

    You can also add Tags for a link.

Click the Edit icon to access link tracking {width="500"}

Save your work

Click Save at any time to save the landing page template.

View options

Leverage the view and content validation options that are available in the visual design space.

  • Zoom in/out on the content across preset zoom options.

  • Switch viewing the content across Desktop, Mobile, or Text-only/Plain-text.

    • Click the View icon for content preview across devices.
    • Select one of the out-of-the-box devices or enter custom dimensions to preview the content.

More options

From the More … menu at the top of the visual design space, you can take the following actions:

Click More to access template actions {width="500"}

  • Reset landing page - Click this option to clear the visual design canvas to a blank slate and restart building your page content.
  • Change your design - Return to the Create your primary landing page home page. From there, you can choose another template to restart the design process, or choose to design the page from scratch in a blank canvas.
  • Export HTML - Download the content in the visual canvas to your local system in HTML format packaged as a zip file.
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0