• Marketo Engage Assets - Choose this type to browse and select an image asset from the Journey Optimizer B2B Edition library or from the connected Market Engage instance.

    Browse the available image assets {width="700" modal="regular"}

    From the dialog, you can choose an image from the selected repository and workspace. Click Select to add the asset.

    There are tools available to help you locate the asset that you need:

    • Click the Filter icon on the top left to filter the displayed items according to your criteria.

    • Enter text in the Search field to filter the displayed items for a match of the asset name.

      Use the filters and search field to find the asset that you need {width="700" modal="regular"}

  • Experience Manager Assets - Choose this type to browse and select an image asset from a configured Experience Manage Assets repository.

    From the Select Assets dialog, choose an image using the available tools to locate the asset that you need and click Select.:

    • Change the Repository at the top right.

    • Click Manage assets at the top right to open the Assets repository in another browser tab and use AEM Assets management tools.

    • Click the View type selector at the top right to change the display to List View, Grid View, Gallery View, or Waterfall View.

    • Click the Sort order icon to change the sort order between ascending and descending.

      Use tools in the Select Assets dialog to find and select an image asset {width="700" modal="regular"}

    • Click the Sort by menu arrow to change the sort criteria to Name, Size, or Modified.

    • Click the Filter icon on the top left to filter the displayed items according to your criteria.

    • Enter text in the Search field to filter the displayed items for a match of the asset name.

    Use the filters and search field to locate the asset {width="700" modal="regular"}

  • Import media - Choose this type to select a file from your system and import it into the Journey Optimizer B2B Edition asset library.

    In the Upload image dialog, drag and drop a file from your system to the file box. The maximum file size is 100 MB.

    Import an image file to the {width="450"}

    The file names of the selected images are displayed in the dialog. Asset file names must be unique (across folders), and if a file with the name already exists, a message is displayed. Names can have a maximum of 100 characters, and cannot contain special characters (such as ;, :, \, and |).

    Click Import.

You can add an image title and alt text for the image in the right panel.

Image settings {width="250"}

On the Settings tab, use the Link options to link the image with a destination and the browser behavior for loading the target page.

  1. Set the Type for the link:

    • External link - Choose this type to use a standard URL as the link destination.

      In Url, enter the URL for the link destination. Click the Personalize icon ( Personalize icon ) to use a personalization token as a parameter in the URL.

      Define an external link for a button component {width="250"}

    • Landing page - Choose this type to select a published landing page in the connected Marketo Engage instance.

      For the Landing Page option, select the published landing page. Click the Select page icon ( Show links icon ) and select the published landing page.

      Define a link to a landing page for a button component {width="250"}

  2. For Label, enter the text that you want to display inside the button.

    The button sizing adjusts according to the text and the styling that set.

  3. For Target, choose how the linked destination is redirected from the email or page:

    • None - Opens the link using the default browser or client behavior (default).
    • Blank - Opens the link in a new window or tab.
    • Self - Opens the link in the same frame.
    • Parent - Opens the link in the parent frame.
    • Top - Opens the link in the full body of the window.

Set the styles

Set the styles for the image component in the right panel.

Background

With the Styles tab selected in the right panel, use the Background section to define the background color for the component.

Select the checkbox and click the color square to choose a color from the picker. You can choose a color by entering a known RGB, HSL, HSB, or hexadecimal value. Or, you can use the color slider and the color field to select the color.

Background color picker {width="300"}

Border

  1. On the right panel with the Styles tab selected, expand the Border section and set the options to display a border for the component:

  2. Move the toggle to the right to enable the border display options and set them according to your design criteria:

    • To set the Border color, select the checkbox and click the color square to choose a color from the picker. You can choose a color by entering a known RGB, HSL, HSB, or hexadecimal value. Or, you can use the color slider and the color field to select the color.

    Border color picker {width="300"}

    • To set the Border size (line width), click the up and down arrow icons to increase or decrease the number of pixels.

    • To set the Border style, choose a value from the list of standard CSS border-style values.

    • To determine where the border is displayed, select each Border position checkbox.

    Border styles {width="250"}

  3. For the Border radius, set the numerical value according to the curve you want for the corners.

    A value of 0 (default) produces a squared corner.

Size

On the right panel with the Styles tab selected, expand the Size section and set the options for the component height and width:

  • Height - Click the up and down arrow icons to increase or decrease the number of pixels. An empty value (Auto) is the default and sizes the height of the element according to its contents.

  • Width - Use the toggle to set the width by pixels or percentage.

    • For a percentage width, use the slider to set the percentage value. The percentage determines the element size based on the content box of the containing block, which excludes padding and borders. For example, a value of 50 sets the element width to 50% of its containing block content width.

      Width style using percentage {width="250"}

    • For a pixel-based width, click the up and down arrow icons to increase or decrease the number of pixels. An empty value (Auto) is the default and sizes the width of the element according to its contents.

      Width style using pixels {width="250"}

