Introduction

Built especially for marketing and advertising purposes, a Landing Page is an independent web page. It is where a visitor lands after they click on a link in an email or ads or similar places on the web. 

Landing Pages and Builder

What is a Landing Page Builder?  

A Landing Page Builder is a powerful tool that will help in the creation of effective and attractive pages to increase your conversions. The best part is that it will make you independent since you will be able to create pages on the go.

How can we create Landing Pages?

To create Landing pages, you can either use a Drag & Drop Template or an HTML Uploader.

Landing page(Marketing page) We can only use widget however in Application Page we can use both Registration form and Widget.

When to use Drag & Drop Builder or HTML Uploader?

Drag and Drop

• Create a landing page without coding using a website builder or template.
• Ensure the landing page is responsive, adjusting to display correctly on both mobile and desktop devices.

HTML Uploader

• Use HTML, CSS, or JS to create a landing page.
• Create separate landing pages for mobile and desktop.
• Limit CSS files to a maximum of 5.
• Limit JS files to a maximum of 10.
• Ensure that the image folder does not exceed 5 MB in size.
• Ensure that the font folder does not exceed 5 MB in size.
• Remove any unnecessary code from JS and CSS files to avoid conflicts with the registration form code.
• Set the banner width to 1366px, while the height should adjust automatically based on the height of the registration form.

How to Build Landing (Marketing) Page?

Step 1: Enable Landing Page Domain

Option 1: Use an Existing Domain (meritto sub-domain or whitelisted college domain)

1. College slug is enabled by default (meritto sub-domain or whitelisted one).
2. The same domain can be used to create landing pages.
3. If this option is selected, then the format of the domain will be as follows
   • <domain>/lp/<path>
   • Since application pages are LIVE on this same domain, "lp" will be added between the domain & path for landing pages to differentiate between a landing page & an application page.

Option 2: Add a New Whitelisted College Domain/Subdomain

1. College can add additional whitelisted domain/subdomain.
2. On this domain, only marketing pages can be hosted.
3. The format of this domain will be: <domain>/<path>.
   

The process to Enable a New Domain

Domain Whitelisting Process

1. Select a domain.
2. Complete CNAME mapping at the college's end.
3. Send an email to the Tech team to complete the whitelisting process.

Enabling New Domain

1. Go to the "Manage Institute" configuration.
2. Search for the college for which the new domain needs to be added.
3. Click on the Action button and select the Configuration option.
4. Scroll Down and go to "Domains for Marketing Landing Pages”.
5. Add a new domain and click on Save.

Step 2: Go to the Template Manager and Click on Manage Landing Page.

Step 3: Click on "Create Template" to start creating a Landing Page.

Step 4: Select which Landing Page "Template Editor" is to be used. The Drag & Drop Template Editor will be pre-selected by default.

Step 5: Click on the Landing Page to start creating a Marketing Landing Page

Step 6: Start by entering basic information to craft the landing page. This is the first step in creating a landing page, and it involves providing all relevant details.

Field Name	Type	Description
Template Name	Mandatory	Template Name should always be unique
Add Tag	Non-Mandatory	Add relevant tags to categorize landing pages
URL (Select Domain)	Mandatory	Select the domain from the list of enabled ones
URL (path)	Mandatory	Enter the path name in this pattern: BTech/mech/enggPath should always be unique
Meta Head Attributes	Non-Mandatory	HTML metadata is data about the HTML document. Metadata is not displayed. Metadata is essentially formed using document title, scripts, styles, character set, and other meta information
Meta Title	Non-Mandatory	A meta title (also called title tag) is an element in the head section of an HTML document that defines the title of each page of a website
Meta Keywords	Non-Mandatory	Meta keywords are types of meta tags in the HTML source code of a webpage. They briefly describe the theme of a website’s content
Meta Description	Non-Mandatory	A meta description is a 160-character long snippet in HTML and gives a short summary of the content of a web page. Snippets of meta descriptions can be seen on search engine results page so as to give the readers an idea about what the web page has in store for them beforehand

