Pages - Editing pages

Contents

Overview of 'Build' and 'Styles' tabs
Adding a video
Adding a countdown
   » End options
   » Timer style
   » Label style
Adding a time-targeted block
Adding a geo-targeted block
Drag in and drop advanced personalisation blocks
Adding a survey or form
Using background images
Adding a confirmation block
Other useful things to know
   » Google Fonts
   » Link to other pages
Add tracking code to a page

Summary

You build and edit pages with EasyEditor. If you've used EasyEditor before when creating campaigns, then you'll be very familiar with its drag-and-drop interface and other functions.

However, because pages are webpages and don't have the limitations of email, there are extra things you can do when editing pages that you can't do with campaigns. All in all, this enables you to easily create great looking, targeted, personalised pages without needing any HTML skills.

Furthermore, you can easily add tracking code to your pages, as well as publish, unpublish, edit and republish your pages at will.

To access the page builder, either create a new page, or, if you already have existing ones listed on the 'Pages and forms' page, click on the Edit pencil icon next to it.

This article covers EasyEditor functionality that's specific to pages. For full coverage of EasyEditor functionality, please go to the EasyEditor section. Although the articles are geared towards campaign creation, they're largely applicable to pages too.

Overview of 'Build' and 'Styles' tabs

Your page sits within EasyEditor, ready for editing.

edit_landing_page_el.png

Firstly, let's concentrate on the left-hand side panel, which has two tabs - 'Build' and 'Styles'.

landing_pages_build_and_styles_el.png

From 'Build' you can:

  • drag in and drop various building blocks, allowing you to add titles; subtitles; blocks for text, image and video; buttons; containers; spacers; plus other tools and advanced personalisation blocks
  • select 'My building blocks' from the accordion menu; this is where you can store and retrieve previously made building blocks for constant re-use, saving you time
  • select 'Images'; here you can upload, choose and manage the images to drag and drop into your page
  • select 'Surveys and forms'; from here you can drag and drop your active surveys and forms into your page, allowing for increased data capture and the ability to automate communications off the back of it

From 'Styles' you can:

  • choose and manage your pages background colours
  • select 'Background images' from the accordion menu; select and style a background image for your page, or a layer of your page
  • select 'Borders & padding'; style the various borders and their padding on your page

A lot of the functionality is covered in the dedicated EasyEditor section. However, certain parts aren't and these are covered below.

Adding a video

You can add a video to your page by dragging and dropping the 'Video' building block into a dropzone.

drag_and_drop_video.png

Next, click on the block.

click_on_video_block_in_landing_page.png

The side panel will change and all you need to do is paste in your embed code from YouTube or Vimeo.

The embed code is found by clicking on the 'Share' option for videos on these sites. In the case of Vimeo's embed code, only use the first portion ending with the closing </iframe> tag. We can't accept any code beyond this tag.

embed_video_into_landing_page.png

If the embed code is valid, a green tick will appear and your video will display within the page.

If it isn't valid, a red cross will appear instead and no video will display.

Adding a countdown

If you're running something like a competition, a special offer, a promotion, or you're launching a new product or service, it's a good idea to add a countdown to a page. Not only does this provide information about the deadline but it also generates excitement and urgency.

To do this, drag in and drop the 'Countdown' building block from the side panel into a dropzone.

drag_and_drop_countdown.png

Next, click on the block.

set_up_countdown.png

The side panel will change, providing the options for setting up your countdown timer.

countdown_settings.png

End options

Enter the date for which you want the countdown to end on.

Optionally, tick At this time to also pick the specific time on that day.

Picking the date without ticking the time will provide a countdown of days only.

Selecting a date and a specific time on that day will provide a countdown in days, hours, minutes and seconds.

By ticking After ending, redirect to: you have the option of sending visitors to another one of your pages after the countdown has expired.

Timer style

This allows you to change the font, font size and colour of your timer. Plus you can choose whether the timer is in bold, italics or underlined, or a combination of these.

Label style

This allows you to change the style of the countdown labels - 'Days', 'Hours', 'Minutes' and 'Seconds'. Again, you can change the font, font size and colour of them, as well as choose from a combination of bold, italics and underlined.

Alternatively, you can choose to show no labels by unticking Show labels.

Adding a time-targeted block

You can add a block that's only visible before and/or after a set time. This is particularly useful if, for instance, you're promoting a time-limited sale on your page, or driving entry into a competition that has a definitive open and close date. The block will only appear when relevant, and will disappear once irrelevant.

To do this, drag in and drop the 'Time target' building block from the side panel into a dropzone. Next you'll need to drag and drop the content you want to display into the block.

landing_page_time_target_block.png

To set times, click on the configuration cog icon in the far right of the block's header.

landing_page_time_target_block_config_cog.png

The 'Edit time settings' panel will slide in from the right.

Click Yes to configure hiding the block before and/or after a specific date (and specific time on that date, if you wish).

Your account's timezone setting is used to determine the 'hide before'/'hide after' date and time.

landing_page_time_target_block_config.png

Click Apply once you're happy with your settings.

Once your page is published, content within this block won't be visible before and/or after the times you've set.

Adding a geo-targeted block

You can add a block that's only visible to viewers who are in a certain location, personalising it to them. This is particularly useful if, for instance, you have a country-specific offer or if you want to target contacts living near your next event's location.

To do this, drag in and drop the 'Geo target' building block from the side panel into a dropzone. Next you'll need to drag and drop the content you want to display into the block.

landing_page_geo_target_block.png

To set a location, click on the configuration cog icon in the far right of the block's header.

landing_page_geo_target_block_config_cog.png

