Video Tutorials

In addition to this written tutorial, we’ve also created a Tutorial Video to assist you in building your Landing Page. This video shows a brief how-to on how to complete each section of your Landing Page. Meant to be used in conjunction with this written tutorial, they should provide you with a comprehensive, step-by-step walkthrough of the Landing Page builder.

View the video by clicking the corresponding section in the list below, or click the title of the section from the document.

How To Find Your Landing Page Builder

Your first step to building your new Landing Page will be to login to the CRM. If you need help logging in, you can view our Knowledge Base article here.

Once you’ve logged into the CRM, you’ll choose the “Web Site Manager” in the menu bar. This will show a list of ways to manage your website, but what you’re looking for will be the “Landing Pages Builder” link. Click that option and you’ll be sent to the Landing Page index page.

From here you’ll have the option to create a new page, edit or delete an existing page, or view a preview or published version of your Landing Page.

Settings

What you’ll need to complete this section:

A Logo

An image with a height of approximately 200px is ideal

Title/Header

The Title/Header section is, for all intents and purposes, the name of your Landing Page. This will be the first content that will greet your visitors when they arrive.

The Title/Header section of the CRM adds text to 2 places on the Landing Page.

The first will appear on the main page image just below the logo and above the 2 buttons. See Example.
The second will appear in the footer of the Landing Page below the logo and above the Social Media buttons. See Example.

Route

The Route will complete the URL you will use for your Landing Page.

Your domain will be formatted as https://97display.com/”ROUTE”

See Example.

ATTENTION: Once you’ve saved your route, you will not be able to edit! Be sure before you save your Route.

Upload Logo

Your logo will appear with the Header of your Landing Page and can be a specific logo for whatever your Landing Page is promoting or can be consistent with your current business.

When you upload your logo into the Landing Page Builder, it will populate in 2 places on your Landing page.

The first appearance will be on the main image above the Title/Header. It will be the centerpiece of your Landing Page’s main fold. See Example.
The second appearance will be in the footer just above the Title/Header. See Example.

ATTENTION: While the size of your logo will depend on several factors, a good rule of thumb is to keep the height of your logo around 200px.

Sign Up Button Text & Sign Up URL

WIth the “Sign Up Button Text” you’ll be able to customize the text you want on your first button and with the “Sign Up URL” you’ll be able to send your visitors to a URL of your choosing.

Sign Up Button Text

The experts here at 97 Display recommend a simple and consistent call to action on your Landing Page. For example, if your “Sign Up Button Text” reads “Sign Up!” you would want that as your “Form Header” and even possibly your “Form Button Text”.

Sign Up Button URL

While you have the option to link your “Sign Up Button” anywhere you’d like, we recommend you keep them on the page and give them easy access to submit their information right on the page. If you leave the “Sign Up Button URL” field blank, a lead form will pop up when this button is pushed.

If you do choose to link out from this button, your URL should be formatted as:

http://yourdomain.com/

Learn More Button Text & Learn More Button URL

WIth the “Learn Button Text” you’ll be able to customize the text you want on your second button and with the “Learn More URL” you’ll be able to send your visitors to a URL of your choosing.

Learn More Button Text

You’ve already given your visitors one call to action on your “Sign Up Button”, how about giving them the option to explore more? With call to actions like “Learn More!”, “See More!”, “See Our Results!” “View Our Offer!” you can pique the interest of curious visitors.

Learn More Button URL

Again, you have the option to link your “Learn More Button” anywhere you’d like, but again we recommend them staying on your Landing Page so they can take in all the interesting content you’ve given them.

The “Learn More Button URL” gives you the option to link to anywhere on your Landing Page. To do so just add the hashtag of whatever section you’d like them to see into the “Learn More Button URL” field. The section names are on the sidebar of the your Landing Page Builder, but here’s a list for you:

#about
#testimonials
#instagram
#photogallery
#offer
#video
#calltoaction
#slogan
#slogan2

Simply add the corresponding hashtag of the section you’d like your visitor to see to your “Learn More Button URL” field!

If you do choose to link out from this button, your URL should be formatted as:

http://yourdomain.com/

Privacy Policy/Legal URL

If you have any Legal information or a Privacy Policy specific for your Landing Page content you’d like included, that link can go into the “Privacy Policy/Legal URL” field. If nothing is added, the default Privacy Policy will be used.

If you do choose to link out from this button, your URL should be formatted as:

http://yourdomain.com/

Scripts & Tags

The Scripts & Tags Fields of your Landing Page allow you to add code and tags to backend of your site to integrate with one of our many partners.

