Landing page builder

Title block¶

With the Title block, you can define the sections of your landing page while improving accessibility. Screen readers and other accessibility tools can identify the sections with H1, H2, and H3 headings.

The toolbar in the content area on the left contains the following options when the Title block is selected:

• Bold
• Italic
• Underline
  • If you want the underline to have the same color as the title, apply the underline before changing the color.
  • If you want the underline to have a different color than the title, first set the color of the title as the color that you want the underline to have, apply the underline, and then change the color of the title.
• Strikethrough

• Text color

  Use the default color palette or click Custom to use the color picker, an RGB code, or a hex code.

• Background color

  Use the default color palette or click Custom to use the color picker, an RGB code, or a hex code.

• Superscript
• Subscript
• Special Character
• Non-breaking space
• Remove text formatting
• Insert or edit a link
  • Link Type:
    • URL: Opens a web page.

    • E-MAIL: Sends a message to the specified address.

      When selected, the system displays additional fields to add a subject and message.

    • File Manager: Links to an asset in the file manager.
    • Tel: Makes a call to the specified phone number.

    • SMS: Sends a text message to the specified phone number.

      The builder displays additional fields based on the link type selected.

  • Url: The address of the URL.
  • Email: The email address.
  • Number: The telephone number.
  • Underline link: To underline the text for the link, select this checkbox.
  • Text to display: The text that the system displays for the link in the email.
  • Title: The text that the system displays when the recipient hovers over the link.
  • Target: Option to open the link in a new browser tab or in the current tab.
• Remove link
• Merge tags: Use this option to select the field you want to use as a token.

The Content Properties area on the right has the following parameters:

• Title: Select the heading level for the title. The options are H1, H2, and H3.
• Font family: Select the font family for the title text. If you select Global font, the system applies the font selected for Default font in the Settings section.

• Font weight: Regular or Bold. This option is available for all default fonts. Web fonts may have more styles available. You can also use multiple font weights with your own custom fonts.

  If you are using custom fonts, create a stylesheet that includes a bold version of your font.

• Font size: Select the size of the title text.
• Text color: Select the text color for the content in the title block. You can select your preferred color from the color picker or specify a hex code. To change the color of a portion of the text in the block, use the formatting toolbar.
• Link color: Select the color for any links added in the title block. You can select your preferred color from the color picker or specify a hex code. To change the color of a specific link in the block, use the formatting toolbar.
• Align: Select the alignment of the title from the available options.
• Line height: Select the spacing between lines within the text block. The available options are 1.2, 1.5, 1.8, 2.0. These options are not adjustable.
• Letter spacing: Specify the space that you want to apply between individual letters in the title block.
• Text direction: Select the direction in which the title text must display.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.

Paragraph block¶

The Paragraph block functions like the legacy text content block but with additional features and is used to insert textual content in your landing pages. Campaign Studio’s text editor toolbar allows you to modify various properties of the textual content.

The toolbar in the content area on the left contains the following options when the Paragraph block is selected:

• Bold
• Italic
• Underline
  • If you want the underline to have the same color as the text, apply the underline before changing the color.
  • If you want the underline to have a different color than the text, first set the color of the text as the color that you want the underline to have, apply the underline, and then change the color of the text.
• Strikethrough

• Text color

  Use the default color palette or click Custom to use the color picker, an RGB code, or a hex code.

• Background color

  Use the default color palette or click Custom to use the color picker, an RGB code, or a hex code.

• Superscript
• Subscript
• Special Character
• Non-breaking space
• Expand or minimize the toolbar
• Remove text formatting
• Insert or edit a link
  • Link Type:
    • URL: Opens a web page.

    • E-MAIL: Sends a message to the specified address.

      When selected, the system displays additional fields to add a subject and message.

    • File Manager: Links to an asset in the file manager.
    • Tel: Makes a call to the specified phone number.
    • SMS: Sends a text message to the specified phone number.
  • Url/Email/Number: The address of the URL, email, or telephone number.
  • Underline link: To underline the text for the link, select this checkbox.
  • Text to display: The text that should appear as a link in the email.
  • Title: Text that appears when the recipient hovers over the link.
  • Target: Open the link in a new browser tab or the current tab.
• Remove link
• Merge tags: Use this option to select the field you want to use as a token.

The Content Properties area on the right has the following parameters:

• Font family: Select the font family for the text. If you select Global font, the system applies the font selected for Default font in the Settings section.

