# How to create a Landing Page with PageFly?

### About PageFly Landing Page

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.

{% hint style="success" %}
**Pro Tip:** If you're creating a sales page specifically, try our [**AI sales page**](https://help.pagefly.io/pages-and-sections-creation/pages/how-to-create-ai-sales-pages-with-pagefly) - it automatically personalizes content based on traffic sources, location, and customer behavior to maximize your sales.
{% endhint %}

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:

{% embed url="<https://youtu.be/1VaKltzVU_w>" %}

### Gen 2 Layout - How To Create A Landing Page With PageFly

{% hint style="warning" %}
**Important Note**: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ([slot plans](https://help.pagefly.io/manual/pricing-plans/)).
{% endhint %}

#### 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 "**Gen 2 Editor**"

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b9808d11d7e3abe3ea49201155d5eb69314da9cf%2FAD_4nXePsV8Y3r1gOjqOGqOHjAs_DSNYWe09uLb47V7bR70O340O183O9gjRe_AmdwYMpumqPnbz33VeRob9qzdJUpxCigApDzNyS_iwPLe0TQaT3UXYyps4MG5a3s-p82__alDNUMvixxz-NKHQvdJQegkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

Or you can click on the Create from template button to use [PageFly templates](https://pagefly.link/sZKZHnFY) for your Landing Page.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-33a864007d702b97942e6efe99e517c97b8b055c%2FAD_4nXfph76y6uBW1ECenxVOoAgED7KSlwMS2X3umUdLygqK9IHFU34uXw8kpCoAC-PPM13xGagcmnohMSH0MqJz82_ejArVtPq9PVwnWMVTmp2PeGDNf3bvFv2Tqkof5WK2bwYEJBX-FQXejb_FIo0DLQ?alt=media)

#### 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](https://help.pagefly.io/manual/layout-element/) in the "**PageFly**" tab > Drag and drop the **Blank Section** option into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-789b5cf08fd07703995365abf6da790319156c14%2FAD_4nXcV8vWwUj92EIB_w7SqBOIM_CQdFfJ-LqGkpP3nGjWS58yr7YcanUt8U0VlNKt7Y_OKl3yE_c8V7Zygm6x-Vx1ByR6Kp6T8teIhXR602YAIVK8EuCITGj3RpcR912apt9PlMc-IDVsBEsvvZYukkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

* Step 2: In the styling tab, navigate to "**Size**" section and select "**Fill screen**" for Height

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-954fe6dd7d24e65914a47a57f46be0879d788574%2FAD_4nXeD8XNkGv8Nh6ncQeMwNW731c3mxA55Z2Ua0-dqbj9WyyRSAFSePwRP_eqtTBpIHsn9OlPHEAHWH0e9U8iXiAXyIjktUJ6PsIV2G-PedqqBqriH_q6liGfD_OfYMb0UMHl2sjfk5caSAgpff9DTKA?alt=media)

**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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-7660a6d765e409d02c62b3118494621a9af2740c%2FAD_4nXfQNTWc3vLusrgn9ZDyqOqi5AKRV07xLYpx0fmhv0H6NwsYz48y4qM6UHAcusz1dUV5FrRMucky5X13ccTkSM0Bf1_XmBv3kST1UaZtMSHuRpqvXzDEi6Xqn2KYU3Q8xxjDJ1yjiXQjjWoHl0sk_Qkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

You can upload the image which is available in the Image Manager or upload it from the Internet. Read more [here](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files) to know more details.

* Step 2: Adjust the height of flex section so that it align with selected background image

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-433b00b70a406bb114331e8d4c14784752baf59b%2FAD_4nXdYterNaKVAsxYQIgGRODWRtfIQDZmdF1WyVUWsC8YzmdpVm1IsU48CeouJcPl-vPxtkqjSdZW28U2UiuUsUuVNlqJ51FvalZPcV3EtpUCbZg3sT89eCPbYsceBKj8mtoYLyuUqw55aqyPNAUhfkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

**Add Content**

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 [Pagefly Editor - Styling Tab](https://help.pagefly.io/manual/elements-style-settings/)

**Add Heading Element**

* Step 1: On the element catalog, click on the Add element icon > Choose the [Heading](https://help.pagefly.io/manual/heading-element/) [element](https://help.pagefly.io/manual/heading-element/) in the "**PageFly**" tab> Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-756a96d4e769ef8636988fd9d4a40283e2973b1f%2FAD_4nXeh9AuQAtpLsmujq4S9ksKKn-9ddwjRqkf8CFEPlpLXfjraNznm0Vo9ZyqOsFjlhucQMy-HblyJke9Udn4TufytWaXF0nNF8pTTC1hfwA4Hf4msyZDHDXiPXexnbtOGSfRnk5yjDD-KTpoODSwYggkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

* 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ab0c9584a10b6cecd1841b70f18b31e37bb02e57%2FAD_4nXelfexhwpPJQBN6PvtiLQxMKRMW2_5u1iXQadpt87XznjDHMfNfxCdqFPyB3Qp3zxFO24ja0pO7nSr9tGXbIwjLN5wwiy1cggxfycC9yYjr04yuAFVeJ8iBK4FxRJOIT1pX5sGH9hGVEULDvhL3keydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

**Add Paragraph Element**

* Step 1: On the element catalog, click on the Add element icon > Choose the [Paragraph](https://help.pagefly.io/manual/paragraph-element/) [element](https://help.pagefly.io/manual/paragraph-element/) in the "PageFly" tab> Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c690302abd953f53d4334075268af5d13f4469ac%2FAD_4nXcGwJMSRanpoyM4l6SPsB9GWarC3fi1NMbfX7EMK7TdJdi4P_WceFxJ4528B48ObxtKjRBDt39y9YihUkcBSYTmWkUl10OZJ7Qru8Sl4dY8uNK-q9Y2b8WnyakwmuvzPCJsX_-sJMCGaEsIUUzsOQkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

* Step 2: Set up similarly for the description.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0acb7c59faf81f9b0c0931351c1b60942d8a65b8%2FAD_4nXcTfWKPGyl2qvPKTUm0ZmIJbUyZFZRFH5bz1xCPQ3llCC_EcY8ryDTswzQ8PZ_ZRgKXyP1iY5qSl92iIjdp67giI8vpNwmSV97p3nGxM35KFHp_ime0PFna1sflokndDF3h074GjzjdeWIds54n5Qkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

**Add A Button**

* Step 1: On the element catalog, click on the **Add element** icon > Choose the [**Button**](https://help.pagefly.io/manual/button-element/) element in the "**PageFly**" tab> Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-6abcd9332da2150b077dbfcde95a2f3d17816c10%2FAD_4nXdzznh2atGyJ46BDF33eeOXHUIjCmYm0yBhOayM3LiJlvKBixKAyR-_knIPw6bNAfTD49nP5WIyXNWpGBj0n4ucb0gA4wm3gichlNvSx-sxRR1Uw5yaFXUcPmY2j7ByZaR77anuBs2CL_ZY3q2U5Akeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-3f7f7e38d6b174c916741621156d46acd333c40c%2FAD_4nXcupkROONA7zT_3eBfBrAx5bMmGDhj35xMJoiqtLD9dDM7kdSyKwC6amfZDlIhvnxl3FjkgPauk341yf_Q5Ek4zKHoNvRlGc3muN7BweuuVrDzyIVmrY_EmE6rRr1aURTFZfpp7B7R5TbHcwURSsg?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-36dbddc4cf44dd0d562832fc06eeef6f65ef0c18%2FAD_4nXflbktlATqeklzS39DQrmKpRsZD-dmwl95zI5TArh58lAnnerFzYbaRkQPFBY6A6F5qxcm_smyZ6OleLQ55cubVrt7F7xn9WhoFSJTRuMJ5XtcGGf0KvZgATzSZCMckOjVNGW_iSr-k8ge8z4GYmgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

#### Add A Product List Section

**Add A Heading Element**

On the element catalog, click on the **Add element** icon > Choose the [**Heading**](https://help.pagefly.io/manual/heading-element/) element > Drag and drop the first variant into the page editor. Customize it as the Hero banner section.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-f59dcfaeb5e7b16d6b2f733987d9d4edaccdccf8%2FAD_4nXcJU6or4XviSo4mfkcxiDVugoaPcoRUbha7oR69nXev9OrJgqyycGawd1oH0KjkRguhtAosAemiqzU0lR4h5cGGf6cotYTnSY03BecMTdD8nhwbL_37ZBZKVTyk4aVeD2wCSeDoC11ngtU0p-FHkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

**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](https://help.pagefly.io/manual/shopify-elements-product-list/) element > Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5fe303843e58e4827f2e7a7c4ed6bd512037da52%2FAD_4nXfEtLdnGF24sSZrVPsVYsREKKdykCEcXsIICAVMVRbtVCwRhRRBQZCCrZ5uxHShYRxs7Ns3e7zr5A_zN023MhnKu0Vs8cQLQZToZ0TQYbbRpIF398-9jiBoJEI26PQDqUdau6RoKh4O3vvSbNacmgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-af33f3ebf96592499e8813672643baed089ae5db%2FAD_4nXfrjOYqXlOci75W8rjgetXLa8htnA1Wdv8aYE54krdeVtROe5RneooF7orNa3h0aBtPeZpolVxWk7Hs5GYQUtJc0Ps0jkvo0wPrn4bs7wcsqRPS434ZUYU_JN1B-ShL1LgN9e9rKFZ4c9WSfr4Skeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a2bae3388f75fc6a726300852fc129bb5f445605%2FAD_4nXeKv3KHTsb6XuN5kTUTMKzpL4W6Tn-QVL5_GO00hNMRHjeNVB7jXm2dHMAQ542MERgi8VLN_e-TBq_uu10j14hrXemeVpYbmhZKguIFSBmMJ2nEbb0eI1xVHvWggNYDSUDwW3ao7OnPYp0crartkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a892136df034f18f23a94d98693a56d8f62ca95a%2FAD_4nXcT9DMCN16eubeds3XdJ7B5huw5DH18pRkKBfwOSRB1bjdAIwxPcxnSRwKDaDyjXnpRFnZX7Hyz2dwa3LVno23-qDso0t9kHkEvJVZiVA6hLrTzhyU6TO_TU1xNvir0G05jt7AyQUCWPWBu0pBHdgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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](https://help.pagefly.io/manual/saved-section/%23how-to-use-premade-sections-on-your-pagefly-pages) to the page editor.

* Step 1: Click on a "**Add a section**" icon > Choose **Template**.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5684e92948af8bd97190a8981ad3440095336aab%2FAD_4nXeEs57rMICNxSKf3fpOICnYnx5LgBCb9EBOmBwwmcKbOrRJEI1XSqFc4ot7SyCGf7b6jBRZOWes0S6Qy78sJq1xrbQ9KhHRrAyxgfAzGKaMHU6zN9Or2vPy0-Pfs94_j4FL6DS-ApxtlMwhUzGe0gkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

* 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-e9e1a4b075f3d6576d451b6cf51df114c07ed33e%2FAD_4nXciR3dme6fbOX_SQwIliNVqAPKC9GPb-fflI_Gr6zp20O46ivypqd0p4DV-ciNlEetZof1RvPAyCvAL5lVtxUhROM1GN6Fz6qTlXPX-JQmqAwoc9dC55Q9wtj4deiFQzKeNQ4pP_kumeTFa6Pw73gkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

#### Add Trust Badge

* Step 1: On the element catalog, click on the **Add Shopify element** icon > Choose the [Content List](https://help.pagefly.io/manual/content-list-element-2/) element in the "**PageFly**" tab > Drag and drop the variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d7f794d313bf9c1a7de90901e00c009e845db8d9%2FAD_4nXdooCnrpw7qgnHhUYxFqKEHtbPr21RZ06A-SzOpOKMRrfAeOvZfr13nBko8QX7H9x1Nl6Ykmb4TW1qty015KkWwBBOlzNz5QddYjACaVCU7ZYsDJmJ-hhxaVTJ5_9gs3UuvIqe0gkwGcYouZZVgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

* 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5527c0dc5ae2fb341677a71da27cdb6a26614b58%2FAD_4nXdcY_ROkkD-KLiEkpFB0fiUfrNYNaq2zD0jpf4gevdXfnDYhszYLDx2vbE6TR_lCTRM_hC0D1Aj_ZPzxq8GVn1AVgEirHzpTNKGeHC9xhoOECIj9H87_YSc5tZJ8UjVlr4Zk9ftIM_BIMFU9Q8ZfAkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a807cd12fc4d9ef488183feb3745eb4219948346%2FAD_4nXdLvc7EF7mQSxXelvDka-nrVgbAmPRr2HYp5BLqh8yq9MN3ywzb0e2zseEa2QwHcrmw5iLirsmgp1rzpM_MC8smfRrXxV7LR3DAPmc6XMSjK5YxgHY-Ti0wctDSglFdC7wOS8hlCWZ3jNqFXLzTkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

#### Make A Mobile-responsive Landing Page

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ec1051b14cf2602a26cc9a10643762549e90b8e1%2FAD_4nXef_gjvbHgrF7e7qpaXfxvuqWHLono63GQ5daThauRZcdc6WIWtqZ1qd11Cm_vjHLV7xDWk-N6Kez_P9IXPa3ZJHVeeU3n06wTNuWTbJQpyeppc_2HSft58Up84lEba16-uJe3Dk2RiihPk6WwaeAkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-86d4d1f48da8bd164d4f1b0a484a356a40d2102c%2FAD_4nXdIs1aVSZp2XbGIMZ2HboILqyWE1xvijWquZy3EH1uGqg7aTxjD2OBtgQr77QUqNNSu_0v4i5l9vbRXQOrfANol91lrkX9Emm2fovS0gRz0BbDBv7tz-sMaDGEybghxRPNEbaqhoWlQyWmOVk5wmwkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

For a better mobile responsive view, you can check [this article](https://help.pagefly.io/manual/make-my-page-mobile-responsive/).

### 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**"

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-1f8ecacdcb542d2e87409e59ffedd94973b8dd08%2FPageFly-Store-sample-%C2%B7-PageFly-Page-Builder-%C2%B7-Shopify-2024-11-14-09-09-17-3.png?alt=media)

Or you can click on the **Create from template** button to use [PageFly templates](https://pagefly.link/sZKZHnFY) for your Landing Page.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-33a864007d702b97942e6efe99e517c97b8b055c%2FAD_4nXfph76y6uBW1ECenxVOoAgED7KSlwMS2X3umUdLygqK9IHFU34uXw8kpCoAC-PPM13xGagcmnohMSH0MqJz82_ejArVtPq9PVwnWMVTmp2PeGDNf3bvFv2Tqkof5WK2bwYEJBX-FQXejb_FIo0DLQ?alt=media)

#### 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](https://help.pagefly.io/manual/layout-element/) in the "**PageFly**" tab > Drag and drop the **Full Section** option into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-79ad0bd22b093e759eab79bbf7db5b084059ee03%2FAD_4nXdY-U54_7dEo8DrjZmiN-HrDjPGwuQF4mdjZ43PPnZzHzQOgISFdw5EGZh9sKjYXsPA2xrF2o1lWXP09WCkoRkbzD6iV2g1uqmuYflFd7sZXhlnSNCnFcH2EWHz0lL27yUFhVR2mn7jXPTNPxs3?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0df578806c56ad052f125d6b567ed98f97d0d3e0%2FAD_4nXevWL9gFtNaxS1f9uCfcpE1TvCeCHpc9aP5FFc1jemYNUyc0_8GNXQwfv6Yub2noiF9bxl_aF6fNts5hI8WxSPpriCL2KRHt5qvfBR4pEWTuGEgUbSWXpneElcWZL9X2vDqp9m-Nj46PRiqNJalaAkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

**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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-1938f819c0bdb4ce979679490f31b59a7fc7c47d%2FAD_4nXeyK_UW-uZ-v8Pq9fVtBBPqtzmHYBYY2ZVA7siGrKU4owBQcn6FU0AOXcmqrFR5YltCtuwYc2JUpl8SWIFX0z07BcBS0NUlmvbXxlWoWqDJufcebJNhmKWdxRxyyPrw8FXIMv5PQbwCxKXgdJDq8Qkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

You can upload the image which is available in the Image Manager or upload it from the Internet. Read more [here](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files) 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](https://help.pagefly.io/manual/edit-spacing-margin-and-padding).

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b2f52fbd2ae268d7ce8f2b390fce84472c7dbfe9%2FAD_4nXeF8llQ3Go4AcbBCpHTgHGzOZVhPUAGwuXc4I9atPGsQLiit7FinJ_r8TTLwnmuJhnL1-sdg-bdDFwy-3RDE2mqyTs41xAOn-U95AL_eWVN_cLaIPlpGESS7BcNyftZQtNRlmIS0KtAxclhFqQ-iAkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

* 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-6111cc3dd017040d38e2ffa1ff82877576a2cd59%2FAD_4nXdqAlyfTz23UCARBFx3P7m9MwPQObNM232Bt-NVkNrjCWJny3vv6JncfZurvWHBJDyEF9KPIclOofq3Y_WGwVl1E7gmDSwz2EKb3GrFfkiIpF94rtIcsNi8PtOYXOxYfS5xYzK7yMqTP1W4BN2Qawkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

**Add Content**

**Add Heading Element**

* Step 1: On the element catalog, click on the **Add element** icon > Choose the [Heading](https://help.pagefly.io/manual/heading-element/) [element](https://help.pagefly.io/manual/heading-element/) in the "**PageFly**" tab> Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-756a96d4e769ef8636988fd9d4a40283e2973b1f%2FAD_4nXeh9AuQAtpLsmujq4S9ksKKn-9ddwjRqkf8CFEPlpLXfjraNznm0Vo9ZyqOsFjlhucQMy-HblyJke9Udn4TufytWaXF0nNF8pTTC1hfwA4Hf4msyZDHDXiPXexnbtOGSfRnk5yjDD-KTpoODSwYggkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

* 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ab0c9584a10b6cecd1841b70f18b31e37bb02e57%2FAD_4nXelfexhwpPJQBN6PvtiLQxMKRMW2_5u1iXQadpt87XznjDHMfNfxCdqFPyB3Qp3zxFO24ja0pO7nSr9tGXbIwjLN5wwiy1cggxfycC9yYjr04yuAFVeJ8iBK4FxRJOIT1pX5sGH9hGVEULDvhL3keydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

**Add Paragraph Element**

* Step 1: On the element catalog, click on the **Add element** icon > Choose the [Paragraph](https://help.pagefly.io/manual/paragraph-element/) [element](https://help.pagefly.io/manual/paragraph-element/) in the "**PageFly**" tab> Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c690302abd953f53d4334075268af5d13f4469ac%2FAD_4nXcGwJMSRanpoyM4l6SPsB9GWarC3fi1NMbfX7EMK7TdJdi4P_WceFxJ4528B48ObxtKjRBDt39y9YihUkcBSYTmWkUl10OZJ7Qru8Sl4dY8uNK-q9Y2b8WnyakwmuvzPCJsX_-sJMCGaEsIUUzsOQkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

* Step 2: Set up similarly for the description.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0acb7c59faf81f9b0c0931351c1b60942d8a65b8%2FAD_4nXcTfWKPGyl2qvPKTUm0ZmIJbUyZFZRFH5bz1xCPQ3llCC_EcY8ryDTswzQ8PZ_ZRgKXyP1iY5qSl92iIjdp67giI8vpNwmSV97p3nGxM35KFHp_ime0PFna1sflokndDF3h074GjzjdeWIds54n5Qkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

**Add A Button**

* Step 1: On the element catalog, click on the **Add element** icon > Choose the [Button element](https://help.pagefly.io/manual/button-element/) in the "**PageFly**" tab> Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-6abcd9332da2150b077dbfcde95a2f3d17816c10%2FAD_4nXdzznh2atGyJ46BDF33eeOXHUIjCmYm0yBhOayM3LiJlvKBixKAyR-_knIPw6bNAfTD49nP5WIyXNWpGBj0n4ucb0gA4wm3gichlNvSx-sxRR1Uw5yaFXUcPmY2j7ByZaR77anuBs2CL_ZY3q2U5Akeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-3f7f7e38d6b174c916741621156d46acd333c40c%2FAD_4nXcupkROONA7zT_3eBfBrAx5bMmGDhj35xMJoiqtLD9dDM7kdSyKwC6amfZDlIhvnxl3FjkgPauk341yf_Q5Ek4zKHoNvRlGc3muN7BweuuVrDzyIVmrY_EmE6rRr1aURTFZfpp7B7R5TbHcwURSsg?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-36dbddc4cf44dd0d562832fc06eeef6f65ef0c18%2FAD_4nXflbktlATqeklzS39DQrmKpRsZD-dmwl95zI5TArh58lAnnerFzYbaRkQPFBY6A6F5qxcm_smyZ6OleLQ55cubVrt7F7xn9WhoFSJTRuMJ5XtcGGf0KvZgATzSZCMckOjVNGW_iSr-k8ge8z4GYmgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

#### Add A Product List Section

**Add A Heading Element**

On the element catalog, click on the **Add element** icon > Choose the [**Heading**](https://help.pagefly.io/manual/heading-element/) element > Drag and drop the first variant into the page editor. Customize it as the **Hero banner** section.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-f59dcfaeb5e7b16d6b2f733987d9d4edaccdccf8%2FAD_4nXcJU6or4XviSo4mfkcxiDVugoaPcoRUbha7oR69nXev9OrJgqyycGawd1oH0KjkRguhtAosAemiqzU0lR4h5cGGf6cotYTnSY03BecMTdD8nhwbL_37ZBZKVTyk4aVeD2wCSeDoC11ngtU0p-FHkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

**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](https://help.pagefly.io/manual/shopify-elements-product-list/) element > Drag and drop the first variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5fe303843e58e4827f2e7a7c4ed6bd512037da52%2FAD_4nXfEtLdnGF24sSZrVPsVYsREKKdykCEcXsIICAVMVRbtVCwRhRRBQZCCrZ5uxHShYRxs7Ns3e7zr5A_zN023MhnKu0Vs8cQLQZToZ0TQYbbRpIF398-9jiBoJEI26PQDqUdau6RoKh4O3vvSbNacmgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-af33f3ebf96592499e8813672643baed089ae5db%2FAD_4nXfrjOYqXlOci75W8rjgetXLa8htnA1Wdv8aYE54krdeVtROe5RneooF7orNa3h0aBtPeZpolVxWk7Hs5GYQUtJc0Ps0jkvo0wPrn4bs7wcsqRPS434ZUYU_JN1B-ShL1LgN9e9rKFZ4c9WSfr4Skeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a2bae3388f75fc6a726300852fc129bb5f445605%2FAD_4nXeKv3KHTsb6XuN5kTUTMKzpL4W6Tn-QVL5_GO00hNMRHjeNVB7jXm2dHMAQ542MERgi8VLN_e-TBq_uu10j14hrXemeVpYbmhZKguIFSBmMJ2nEbb0eI1xVHvWggNYDSUDwW3ao7OnPYp0crartkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a892136df034f18f23a94d98693a56d8f62ca95a%2FAD_4nXcT9DMCN16eubeds3XdJ7B5huw5DH18pRkKBfwOSRB1bjdAIwxPcxnSRwKDaDyjXnpRFnZX7Hyz2dwa3LVno23-qDso0t9kHkEvJVZiVA6hLrTzhyU6TO_TU1xNvir0G05jt7AyQUCWPWBu0pBHdgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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](https://help.pagefly.io/manual/saved-section/%23how-to-use-premade-sections-on-your-pagefly-pages) [section](https://help.pagefly.io/manual/saved-section/%23how-to-use-premade-sections-on-your-pagefly-pages) to the page editor.

* Step 1: Click on a "**Add a section**" icon > Choose **Template**.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5684e92948af8bd97190a8981ad3440095336aab%2FAD_4nXeEs57rMICNxSKf3fpOICnYnx5LgBCb9EBOmBwwmcKbOrRJEI1XSqFc4ot7SyCGf7b6jBRZOWes0S6Qy78sJq1xrbQ9KhHRrAyxgfAzGKaMHU6zN9Or2vPy0-Pfs94_j4FL6DS-ApxtlMwhUzGe0gkeydd6Nh3BxkcRjbZqUqjj06g.gif?alt=media)

* 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-e9e1a4b075f3d6576d451b6cf51df114c07ed33e%2FAD_4nXciR3dme6fbOX_SQwIliNVqAPKC9GPb-fflI_Gr6zp20O46ivypqd0p4DV-ciNlEetZof1RvPAyCvAL5lVtxUhROM1GN6Fz6qTlXPX-JQmqAwoc9dC55Q9wtj4deiFQzKeNQ4pP_kumeTFa6Pw73gkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

#### Add Trust Badge

* Step 1: On the element catalog, click on the Add Shopify element icon > Choose the [Content List](https://help.pagefly.io/manual/content-list-element-2/) element in the "**PageFly**" tab > Drag and drop the variant into the page editor.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d7f794d313bf9c1a7de90901e00c009e845db8d9%2FAD_4nXdooCnrpw7qgnHhUYxFqKEHtbPr21RZ06A-SzOpOKMRrfAeOvZfr13nBko8QX7H9x1Nl6Ykmb4TW1qty015KkWwBBOlzNz5QddYjACaVCU7ZYsDJmJ-hhxaVTJ5_9gs3UuvIqe0gkwGcYouZZVgkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

* 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.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5527c0dc5ae2fb341677a71da27cdb6a26614b58%2FAD_4nXdcY_ROkkD-KLiEkpFB0fiUfrNYNaq2zD0jpf4gevdXfnDYhszYLDx2vbE6TR_lCTRM_hC0D1Aj_ZPzxq8GVn1AVgEirHzpTNKGeHC9xhoOECIj9H87_YSc5tZJ8UjVlr4Zk9ftIM_BIMFU9Q8ZfAkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a807cd12fc4d9ef488183feb3745eb4219948346%2FAD_4nXdLvc7EF7mQSxXelvDka-nrVgbAmPRr2HYp5BLqh8yq9MN3ywzb0e2zseEa2QwHcrmw5iLirsmgp1rzpM_MC8smfRrXxV7LR3DAPmc6XMSjK5YxgHY-Ti0wctDSglFdC7wOS8hlCWZ3jNqFXLzTkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

#### Make A Mobile-responsive Landing Page

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ec1051b14cf2602a26cc9a10643762549e90b8e1%2FAD_4nXef_gjvbHgrF7e7qpaXfxvuqWHLono63GQ5daThauRZcdc6WIWtqZ1qd11Cm_vjHLV7xDWk-N6Kez_P9IXPa3ZJHVeeU3n06wTNuWTbJQpyeppc_2HSft58Up84lEba16-uJe3Dk2RiihPk6WwaeAkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-86d4d1f48da8bd164d4f1b0a484a356a40d2102c%2FAD_4nXdIs1aVSZp2XbGIMZ2HboILqyWE1xvijWquZy3EH1uGqg7aTxjD2OBtgQr77QUqNNSu_0v4i5l9vbRXQOrfANol91lrkX9Emm2fovS0gRz0BbDBv7tz-sMaDGEybghxRPNEbaqhoWlQyWmOVk5wmwkeydd6Nh3BxkcRjbZqUqjj06g.png?alt=media)

For a better mobile responsive view, you can check [this article](https://help.pagefly.io/manual/make-my-page-mobile-responsive/).

### Frequently Asked Questions

**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.

### Version Update

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pages-and-sections-creation/pages/how-to-create-a-landing-page-with-pagefly.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.