Community Manager

Weebly Tip of the Week: Create a Landing Page

Hello everyone, 

 

Do you remember the hit NBC show Wings, starring two plucky, antagonistic-yet-loving brothers Tim Daly and Steven Weber who run a small Nantucket airline? Well I do. I remember it well. Why, you may be asking yourself, is she bringing this amazing show up in a post about website building? Landing pages, my friends. [cue groans.]

 

Okay, so here’s the deal: Landing pages are a big deal. (Just like Thomas Hayden Church became a big deal after his stint on Wings.) Landing pages can help orient your visitors, increase engagement and give clear calls to action. These are especially key with cold traffic; that is, people coming to your site who don’t know you. If you’re doing any kind of advertising to get new people to your site, then you’ll need to help convince them to stay.

 

What should you do?

Create a welcoming space. You can achieve this by having a beautiful image that relates to your brand, and adding a headline and subheader that tell your visitors exactly what they will find. A good example of this comes from Montainer:

Screen_Shot_2016-10-26_at_1_58_25_PM 2.png

 

Add a Standard Page to your site, and make sure it has a Header.

Screen_Shot_2016-10-26_at_2_01_23_PM.png

Click in the header area of the page to Edit Background.

Screen Shot 2016-10-26 at 2.03.27 PM.pngAdd an image (or video or color) that is compelling and represents your site. Your new visitors will get a sense of your site from this image. (Read the HC article on Flexible Headers for detailed steps.)

 

Now add a Title element and create your headline. Be bold and evocative! Describe the site your visitor has landed on (ex: Your Backyard Container Home), or get at the point you want to make with your brand/products (ex: Fresh. Baked. Good.).

Screen_Shot_2016-10-26_at_2_12_29_PM.png

 

Add a Text element and give some further description on what your site is about, the products you offer or what your visitor will find.

Screen Shot 2016-10-26 at 2.13.52 PM.png

 

Now add a button or two with clear, concise text to direct your visitors to other pages on your site. These are your CTAs (or Calls to Action).

Screen_Shot_2016-10-26_at_2_17_00_PM.png

 

Tip: If you’re creating a special landing page, say to capture leads from an advertisement or an email, you can always hide that page in your navigation. It can be a nice little hack for seeing specific traffic from your marketing efforts.  

 

If you noticed, this is similar to my post on Creating 404 Pages. That's because landing pages are great and applicable for many situations where you want to welcome and direct visitors. Just like how Fay runs the ticket counter on Wings. (You didn't think I forgot about my Wings references did you?)

 

Show us your landing pages!

 

Riah

Content Producer & Community Specialist

7 REPLIES
Guardian

Re: Weebly Tip of the Week: Create a Landing Page

Oh Riah....I would love to make custom landing pages in Weebly to use in conjunction with Facebook advertising ect, except for the fact that there does not seem to be a way to hide the navigation menu on that page. (Or any page) When people arrive they get distracted by the menu buttons and click themselves away from the only button I want them to click on.  There should be only ONE call to action button on a special landing page, and it would say, either...

Subscribe now

or

Purchase now

Having only the one button compels your visitor to MAKE A DECISION! (To click, or not to click, that is the question!) (Also known as a Squeeze page, to "Squeeze" an action from the clicker)

Until Weebly fixes the "Hide-the-menu" issue, custom landing pages (In Weebly) will not be anything better than mediocre at best. people who are using landing pages for serious marketing or email sign up campaigns will still need to use some other site like Lead Pages.

 

But Riah, if you can persuade the other Weeblies to fix this, I would be stoked! And will send you a cute little stuffed toy mouse from our store as a thank you gift!

Kind regards  John

 

 

Explorer

Re: Weebly Tip of the Week: Create a Landing Page

John, I fully agree. Navigation is a distraction on landingpages. Turning navigation off would be a great tool. Otherwise we would be forced to create landingpages outside Weebly and that would be a pity.

Regards, Marco. 

Scholar

Re: Weebly Tip of the Week: Create a Landing Page

You can hide the pages from the navigation menu.

Go to the pages you want to hide and click Hide from menu

Explorer

Re: Weebly Tip of the Week: Create a Landing Page

I will not take weebly if I can't remove evrything from pages to make landing page.

Explorer

Re: Weebly Tip of the Week: Create a Landing Page

Explorer

Re: Weebly Tip of the Week: Create a Landing Page

Hi Weebly-iers, 

 