Note: The URL should always be unique. After selecting the domain and entering the path, the usershould check the availability first.

Step 7: Select the Template from Gallery (Gallery View).

Option 1: Use Existing Pre-parked Templates

1. In pre-parked templates users have the following options:

   • College users can park a LIVE template specific to their college.
   • Meritto users can park a LIVE template enabled for all colleges.

2. Users can choose from the existing list of pre-parked templates to avoid creating a template from scratch.

3. There is no limit to pre-park templates.

Option 2: Create from Scratch

• To create a new template, users can choose a blank template and begin the creation process.

Note: Templates built using the Drag & Drop feature will only be visible in this gallery view. Templates made via HTML Uploader will not be visible here.

Step 8: Build Landing Page - Drag & Drop Editor

If you're using the Drag & Drop Editor to build a Landing Page, this is the final step in the creation process.

In this step, the user can finish building the landing page by dragging the elements from the left side and dropping on the right or making the respective changes in the components.

Guide - Drag & Drop Editor 

General Settings

Content Width

Typically, a landing page features a minimum width of 960-pixel which works on almost any computer monitor. The default content width is set at 500 pixels.

To make changes

• Click on Body
• Increase the content width.

Font Family

Select the font that has to be used through the landing page. This will help in bringing consistency in the font throughout the landing page.

To make changes

• Click on Body
• Go to Font Family
• Select the respective font. 

Note: You can select multiple fonts for multiple components of the landing page

Background Color

By default, the system takes grey as the background color. The user can select any color based on the landing page theme. The user can also opt for different background colors in different blocks.

To make changes

• Click on Body
• Go to Background color
• Select the one you’d prefer

 

Other Settings

Blocks

Block is nothing but a ROW. For creating every additional segment of the landing page, a block has to be added followed by the content segment addition. One block is already added by default. The user can opt from the list of custom blocks to select columns and dimensions as per their preference.

 

 

1. Add Row - A new row can either be added above or below the existing row (block).

2. Delete Row - Select the respective row and click on the delete icon which appears on the right-hand side bottom of the row

   
3. Duplicate Row - Select the respective row and click on the duplicate icon which appears on the right-hand bottom of the row next to delete the row icon. This feature majorly helps when you need to re-use an existing row again. This helps save time in the creation of the same layout again.
4. Drag Row - Every block can be moved above or below to re-position. This can be done by clicking on the respective row and then dragging the row to the desired place.
5. Row Properties - Different row properties can be used which include
   • Background-color
   • Background image
   • Padding

Background Color

Select background color and content background color for the entire block/row.

   

Background Image

This image will be the backdrop for the entire block to give a better look.

   

Note: This image is not mobile-responsive

 

Padding

To add space or make adjustments around the row/block, add padding on the top, right, left, or bottom

Columns 

Users can opt to add more than 1 column in one block (row) itself.

1. To add up to Four Columns:

   • The user will have to select the row first (by clicking on the block/row)

   • Row & Column properties will open on the right side

   • Users can just click on the number of columns and the respective columns will appear on the left side. 

 

1. To add more than Four Columns:
   • In the 'Column Properties Tab' click on the '+' icon
   • There is no limit to choosing the number of columns
2. Resize a Column
   • Column can resized as desired
   • Take the cursor between 2-row lines and then select & drag to resize
3. Delete a Column
   • In the 'Column Properties Tab' click on the '' icon
4. Column Properties : For a particular column, different properties can be used including
   • Background-color
   • Padding (all sides)
   • Border
5. Add Multiple Rows in the same Block: This option is only possible if

• • 2 or more columns are added in a block
  • Both column's heights are uneven

Example:

• While 2 or more columns are added, add an image in the 1st column and text in the second

• Add a row below the 2nd column (since the height is uneven for the text column), and add any content box from the right side (divider, image, text, html, video, etc)    

 

Button

It's the part of the landing page that the users need to click to take the action you want them to take.

