How to Create Landing Pages in Weebly?

Importance of Landing Page

Landing page as the name indicates is the page users land on your site. It should give important and attractive information your users expect on that page. Generally a landing page contains the following details based on the type of your website:

• Slideshow linking to important pages on your site.
• Call to action button to drive traffic to particular page like shop.
• An image and text container showcasing attractive content.

Weebly does not offer slideshow for responsive themes and allow users to add text, title and button on the landing page.

Home Vs Landing Page

It is a misunderstanding that the home page is a landing page but it is not necessarily to be the case. The first page under “Pages” menu is identified as “Home” page. You can move any of the page to the top and see the home icon appears as shown in the below picture:

The home page indicates the page which opens with your domain URL like “http://yoursite.com“. Also the home page can be opened with the URL – “http://yoursite.com/index.html“. A site can have only one home page. In contrary a site can have multiple landing pages and each landing page will have its own custom URL defined under “Pages” tab.

Creating Weebly Landing Pages

Landing page is one of the header type or page template offered by Weebly to create a landing page for your site. Whenever a new page is created, the header type can be selected as “Landing” to create a landing page. Users can change the landing page to any other header type at any point of time.

Once the header type is chosen as “Landing” the page will have larger header image, call to action button, title and description. These are the placeholder elements part of all responsive themes by default and you can add the text as per your need and change background image of the header.

Changing Header Type of Existing Page

It is common to change the header type based on your need. For example, if one of your tall header page attracts lot of traffic then it makes sense to convert the page to a landing page. You can convert other header types to landing page in two ways.

First way is to hover over the header area and click on the settings button to change the header type to landing page.

 Second method is to go to “Pages” tab, change the header type to “Landing” and publish your site.

Choosing Default Layouts

Once the page header type is chosen as “Landing” then the next step is to build content for your page. Weebly offers pre-defined layouts with dummy content from which users can choose one of the layouts by clicking on the “Choose Layout” button. You can check whether the layout is looking good and decide to keep or delete the layout. Once the desired layout is selected, you can modify the dummy content with your own.

We recommend to choose one of the available layouts to create landing page for your Weebly site. If you don’t like any of the pre-defined layouts then you can drag and drop elements to design your own landing page layout.

Customizing Landing Page

You can create your own custom landing page layout or modify the existing layout under “Theme > Edit HTML / CSS > Header Type >landing.html”.

You can upload your own custom page layout under “Header Type” section and decorate the elements with CSS which can be added under “Assets > style.less” file.