BE CAREFUL: Adding code to your website can have unintended effects. We've done our best to outline uses below, but if you have any reservation about what you are adding to your Landing Page, please reach out to 97 Display support.

Header Scripts

The Header Scripts field will add code to the header of the code of your website. Some examples of code that can be used in your header include:

Google Analytics Code
- If you're Google Analytics code was set up by 97 Display, please contact 97 Display Support (support@97display.com) to retrieve your Analytics code
- If you have your own Google Analytics set up, you will be able to receive your code through your Google account
Facebook Pixel
- If you are running Facebook Ads with 97 Display, please contact your Ads Specialist to add your Facebook Pixel to your Landing Page.
- If you are running your own Facebook Ads OR another agency is running your ads, you'll be able to find your Facebook Pixel in your Ads Manager

Bottom Scripts

The Bottom Scripts will add code to the bottom of the code of your website. Some examples of code that can be used in your bottom include:

Google Remarketing Code

Body Scripts

The Body Scripts will add code to the body of the code of your website. Some examples of code that can be used in your body include:

Google Tag Manager

Lead Tags

Some of our API integrations (integrations that allow us to send lead information form your 97 Display website or Landing Page directly into another management software) allow the tagging of leads to push lead info into different funnels.

Current Integrations that allow lead tagging include:

Active Campaign
- To tag your leads in your Active Campaign account, find the tag number of the list you'd like your Landing Page leads to drop into. Add that number to the "Lead Tag for Integrations" field
Spark
- To tag your leads in your Spark account, find the name of the list you'd like your Landing Page leads to drop into. Add that List Name to the "Lead Tag for Integrations" field
InfusionSoft
- To tag your leads in your InfusionSoft account, find the tag number of the list you'd like your Landing Page leads to drop into. Add that number to the "Lead Tag for Integrations" field
Rainmaker
- To tag your leads in your Rainmaker account, find the name of the list you'd like your Landing Page leads to drop into. Add that List Name to the "Lead Tag for Integrations" field

Misc.

The Miscellaneous section on the Landing Page Builder gives you some added information that you can add to your landing page.

What you’ll need to complete this section:

A Footer Background Image

An image with a 30:9 (300x90px) ratio is ideal

A color you’d like to use for your buttons

You can choose from the color chooser, or you can use a hex code

SEO - Title Tag & SEO - Meta Description

Search Engine Optimization (SEO) is a way of optimizing your page or website for search engines. SEO is incredibly important and beneficial in regards to your website. When people are searching for your services in your area, you want them to find you!

When it comes to Landing Pages, they aren’t as important. Landing Pages can be used for many different purposes, but primarily they are used as a Landing spot for ads or some kind of outbound marketing effort and not dependent on inbound leads finding your page organically.

But of course, we want to give you all the options we can to create your Landing Page, so in the Builder you have the option to add SEO tags to your Landing Page.

SEO - Title Tag

The Title Tag of your Landing Page is read in the code when a search engine crawls your site, and also will appear in the tab of your page on some web browsers.

To fully optimize your Title Tags, you want to include relevant keywords. Title Tags should be short and close to a direct search match. This is a good format to follow:

@Location @Service - @BusinessName

For example, if 97 Display was promoting a Martial Arts class and is located in Winston-Salem, NC your Title Tag may look like:

Winston-Salem, NC Martial Arts classes - 97 Display

SEO - Meta Description

The Meta Description is similar in that you want to use relevant keywords that will be used when people are looking for your services. But here you can be more verbose and explain a little bit more about what to expect from this page.

Again you should include your location and the services you are providing, but now you can add the benefits clients who use your services are likely to receive as well as a call to action.

Upload Footer Background

The Footer of your website is the banner at the very bottom of the page.

See Example.

This image can be anything you want from a solid colored background, to a cool design, or even a picture of your facility, staff or clients. But be careful! These Landing Pages are responsive, meaning depending on the screen size, the image may look and format differently.

The recommended ratio for the “Footer Background” image is 30:9. For example, an image 300x90 will look best on most screens. Of course, we have the preview option for just this kind of thing. If the image looks weird or not how you want it, reformat and try again!

ATTENTION: Your Logo and some white text will be on top of this image. Be sure you choose an image that is going to allow for those colors to pop.

Buttons Color

There are 4 buttons on your Landing Page:

Here is your chance to change the color of the buttons to match the aesthetic of your website.

Click into the field and you can use the color selector to find a color of your liking, or if you have the HEX code of the color you’re looking for, you can add it directly to the field.

Header Image

What you’ll need to complete this section:

Header image

