Editing landing pages

Summary

You build and edit landing 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 landing pages are webpages and don't have the limitations of email, there are extra things you can do when editing landing pages that you can't do with campaigns. All in all, this enables you to easily create great looking, targeted, personalised landing pages without needing any HTML skills.

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

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

This article covers EasyEditor functionality that's specific to landing 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 landing pages too.

Overview of 'Build' and 'Styles' tabs

Your landing page sits within EasyEditor, ready for editing.

edit_landing_page_el.png

Firstly we'll 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, 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 you 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 simply 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).

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 landing 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 just 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.

Furthermore, by ticking After ending, redirect to: you have the option of sending visitors to another one of your landing 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.

Drag in and drop advanced personalisation blocks

One of the most attractive and powerful features of our landing 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, with the latter allowing 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 on advanced personalisation »

Adding a survey or form

You can drag in and drop surveys and forms into your landing 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 drop into your landing 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 landing 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 landing 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, as you can when editing campaigns in EasyEditor, you can also use background images with landing 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

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.

You have further options to decide upon the positional part of the image that is shown in the layer, its size (actual, fill or fit), if the image repeats and how it repeats, and whether it scrolls with the page or remains fixed.

Other useful things to know

Google Fonts

There is a wider range of fonts to choose from when creating a landing 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 landing pages

You can link to other landing pages from within a landing 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 landing page. A dropdown will appear asking you to select an existing landing page (but listing only those that have already been given a URL, so make sure this has been done).

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

Add tracking code to a landing page

You can add Web Behaviour 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 the Add tracking code button.

add_tracking_code_button_el.png

A further side panel will slide in with four options to select from - 'WebInsight', 'Google Analytics', 'Google PPC' or 'Other'.

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

With WebInsight, 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_el.png

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

A note on HTTPS

Landing pages run over HTTPS (unless they're hosted on a domain that doesn't support HTTPS). 

Next step: Publishing landing 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

Powered by Zendesk