You edit a Dynamic web page in much the same way as an email, with a few extra elements for the web, such as forms and videos. This article explains the editor and the elements you can add.
To open the editor, go to Web > Dynamic web, open your site, and click Edit Page on a page. A new page asks you to select a template first. The editor has three tabs: Settings (page title and tracking), Content and Preview.
Note: The header and footer of the default page template come from your account's Skins. See What are Skins and how to use them.
Layout and blocks
A page is built from blocks with different layouts, such as full width, two or three columns, or two columns where one is wider. Click Add Content in the toolbar to open the list of blocks and elements, and drag a block to the page.
Each block holds elements, such as text, images and buttons. To add an element to a block, hover over the block and click the + at the bottom of its frame, then choose the element.
When you hover over a block, the frame also lets you edit the block settings, copy it, delete it or move it up or down. When you click an element, its settings open in the inspector on the right, where you can also move it up or down or delete it.
To change the look of the whole page, click Themes in the toolbar.
Text, images and buttons
Text
Click a text to edit it directly on the page. In the inspector, choose a text class, such as a heading style, and set the alignment, font, size and colors. To make a text a link, select the text and add the link in the inspector, for example to another Dynamic web page or to your website.
You can personalize text with placeholders, such as {{contact.firstName}}. Click Attribute Tags in the toolbar to find them. This works when the contact comes to the page from a Symplify message.
Images
Click an image and click Change image in the inspector to upload a new one.
Links and buttons
Click a link or button and choose its class in the inspector. How the classes look depends on the page's theme.
Videos, iframes and QR codes
You find these elements in Add Content, and in the + menu on a block.
- Youtube Video and Vimeo Video: paste the video URL or ID in the inspector.
- Video: for a video hosted elsewhere, for example on your website. Paste the URL, choose the video format and, if you have one, add a thumbnail.
- IFrame: shows content from another web page. Paste the URL in the inspector.
To make sure videos look right on all devices, set the width as a percentage rather than in pixels. An iframe needs a fixed height in pixels, so it doesn't always adapt well to small screens.
QR codes
QR codes are useful in print, to bring readers to the web. In the inspector, choose the Type:
- Link: choose a Link type, for example Web page with the URL to open. Other link types include an email address, a phone number and a Dynamic web page.
- Calendar Entry: adds an event to the reader's calendar. Enter a Summary (the name of the event), the Event Start and the Event End.
Forms
Forms save the visitor's answers on their contact, so you can build sign-up, profile and preference pages. The form elements are Label, Text Input, Date Input, Checkbox Input, Radio Input, Select Input and Submit Button.
For every input, choose the attribute to save the answer in under Property. You can also set:
- Required: the visitor must answer before they can submit the form.
- Default value: the value saved if the visitor doesn't answer.
- Error Message: the message shown if a required field is empty.
To run actions when the form is submitted, such as showing a thank-you page, see Dynamic web actions.
Text input
A field where the visitor types, for example an email address or a first name. Use a Label above the field to show what you're asking for.
- Validate as checks the answer, for example as an email address, a number, letters and numbers only, or a pattern.
- Minimum Length sets the fewest characters allowed.
- Placeholder Text is the light gray hint shown in the empty field.
To pre-fill the field with the contact's current value, write the attribute's placeholder, for example {{contact.firstName}}, in the field on the page.
Checkbox
A checkbox lets the visitor tick an option, for example "I have read the terms and conditions". Connect each checkbox to its own attribute. Edit the text shown next to the checkbox and the value saved under Choices. If the contact already has that value, the checkbox is ticked when the page opens. A required checkbox must be ticked.
If you add a second choice, the checkbox becomes radio buttons.
Radio buttons
Radio buttons let the visitor choose one of two or more options. All options are saved in the same attribute. Edit the text and value of each option under Choices. If you remove options until only one is left, the radio buttons become a checkbox.
Select
A select is a dropdown where the visitor chooses one of two or more options. Like radio buttons, all options are saved in one attribute, and you edit them under Choices.