How To Create A Landing Page: The Basics


Landing Page Basics


If you want to scale up your business fast in this digital era, it's high time you invest in landing pages. Landing pages are an underrated sales and marketing tool, but really beneficial to businesses, especially, small to medium businesses.


If you are a business owner, you might want to consider using landing pages for your business apart from having your main website and using paid ads.


In this article, we will tackle the basics of a landing page, its meaning, and its benefits to small and medium business owners like you who want to thrive in this time of the pandemic.


What is a Landing Page?


For those who do not have an idea of what is a Landing page, a Landing Page is essentially a standalone web page mainly designed to convert visitors into leads.


Landing pages are designed to frame a content offer in a much more targeted way than your homepage on your main website.


The goal of a landing page is to engage the audience and convert them into qualified leads. 


You can think of landing pages as digital sales representatives who are gathering information about your potential customers, working for you 24 hours a day, 7 days a week.


How Does a Landing Page Work?


All landing pages use a form to gather information. Without a form, you won't be able to convert a website visitor into a lead on a landing page.


By using the information you gather from the form, you will be able to build and nurture relationships with your leads.


The typical landing page conversion path is as follows:


1. A visitor sees a Call-To-Action button (CTA) informing them of an interesting offer.


2. They click on the CTA which then directs them to the landing page without excess navigation so as not to distract users from completing the desired action.


3. The visitor is then asked to fill up the form with the necessary information.


4. After submitting the form, a user is then redirected to a “Thank You  Page” where they can download the offer or receive an email following up with the offer.


The “Thank You Page” which has a navigation menu will then act as an entryway back to the main website.


Things You Need in Creating a Landing Page


In creating a landing page, you should have the tools just like the platform to build your own landing page, image tools, and other secondary tools that can make the task easier.


We will discuss more the tools in the later part of the lessons.


What Makes a Good Landing Page?


A good landing page should have a headline, a copy, an image, and a form.


A Headline in the Above-The-Fold section is the first thing visitors will see when they “land” on a landing page.


A great headline sums up the offer as clearly and concisely as possible and answers the question, "What will visitors who convert on this page receive?"


A Copy is a text on a landing page that should explain the value of the offer clearly, simply, and in a compelling way.


Numbers, bullets, checkmarks can help break up long bodies of text. 


Images and visuals are also an important factors in a landing page as they supplement your message to the visitors.


The Form is also an important element on the page where visitors can submit their information in exchange for the offer, converting them into leads.


Why is a Landing Page Important? 


Landing pages are important for businesses because it helps them qualify leads which are already interested in their line of business. 


These people only need a little push through the copy, to entice them to take immediate action.


Through the information collected through the form on the landing page, you can build connections and nurture relationships with your leads.


Furthermore, landing pages have numerous benefits that any business can take advantage of.


Landing pages allow you to attract interested and genuine leads. It allows you to provide a personalized offer to interested prospects.


It enables you to build an email list of potential customers that you can further nurture at a later time and it definitely helps you generate sales conversions.


How To Create A Landing Page


To create your landing page, you have to be able to know the right layout to use, the free tools to save your time during the creation, add the different sections of the landing page, create the form to connect to the “Thank You” page, select the right images, and prepare the copy for the landing page before publishing.


Select The Right Landing Page Layout


In order to be successful in creating a Landing Page, the first thing that we really recommend is to do the Mockup Layout.


The Mockup Layout will help you understand how the landing page will look like. 


Once you understand the Mockup, you will then be able to know how much copy and images you will need in order to build your landing page.


There are two landing page layout options that you can choose from.


The first one is the layout that you are going to choose from the Hubspot.


This layout provides a starting point for you to create your landing page. You can simply edit the sections, texts, images, and other modules in it.


The second one is to use our own Mockup layout that you can seamlessly follow to get you started with your landing page.


This sample layout is perfect for those who really do not have an idea what to include on a landing page.


Here’s how you can quickly build the mockup of your landing page.


1. Log in to Hubspot.


2. Navigate to Marketing in the main menu.


3. Select Landing Pages.


This will take you to the landing page dashboard where you can view all your draft and published pages, create new pages, and edit existing ones.


4. Click Create on the upper-right corner to create a new page. You will then see a few templates that you can choose from. 


These templates provide a starting point for the layout and content of your page. But they are fully customizable.


5. Select a template and give your page a name. 


This name is for internal use only, so make it descriptive so that you and your team can tell which page it is at a glance.


6. After choosing a name, you hit the “Create page” button below. 


7. Next, you’ll be brought into the drag-and-drop page editor that you can use to create your mockup.


8. On the left-sidebar, you will see widgets that you can drag and drop anywhere on the interactive page editor on the right side.


On the interactive page editor, you will see different sections. These sections can be cloned, deleted, or changed in style.


In every section, there are columns and rows that you can adjust as well. In the center of the screen is the interactive page editor.


And that is how you can start creating your layout.