A ratio of 18:9 (1800x900px) is ideal

The Header Image is the large image in the background of the first fold of your website. This is your chance to really spice up the first fold of your Landing Page. Here you can upload any image to populate in the background of your form.

See Example.

The recommended ratio for the Header image is 18:9. For example, an image 1800x900px will look best on most screens. Of course, we have the preview option for just this kind of thing. If the image looks weird or not how you want it, reformat and try again!

ATTENTION: text, buttons, and logos will be on top of this image. Be sure you choose an image that is going to allow for those colors to pop.

Form Settings

What you’ll need to complete this section:

Form Background Image

A ratio of 4:3 (400x300px) is ideal

The Form Settings section of the Landing Page Builder allows you to customize your Lead Form and gather the information that you need.

Lead Form Heading

The “Lead Form Heading” field will populate at the very top of your Lead Form. This should be an eye-catching, direct and consistent call to action.

Headings such as “Request More Information!”, “Learn More!” or some kind of offer are just a few great choices to use as the Lead Form Heading.

Form SubHeader

The “Form SubHeader” field will populate the text just underneath your “Lead Form Heading” and above the actual form. Adding content here isn’t absolutely necessary, but it’s another chance to lure your visitors into submitting their information.

What are the benefits of filling out this form? What will they get out of it? This is a perfect place to let your visitors know what they are about to receive.

Form Button Text

The “Form Button Text” allows you to add another call to action on the button that will submit their information. Again, we recommend you be consistent and convincing with this call to action.

Comment Prompt (only for enabled comment box)

First things first.

Are you adding a comment box to your lead form? If not, you don’t need to worry about adding anything to this field.

If you are, this is where you will add the prompt explaining to your visitors what information you want from them.

Whether you’re curious why they are interested in your services, asking their goals, or figuring out their experience level, this is your chance to learn more about your new lead.

Custom Thank You page URL

If you leave this form blank, visitors who submit their information on your Landing Page will go to the default Thank You page.

But, if you have a specific Landing Page or a specific URL you’d like those who submit their information to go, you can enter that URL in this field.

If you do choose to link to a custom Thank You Page URL, your URL should be formatted as:

http://yourdomain.com/

Upload Form Background

Here’s another chance to add to the aesthetic of your site. Here you can upload any image to populate in the background of your form.

See Example.

The recommended ratio for the “Form Background” image is 4:3. For example, an image 400x300 will look best on most screens. Of course, we have the preview option for just this kind of thing. If the image looks weird or not how you want it, reformat and try again!

Warning, the text and form fields are white and light shades. Be sure you choose an image that is going to allow for those colors to pop.

Form Colors

Your Landing Page Builder allows you to customize the colors of your form to match the aesthetic of your Landing Page.

To customize the colors, you can either click into the empty field for the corresponding form and choose the color of your like, or, if you have a hex code, you can paste the hex code of your color into the field.

If you leave these fields blank, your default form will have a black background with white text.

Side Form

The Side Form will be the standard form on your site. The form is positioned next to the About Section. Be sure you are choosing colors that will show up clearly on the Form Background Image you chose.

See Example.

PopUp Form

The PopUp Form will be the form that appears if you leave your Sign Up Buttons blank. This form will show up in a shadow box, so be sure to pick colors that will show up well against the dark gray shadow box background.

See Example.

Report Form

The Report Form will be form that appears if a visitor clicks the button on the Offer section of your form. This form will show up in a shadow box, so be sure to pick colors that will show up well against the dark gray shadow box background.

See Example.

Form Options

Our Form Options give you several options for different fields to add to your Landing Page Form.

Enable Location Dropdown

Do you have multiple locations you are offering your services in? Toggle this option on to add a dropdown box of your locations listed on your form.

Enable Programs Dropdown

Are you offering multiple services on your Landing Page? Toggle this option on to add a dropdown of each of those services.

Enable Gender Dropdown

Are your services and/or follow-up catered to your lead’s gender? Toggle on this option to add a gender dropdown to your form.

Enable Terms Toggle

Are you requiring your leads to accept terms of service before entering their information? Toggle on this option to require them to check a box accepting your terms of service.

Enable GDPR

Are you in the UK? Are you looking to add your leads into long term nurtures or contacting them on a regular basis?

Due to new UK Data Regulations (GDPR), you may need to get explicit consent from your leads to contact you. Toggle on this option to add explicit consent checkboxes to your form.

Enable Comment Box

Is there any additional information you want from your prospects? Toggle on this option to add a comment box to your form.

DON’T FORGET to ask the question in the “Comment Prompt” field.