Alignment

Expand the Alignment section and choose the horizontal alignment that you want to use: left, center, or right. This style translates to a standard text-align CSS style and affects how the component is positioned within the containing component.

Horizontal alignment styles {width="250"}

Margin

On the right panel with the Styles tab selected, expand the Margin section and set the options for margin spacing within the structural component. This style replicates the CSS margin parameter, which controls to the space outside a component border, separating it from other components. It creates a gap around the component to influence its positioning and the layout of surrounding content.

Set the margin values in pixels according to your design needs. You can set the margin for all sides, the top-botton, the left-right, or each side of the component independently:

  • All sides - To set one value to apply to all sides, clear the Different margin for each side checkbox. Click the up and down arrow icons to increase or decrease the number of pixels.

    Set margin for all sides {width="250"}

  • Top-bottom - To set the top and bottom margins to the same value, set the Locked icon between the top and bottom settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

  • Left-right - To set the left and right margins to the same value, set the Locked icon between the left and right settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

    Lock margins for top-bottom and left-right margin {width="250"}

  • Independent - To set each margin to an independent value, set the Unlocked icon between the top and bottom settings and between the left and right. For each setting, click the up and down arrow icons for either to increase or decrease the number of pixels.

    Set independent margins {width="250"}

Padding

On the right panel with the Styles tab selected, expand the Padding section and set the options for padding within the structural component. This style replicates the CSS padding parameter, which is the space between the content of a component and its border. The padding provides internal spacing that you can use to control the distance between the content and the border of the component.

Set the padding values in pixels according to your design needs. You can set the padding for all sides, the top-botton, the left-right, or each side of the component independently:

  • All sides - To set one value to apply to all sides, clear the Different padding for each side checkbox. Click the up and down arrow icons to increase or decrease the number of pixels.

    Set padding for all sides {width="250"}

  • Top-bottom - To set the top and bottom padding to the same value, set the Locked icon between the top and bottom settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

  • Left-right - To set the left and right padding to the same value, set the Locked icon between the left and right settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

    Lock padding for top-bottom and left-right margin {width="250"}

  • Independent - To set padding for each side to an independent value, set the Unlocked icon between the top and bottom settings and between the left and right. For each setting, click the up and down arrow icons for either to increase or decrease the number of pixels.

    Set independent padding {width="250"}

Advanced

To apply additional CSS-compliant attributes with values, use the Advanced style settings. You can change the values of the existing attributes, or add new ones. The styling is applied to the component using the CSS inheritance model for parent-child components (elements).

The displayed attributes reflect the styles that are currently defined for the component. You can change the values according to CSS definitions. Click the Add (+) icon to add a new style attribute for the component.

Advanced styles {width="250"}

Social

Use the Social component to insert links to social media pages into your content. It includes three default social media types, but you can add or remove the types according to your needs.

New social component with default types {width="600" modal="regular"}

  • To add a social media type, click the Add ( + ) icon and choose a social media type that you want to add.

    Click + to add social media type {width="250"}

  • To remove a social media type, click the X next to the social media icon.

With a social media type selected, set the options for that type:

  • URL - Enter the social media URL that you want to link to the social media graphic or icon.

  • Source - If you want to use your own image instead of the default, choose and image asset. You can select an image from the connected Marketo Engage asset repository, an Experience Manager Assets repository (if configured), or import an image file from your system. Refer to the Image component information for details about selecting and importing image assets.

  • Alt text - Enter the alt text for the displayed image.

    Settings for the selected social media type {width="250"}

To define a consistent display size for all social media graphics, set the Size of images.

You can set the following style options for the Social component:

Background

With the Styles tab selected in the right panel, use the Background section to define the background color for the component.

Select the checkbox and click the color square to choose a color from the picker. You can choose a color by entering a known RGB, HSL, HSB, or hexadecimal value. Or, you can use the color slider and the color field to select the color.

Background color picker {width="300"}

Border

  1. On the right panel with the Styles tab selected, expand the Border section and set the options to display a border for the component:

  2. Move the toggle to the right to enable the border display options and set them according to your design criteria:

    • To set the Border color, select the checkbox and click the color square to choose a color from the picker. You can choose a color by entering a known RGB, HSL, HSB, or hexadecimal value. Or, you can use the color slider and the color field to select the color.

    Border color picker {width="300"}

    • To set the Border size (line width), click the up and down arrow icons to increase or decrease the number of pixels.

    • To set the Border style, choose a value from the list of standard CSS border-style values.

    • To determine where the border is displayed, select each Border position checkbox.

    Border styles {width="250"}

  3. For the Border radius, set the numerical value according to the curve you want for the corners.

    A value of 0 (default) produces a squared corner.

