How to create a Landing Page with PageFly?
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
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:
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 "Gen 2 Editor"
Add A Section On The Page Canvas
Step 2: In the styling tab, navigate to "Size" section and select "Fill screen" for Height
Add Background Image For The Banner
Step 1: In the Styling tab, scroll down to the Background parameter > Choose an image from the Background Image option.
Step 2: Adjust the height of flex section so that it align with selected background image
Add Content
Add Heading Element
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 2: Set up similarly for the description.
Add A Button
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 Heading Element
Add A Product List Element
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.
Step 1: Click on a "Add a section" icon > Choose Template.
Step 2: Change the content and image to fit your brand design.
Similarly, you can use the pre-made section to add testimonials to the page.
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.
Step 1: Click on the All devices button > Choose Mobile.
Step 2: You can adjust the padding, font size, etc to fit the mobile screen size.
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"
Add A Section On The Page Canvas
Step 2: Click on Section on the breadcrumb > Go to the General tab > Turn off the Set fixed width option.
Add Background Image For The Banner
Step 1: In the Styling tab, scroll down to the Background parameter > Choose an image from the Background Image option.
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 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 2: Set up similarly for the description.
Add A Button
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 Heading Element
Add A Product List Element
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.
Step 1: Click on a "Add a section" icon > Choose Template.
Step 2: Change the content and image to fit your brand design.
Similarly, you can use the pre-made section to add testimonials to the page.
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.
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.
1. What kind of landing pages can I create with PageFly?
PageFly empowers you to create a variety of landing pages for various purposes, including product launches, lead-generation campaigns, promotional offers, event sign-ups, etc.
2. Does PageFly offer pre-made landing page templates?
Yes, PageFly provides a collection of pre-designed landing page templates to jumpstart your creative process. You can easily customize them to fit your brand and campaign goals.
3. What is the difference between Section and Flex section?
Sections allow users to design page layout in row, column and can be added both in PageFly Sections and PageFly pages. Flex section, on the other hand, doesn't have row-column structure and can only be added directly on PageFly pages.
In addition to the traditional page building mechanism (row, column), PageFly 4.23.0 adds Gen 2 Layout, a more flexible and efficient technology that allows creation of complex and highly customizable layouts, which come with an intuitive and user-friendly interface.
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
Or you can click on the Create from template button to use for your Landing Page.
Step 1: On the element catalog, click on the Add element icon on the left toolbar > Choose the in the "PageFly" tab > Drag and drop the Blank Section option into the page editor.
You can upload the image which is available in the Image Manager or upload it from the Internet. Read more to know more details.
Note: In Flex editor - styling tab, you have an additional setting called "Size" for you to configure the width and height of elements. For more information, refer to
Step 1: On the element catalog, click on the Add element icon > Choose the in the "PageFly" tab> Drag and drop the first variant into the page editor.
Step 1: On the element catalog, click on the Add element icon > Choose the in the "PageFly" tab> Drag and drop the first variant into the page editor.
Step 1: On the element catalog, click on the Add element icon > Choose the element in the "PageFly" tab> Drag and drop the first variant into the page editor.
On the element catalog, click on the Add element icon > Choose the element > Drag and drop the first variant into the page editor. Customize it as the Hero banner section.
Step 1: On the element catalog, click on the Add Shopify element icon in the "Shopify" list > Choose the element > Drag and drop the first variant into the page editor.
You can add a to the page editor.
Step 1: On the element catalog, click on the Add Shopify element icon > Choose the element in the "PageFly" tab > Drag and drop the variant into the page editor.
For a better mobile responsive view, you can check .
Or you can click on the Create from template button to use for your Landing Page.
Step 1: On the element catalog, click on the Add element icon on the left toolbar > Choose the in the "PageFly" tab > Drag and drop the Full Section option into the page editor.
You can upload the image which is available in the Image Manager or upload it from the Internet. Read more 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 .
Step 1: On the element catalog, click on the Add element icon > Choose the in the "PageFly" tab> Drag and drop the first variant into the page editor.
Step 1: On the element catalog, click on the Add element icon > Choose the in the "PageFly" tab> Drag and drop the first variant into the page editor.
Step 1: On the element catalog, click on the Add element icon > Choose the in the "PageFly" tab> Drag and drop the first variant into the page editor.
On the element catalog, click on the Add element icon > Choose the element > Drag and drop the first variant into the page editor. Customize it as the Hero banner section.
Step 1: On the element catalog, click on the Add Shopify element icon in the "Shopify" list > Choose the element > Drag and drop the first variant into the page editor.
You can add a to the page editor.
Step 1: On the element catalog, click on the Add Shopify element icon > Choose the element in the "PageFly" tab > Drag and drop the variant into the page editor.
For a better mobile responsive view, you can check .