About

The “About” section of your Landing Page is situated next to your on-page Lead Form. This is your chance to explain your services, sell your product, offer your expertise and call to action. Use this section to get your visitors excited about your Landing Page topic.

IF YOU ARE COPY AND PASTING - These fields do accept HTML, and copy and pasting may cause HTML issues. To circumvent any issues, before pasting click the button at the top left of the menu bar that looks like < >. Here you can paste your content without worrying about the HTML autoformatting.

About Heading

Grab the attention of your visitors with the “About Heading”. This will be in large text and will be the most eye-catching text on the screen as they scroll your Landing Page.

About Excerpt

The “About Excerpt” text will populate just below the “About Heading” and will be in slightly smaller, but still noticeable text. This area is best to give your visitors the most important, interesting, attention-grabbing information about what you’re offering.

Are you offering something extra? Do you have celebrity clients? Does your service offer mind-blowing results? This is your chance to let your visitors know.

About Content

Now that you’ve caught their eye with the “About Heading” and grabbed their attention with the “About Excerpt”, the “About Content” is where you can start your information dump. Everything you want your visitor’s to know about your service should be here.

From class times to instructor credentials, to expected results and facility specifications, anything and everything that makes your service special and the reasons they should be taking advantage of what you’re offering should go in the “About Content” section of your Landing Page.

Slogan

Add some eye-catching headers to your site with the “Slogan” options in your Landing Page Builder.

See Example.

Slogan Text

Your “Slogan 1 Text” will go just split “About” and “Form” section (above) from the “Testimonial” section (below) of your Landing Page. This section is a great place to spout the benefits of what you are offering. Show your audience what they will get when they sign up or submit their information on your Landing Page.

Slogan Color

Let your inner artist out by adding some nice color accents to your Landing page. This could match your “Button Colors” that you added in “Misc.” or add a secondary color to make your page stand out.

The “Slogan 1 Color” can be chosen using the color selector that pops up when you click into the field, or if you already have the hex code you want, just paste that right into the field.

Testimonials

What you’ll need to complete this section:

Testimonial Images

A ratio of 1:1 (100x100px) is ideal

Let your visitors see happy clients and the results they’ve received through your service with the Testimonial section of your Landing Page.

To get started, click the “Add Another Testimonial” button in this section. You can add as many testimonials to your Landing Page as you want. Each time you add a testimonial, you’ll just have to repeat this process.

Name

In the “Name” field you’ll enter the name of the person leaving the testimonial.

Subheader

In the “Subheader” field you’ll enter text that will populate just below the “Name” field.

Here is a good place to add the city and state of the testimonial, to put a job title, experience level, or a rating they they have left you such as “5 Star Review”.

Add Image

Testimonials are so much more effective when they are paired with an image of the person leaving it. Just click the “Add Image” button and upload an image to pair with the raving review.

Text…

Here’s where you’ll write or paste the review left.

Slogan 2

Like the “Slogan” section, “Slogan 2” creates a highly-effective banner splitting sections of your Landing Page. Unlike the “Slogan” section, “Slogan 2” adds a “Sign Up” button to add more action to your Landing Page.

See Example.

Slogan 2 Text

Your “Slogan 2 Text” will go just split “Testimonial” section (above) from the “Video” section (below) of your Landing Page. Because of the inclusion of the “Sign Up” button on this section, the “Slogan 2 Text” is a great place to add another call to action to try to get them to click on that button.

Slogan 2 Color

Match this color with your “Slogan 1” banner or create another accented color to add some more spice to your Landing Page. We recommend you don’t match this with your buttons though, as then your “Sign Up” button will blend into the background. Choose a color that is going to allow that button to POP!

The “Slogan 2 Color” can be chosen using the color selector that pops up when you click into the field, or if you already have the hex code you want, just paste that right into the field.

Sign Up Button Text

Change the text on your “Slogan 2” button with this field. Make sure you are using a call to action that is simple and direct!

Video

What you’ll need to complete this section:

Video in .mp4 format

A video size of less than 10mb is ideal.

Have a great video touting the benefits of your service and happy, satisfied clients? The “Video” section of your Landing Page is here to provide a Live-Action view of your service.

Upload Video .MP4

With this button you’ll be able to upload the video of your choice.

Here are some criteria to consider before uploading your video:

Make sure your video is a .MP4 file. This is the only file type supported by your Landing Page.
Make sure your video is 15MB or smaller in size. Video files larger than this will cause some serious loading problems on your Landing Page.
Your video will pop up in a shadow box and will have sound. Make sure your video is produced with sound.

Video Heading

