Create and Manage Landing Pages

We’ve recently updated our landing page creator to include more robust formatting options and embedding scripts and forms. This page introduces the basic steps to create and then manage landing pages. Before following the steps in this article, you’ll want to consider whether you will use the Organizer subdomain provided for your account or subdomain of your organization’s website. If you are using a subdomain of your organization’s website, you’ll want to Create and Verify a Landing Page Domain before publishing your landing page.

Create a Landing Page

When creating a landing page, there are three basic steps: setup, style, and publish. Start by selecting Create New. As you work through these steps, select Save as Draft to save your work.

Setup

1.  Add the name for your landing page. This is the name that appears in the list of landing pages. This will also be the name you can filter under the effort name in Community Builder.  The name must be unique and can’t be more than 200 characters. 
2. Add the domain by selecting the domain from the drop down. You will have a choice from the Action.Organizer.com and any other domains you’ve added. 
3. Add the URL Slug. This is the last portion of the URL. If you are using action.organizer.com as your subdomain, this does need to be unique across any accounts. So we suggest adding in your organization’s name. Slugs can’t be reused. You will be able to change this after it is published but the previous URL will no longer work and navigate to your page.

Style

When styling your landing page, the options for the content, rows, and settings are available on the right hand side while the content for the page on the left side. By default, some suggested content is already ready for you to include: content boxes to fill in a title and description and description and a placeholder for a form or script. The landing page editor does not currently support custom CSS or provide the option to edit HTML directly.

To add a Script or Form, select Add Form/Script and select from the list of Scripts and Forms. The Script or Form will be embedded where the placeholder block is on your page. The Form/Script won’t be visible while you are adding in content, but you will be able to view the entire page and content when you Preview the page. You must have a Form or Script selected to publish the page.

If templates have already been created in your account, select Templates and Show Templates. Select from the existing templates to use that template as a starting point. You’ll need to confirm the template will override what is on the current page. If no template has been created, you can save the page as a template. When you select a page template and make edits to the page, you can save the template with your changes or make a new template.

Before you add content, you will need to add your rows for how you will want your content displayed. The Rows menu allows you to add horizontal rows with pre-set column widths. For example, you can add a row that is divided to have content in two columns that divide the row in half or you could add a row that has a split of content of one third and two thirds of the row width. To add a Row, select an option from the Rows Menu and drag it into place; a blue “insert here” line will appear to help you place the row. Release your mouse to place the row where the blue line appears. Once you add a row, you can then add content such as images or text to the row’s columns.

Ways you can use row formatting:

• If you add a two-column row that has a larger left section, you can add a photo on the right side and text on the left side to have an article or text-wraparound-photo effect
  This can be helpful for quote testimonials or featuring someone in particular
• If you add a three-column row that has equal sections, you can add a photo in each section to create a photo divider
• If you have to add multiple logos, you can add a two or three-column row that has equal sections to have centered logos
• You can play around with adding different combinations of photos, graphics, and text to have more dynamic page formats.

To add content, select the item from the menu and drag it to an empty space in a row. A blue frame around a container will appear to help you place content; release your mouse to place the content inside a container. Once content is added to a row, you can select it and drag it to move the content. To remove content from the page, select the content and the delete trashcan icon. Additional style options and settings are available for the content in the content menu on the right-hand side.

When adding content, you can select from the following stand alone options: 

