Getting started

After loading your desired template, you can access the Landing Page editor by clicking the icon at the upper-left corner of the screen.

The following are the actions available in the Landing Page editor:

• Add element: This option lets you add any of the following elements to the screen. To add an element, drag and drop it into the canvas.
  • Column: Drag and drop this element to add a column.
  • Row: Drag and drop this element to add a row. You can use the column and row elements to create a layout for your landing page and then add other elements to it.
  • Essential elements: This section contains the following elements: Text, Image, Button, Icon, Spacer, Map, Form, and Line. For more information, refer to Essentials.
  • Media elements: This section contains the following elements: Gallery, Video, Audio, and Playlist. For more information, refer to Media. 
  • Content elements: This section contains the following elements: Icon Box, Embed, Rating, Alert, Counter, Countdown, Progress, Calendly, Carousel, Tabs, Accordion, Switcher, Table, and Timeline. For more information, refer to Content.
• Search element: The Search element search box helps you search for an element by typing its name.
• Edit element: This option lets you choose which of the elements are required in the Add Elements panel. Click the element you want to hide, and it gets deselected (a dark circle at the upper-left corner of the element). By default, all visible elements are selected and have a tick mark around the upper-left corner of the element. For example, if the Row element is selected, it would appear as , and when it is not selected, it would appear as .

Common Styling Options for Elements

The following styling options are available for most of the elements in the landing page editor.

Typography Colors Link Settings Other Options

You can add typography options to an element by clicking the icon. The following options are available here:

• Change the font by selecting from the available options.
• Add a new font. To add a new font:
  • Click + Add New Font and add a font from Google Fonts, or choose from one of the fonts available in the Fonts tab.
• You can choose a style for the text from one of the drop-down lists: Custom, Paragraph, Subtitle, Above Title, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, and Button.
• You can choose the font size, weight, line height, and letter spacing in the Typography section.
• To add personalization, click the icon and select Others. Choose the desired personalization attribute and fallback. For more information, refer to the Personalize Landing Page.

You can add color options to an element by clicking the icon. The following options are available here:

Field	Option
Bg	You can choose the background color for the element in this tab. You can choose solid colors or gradients.
Shadow	You can add a shadow to the element by selecting the shadow color in this tab.
Mask	You can mask the element using an image. To add an image, click the icon and upload the image. You can personalize the image to be used by clicking the icon and choosing the desired option in the personalization editor. For more information, refer to Personalize Landing Page.

 

You can add links to an element by clicking the  icon. The following options are available here:

Field	Description
Link to	The Link to option in the URL tab allows you to add the URL/ Link to be opened when the element is clicked. You can also personalize this URL by clicking the icon and adding the personalization URL and fallback attributes.
Open in New Tab	Toggle this option in the URL tab to open the link in a new tab. By default, this is disabled.
Make it Nofollow	Toggle this option in the URL tab to make the link a Nofollow link. By default, this is disabled. Nofollow links are links with a rel=”nofollow” HTML tag applied to them, and search engines ignore such links. Widget links or links added to elements must be marked as Nofollow links. For more information, refer to Google's guidelines around widget links.
Block	This tab option is available only for images.
Action	This tab option is available only for images and icons. When the toggle is enabled, the popup is closed.
File	You can link to a File using this tab.

You can add styling and effects to an element by clicking the  icon. The following options are available here:

Field	Description
Styling tab	The Styling tab has the following options: Basic: You can add padding and margins, fix the position of the element (fixed, absolute, none), and add horizontal and vertical offsets. Advanced: You can add custom CSS options using this tab.
Effects tab	The effects tab lets you add effects to the popup when it loads on the webpage or when the user scrolls through the webpage.

Other Options

Field	Description
Align Element	You can align the text on elements to the left, center, or right by clicking the icon.
Duplicate Element	You can duplicate an element by clicking the icon.
Delete Element	You can delete an element by clicking the icon.

 

Essentials

This section contains the elements that you can begin with to create your landing page. This is a sort of put-together starter kit that will help you create the draft of your landing page. You can add media elements and effects to the message to make it more appealing.

The Essentials section contains the following elements:

• Text: This element lets you add text to your message. You can edit the text directly on the screen, and you can add font and styling options to it by clicking inside the text block, which will open the editor toolbar below the text block. You can edit the font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, add padding (gaps) above and below the text, choose the style for the text in HTML (whether it will be a paragraph element (<p> tag or a heading and so on), add links, and choose the styling and effects. You can also copy and delete text.
• Image: This element lets you add an image to the landing page. Drag and drop the image element to the screen and click on it to get the edit options. You can do the following with the image editor:
  • Upload an image, and add filters, tags, and masks to it.
  • Edit the height and width of the image and use the aspect ratio of your choice for it. To specify the height and width for an image, click the image and in the image editor toolbar, click  . Specify the height and width (in percentage) in the popup. You can also resize the image manually.
  • Add background color, body color, border color, and shadows to the image.
  • Add links to the image. This section has the following options: URL, Block, File, and Action.
  • Change the placement of the image.
  • Duplicate the image.
  • Delete the image.
• Button: This element lets you add a button to the landing page. You can style the buttons and add actions to them as well. Drag and drop the button to the screen and click on it to get the edit options. You can do the following with the button editor:
  • Change the size (width and height) and positioning of the button/icon, as well as the corner shapes (sharp edges, curvilinear, etc.). Drag the slider to determine the shape of the corners for the button, as shown below.
  • Add text to the button/icon, along with the formatting and styling options for the text.
  • Add Background color, body color, border color, and shadows to the button/icon.
  • Add links to the button. This section has the following options: URL, File, and Action.
  • Change the placement of the button.
  • Copy the button.
  • Delete the button.
• Icon: The icon element lets you add an icon to the landing page. You can style the icons and add actions to them as well. Drag and drop the button to the screen and click on it to get the edit options. You have the following with the button editor:
  • Choice of an icon: You can choose the icon you want to be displayed on the landing page. The default icon is the star .  You can choose the icon or outline you want to use by clicking on the star icon in the editor toolbar.
  • Color: You can choose the color of the icon by clicking on the color option in the editor toolbar.
  • Adding links to the icon. This section has the following options: URL, File, Action.
  • Styling and Effects: You can choose what effects should be shown for the button when the landing page is displayed and when the user scrolls the website.
  • Copy the icon.
  • Delete the icon.
• Spacer: The spacer element lets you add space between elements or simply add space to the notification.
• Map: The map element lets you add a map to the landing page. You can add an address, determine the zoom level, add color elements to the map (background color, border color, and shadow), adjust the width and height of the map, add effects and styling to it, copy it, and delete it.
• Form: The Form element lets you add a form using which you can collect inputs from the user. The default form comes with the following options:
  • Email
  • Option Selector - option 1, option 2
  • A text box where the user can type additional input.
  • You can move these elements back and forth as you wish using the icon.
  • For example, you can seek the user's permission to opt them in to receive SMS messages. The first field could be the message you wish to send to the user asking them for their permission to sign up to receive SMS messages from your brand. The second field could be Sign-up/Not Interested, and the third field could be the input field that captures the user's phone number.
  • If you wish to capture a user's name, email ID, or mobile number, you can map the attribute from the input field.
    
• Line: The Line element adds a line to the landing page. You can choose the style for the line, its height, color, alignment, width, styling, and effects in the editor toolbar. You can also copy the line or delete it.

Media

This section contains the elements media elements that can be added to your landing page to make it appealing to the user. It contains the following elements:

Gallery: You can upload images to your landing page using the Gallery element. It lets you upload an image and add tags, filters, and masks to it. The following options are available as well:

• Color options for images: You can add overlays, borders, and shadows to images using the option in the image editor toolbar. 
• Image Links: You can add URL links, actions, and external CSS file options to specify what should happen when a user clicks on the image.
• Move image: You can move the image to either the left or right by clicking the option in the image editor toolbar. 
• Copy the icon.
• Delete.

Video: Using the Video element, you can upload videos to your landing page. You can upload a YouTube video, a Vimeo video, or a URL for a video. You can choose the cover image and settings for the player, add playback options, and add filters to the video. Custom videos (uploading a local file) are not supported.

Audio: You can upload audio to your landing page using the Audio element. You can choose the audio to be played when the landing page is displayed, the audio's appearance, the buttons for the audio, and whether the audio should be auto-played. You have the following options:

• Color options: You can add overlays, borders, and shadows to the audio using the option in the audio editor toolbar. 
• Styling and Effects: You can choose what effects should be shown for the audio when the landing page is displayed.
• Copy the icon.
• Delete.

Playlist: You can upload a playlist of videos to be played on the landing page. Set the order in which the videos will be played, whether they will play in a loop, and so on. You can add branding and control elements too for it.  You have the following options:

• Move: You can move these elements back and forth as you wish using the icon.
• Color options: You can add overlays, borders, and shadows to the audio using the option in the audio editor toolbar. 
• Styling and Effects: You can choose what effects should be shown for the audio when the landing page is displayed.
• Copy the icon.
• Delete.

Content

This section contains a few content elements (that are a combination of a few other elements) that can be used as is. The following options are available here:

• Icon Box: The icon box is a combination of text, buttons, and icons. You can customize each of these elements by clicking on them. For more information, refer to the sections about customizing these elements above.
• Embed: The embed element allows you to embed HTML in your landing page. You can paste your custom HTML by clicking the icon. You can also add color options, styling, effects, duplicate the element and delete it using the editor toolbar.
• Rating: The rating element allows you to show a static rating popup with stars or different icons. Using the rating element, you can display your app's rating on the pop-up. You can customize the icon to be used by clicking the icon. You get the following options:
  • Rating Scale: You can choose a scale of 0-5 or 0-10.
  • Style: You can choose a rating style to display to the users.
  • Label: You can specify whether the rating value should be displayed to the left or the right of the icons.
  • Spacing: You can specify the space between the rating and the value.
  • Rating: You can specify the default rating that is displayed. For example, you can show a five-star rating, as shown here:
  • Icons: You can specify the icon to be used for the rating, the icon size, and the rating.
• Alert: The alert element allows you to add a title and a description text in the popup. You can either enable or disable the close button and add color, alignment, and styling options to the element.
• Counter: The counter element allows you to display a counter on the web page. For example, you can use this option when the site loads. Click the icon to get the options to customize the counter - counter style, start and end time, the duration for the counter, prefix, suffix, and operator options for the counter. You can also customize the color, alignment, styling, and add effects to the element.
• Countdown: The countdown element allows you to display a countdown on the web page. For example, you can use this option for a flash sale, lightning deal, or timebound offer. Click the icon to customize the countdown options - timer style, edit the date, time, and timezone, and specify whether days, hours, minutes, and seconds should be shown. You can also add text, color options, styling, and effects for the element, along with aligning it.
• Progress: This option lets you add a static progress bar. Click the icon to get the options for the progress bar. You can specify the style, fill, and whether the title and percentage should be displayed here. You can also add text, color options, styling, and effects for the element, along with aligning it.
• Calendly: Calendly lets you add a widget to help the user select a date and time. This can be used to set up appointments and meetings. You can add your Calendly link by editing the link icon, as shown below.
• Carousel: You can add a carousel element to the popup. These are useful when promoting products, new launches, offers, and so on. A carousel element has text, images, and navigation icons to move the slides. You can customize each element in the carousel by clicking on it. Customize the carousel settings by clicking the icon. The following options are available: Autoplay, number of columns in a slide, spacing between columns, navigation icons, spacing of the navigation icons from the column elements, and so on. You can also add color options and styling, and effects to the carousel element in total, apart from the individual elements.
• Tabs: You can add tabs to the popup message using this option. You have the following available:
  • A tab element that has two tabs.
  • An icon in the first tab and a button in the second tab.
  • You can customize the tabs by clicking the icon. Options such as tab orientation, tab style, tab spacing, and activating the tab (on hover or on click) are available. You can also add an icon to each tab, edit the tab name, and move the tabs back and forth. You can also add color options, styling, and effects to the carousel element, apart from the individual elements.
• Accordion: You can add accordions to the popup message using this option. By default, two accordions are available. You can customize the accordion by clicking the icon. The following options are available: collapsible, accordion icon, spacing, and size. You can also add color options, styling, and effects to the carousel element, apart from the individual elements.
• Switcher: Switcher is similar to tabs. You can switch between two tabs using this option in a manner similar to that of a toggle. To customize the switcher element, click on the icon. You can style, add spacing between the options, and add icons. You can also add text, color, styling, and effects to the element.
• Table: You can add a table to the popup using this option. A table element is a combination of text and icon elements. You can customize the table by clicking the icon. The following options are available: display head, display sidebar, specify the number of rows and columns in the table, and specify the table width. You can add color options, styling, and effects for the table and customize the individual table elements.
• Timeline: You can add a timeline to the popup with this option. To customize the timeline element, click on the icon. The can change the orientation, style, titles, spacing, add icons, edit the border of the buttons, and so on. You can also customize the individual elements in the timeline by clicking on them. By default, the timeline element has two tabs and two callouts. The callouts contain an icon and a button each.