The “Video Heading” section will appear next to the video on your Landing Page. It will be a large font so make sure you are using eye-catching copy to draw your audience in.

Video text…

Just under your “Video Heading” will be your “Video text…”. This is another opportunity to sale your offer/product/service to your Landing Page visitors. You can also use this space to explain the video, introduce context, or create a narrative that will appeal to your avatar clients. Remember, stay on message and give them a strong call to action.

Social Media

Linking your Social Media accounts to your Landing Page is a great way to give great content to your visitors and give yourself more chances to convert.

The Social Media section is very straightforward. Simply copy the URL for some or all of the Social Media accounts listed and paste them into the corresponding fields.

When you do so, the logo for the Social Media accounts you’ve added will populate in the footer of your Landing Page.

See Example.

Photo Gallery

What you’ll need to complete this section:

Images

Any ratio image is ok.

Introduce your visitors to your facilities and activities with the Photo Gallery section of your Landing Page.

To get started, click the “Add A Photo” button in this section. You can add as many images to your Landing Page as you want. Each time you add an image, you’ll just have to repeat this process.

See Example.

Upload Gallery Image

The “Upload Gallery Image” button is what you use to add an image to your gallery. Just click this button and upload and image of your choosing from your computer or the internet

Image Title

Give your image a name by adding text to the “Image Title” field.

Lead Magnet

What you’ll need to complete this section:

Background Image

A ratio of 21:9 (2100x900px) is ideal

Image

A ratio of 1:1 or 2:3 is ideal

Giving away a free ebook or some other incentive for your visitors inputting their information? Trying to send your visitors to a checkout page either through 97 Display or a third party? Use the Lead Magnet section of your Landing Page to entice potential clients.

Lead Magnet Title

Give the Lead Magnet section of your Landing Page a catchy title. Entice your visitors with a consistent and strong call to action!

Just add text to this field to add a Lead Magnet Title to your Landing Page.

Lead Magnet SubTitle

Give a little more information in your SubTitle which will show just below your Lead Magnet Title. This is a great chance to explain what you’re offering with a catchy, attractive call to action.

Lead Magnet Button Text

Change the text on the button the visitor will use to submit their information here. This is your last chance to push them over the edge and get them to take advantage of your offer.

Lead Magnet text…

The Lead Magnet text… section is where you lay out what you’re offering in full. Make it can’t miss to get your visitors to convert.

Choose A Background Image

Start developing the aesthetics of the Offer section of your site with the a Background image.

Use an image that has a 21:9 ratio.

Choose an Image

Whether it’s the cover of the Free Report you’re offering or a glimpse at what they can expect when they take advantage of your offer, the Image on your Lead Magnet Image will be the focal part of your “Lead Image” section.

Use an image that is around 1:1 or 2:3 ratio.

Destination URL

One of two options for getting your visitors to learn more about your Offer is the "Report Destination URL" field.

If you add a URL to the "Report Destination URL" field, when the user clicks the button in the Offer Section, they will be redirected to the URL you added to the field.

The "Report Destination URL" is best used if you have an outside link you want to send your visitors. Appropriate outside links for this button include your 97 Display Online Offer Checkout link, or any other kind of product generator that accepts payment or registration.

Lead Offer URL

The other option for getting visitors to learn more/receive your Offer is the "Free Offer URL" field.

If you add a URL to the "Free Offer URL" field, when the user clicks the button in the Offer Section, a pop up lead form will show and the visitor will be asked to submit their lead information. Once the lead information is added to this lead form, the new lead will receive an email with the URL you added to the "Free Offer URL" field.

The "Free Offer URL" field is best used if you have a Free Report or some other kind of information or document you'd like to share with leads. This is the best option if you are offering some kind of nutrition or training plan in the form of a PDF, or if you are giving them useful information like a schedule.

Video Tutorials

How To Find Your Landing Page Builder

Title/Header

Route

Upload Logo

Sign Up Button Text & Sign Up URL

Sign Up Button URL

Learn More Button Text & Learn More Button URL

Learn More Button URL

Privacy Policy/Legal URL

Scripts & Tags

Header Scripts

Bottom Scripts

Body Scripts

Lead Tags

SEO - Title Tag & SEO - Meta Description

Upload Footer Background

Buttons Color

Custom Thank You page URL

Upload Form Background

Form Colors

Side Form

PopUp Form

Report Form

Form Options

Slogan Text

Slogan Color

Slogan 2 Text

Slogan 2 Color

Sign Up Button Text

Upload Gallery Image

Image Title

Destination URL

Lead Offer URL

Related articles