Overview
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.
Build and Styles tabs
Your page sits within EasyEditor, ready for editing.
Firstly, let's concentrate on the left-hand side panel, which has two tabs - 'Build' and 'Styles'.
From 'Build' you can:
- drag 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.
Next, click on the block.
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.
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 and drop the 'Countdown' building block from the side panel into a dropzone.
Next, click on the block.
The side panel will change, providing the options for setting up your countdown timer.
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 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.
To set times, click on the configuration cog icon in the far right of the block's header.
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.
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 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.
To set a location, click on the configuration cog icon in the far right of the block's header.
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.
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 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 and drop 'Advanced personalisation' blocks from the side panel.
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.
Adding a survey or form
You can drag 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.
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.
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.
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
Using 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.
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.
Adding 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.
The 'Tracking codes' side panel will slide in from the right. Click Add tracking code.
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.
Once applied, and when the page is saved and published, your page will begin tracking your visitors.
Next step:Publishing pages