• Font weight: Regular or Bold. This option is available for all default fonts. Web fonts may have more styles available. You can also use multiple font weights with your own custom fonts.

  If you are using custom fonts, create a stylesheet that includes a bold version of your font.

• Font size: Select the size of the text.
• Text color: Select the text color for the content in the block. You can select your preferred color from the color picker or specify a hex code. To change the color of a portion of the text in the block, use the formatting toolbar.
• Link color: Select the color for any links added in the title block. You can select your preferred color from the color picker or specify a hex code. To change the color of a specific link in the block, use the formatting toolbar.
• Align: Select the alignment of the title from the available options.
• Line height: Select the spacing between lines within the text block. The available options are 1.2, 1.5, 1.8, 2.0. These options are not adjustable.
• Letter spacing: Specify the space that you want to apply between individual letters in the title block.
• Text direction: Select the direction in which the text must display.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.

List block¶

With the List block, you can create list types such as ordered or unordered lists and select from styling options.

The toolbar in the content area on the left contains the following options when the List block is selected:

• Bold
• Italic
• Underline
  • If you want the underline to have the same color as the text, apply the underline before changing the color.
  • If you want the underline to have a different color than the text, first set the color of the text as the color that you want the underline to have, apply the underline, and then change the color of the text.
• Strikethrough

• Text color

  Use the default color palette or click Custom to use the color picker, an RGB code, or a hex code.

• Background color

  Use the default color palette or click Custom to use the color picker, an RGB code, or a hex code.

• Superscript
• Subscript
• Special Character
• Non-breaking space
• Expand or minimize the toolbar
• Remove text formatting
• Left align
• Right align
• Insert or edit a link
  • Link Type:
    • URL: Opens a web page.

    • E-MAIL: Sends a message to the specified address.

      When selected, the system displays additional fields to add a subject and message.

    • File Manager: Links to an asset in the file manager.
    • Tel: Makes a call to the specified phone number.
    • SMS: Sends a text message to the specified phone number.
  • Url/Email/Number: The address of the URL, email, or telephone number.
  • Underline link: To underline the text for the link, select this checkbox.
  • Text to display: The text that should appear as a link in the email.
  • Title: Text that appears when the recipient hovers over the link.
  • Target: Open the link in a new browser tab or the current tab.
• Remove link
• Merge tags: Use this option to select the field you want to use as a token.

The Content Properties area on the right has the following parameters:

• List type: Ordered or unordered list
• List style type: Format styling options.
• Start list style from: Start an ordered number list from a specified number.
• Font family: Select the font family for the text. If you select Global font, the system applies the font selected for Default font in the Settings section.

• Font weight: Regular or Bold. This option is available for all default fonts. Web fonts may have more styles available. You can also use multiple font weights with your own custom fonts.

  If you are using custom fonts, create a stylesheet that includes a bold version of your font.

• Font size: Select the size of the text.
• Text color: Select the text color for the content in the block. You can select your preferred color from the color picker or specify a hex code. To change the color of a portion of the text in the block, use the formatting toolbar.
• Link color: Select the color for any links added in the block. You can select your preferred color from the color picker or specify a hex code. To change the color of a specific link in the block, use the formatting toolbar.
• Align: Select the alignment of the text from the available options.
• List items spacing: Select the vertical spacing between lines.
• List items indent: Select the indent on list subitems.
• Line height: Select the spacing between lines within the text block. The available options are 1.2, 1.5, 1.8, 2.0. These options are not adjustable.
• Letter spacing: Specify the space that you want to apply between individual letters in the title block.
• Text direction: Select the direction in which the text must display.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.

Image block¶

Use the Image content block to display images on landing pages. For the image block, the general section within Content Properties has the following parameters:

• Auto width: To adjust the image width automatically based on screen size or use the original image width, enable this toggle bar. Alternatively, disable the toggle bar and select a percentage of the column width to occupy with the image.
• Full width on mobile: To ensure that the image occupies the entire width in a mobile device, enable this toggle bar. This option is available only when you disable the Auto width toggle bar.
• Align: Select the alignment of the button from the available displayed options.

• Dynamic image: To set a dynamic image, enable this toggle bar and set the value for Dynamic Url. For more information, see dynamic images.

  Important

  When using dynamic images, you must replace the personalized values or merge tags with the tokens in Campaign Studio’s format. For example, if the landing page builder documentation mentions {{firstname}}, you must replace that with {contactfield=firstname} to add a first name value on the image.

