Skip to main content

Landing Page(Drag & Drop Template)

NoPaperForms
  • Updated

What is a Landing Page(LP)?

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.

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 drag & drop template or HTML uploader.

 

When to use Drag & Drop Builder or HTML Uploader

 

Drag & Drop Builder

HTML Uploader

Create Landing Page without the use of any codes (HTML, CSS, JS)

Use HTML, CSS or JS to create LP

Create responsive (mobile or desktop) LP

Create Mobile or Desktop different LP

 

Steps to Build Landing (Marketing) Page

 

Step 1: Enable Landing Page Domain

There are 2 options:

  1. Use existing domain (nopaperforms subdomain or whitelisted college domain)
  2. Add new whitelisted college domain/subdomain

 

Option 1: Use existing domain

1.a College slug is enabled by default (nopaperforms sub-domain or whitelisted one)

1.b The same domain can be used to create landing pages

1.c If this option is selected, then the format of domain will be as follows

  • <domain>/lp/<path>
  • Since application pages are LIVE on this same domain, "lp" will be added between domain & path for landing pages to differentiate between a landing page & an application page

 

Option 2: Add new whitelisted college domain/subdomain

2.1 College can add additional whitelisted domain/subdomain

2.2 On this domain, only marketing pages can be hosted

2.3 The format of this domain will be: <domain>/<path>

  • The process to enable new domain? (option 2)
  • Complete domain whitelisting process
  • Select a domain
  • Complete CNAME mapping at college end
  • Send email to Tech team to complete whitelisting process
  • Enabling new domain
  • Go to "Manage Institute" configuration

  • Search the college for whom new domain has to be added

  • Click on Action button and select Configuration option

 

 

  • Scroll Down and go to "Domains for Marketing Landing Pages”

 

 

  • Add 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 Landing Page

 

 

Step 4: Select which LP "Template Editor" is to be used

 

  • Drag & Drop Template Editor will be shown as selected by default

 

 

 

 

 

 

 

 

 

 

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

 

 

 

Step 6: Fill Basic Information to create a landing page

Filling Basic Information is the 1st step in the journey of actually creating a landing page. All relevant details have to be filled before creation.

 

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/engg

Path 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 user should check the availability first.

 

Step 7: Select template from Gallery (Gallery View)

 

 

There are 2 options:

  1. Use existing pre-parked templates
  2. Use the blank template to create a template from scratch

 

Option 1: Use existing pre-parked templates

  • In pre-parked templates, either a
  • College user can park a LIVE template (specific to their college) or
  • NPF user can park a LIVE template (which will be enabled for all colleges)
  • Users can select from the existing list of pre-parked templates to avoid the creation of a template from scratch
  • There is no limit to pre-park templates

 

Option 2: Use the blank template to create a template from scratch

  • For the creation of a new template, the user can select a blank template and start creating the template

 

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 are building a Landing Page via Drag & Drop Editor, this is the last step in the creation process.

 

 

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

 

Guide - Drag & Drop Editor 

 

General Settings

  1. 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 and increase the content width.

  

 

  1. 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 and go to Font Family and select the respective font.

  

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

 

  1. 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 and go to Background color and select the one you’d prefer.

  

Other Settings

  1. 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. 1 block is already added by default. The user can opt to select from the list of custom blocks to select columns and dimensions as per the preference.

  

 

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

    

 

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

    

 

  1. 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 in saving time in creation of same layout again

    

 

 

  1. Drag Row - Every block can be moved above or below to re-position. This can be done by clicking on respective row and then dragging the row to the desired place

  

  1. Row Properties - Different row properties can be used which includes
  • padding (all sides)
  • background color
  • background image

    

  1. ROW Properties -  Different row properties can be used which includes
  1. Background Color - Select background color and content background color for the entire block/row

    

 

  1. Background Image - This image will be the backdrop for the entire block to give a better look

    Note: This image is not mobile responsive

    

 

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

    

  1. Columns - Users can opt to add more than 1 column in one block (row) itself.
  1. To add up to 4 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 4 columns:
  • In 'Column Properties Tab' click on the '+' icon
  • There is no limit to choosing the number of columns

    

 

  1. Resize a Column
  • Column can resized as desired
  • Take the cursor between 2 row lines and then select & drag to resize

    

 

  1. Column Properties
  • For a particular column, different properties can be used including
  • background color
  • Padding (all sides)
  • Border

    

    

  1. Add multiple rows in the same block - this option is only possible if:
  1. 2 or more columns are added in a block
  2. Both columns height 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 text column), and add any content box from the right side (divider, image, text, html, video, etc)

    

  1. Button - It's the part of the landing page that the users need to click in order 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

  

 

  1. 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

 

  1. 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 open in the same tab or new tab

  

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

    

 

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

    

 

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

 

    

     

  1. 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.

 

 

  1. Border - Make the button more attractive by adding a border to it
  • Border adjustment can be done on all sides
  • Three variety of borders can be done - Solid, dotted or dashed

 

    

  

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

 

  1. HTML - 
  1. When to use this
  • If you want to add some special effects or want to make major 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

 

  1. 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  

  

 

 

  1. 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.

  

  1. 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 personal 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 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

 

 

 

 

 

  • Apply Effects & More - For any image which has been uploaded, users can apply for an effect to make it attractive
  • How to use
  • 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

 

  1. 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

    

  1. Adding Tokens or Widget
  1. Widget - This is one of the advanced features that we are using in the drag & drop template. Existing set of widgets which are running in different places to capture leads can be used here
  • To enable a widget, 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
  • Click on Widgets - All the active widgets for the college would appear here
  • Select the widget which users want to enable on landing page

    

 

  1. 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

 

  1. Video - With this feature, video can be enabled and played on LP. To enable a video:
  1. Drag & Drop video content panel

    

 

  1. Linking Video - Click on the video in the drag area, a window will open, enter the video URL link
  2. Add container padding on all sides to give proper look and feel of video

 

  1. 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

    

 

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

 

  1. TAB can be created Horizontally or vertically

    

 

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

    

 

  1. Add TAB - Add the next TAB to add next tab

    

 

  1. No. of TABs - There is no limit of adding TABs
  2. 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

 

  1. Content Alignment - Left, Right, Center
  2. Container Padding - All sides

 

 

 

 

  1. Image & Text Tool - This feature helps in adding text on top of an image. Steps to use this feature are as follows:
  1. Drag & Drop Image & Text tool in a column
  2. On the click of this tool, a window will open on the right side
  3. Firstly, the image has to be uploaded & In the text field text has to be added. Width can also be adjusted

    

 

  1. 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

 

  1. Hide a block or row on Mobile or Desktop
  • If a block has been created for desktop version, then it can be hidden from mobile & 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