A landing page is a single-focus webpage designed to achieve a specific marketing goal. Unlike your store’s homepage, it’s optimized for conversions, like sales or lead generation. PageFly lets you create stunning landing pages without coding.

In this article, we’ll walk you through step-by-step how to create a landing page with PageFly.

Check out this video tutorial for further details:

Legacy layout – How To Create A Landing Page With PageFly

Create A Regular Page

Step 1: On the PageFly dashboard, click on Pages.
Step 2: Click on the Create blank page button > Select Regular in the dropdown menu and select “Legacy Editor”

Or you can click on the Create from template button to use PageFly templates for your Landing Page.

Add A Section On The Page Canvas

Step 1: On the element catalog, click on the Add element icon on the left toolbar > Choose the Layout element in the “PageFly” tab > Drag and drop the Full Section option into the page editor.

Step 2: Click on Section on the breadcrumb > Go to the General tab > Turn off the Set fixed width option.

Step 1: In the Styling tab, scroll down to the Background parameter > Choose an image from the Background Image option.

You can upload the image which is available in the Image Manager or upload it from the Internet. Read more here to know more details.

Step 2: In the Styling tab, scroll down to the Spacing section > Edit the top-padding and bottom-padding values to change the height of the section to fit your image’s height. The little box in the middle will set the same value for all four sides of the Padding and Margin.

In this case, we set 200px for both the padding top and bottom.

Step 3: Scroll down to the Background parameter > Click on the More Settings button > Choose the Center for the Background Position and Cover for Background Size.

Add Content

Add Heading Element

Step 1: On the element catalog, click on the Add element icon > Choose the Heading element in the “PageFly” tab> Drag and drop the first variant into the page editor.

Step 2: In the General tab, change the heading text.
Step 3: Click on the Styling tab > Content color > Choose white color.
Step 4: In Spacing, adjust the margin top and bottom to 0px.
Step 5: Scroll down to the Typography parameter > Choose Libre Baskerville for the font family and set up 50px for the font size.

Add Paragraph Element

Step 1: On the element catalog, click on the Add element icon > Choose the Paragraph element in the “PageFly” tab> Drag and drop the first variant into the page editor.

Step 2: Set up similarly for the description.

Add A Button

Step 1: On the element catalog, click on the Add element icon > Choose the Button element in the “PageFly” tab> Drag and drop the first variant into the page editor.

Step 2: Apply content for the Button Text option and change the Button Type option (optional).

Step 3: Switch to the Styling tab. Change the text color, font size, background color and add effects to make the button more appealing.

Add A Product List Section

Add A Heading Element

On the element catalog, click on the Add element icon > Choose the Heading element > Drag and drop the first variant into the page editor. Customize it as the Hero banner section.

Add A Product List Element

Step 1: On the element catalog, click on the Add Shopify element icon in the “Shopify” list > Choose the Product List element > Drag and drop the first variant into the page editor.

Step 2: On the General tab, under the Product source, select Collection.

Scroll down to customize more settings. You can adjust the Layout type, Items per loading, Items per row, Item spacing, Loading mode, etc.

Step 3: On the Styling tab, you can adjust the style for the product list or for each element.

You can also add the Collection list element into the page editor. The settings are quite similar to the Product list element.

You can add a pre-made section to the page editor.

Step 1: Click on a “Add a section” icon > Choose Template.

Step 2: Change the content and image to fit your brand design.

Add Testimonial Section

Similarly, you can use the pre-made section to add testimonials to the page.

Add Trust Badge

Step 1: On the element catalog, click on the Add Shopify element icon > Choose the Content List element in the “PageFly” tab > Drag and drop the variant into the page editor.

Step 2: On the General tab, you can customize the entire content list or each content list item. You can adjust the Layout type, Items per row, Item spacing, and Content position.

Step 3: On the Styling tab, you can adjust the Content color, Font family, Font size, etc.

Make A Mobile-responsive Landing Page

Step 1: Click on the All devices dropdown button > Choose Mobile.

Step 2: You can adjust the padding, font size, etc to fit the mobile screen size.

For a better mobile responsive view, you can check this article.