WARNING: This is a long read, but it will save you TONS of money if you need to create a landing page.

 

Here is a little tip for those of you that want to avoid paying for "high-end" pricing for landing page services.

 

In July 2018, after extensively (about two weeks worth) researching and looking over the benefits and costs of implementing a "professional" landing page solution for my marketing company, I noticed that (with the exception of MailChimp) the templates and some useful integrations, providers in this space, which include, LandingPages, Unbounce, Instapage, and many others, only offered a ready-to-go product for which they charged a very high price.

 

Sure if you are VERY bad at using software, then one of those providers will do "miracles" for you. However, if you are an abid Weebly user or have learned how to understand a LITTLE bit of code, then you can VERY easily use a service that you are already paying for (like Weebly) to create a landing page.

 

If you are an experienced marketer than you know how important it is for your audience to stay focus when arriving at a landing page, driving traffic to a page that looks like a website goes against this. Nonetheless, that difference between a landing page and a standard page on a website is the feel of it, which consist of the Navigation Bar, Header, and Footer.

 

So what I did to save myself a TON of money is remove these factors by using a super simple code in the page's Header and Footer section. FYI... This is the same section where you can place your tracking pixels too. I attached a test landing page and screenshot of how I did it. Depending on your Theme, you might need to adjust your code, but this should be minimal. It will also NOT affect your entire website, as you are doing this code addition to the "Standalone" page you designate to be the landing page.

 

1) First, log into your Weebly admin portal (the one you use to edit your site).

create a page.JPGClick the plus ( + ) sign to create a new page

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) Then choose the option 

standard page.JPGClick on "Standard Page"

3) Next, you'll need to do three steps:

A) Name Page - B) Click on "Hide in Navigation" - C) Choose the option "No Header" in the "Header Type" drop down.

do these three things.JPG1) Name Page - 2) Click on "Hide in Navigation" - 3) Choose the option "No Header" in the "Header Type" drop down.

4) After, click on the "SEO Settings" option.

SEO Settings.JPGClick on "SEO Settings"

5) Finally, you'll need to complete the steps below to create the actual landing page

  • Name Your Page (This is different than the first name you gave your page, the first one is to identify your page in the actual website, and this Page Name will show as the name of the tab in your visitors' browser window.
  • Give your URL a name. i.e. www.yourwebiste.com/thisisatest 
    • The BOLD part is what you are naming, it can be a simple word, a few words, or even how you organize your campaigns. DO NOT USE SPACES as they will not take or they will be replaced with dashes (-). 
  • Then you can give this page a Description and META Keywords (unless you opt to Hide it). Othewise you can leave blank. 
  • Then comes inputting the Footer and Header code. 

ADD THIS TO THE FOOTER AREA (DO NOT ADD BOTH TO THE SAME AREA). For those of you who do not know HTML, ONLY copy and add from the FIRST "less than" sign before the "s" < to the very LAST "more than" sign > [Everything in RED color text]

 

<style>
#footer
{
display: none !important;
}
</style>

 

ATTENTION: You might need to Google a little if the #footer does not fully take away your footer. Hint: You might need to use the "inspect" function in Google Chrome to find your LIVE page's Header and Footer code.

--

ADD THIS TO THE HEADER AREA (DO NOT ADD BOTH TO THE SAME AREA). For those of you who do not know HTML, ONLY copy and add from the FIRST "less than" sign before the "s" < to the very LAST "more than" sign > [Everything in BLUE color text]

 

<style>
#header
{
display: none !important;
}
</style>

 

ATTENTION: You might need to Google a little if the #header does not fully take away your header.  Hint: You might need to use the "inspect" function in Google Chrome to find your LIVE page's Header and Footer code.

 

  • Then PUBLISH your page.

SEO Settings steps.JPG

 

 

BIG FYI: The "Landing Page View" will only be visible in a Live or Published site. You can visit the URL you created for the landing page. In the Editor or Admin view, you will still see the Header and Footer. Do NOT remove your footer from this view, unless you want to remove it from your entire site. 

 

You can visit an example I created on my site (to show you it works) by visiting https://www.renovatingcalifornia.org/testlandingpage.html

 

Notice how there is no visible Header or Footer, I also added a Facebook tracking pixel to the header code, which tracks my visitors. 

Community Manager

Re: Weebly Tip of the Week: Create a Landing Page

Thanks for sharing, @JT-H!

- Adam
Senior Community Specialist