1. Add Button- Drag the button icon from the 'Content' and drop it in the builder area

 

2. Convert button into Call To Action (CTA) - To convert a button into CTA

• Click on the Action Button block/row

• Action button settings would open on the right-hand side

3. Button Action - Clicking on this button would redirect the prospect to another page. To use this, add the URL or link and select if the new page has to be opened in the same tab or a new tab

4. Colors Settings - Multiple settings can be changed in the button which includes text color change, background color of the block, hover text, and hover background color.

   

 

5. Button Size - Button Size or width can be changed using this feature

 

 

6. Button Alignment - Button alignment can be done in 3 ways: Left, Center, and Right

 

     

7. Line Height - Increase the height of the button by increasing the %age

   

    

• Rounded Border - Give the border different shapes by increasing the rounded border. By default, the border is rectangle-shaped.

 

8. Border - Make the button more attractive by adding a border to it

• Border adjustment can be done on all sides

• Three varieties of borders can be done - Solid, dotted, or dashed

 

   

  

Divider

To separate different blocks or different content, use a divider. To use this feature, select divider from the right-hand side and drop it where the divider has to be added.

HTML

1. When to use this

• If you want to add some special effects or want to make major UI adjustments.

• If you already have some html code ready.

• If you want to add some extra features using HTML which are not part of drag & drop template.

2. To use this feature, add it to any columns or block by selecting it from the right-hand side and dropping it on the left-hand area   

 

3. Write HTML: Click on the column where the HTML content box was dropped. On click a window will open on the right side where html can be pasted or written.

    By default "Hello World" appears in the html container.

Image

This is one of the most used features of drag & drop templates. There are 3 elements of this feature:

1. Upload Images from one's system

2. Use builder images

3. Apply Effects & More

• Upload Images from one's personal system:  

• Select Image content box from right side and drop it in any column(s) wherever image has to be placed

• On click of Image in the builder area, image settings would open

• Click on 'upload image' and a window would open from where user can select the file name of the image which has to be uploaded

 

• Image will be uploaded and in Image URL field - link would appear where this image would be hosted
• Other Actions or Settings along with this uploaded image:
  • Auto Width - Image width can be adjusted
  • Align - Image alignment can be done - left, center or right
  • Image can be made clickable by adding the redirect link
  • Container Padding can be given

 

Use Builder Images

• This is an add-on feature where millions of images have been pre loaded in the builder and are licensed
• User will have to search for the right keyword based on which image set will appear in search results and the same can be used in landing page
• To use this feature, firstly select images block

• Enter keywords which best describe the image and the respective results would appear in the same window

 

 

• Drag & Drop Template in respective column

   

• Image will be uploaded, and in the Image URL field, a link will appear where this image will be hosted.

Other actions or settings for the uploaded image:

• Auto Width: Image width can be adjusted.
• Align: Image alignment can be set to left, center, or right.
• Clickable Image: The image can be made clickable by adding a redirect link.
• Container Padding: Padding can be applied to the image container.
• Apply Effects & More - For any image which has been uploaded, users can apply for an effect to make it attractive

How to use this?

• Click on the Image which has been uploaded.
• On click, upload image window will open, there one more button will be available i.e. "Apply Effects & More".
• Click on Apply Effects & more button and a new window would open.

Users can apply the following effects on the image:

• Resize Image (Width & Height)
• Crop
• Transform or Rotate image
• Draw something over image
• Insert Multiple texts over image
• Insert different shapes over the image
• Add Stickers
• Add Frames
• Corners
• Background Color
• Many more features

Note: Please make sure to Apply and Save after making a change in the image.

 

9. Text Content Panel - This is again one of the most used features of Drag & Drop Template.

How to use this?

• Drag & Drop 'Text' box. By default text would appear
• Users will have to remove this text and then proceed with adding more text

 

The following features can be accessed with this text block

• Font Family
• Font size
• Font Style
• Font Alignment
• List (Bullet or Numbered)
• Font Text Color
• Font Background color
• Insert or Remove Link 

 