The 'Edit location settings' panel will slide in from the right.

You're able to provide your block with a friendly name that will display in the block's header in EasyEditor.

Select the area(s) on the map you want to target by using the square, circle or custom polygon tools.

landing_page_geo_target_block_config.png

Visitors to your page are located via GPS. If GPS doesn't work, wifi is used if it's available - and in order to provide the highest chance of locating a visitor, any wifi their computer or mobile device can detect is used, not necessarily the one they're connected to. Failing GPS or wifi, the IP address is used, which is the least accurate.

If a visitor's location is unavailable and can't be determined, then you have the option to either show the block regardless, or hide it.

Click Apply once you're happy with your settings.

Once your page is published, content within this block will only be visible to page visitors who are based within the targeted location(s).

Drag in and drop advanced personalisation blocks

One of the most attractive and powerful features of our pages is that they can be used with advanced personalisation, making for a highly tailored experience for each customer. In essence, it means you can create a single page but its content will be unique for each individual contact.

You can type Liquid markup directly into the page. Alternatively, you can drag in and drop 'Advanced personalisation' blocks from the side panel.

advanced_personalisation_blocks.png

You have the choice of 'Loop', 'Decision' and 'Liquid markup' blocks. The latter allows you to enter any general Liquid markup into it.

Clicking on these blocks within the page will open a side panel on the far right to configure them.

Read more about advanced personalisation »

Adding a survey or form

You can drag in and drop surveys and forms into your pages, enabling easy data capture from visitors to your page.

Click on Surveys and forms from the accordion menu. All of your surveys are listed as blocks that you can drag and drop into your page.

landing_pages_drag_in_survey.png

You can also create surveys on the go from within the side panel. Click on Create a new survey and you'll be taken through to the surveys and forms tool to create one.

Click Preview at the top of EasyEditor if you want to check that your survey or form is displaying without any issues, as you won't get any indication of this when viewing it within the page in editing mode; it will simply show as a survey block.

survey_block_in_landing_page_edit_mode.png

If a contact is coming through to a page from a link in a campaign they've been sent, and the survey's questions are assigned to contact data fields, then the survey in the page will be pre-filled wherever that's possible.

Using background images

As well as being able to choose your background colours and adjust borders and padding, just as you can when editing campaigns in EasyEditor, you can also use background images with pages. This means you can really make the most of your pages, making them look attractive and eye-catching.

Click on the Styles tab and select Background images from the accordion menu.

Select the background layer you want your image to appear in.

Select the image you want to add by clicking Choose image.

background_images.png

The image manager will open up, allowing you to select from your library of images. You can search for an image that's contained within one of your various folders, or you can add a new image from your computer to the image manager.

Once you've selected the image you want, click OK. The image will appear on the page in the layer you selected.

If you no longer want a certain background image displaying, click Remove image.

Further options are also provided to to decide upon:

  • the positional part of the image that's shown in the layer
  • its size (actual, fill or fit)
  • whether the image repeats and how it repeats
  • whether the image scrolls with the page or remains fixed

 

Other useful things to know

Google Fonts

There's a wider range of fonts to choose from when creating a page as opposed to when creating a campaign. That's because this is a webpage, which means you aren't having to deal with email clients that can struggle with certain fonts. You'll find a good selection of Google Fonts in addition to the usual web-safe choices.

If you want to include a Google Font that isn't featured, you can add the code to the HTML (in the <head> section of the document). It will then be added to the font dropdown and available for use.

Link to other pages

You can link to other pages from within a page.

Highlight the text you want to link from and then select Link from the toolbar. A dialog window will open.

add_a_link_to_a_landing_page.png

Select Link to a page. A dropdown will appear asking you to select an existing page (but listing only those that have already been given a URL, so make sure this has been done).

Select the page you want to link to and, upon publishing, the page will link off to the chosen page.

 

Add tracking code to a page

You can add Web Behavior Tracking, Google Analytics, Google PPC or any other tracking code to your page. This is great for gaining in-depth web analytics on your pages that go beyond the 'visits per page' recorded by our standard reporting.

To add tracking code, click on Utilities positioned at the top of EasyEditor and then click Add tracking code from the dropdown.

landing_pages_add_tracking_code_el.png

The 'Tracking codes' side panel will slide in from the right. Click Add tracking code.

add_tracking_code_button_el.png

A further side panel will slide in with four options to choose from - 'Web Behavior Tracking', 'Google Analytics', 'Google PPC' or 'Other'.

Select the appropriate one and add your tracking code into the box provided.

With Web Behavior Tracking, Google Analytics or Google PPC tracking code, clicking Apply will automatically insert it into the correct place within the HTML document for you. With other tracking code, you'll be additionally asked for the position to place it within the HTML.

other_tracking_code.png

Once applied, and when the page is saved and published, your page will begin tracking your visitors.

Next step:Publishing pages

Have more questions? Submit a request

Comments

  • Avatar

    Hi,

    What is the recommendation to embed a Countdown timer into an Easy Editor email?

    Regards

    Jon

  • Avatar

    Hi Jon,

    Thanks for your question. We don't offer countdown timer functionality within dotmailer for email campaigns, so there are two recommendations we can make:

    1. Have a look around online for a good third party service or app who will provide you with the embed code to place within your email in dotmailer. We don't recommend a particular one but there are certainly a few out there.
    2. Alternatively, you could just direct people from the email to a landing page that's using the countdown timer functionality.

    Hope that helps.

  • Avatar

    Hi Neal,

    Thanks for the prompt reply.

    I'll have a look at 3rd party's as you suggest and also look to see if it can be achieved using External Dynamic Content.

    Regards

    Jon