Designing a landing page designing-a-landing-page
About landing page content design content design about-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 the Campaign content editor.
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:
Landing page content editor interface landing-page-content-editor-interface
The landing page content editor allows you to easily define, modify, and personalize content in 蜜豆视频 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.
- 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.
- The action bar contains the general options for the page. You can select a template and change the display mode.
- 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.
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.
Managing landing page structure and style managing-landing-page-structure-and-style
Managing blocks in the content editor 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 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 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=鈥渢ext-align: left;鈥).
- Center: centers the text in the block selected (adds style=鈥渢ext-align: center;鈥).
- Align right: aligns the text to the right of the selected block (adds style=鈥渢ext-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 inserting-images-in-a-landing-page
-
In a landing page content, select a block containing an image.
-
Select the Insert button.
-
Choose Local image from the contextual toolbar.
-
Select a file.
-
Adjust the image properties as needed.
Defining dynamic content in a landing page 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.
You can navigate between the different dynamic contents of a block. To do this:
-
Select the block.
Arrows appear on the right- and left-hand sides of the image.
-
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.
-
To delete all the conditions applied to a block, select that block and click the Disable dynamic content icon.
-
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.