• Change image: To upload a new image, click this option to select the new image from the file manager. Alternatively, specify the location where the image is located in Url.

  Important

  In the Safari browser, you won’t be able to select images from the file manager due to browser restrictions. To avoid this issue, you can paste the image URL in Url or drag and drop the image file directly in the Image content block. However, if you want to use the file manager, use a browser other than Safari.

• Apply effects & more: This option appears once you have added an image, Click this opens to open a photo editor with options for:
  • Filter: Apply one or more filters from the available options: Grayscale, Black & White, Sharpen, Invert, Vintage, Polaroid, Kodachrome, Technicolor, Brownie, Sepia, Remove Color, Brightness, Gamma, Noise, Pixelate, Blur, Emboss, and Blend.
  • Resize: Resize the width and height with options to maintain aspect ratio and use percentages rather than pixels.
  • Crop: Crop the image by specifying width, height, predefined aspect ratios, or using a manual selector.
  • Transform: Rotate the image clockwise or counterclockwise, flip vertically or horizontally.
  • Draw: Use a brush to draw on the image.
  • Text: Overlay text on top of the image.
  • Shapes: Overlay shapes on top of the image.
  • Stickers: Overlay stickers on top of the image.
  • Frame: Add one of the nine predefined frames around the edges of the image.
  • Corners: Round the edges of the image.

• Alternate text: Specify an alternate text for the image. This text appears if the recipient can’t view the image for whatever reason. Examples may include the image not rendering, there is an error from the source, or if they are using a screen reader.

  Note

  Don’t forget to include a value for alternate text to improve accessibility and deliverability.

The Action section has the following parameters:

• Image link: Select the behavior of the button from the available options:

  • Open web page
  • Send email
  • Make call
  • Send SMS
  • Internal link

  Based on the selected Image Link, the system displays additional options.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Button block¶

Use the Button block to display actionable buttons on the landing pages. Once the recipient clicks the button, the system redirects the user to the link that you have configured.

Campaign Studio provides a text editor to update the textual content of the button. The behavior of this text editor is similar to that of the Text block. For more information, see Text block.

The toolbar in the content area on the left contains the following options when the Button block is selected:

• Bold
• Italic
• Underline
• Strikethrough
• Superscript
• Subscript
• Special Character
• Non-breaking space
• Remove text formatting
• Merge tags: Use this option to select the field you want to use as a token.

The Action section has the following parameters:

• Link type: Select the behavior of the button from the available options:

  • Open web page
  • Send email
  • Make call
  • Send SMS
  • Internal link

  Based on the selected Link type, the system displays additional options.

  Note

  To link to an asset stored in Campaign Studio, set Link type to Open web page and specify the URL to include {assetlink=ID#}. You must replace ID# with the ID number of the asset. If you use the Link file option, the system pulls files from the file manager and not trackable assets in Campaign Studio.

The Button Options section has the following parameters:

• Auto width: To enable the button to adjust its width automatically based on the internal padding of the button and the length of the text on the button, enable this toggle bar. Alternatively, disable the toggle bar and select the percentage of the column width that you want the button to occupy (in increments of 5%).
• Background color: Select the background color for the button. You can either select a color of your choice from the color picker or specify a hex code.
• Text color: Select the text color for the content. You can either select a color of your choice from the color picker or specify a hex code.
• Align: Select the alignment of the button from the available displayed options. This option doesn’t set the alignment of the text within the button.
• Line height: Select the height of the line from the available options: 1.2, 1.5, 1.8, 2.0. These options are not adjustable.
• Letter spacing: Specify the space that you want to apply between individual letters in the content of the button block.
• Border radius: Select the radius for the border of the button. Use this option to define how rounded the corners of the button should be. A higher number means a rounder edge.

• Content padding: To set identical space between the text and the edge(s) of the button for all sides of the button, disable the More options toggle bar and set the padding value for all sides.

  Alternatively, to set custom padding for all four sides, enable the More options toggle bar and set unique padding values for the different sides.

• Border: To set identical borders for all sides of the button, disable the More options toggle bar, select the border type, and set the border width for all sides. Use this option to add a solid, dotted, or dashed line at the edge(s) of the column, with a selected weight and color.

  Alternatively, to set custom borders for all four sides, enable the More options toggle bar, select the border type, and set the border width for all sides.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Divider block¶

Use the Divider content block to separate various rows clearly. Using this block, you can add spacing above or below content within a row or column, or separate blocks clearly with a line. For the divider block, the general section within Content Properties has the following parameters:

• Transparent: To configure the divider to be transparent, enable this toggle bar.
• Height: Specify the height for the divider. This option is available only if the Transparent toggle bar is enabled.
• Line: Specify the type of line (solid, dotted, dashed) as well as the color of the divider. This option is available only if the Transparent toggle bar is disabled.
• Width: Specify the width of the divider. This option is available only if the Transparent toggle bar is disabled.
• Align: Select the alignment of the divider from the available displayed options. This option is available only if the Transparent toggle bar is disabled.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Social block¶

Use the Social content block to include social share, social follow, and other link icons in your platform. The available options are:

• Social follow:

  Facebook	Twitter	Instagram
  LinkedIn	YouTube	Pinterest
  Vkontakte	Odnoklassniki	Blogger
  Medium	Tumblr	SoundCloud
  Spotify	Vimeo	SinaWeibo
  Glassdoor	Snapchat	Telegram
  Wechat

• Social share:

  Facebook	Twitter	LinkedIn
  Vkontakte	Odnoklassniki	qZone
  SinaWeibo

• Other:
  • Website link
  • Email

For the social block, the general section within Content Properties has the following parameters:

• Select icon collection: Select the style of the social icons you want to use in your landing page. If your desired icon style doesn’t exist, you may select any collection and use custom icons. Alternatively, you can use the Icons block type. For more information, see Icons block.

• Configure icon collection: Customize the social icons that you want to display. Campaign Studio displays a standard set of icons, such as Facebook, Twitter, Instagram, and LinkedIn. To add a link to another platform, choose Add new icon. To further customize each icon, enable the More options toggle bar and update the name of an icon, set alternate text, and add the link to the relative page for your brand.

  You can also delete any icon or change the order of the icons by grabbing the stacked lines with your mouse and dragging into the desired order.

  To create a custom social platform icon, click Add a custom icon and define the following additional parameters:

  • Change image: To upload a new image for the icon, click this option and select the new image from the file manager.
  • Apply effects & more: To update the icon, click this option. You can apply various special effects on the icon.
• Align: Select the alignment of the social icons from the available displayed options.
• Icon spacing: Select the spacing for the social icons. Available options are 0, 5, 10, 15, and 20.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

HTML block¶

Use the HTML content block to add your own custom HTML to a landing page. For the HTML block, the Content Properties section has a text area where you can specify your entire HTML code. You can use this content block to add live content from different sources (for example, dynamic ads, personalized maps).

Once you start using the HTML editor, it will automatically correct any issue that might arise due to incorrect tags or HTML tags that are not closed.

The allowed tags are:

a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

The allowed attributes list:

• general attributes: style, id, class, data-*, title
• a: href, name, target
• img: align, alt, border height, hspace, src, vspace, width, usemap
• table: align, bgcolor, border, cellpadding, cellspacing, width
• tbody: align, valign
• td: align, bgcolor, colspan, height, rowspan, valign, width
• tr: align, bgcolor, valign
• tfoot: align, valign
• th: align, bicolor, colspan, height, rowspan, valign, width
• thead: align, valign
• li: type
• map: name
• area: alt, coords, href, shape, target

You can use the HTML block type to add preheader text at the beginning of the landing page. Such text appears in the preview for a message in a recipient’s inbox, but is not displayed in the body of the landing page.

Add an HTML block at the very top of the message in the landing page builder and copy and paste the following code into the code editor:

<!-- Visually Hidden Preheader Text : BEGIN -->
                                                                                    div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: 'Raleway',sans-serif;">This is preheader text</div>
                                                                                    <!-- Visually Hidden Preheader Text : END -->
                                                                                    

The Block Options section has the following parameter:

• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Video block¶

Use the Video content block to display videos in landing pages.

For the video block, the general section within Content Properties has the following parameters:

• Video url: To share video content easily through your landing page, click the Add a video url option on the staging area, select the type of video, and specify the link for your Youtube or Vimeo video in Video url. The available video types are Thumbnail, Embedded, and Hosted video.

  Note

  The video block type only supports YouTube and Vimeo videos. To link to a video from another service, insert an image with a link to the video.

  • If the selected video type is Thumbnail:
    • Play icon type: Select the type in which the play icon should be displayed. The available options are:
      • Round solid
      • Round outline
      • Rectangle
      • Rectangle outline
      • Square
      • Square outline
      • Arrow only
    • Play icon color: Select whether the play icon should be light or dark.
    • Play icon size: Select a size for the icon. Some of the available options are 50px, 55px, 60px.
  • If the selected video type is Embedded or Hosted video:
    • Controls: To ensure that the video controls are available to your user, select this option.
    • Loop: To ensure that the video plays in a loop, select this toggle bar.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Icons block¶

Use the Icons content block to create icons on your landing page. The icon block offers more flexibility than some other block types, as it is not restricted by row structures. For example, visual bullet lists, ratings, properties, logo galleries, etc.

For this block, the general section within Content Properties has the following parameters:

• Configure icon collection: To add an icon and define the properties for the icon, click Add new icon. If you do so, the following additional properties are displayed:
  • Change image: To upload a new image for the icon, click this option and select the new image from the file manager.
  • Apply effects & more: To update the icon, click this option. You can apply various special effects on the icon.
  • If you add multiple icons and you need to change the order of the icons, use the drag option.
  • To remove unwanted icons, click Delete for the corresponding icon.
  • To further customize the icon behavior, enable the More options check box and specify the following attributes:
    • Image Url: Specify the URL where the icon is located.

    • Alternate text: Specify the alternate text for the icon.

      Note

      Don’t forget to include a value for alternate text to improve accessibility and deliverability.

    • Icon text: Specify the text to accompany the icon, if desired. Once you’ve entered text, you’ll see options to place the text at the top, right, bottom, or left of the icon.

    • Link type: Select the behavior of the link from the available options:

      • Open web page
      • Send email
      • Make call
      • Send SMS
      • Internal link

      Based on the selected Link type, the system displays additional options.

• Font family: Select the font family for the text of the icon. If you select Global font, the system applies the font selected for Default font in the Settings section.
• Font size: Select the size of the icon text.
• Text color: Select the color for the icon text. You can either select a color of your choice from the color picker or specify a hex code.
• Align: Select the alignment of the icon from the available options.
• Letter spacing: Specify the space that you want to apply between individual letters in the textual content of the icon block.
• Icon size: Select a size (square height and width of the icon) for the icon. Available options are 16px, 32px, 64px, 128px.
• Icon spacing: Select the spacing for the icon. Available options are 0, 5, 10, 15, and 20.
• Icon padding: To enable space between the icon and anything else next to it, enable this checkbox and specify the padding values for top, right, left, and bottom.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Menu block¶

Use the Menu content block to create menu items on your landing page. For this block, the general section within Content Properties has the following parameters:

• Configure menu items: To add a menu item and define the properties for the menu, click Add new item. If you do so, the following additional properties are displayed:
  • Text: Specify the text to indicate the menu item.

  • Link type: Select the behavior of the link from the available options:

    • Open web page
    • Send email
    • Make call
    • Send SMS
    • Internal link

    Based on the selected Link type, the system displays additional options.

  • Title: Specify the text that must appear when a recipient hovers over the menu item in the landing page.
  • Target: Specify if a user; who clicks the menu item; needs to be navigated to a different page or the same page.
• Font family: Select the font family for the text of the menu item. If you select Global font, the system applies the font selected for Default font in the Settings section.
• Font size: Select the size for the font of the menu text.
• Text color: Select the color for any non-linked text in the menu. You can either select a color of your choice from the color picker or specify a hex code.
• Link color: Select the color for any linked text in the menu. You can either select a color of your choice from the color picker or specify a hex code.
• Align: Select the alignment of the menu item from the available options.
• Letter spacing: Specify the space that you want to apply between individual letters in the menu block.
• Layout: Select if the menu items should be displayed horizontally or vertically.
• Separator: Select the separator for the menu items.
• Mobile menu: To customize the menu items appearance for mobile devices, enable this toggle bar and specify the values for icon size and type, foreground and background color. This option adds a hamburger menu on mobile devices, with options for icon size (24px, 36px, 48px, 64px), foreground color (the color of the hamburger lines, set using the color picker or a hex code), icon type (normal/square or rounded), and background color (set using the color picker or a hex code).
• Items padding: To set space between items in the menu, enable this check box and specify the padding values for top, right, left, and bottom.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Text block¶

Use the Text content block to insert textual content in your landing pages. Campaign Studio’s text editor toolbar allows you to modify various properties for the textual content, such as font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, etc. Some of these options are also available for the text editor of the Button block.

The first row of the toolbar contains the following options:

• Font type

  If you select Global font, the system applies the font selected for Default font in the Settings section.

• Font size
• Bold
• Italic

• Underline

  If you decide to underline the text and want the underline to have:

  • same color as the text: apply the underline before changing the color.
  • different color than the text: set the color of the text as the color that you want the underline to have, apply the underline, and change the text color.
• Strikethrough
• Superscript
• Subscript
• Clear formatting
• Align-left
• Align-center
• Align-right
• Align-justified
• Insert a symbol/special character
• Undo previous change
• Redo previously undone change

The second row of the toolbar contains the following options:

• Ordered lists
  • Default (1, 2, 3, etc.)
  • Lower Alpha (a., b., c., etc.)
  • Lower Greek (lower-case symbols for alpha, beta, gamma, etc.)
  • Lower Roman (i., ii., iii., etc.)
  • Upper Alpha (A., B., C., etc.)
  • Upper Roman (I., II., III., etc.).
• Unordered list
  • Default (which is a disc)
  • Circle (○)
  • Disc (●)
  • Square (■)
• Font color (using the default color palette or click Custom to use the color picker, an RGB code, or a hex code)
• Text Background/Highlight Color (using the default color palette or click Custom to use the color picker, an RGB code, or a hex code)
• Text direction - left to right
• Text direction - right to left
• Insert or edit a link
  • Link Type:
    • URL: Opens a web page.

    • E-MAIL: Sends a message to the specified address.

      When selected, the system displays additional fields to add a subject and message.

    • File Manager: Links to an asset in the file manager.
    • Tel: Makes a call to the specified phone number.
    • SMS: Sends a text message to the specified phone number.
  • Url/Email/Number: The address of the URL, email, or telephone number.
  • Underline link: To underline the text for the link, select this check box.
  • Text to display: The text that should appear as a link in the landing page.
  • Title: Text that appears when the recipient hovers over the link.
  • Target: Open the link in a new browser tab or the current tab.
• Remove a link
• Add a merge tag/token (opens a menu to select the field that you want to use as a token)To add the webview or unsubscribe URL tokens as links, use the URL type and enter {webview_url} or {unsubscribe_url} as the URL. To use the default text and link from your configuration settings, use the {webview_text} or {unsubscribe_text} tokens.

The general section within Content Properties has the following parameters:

• Text color: Select the text color for the content in the block. You can either select a color of your choice from the color picker or specify a hex code. To change the color of a portion of the text in the block, use the formatting toolbar.
• Link color: Select the color for any links added in the content block. You can select your preferred color from the color picker or specify a hex code. To change the color of a specific link in the block, use the formatting toolbar.
• Line height: Select the spacing between lines within the text block. The available options are 1.2, 1.5, 1.8, 2.0. These options are not adjustable.
• Letter spacing: Specify the space that you want to apply between individual letters in the text block.

The Block Options section has the following parameters:

• Padding: To enable uniform space between the content and the edge of the column, set the padding value in All sides. Alternatively, to set unique padding values for the different sides, enable the More options toggle bar and specify the padding values for top, right, left, and bottom.
• Hide on: To hide content on either Desktop or Mobile, select the device type where the content needs to be hidden.
• Block identifier: To enable block identification through a unique ID, enable this toggle bar and specify the ID.

Preference Center¶

Preference center pages enable your contacts to decide which messages they’d like to receive, rather than unsubscribing from all communication. This includes preferred channels and timing for how and when contacts receive messages.

If you build more than one preference center, with different options or different branding, for different campaigns or emails, name them appropriately so you can find the correct page later.

To set a landing page as a preference center:

1. Log in to Campaign Studio.
2. In the left navigation pane, click Components > Landing Pages.
3. To create a landing page, click New. Alternatively, select an existing landing page; built by using the builder, and click Edit.

4. In Templates, select a specific theme, set the Set as preference center page toggle bar to Yes, and click Builder.

   

5. Drag the Preference center block and drop it in the staging area on the left.

   Note

   Do not add other forms in the same row as the preference center block.

6. Click Configure to configure the properties.

   The following slots are specific to the preference center:

   • Segment List
   • Category List
   • Preferred Channel
   • Channel Frequency
   • Save Preferences
   • Success Message
   • Dynamic Content

   Based on the selected slot type, the system displays various options. Specify all the relevant details. For more information, see Preference center landing page.

7. Save the changes.