Other features which will be available on the right hand side panel are

• Text Colour
• Text Alignment
• Line Height
• Links - Inherit body styles (Hover color, hover underline, link color, etc)
• Container Padding

    

10. Adding Tokens or Widget

1. Widget - This is one of the advanced features we use in the drag-and-drop template. Existing widgets running in different places to capture leads can be used here.

   To enable a widget:

• Drag and drop a text content panel into one of the columns.
• Single-click on the content column to make a pop-up appear.
• Click on Widgets. All active widgets for the college will be listed.
• Select the widget you want to enable on the landing page

 

 

• Alternatively one can use {{RegistrationForm}} to add Registration Tokens and similarly, {{widgetID}} for widget.

 

2. Token - Tokens are generally used to make some personalized communication. Additionally it can be used to add all college details (address, email, logo, etc). To add a token:

• User will have to drag & drop a text content panel in one of the columns.
• On the single click of the content column, a pop up will appear.
• All tokens of the college would appear below the widget list.
• Select the token which needs to be enabled on landing page.
• Video - With this feature, video can be enabled and played on LP. To enable a video:

1. Drag & Drop video content panel

   

 

2. Linking Video - Click on the video in the drag area, a window will open, enter the video URL link

3. Add Container Padding on all sides to give proper look and feel of video

 

12. TAB Creation Tool - With this tool, create TAB structure and reflect different data in all tabs. Steps to create TAB are as follows:

1. Drag & Drop TAB icon

   

 

2. On a Click of TAB, a window would open on right side where TAB structure and content can be defined

3. TAB can be created Horizontally or vertically

4. To add content in 1st TAB, click on Add TAB and then add relevant content for the 1st TAB

5. Add TAB - Add the next TAB to add next tab added 

   

 

6. No. of TABs - There is no limit of adding TABs

7. Additional Features

• HTML Tool - The content box is exactly like an HTML box where HTML code can be added or plain text also be added
• Header Colour
• Header Text Alignment - Left, Right or Center alignments are possible
• TAB width - TAB width needs adjustment majorly when more than 3 TABs are added and secondly while Horizontal placement is being used
• TAB button Background color & TAB background color
• TAB Active Color
• TAB Active Background color
• TAB Hover color
• Content Alignment - Left, Right, Center

8. Container Padding - All sides

12. Menu- With this tool, create Menu structure and reflect different data in all Menus. Steps to create Menu are as follows:

1. Drag & Drop Menu icon

 

 

2. On a Click of Menu, a window would open on right side where Menu structure and content can be defined

 

3. To add content in 1st Menu, click on Add New Item and then add relevant content for the 1st Menu

4. Add Menu - Add the Add New Item to add next Menu

   

 

6. No. of Menus - There is no limit of adding Menus

7. Additional Features

• Header Text Alignment - Left, Right or Center alignments are possible
• Menu Active Color
• Menu Active Background color
• Menu Hover color

8. Content Alignment - Left, Right, Center

9. Container Padding - All sides

13. Image & Text Tool - This feature helps in adding text on top of an image. Steps to use this feature are as follows:

1. Drag and drop the Image & Text tool into a column.
2. Click on this tool, and a window will open on the right side.
3. First, upload the image.
4. Add text in the text field.
5. The width can also be adjusted as needed.

   

 

4. Text Container Setting - These settings include:

• Help in text box alignment/position
• Text alignment inside the box
• Box padding
• Box border
• Box Background color
• Box Height

 

14. Hide a block or row on Mobile or Desktop

• If a block has been created for the desktop version, it can be hidden from mobile and vice versa.
• To hide a block from mobile, click on the respective column, and a window will appear on the right side.
• Scroll down to the bottom.
• Enable the button to hide the block from mobile.

    

15. Do not Stack: Enabling this helps to arrange elements side by side or Horizontally instead of stacking them vertically on mobile devices.

 

 

Once the Application page has been created we proceed towards 'Thankyou Page'. (Not in the case of Landing Page)