A good layout consists of:


1. Header and Footer

2. Benefits

3. Call-To-Action (CTA)

4. Social Proof

5. Trust-Building Section

6. Click Triggers


The Header should have a logo but no navigation.


The reason that there should be no navigation on the Header is to avoid any distractions so the customer will focus on your offer.


You can also put your phone number on the Header if required.


In the Footer, you can put a link to your homepage, privacy statement, shipping policy (if required or available), contact us, and social media icons (if relevant).


In the Above-the-Fold area which contains the headline, it is important to immediately grab the attention of the visitors.


Furthermore, the Above-the-Fold area should also have the Hero Image, a CTA either a form or buttons and a Copy or description that informs or entices a visitor to complete a form.


With regards to the CTA, you have to determine what is the desired action you want your prospects to do.


Will it be to visit your store, download an ebook, contact you or call to book a meeting?


If it is a store visit, I suggest you use a coupon to download to bring to the store to redeem.


If you are in the industry like you run a veterinary or a clinic where people often call, displaying the phone number is a good strategy.


Now, most online actions are done through mobile phones, thus, it would be helpful if the phone numbers are clickable to call.


In some cases, you might end up using the Call Now button and the form for the visitor to be able to request a Callback.


The Social Proof can be testimonials or customer reviews.


Your Trust-Building section can be statistics that support your message, case studies that highlight customers similar to your target audience, awards, and certifications.


Click Triggers are little statements you will add to the page to entice customers or overcome their doubts about your offer.


Click Triggers can be:


1. Money back guarantee, easy unsubscribe, a quote from a successful or happy customer

2. Blurb on “what to expect”

3. Price slashing

4. Privacy Policy


Select The Right Free Tools 


To get started with the Landing Page creation, it is essential to first prepare the tools needed.


Hubspot


Hubspot is a marketing platform that has various features and services including Landing Page creation. Its drag-and-drop Landing Page editor makes marketing efforts simple.


To start creating your landing page, sign up to Hubspot CRM Free.


ColorZilla 


ColorZilla is a Google Chrome and Mozilla extension that assists web developers and graphic designers with color-related and other tasks. 


ColorZilla allows getting a color reading from any point in the browser, quickly adjusting this color and pasting it into another program, such as Photoshop.


To install the ColorZilla extension on Chrome:


1. Go to Extensions.


2. Choose Manage extensions.


3. Click “Open Chrome Web Store” on the lower part corner of the page.


4. Type “ColorZilla” on the search box.


5. Click the “ColorZilla” from the results.


6. Click the “Add to Chrome” button.


7. Click the “Add extension” from the pop-up. It will then automatically install the extension to Chrome.


8. To pin ColorZilla on top of the browser, hit the “Extension” icon, then, choose “ColorZilla” from the options by clicking the pin icon.


ColorZilla will be useful once you change the colors of your landing page to mimic your main website.


WhatFont 


WhatFont is an application that allows you to get information about all the fonts on the webpage. It helps you identify fonts on a web page.


WhatFont is particularly useful when you want to know the fonts on your website or another website.


To install WhatFont, you just have to do the same process as what you did with ColorZilla.


Measure-it 


Measure-it is a useful tool when you want to know the width, height, or alignment of page elements.


Since Measure-it is still a Chrome extension, you can install it by doing the same process with ColorZilla.


Create the Header


Earlier in our lessons, we have discussed how you can create your mockup layout. To formally start designing our landing page layout, let us start with the Header and Footer.


To create the Header and Footer, we need to head back to Hubspot.com and log in.


Change The Logo


Login to Hubspot and go to Marketing in the main menu. Hover down to Landing Pages.


Click “Create” to create a new page and enter a name.


In case you just want to edit a newly created landing page, you just have to click its name. You will then be directed to the page editor.


Once inside the page editor, go to the header section and clone the first section.


Delete the unwanted modules in the header section and edit the logo. To change the logo, just click on the existing logo.


If you don't have the logo ready, you can go to your website, right-click on your logo and choose “Save as image”.


Another option to get your logo from your website is to right-click on any part of your website, then, choose Inspect. This option will open up the source code of the page.


Now, click on the arrow-up icon on top of the source code that says “Select an element in the page to inspect it”.


Click on your logo on the website, then, right-click its corresponding code and choose “Open in new tab”.


It will then open the image on another tab which you can save as an image and upload to Hubspot.


Once uploaded, click on the Image and hit replace. Then, click the image on the right-hand side that you want to put on your landing page. Finally, click Insert.


To change the style of the logo section, click Arrow and choose "style". You can then change the background or the spacing.


Add a Telephone Number


To add a telephone number in the header, just drag a textbox and drop it on the right side beside the logo, creating another column.


Delete the unnecessary texts and type in your phone number. Click the Edit in the expanded view to edit its size and reposition its location.


To convert the number into a clickable phone number, click on the Insert link and enter the command “tel:” followed by your phone number on the URL box. Then, click Insert.


