About PageFly Landing Page
PageFly empowers you to visually design and customize a Shopify landing page using a library of pre-built elements and drag-and-drop functionality. No coding is required.
In this article, we’ll walk you through step-by-step how to create a landing page with PageFly.
How To Create A Landing Page With PageFly
You can check on this video tutorial for more visualization:
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 to start building your page from scratch.
Or you can click on the Create from template button to use PageFly templates for your Landing Page.
Add A Hero Banner
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 > 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.
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.
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 > 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 > 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 > 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 > 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.
Add Sale Banner
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 testimonial to the page.
Add Trust Badge
- Step 1: On the element catalog, click on the Add Shopify element icon > Choose the Content List element > 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.
Frequently Asked Questions
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.
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.
