The complete process of Landing Page creation includes two major steps – creating the blank Landing Page and then building its content.
To learn about Landing Pages and how to manage them in Maropost, see Introduction to Landing Pages.
Steps to Create a Landing Page
Perform the following steps to create a Landing Page:
- In Navigation, go to ACQUISITION, and then select Landing Pages.
- On the Landing Pages index page, click New Landing Page.
- On the New Page dialog box, enter a name for the new Landing Page. Then, select the dates on which the Landing page is to be published and expired.
You can also provide a custom URL for the Landing Page starting with the custom domain you set up on your DNS server. See Setting Up Custom Domain for Landing Pages for more information.
📋 Note: If you haven't set up your DNS record yet, then you can add the page URL later when building the Landing Page.
- If you want to build your landing page using our Drag-and-Drop editor, keep the checkbox selected. If you already have HTML code for your landing page, simply de-select the checkbox to create the web page using the standard WYSIWYG editor which allows you to paste in the source code of your landing page.
- Click Save to create the Landing Page. You are then automatically redirected to the Drag-and-Drop editor or the WYSIWYG editor (depending on your selection in previous step) for building the Landing Page.
- Build and Save your Landing Page. See Using WYSIWYG Editor to Build Landing Pages and Using Drag-and-Drop Editor to Build Landing Pages to learn about building Landing Pages.
📋 Note: You can add personalized and dynamic content in your Landing Pages. See Adding Personalization and Dynamic Content to learn more.
Using WYSIWYG Editor to Build Landing Pages
The WYSIWYG editor provides a simple interface for building your Landing Pages. The editor enables you to paste HTML code into the Source view of the editor, and therefore is ideal if you already have HTML code for your Landing Page.
In Step 1 of of building Landing Page, design the Landing Page.
In Step 2 of building the Landing Page, update the settings, such as publish and expiry date of the Landing Page, the page title, URL of the web page to which your customers will be redirected if the Landing Page has expired.
Using Drag-and-Drop Editor to Build Landing Pages
The drag-and-drop editor gives you different types/styles of block elements to drag and drop into position, and then you can add content (text, links, photos, and so on) to these blocks.
All the options are available on the bottom panel and include the following:
- Add Elements – Use this option to add the block and content elements. See Add Elements for more details.
- Preview – Use this option preview the Landing Page.
- Save – Use this option to save the Landing Page.
- Tips – Use this option for tips and instructions for building the Landing Page.
- Styles and Properties – Use this option to update the style and property of the selected element. See Styles and Properties for more details.
- Page Analytics – Use this option to integrate Google analytics or Maropost's Web Tracking script into the Landing Page. See Page Analytics for more details.
- Settings – Use this option to view the static page URL and enter the cusom page URL for the Landing page. See Settings for more details.
- Exit – Use this option to exit the builder.
Add Elements
To start, you select a grid-type block (Hero Grid or Content Grid), and drag the chosen block to the canvas. To change how the grid looks (such as, resizing or spliting the grid), you can hover your cursor over the block and click one of the options that appear.
After you’ve selected and arranged a grid-type block on your canvas, you can then add content by selecting one of the content blocks (Text, Media, Custom, Forms, and so on) and then dragging and dropping them into the grid-type blocks. To edit the content details, double-click the content block on canvas.
Styles and Properties
After adding your grid-types and selecting your content, you can then select the content properties and styles by clicking the Styles & Properties icon on the bottom. You have a variety of options and settings to choose from for each type of content.
The following screenshot shows the style options for a paragraph content block:
Page Analytics
If you’re using Google Analytics or Maropost’s Web Tracking for your landing pages, then you can add the required web tracking script to the Landing Page. Click the Page Analytics icon on the bottom-right panel, and enter your web tracking script in the text box.
📋 Note: If you are using a web tracking script, then you are required to use a custom domain for your landing page. The domain used for the static web page URL is a shared resource and will not work for web tracking feature.
The following screenshot shows an example of Maropost's Web Tracking script added in the Page Analytics:
Settings
Click the Settings icon to view the URL of your static web page and to provide a custom page URL. The custom URL starts with the custom domain that you set up in your DNS server and is followed by the unique path to the specific Landing Page.
Here, you can also update other attributes of the Landing page, such as the page title, publish and expiry date, URL of the web page to which the customers will be redirected if the Landing Page has expired.
The following is a screenshot of the Settings panel that opens when you click the Settings icon:
Setting Up Custom Domain for Landing Pages
In order to have a custom domain for your landing pages, you’ll need to have access to your DNS server. If you need help, contact Support@maropost.com and we’ll assist you.
Things you need to know for setting up a custom domain for Landing pages:
- Create a ‘CNAME Record’ in your DNS server. If your login URL for Maropost for Marketing is app.maropost.com, then your CNAME record will specify your custom domain to point to landing-pages.maropost.com. If your login URL is cloud.maropost.com, then your CNAME record will point to cloud-landing-pages.maropost.com.
- We recommend that your custom domain be a sub-domain of your main branded domain, if at all possible. This sub-domain will assist in the deliverability of your emails that you send which include the link to your landing page. Suppose your main domain is ‘example.com’ and you access Maropost via cloud.maropost.com. You’ll therefore set up a CNAME record in your company’s DNS server with a sub-domain for your landing pages (e.g. ‘pages.example.com’) that points to cloud-landing-pages.maropost.com.
-
Maropost for Marketing associates the custom domain with your Maropost Account ID. If you own several accounts (or sub-accounts) then you will need to set up different custom domains — and make sure that they all point to the proper Maropost domain.
Adding Personalization and Dynamic Content
If you want to have personalization in your landing pages, then you must have a custom domain set up, and the custom page URL of the landing page must include /:encrypted_contact_id somewhere in the path. We recommend putting this dynamic element at the very end of your landing page URL so that your web analytic tracking is not affected by personalized URLs.
For example: http://pages.mp2203.com/LP1/:encrypted_contact_id
In your email, the link to your landing page uses the custom contact tag to dynamically insert each contact’s own contact ID in each email sent.
The following is an example of the Landing Page link in the email:
<a href="http://pages.example.com/LP1/{{encrypted_contact_id}}">Visit our page</a>
The email sent to each contact is personalized for that specific contact using the contact’s own encrypted contact ID.
You can use personalization for any standard fields (first name, last name, telephone, fax number, and email address) using the same Liquid syntax as you do in emails. You can also pass in query string parameters in the URL and reference them in the body of your landing page using the {{tag.query_string_parameter_name}} syntax.
