This guide reviews the different functions and components you can use when building a landing page within Listrak.
💡 Ready to get started? View Listrak's Landing Page Guide for instructions on creating your first Landing Page.
Landing Page Templates
Landing page templates provides some pre-designed options to help get stated creating a new landing page. If a template does not fit the specific needs, there is also the option to start from scratch.
Email Sign Up: A template that provides the ability to collect email address and subscribe contacts to a list of your choice.
SMS Sign Up: template that provides the ability to collect phone number and subscribe contacts via a list subscription campaign of your choice.
Informational: A display-only page that does not collect contact information by default.
Landing Page Configuration Tabs
The configuration tabs are the key to customize the appearance and functionality of the landing page.
Content: Add new content blocks to the template or scratch-made landing pages. One or more content blocks can be added to each row.
Rows: Break down the landing page into different layouts using the column options provided in the row tab. Use the drop-down at the top to select from empty rows or default rows that have commonly used content components added.
Settings: Control high-level settings for the landing page, such as the width of the landing page content, background color, and content alignment.
Available Content Blocks
Title: A text element using top-level text hierarchy design. Adjust the the font size, font family, text color, alignment, and more when adding a new title.
Paragraph: Another text block designed to add a greater quantity of text to a landing page. Adjust font family, alignment, spacing, and font weight when configuring paragraph text.
List: Create a bulleted or numbered list by selecting the list type before adjusting properties such as the style of list, text color, font size, line height, and alignment.
Image: Add an image from the landing page library or third-party source and then adjust image width, edit the image or apply effects, add links, and adjust padding.
Button: Create a clickable element ad adjust font size, button background and font text color, change letter spacing, or adjust alignment.
Divider: Add a visual differentiator between sections of content and adjust the weight, design, and color of the divider.
Spacer: Instead of using a visual divider, provide differentiation by adding white space between content components. Adjust the height of the spacer to determine the amount of white space.
Social: Provide a link to your social networks using pre-designed or custom icons. You can also insert social share icons and style icons using spacing and alignment.
HTML: Insert custom HTML into the landing page using the HTML block.
Video: Using YouTube of Vimeo embed a video directly into a landing page or provide a link to a hosted video.
Form: Collect information from a landing page visitor and subscribe contacts to a selected email list, SMS keyword campaign, or both. Collect additional information that can be used in filtering and to personalize message content.
Icon: Add images in a vertical line to the landing page. These images cannot be linked, but you can adjust size, spacing, and padding.
Row Settings
Rows house the content of the landing page. Rows contain 12 blocks that can be broken into columns. A row can contain between one and twelve columns that can then be filled with the different content blocks.
Empty row types contain no content while default row types contain some commonly used layout and content combinations.
Once a row is added, in the row configurations, use the Customize Columns section to select the number of blocks in each column to change the width, add new columns, or delete existing columns.
The final width of each row will be dependent on the width of the landing page set in the settings panel. For example, in a 600px wide landing page each block is 50px wide. In a 3 column row layout of 3 blocks, 6 blocks, 3 blocks the columns would be 150px, 300px, and 150px wide as depicted in the screenshot below.
Once the rows have been created you can adjust the row properties listed below.
Row Properties
Once a row has been added to the canvas you can also adjust the following properties by clicking into the row on the build canvas.
Row Background Color: Apply a background color to the height of the entire row including outside the content area.
Content Area Background Color: Apply a background color to the height of a row within the content area.
Content Area Rounded Corners: Applies a rounded look to the area of content within a row. Use the more options toggle to adjust the corners separately.
Content Area Border: Applies a border around all content within a row. Adjust properties such as color, design, and width. Use the more options toggle to adjust the borders separately for each side.
Do Not Stack on Mobile: Turning on this toggle will scale the content within the selected row on mobile instead of stacking content.
Reverse Stack Order on Mobile: Turning on the toggle will display the right-most column of content at the top of the stack when viewing on mobile.
Row Background Image: Enable the toggle to select an image that can fill the content area of the row or the entire row. Images can fit to the content, be centered, or repeat depending on the height of the row and type of image.
Hide On: Select the computer monitor or phone icon to hide a row on desktop or mobile respectively. This setting allows you to create one appearance for desktop and one for mobile.
Customize Columns: Add, delete, or adjust the widths of the columns in a row as described above in the row settings section/
Column Background Color: Clicking on a specific column in the customize section populates a color selector below where a background color can be applied to the selected column if this should differ from the color set at the row or settings level.
Padding: Clicking on a specific column in the customize section use the padding option to adjust the white space around a row. These can be adjusted at the same rate for all sides, or customized per side by tuning the more options toggle to on.
Border: Clicking on a specific column in the customize section use the padding option to add a border to the specified column. These can be adjusted to apply the same appearance to all sides, or customized per side by tuning the more options toggle to on.
Settings Panel
The settings panel control the settings for the entire landing page and apply to all sections of the landing page unless specifically overwritten.
Content Width Area: The total width of all content added into the columns of a landing page. Landing pages can be designed between 320px-1440px.
⚠️ If you are planning to embed the landing page on your website ensure that the page is narrower than your website so that no scroll bars display.
Content Alignment Area: Determine if the content should be left aligned or centered within the space.
Background Color: Apply a color to the entire landing page including outside the content width area.
Content Area Background Color: Apply a color to the background of the content width area only. This will apply to all rows in the landing page.
Default Font: The font that will populate when adding any new content that contains text, such as paragraphs, buttons, and lists.
Link Color: The default color styling that will be applied when a link is included in any content that contains text.
Optional Properties: These are not required but can help your landing page be easily identified by contacts when it is open in the browser.
Title: The label that will appear in the page tab within the browser.
Description: A short blurb on the page contents.
Language: An attribute that reflects the language of the page that is used to help accessibility tools, such as screen readers.
Favicon: Upload an image that will appear in the page tab before the title.