• Title: Select Title to add text styled using heading tags such as Title, Heading 1, Heading 2, etc.
• Paragraph: Add a paragraph of text. You can customize the font, text alignment, text direction, paragraph spacing, and line height using the module on the right-hand side. Within the paragraph, you can select words or sentences for additional formatting such as bold, italics, underline, or strikethrough formatting, color, superscript/subscript, add special characters or symbols, clear formatting, or add and remove hyperlinks. 
• List: Add text styled as a list with options for an ordered list in numerical order or a bulleted list. You can customize the list spacing between items, indentation of list items, and the starting number. In addition, lists can be formatted for font, text alignment and line height as well as text used in lists can be formatted for bold, italics, underline, or strikethrough formatting, color, superscript/subscript, add special characters or symbols, clear formatting, or add and remove hyperlinks.
• Image: Add an image. You can customize the image using autowidth sizing, alignment, alternate text, title (which appears upon hover), whether the image uses rounded corners, image padding and whether the image should also be a hyperlink. There is not an option to resize the image, so you may need to use another program to change the image size. 
• Button: Add a button. You can customize the button’s hyperlink, appearance (size, background color, text color, border), and hover state such as the background color, text color, and border. And you can customize the action of the button and a link.
• Table: Add a table. You can customize the table by adding a header row, columns (maximum of 8), rows (no maximum of rows), stripped rows (alternating colors),  background color, border style and size. A thickness of less than 5 is suggested for dotted or dashed border styles. For the whole table, you can set the font, text color, link color, text alignment, letter spacing, and text directions. 
• Divider: Add a dividing line between content blocks. This line can be customized for its appearance (solid, dotted, dashed, line height, width, color or transparency).
• Space: Add a blank space into your design. Customize the height of the space.
• Social: Add icons for social media platforms and customize with direct links.

The Settings menu allows you to change page-wide settings for things like Font, Alignment of Content on the page, Content Area Width, Background color, and the color to indicate links. These page wide settings can be overridden at the content or row level. Content Area Width controls the overall width of the content on the page; we suggest 900px or larger. 

Within Settings, you can also add Meta Data to set a page title and page description that appears when the link is shared in apps that provide link previews. You can also add a favicon, a small icon (16 by 16 pixels) that appears in the browser tab before the page title.

Once you have added content to your landing page, you can save it as a template for future use. Select Templates and Save as Template.

Once you have saved templates, you can add content as a batch by selecting Templates and Show Templates and then selecting the template. Once you have added a template to your page, you can continue to edit the page and can save the page a new template or update the saved template.

Review and Publish a Landing Page

The final step before you publish your landing page is to review the required information for landing pages. You are required to have a landing page domain, URL, and a form or script selected. You can also preview the landing page. You may not see all the questions in your script or form depending on your branching logic. For example, if you have 10 questions and Question 5 could branch to 6,7, or 8,  you will not see those questions until you make a selection at question 5. This is to make sure people are not overwhelmed with questions they may not have to answer.

If your landing page is complete, you can publish your landing page. Once your landing page is published, the status on the list of landing pages will change from “draft” to “published.”  Once your page is published, you cannot edit the page layout.

Delete after Publication

You have the option to delete a landing page that has already been published. Delete is permanent and can’t be reversed. Deleting a page has no impact on the data stored from the landing page submissions. If you want to remove it from use but not delete it, you can edit the Setup Landing Page Slug so the old URL won’t work.

Frequently Asked Questions

• Question: I am not able to add any content to the page or it doesn’t seem to be spaced correctly. How do I fix this? 
  Answer: Rows are used to help with the spacing of content or to give placeholders for the content. For example, you can add a row that contains three evenly spaced boxes; you can drag an image holder into each of those boxes; a blue guideline will help to show where you are placing the content. Release your mouse to place the content. Once you have your image holders in place, you can select the image and adjust settings for the image.
• Question: When I look at the preview of my page, the content seems to be rather small compared to the overall page width. How do I fix this? 
  Answer: You can adjust the Content Area Width in the Settings Menu. You may want to adjust the size upward to 900 pixels (px) or larger. You can adjust the Content Area Width and then preview the page to get the size as you’d like it.
• Question: Are landing pages mobile responsive? 
  Answer: Yes, the page components are mobile responsive. To see what your page looks like, you can adjust your page width or send yourself the preview link to view on a mobile device.
• Question: Can I edit the HTML or CSS directly? 
  Answer: No, we don’t offer a way for direct edits to HTML or CSS. 
• Question: Is there a way to resize an image? 
  Answer: You can adjust the padding around the image which changes the spacing around the image. However, there’s no resize option for an image. You can resize an image using other software such as Apple Preview or Microsoft Photo.
• Question:  I have an old landing page that I made through forms and I need to edit it? How do I do that?  
  Answer: You can edit the form associated with the landing page. However, you can’t change the content on the page. If you need to edit the page content, then consider creating a new landing page and adding the form into it.