Size

On the right panel with the Styles tab selected, expand the Size section and set the options for the component height and width:

  • Height - Click the up and down arrow icons to increase or decrease the number of pixels. An empty value (Auto) is the default and sizes the height of the element according to its contents.

  • Width - Use the toggle to set the width by pixels or percentage.

    • For a percentage width, use the slider to set the percentage value. The percentage determines the element size based on the content box of the containing block, which excludes padding and borders. For example, a value of 50 sets the element width to 50% of its containing block content width.

      Width style using percentage {width="250"}

    • For a pixel-based width, click the up and down arrow icons to increase or decrease the number of pixels. An empty value (Auto) is the default and sizes the width of the element according to its contents.

      Width style using pixels {width="250"}

Alignment

Expand the Alignment section and choose the horizontal alignment that you want to use: left, center, or right. This style translates to a standard text-align CSS style and affects how the component is positioned within the containing component.

Horizontal alignment styles {width="250"}

Margin

On the right panel with the Styles tab selected, expand the Margin section and set the options for margin spacing within the structural component. This style replicates the CSS margin parameter, which controls to the space outside a component border, separating it from other components. It creates a gap around the component to influence its positioning and the layout of surrounding content.

Set the margin values in pixels according to your design needs. You can set the margin for all sides, the top-botton, the left-right, or each side of the component independently:

  • All sides - To set one value to apply to all sides, clear the Different margin for each side checkbox. Click the up and down arrow icons to increase or decrease the number of pixels.

    Set margin for all sides {width="250"}

  • Top-bottom - To set the top and bottom margins to the same value, set the Locked icon between the top and bottom settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

  • Left-right - To set the left and right margins to the same value, set the Locked icon between the left and right settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

    Lock margins for top-bottom and left-right margin {width="250"}

  • Independent - To set each margin to an independent value, set the Unlocked icon between the top and bottom settings and between the left and right. For each setting, click the up and down arrow icons for either to increase or decrease the number of pixels.

    Set independent margins {width="250"}

Padding

On the right panel with the Styles tab selected, expand the Padding section and set the options for padding within the structural component. This style replicates the CSS padding parameter, which is the space between the content of a component and its border. The padding provides internal spacing that you can use to control the distance between the content and the border of the component.

Set the padding values in pixels according to your design needs. You can set the padding for all sides, the top-botton, the left-right, or each side of the component independently:

  • All sides - To set one value to apply to all sides, clear the Different padding for each side checkbox. Click the up and down arrow icons to increase or decrease the number of pixels.

    Set padding for all sides {width="250"}

  • Top-bottom - To set the top and bottom padding to the same value, set the Locked icon between the top and bottom settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

  • Left-right - To set the left and right padding to the same value, set the Locked icon between the left and right settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

    Lock padding for top-bottom and left-right margin {width="250"}

  • Independent - To set padding for each side to an independent value, set the Unlocked icon between the top and bottom settings and between the left and right. For each setting, click the up and down arrow icons for either to increase or decrease the number of pixels.

    Set independent padding {width="250"}

Advanced

To apply additional CSS-compliant attributes with values, use the Advanced style settings. You can change the values of the existing attributes, or add new ones. The styling is applied to the component using the CSS inheritance model for parent-child components (elements).

The displayed attributes reflect the styles that are currently defined for the component. You can change the values according to CSS definitions. Click the Add (+) icon to add a new style attribute for the component.

Advanced styles {width="250"}

Form (landing pages)

[Beta]{class="badge informative" title="Beta feature"}

Use the Form component to add a published form to a landing page or landing page template. For more information about creating and publishing forms, see Forms.

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

    Select the published form {width="600"}

  2. 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 page is also known 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 button functions as a download button.

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

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

On the right panel with the Styles tab selected, expand the Margin section and set the options for margin spacing within the structural component. This style replicates the CSS margin parameter, which controls to the space outside a component border, separating it from other components. It creates a gap around the component to influence its positioning and the layout of surrounding content.

Set the margin values in pixels according to your design needs. You can set the margin for all sides, the top-botton, the left-right, or each side of the component independently:

  • All sides - To set one value to apply to all sides, clear the Different margin for each side checkbox. Click the up and down arrow icons to increase or decrease the number of pixels.

    Set margin for all sides {width="250"}

  • Top-bottom - To set the top and bottom margins to the same value, set the Locked icon between the top and bottom settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

  • Left-right - To set the left and right margins to the same value, set the Locked icon between the left and right settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

    Lock margins for top-bottom and left-right margin {width="250"}

  • Independent - To set each margin to an independent value, set the Unlocked icon between the top and bottom settings and between the left and right. For each setting, click the up and down arrow icons for either to increase or decrease the number of pixels.

    Set independent margins {width="250"}

recommendation-more-help