Your phone number will then be a clickable link on a mobile phone.


Click the “Apply changes” button to save the changes made.


In this part, we won’t worry yet regarding the images and texts we will include. We will focus first on the structure so we have a clear idea of what type of information to include.


This could be time-consuming if you don’t really have an idea what to put on and might even disrupt your planning stage, but by creating the mock-up first, you will get a clearer view of your landing page, what it is and how it is.


Update Color Design and Font 


Now to change the color, you just have to click the widget you want to change the background color, click on Style, then Style Section.


Go to Background, then, choose Background type to Color and choose your preferred color. You can use the tool ColorZilla to have the same color as your website.


If you want to change the background, you just have to click on any section then do the same with what you did earlier for the color.


To edit the overall design of your page, click the Design tab at the top of the screen.


Here, you can make universal changes to different design elements on your page, such as fonts and button styles.


Create the Footer


Going down to the Footer, you can customize your social media pages.


You can drop a textbox right below the social media icons and you can modify the social media icons.


To edit the Textbox on the Footer, you just have to click it then, hit the Click the expanded view.


In the Footer, you can put your Company name, Contact, and Privacy Policy links. You can insert the link and also change the size and font.


Create the Headline


Following the layout that we have, to create the headline, we just have to clone the first section.

Once another section is created, you just have to add an image placeholder on the right side, then, two side-by-side buttons below the texts for the headline.


Create the Benefits Section


Now, to create the Benefits section, you just have to clone the previous section and delete the unwanted modules.


Now, place 3 image placeholders and 3 texts.


Create the Additional Information Section


Every landing page should not talk about their offer on their headline and on the Benefits section. Always choose to add another section to explain your offer further.


Again, to create a new section, you just have to clone previous sections you think have the same layout. Or you can go ahead and delete the unwanted objects and replace it with the needed object like maybe, still a Text and Image section together.


Create the Testimonial Section


The disadvantage of using the FREE Hubspot version is you don't have access to other widgets such as sliders.


To create your testimonial, you can go ahead and use the image and text pair, with the image on the left side.


To add more other sections, you really just have to clone a section, then edit or delete a module or object.


You just have to drag-and-drop and place them where you want 

them to be.


You can also opt to change the background color of each section to separate them from each other.


Create the Form


Now, time to create a form that we can link later to the CTA button on the headline.


To create a form, you can have text and form pairs. Just drag a form on the right side following the layout that we have. Just close another section and delete other objects.


Just make sure that you drag the form correctly so it will position in the intended place.


You can use the form as is or you can make a new form to have more fields.


To create a new form, you just have to click it and it will open its editor.


Change the form title then hover down and click the “Create new”.


You will then be routed to the Form Editor for you to select the fields that you want.


You can drag any fields that you think are necessary to gather the required information for your marketing strategies.


Now to put a label on the text fields, you just have to click the object, then, enter a label on the “Placeholder Text” portion for it to appear on the form when published.


You can set the textboxes to “required” to ensure that the visitors will enter the information. 


To change the label of the button, you just have to click it and change its caption.


Once done creating the form, click the “Update Form” button on the upper-right hand corner. It will then automatically bring you back to the Interactive Page Builder.


Once you have created a form for the first time, you don't have to create another form again. You just have to simply add the form to every landing page.


Link Form To Headline


Now, if you want to redirect the visitor to a form to gather information after clicking a button, all you have to do is use the Anchor Tag function.


To drive the visitor to the form, you have to link the button to the section that contains the form.


Go down to the textbox beside the form and click it.


Hit the “Edit the expanded view” button. Look for “Insert” and click “Anchor”. Enter the name of the anchor tag that you will use to connect to the CTA button on the headline.


Make sure that whatever name you use on the Textbox is the same name you will use on the button on the headline. Otherwise, the function will not work.


After setting the name, head back to the CTA button and change the URL by adding “#” before the word “form” on the images.


If you want a clickable CTA button that can immediately call a phone number right on the landing page, you can make it by still using the “tel: + phone number”  command just like what we did earlier with the phone number on the header.


So, that’s it! We have already completed our mockup.


The next thing you are going to do is to select the perfect images for our landing page, something that is relevant to our offer that can help entice the prospect to take immediate action and to prepare the copy to finalize your landing page.


Publishing the Landing Page


To publish a landing page, go to settings. Enter a page title and a content slug.


A content slug is just like a page title but words are separated with a dash between them.


Once they are completed, you can then hit the “Publish” button on the upper-right corner of the page.


Once you click Publish, it will give you a link that you can use to view your landing page.


When you view your landing page, the URL shows Hubspot Page Builder. That is because you are using the free version of the tool.


Also, if you scroll down on the Footer area, you will also see a little bit of advertisement as part of the Free version of Hubspot.


The moment that you move to one of the paid versions, it gives you access to lots of features and deletes the unwanted features available in the free version.