# How to create a full-width section in PageFly

### Overview

Summary: A full-width section is a design element that spans the entire width of your screen. It offers a striking visual impact. Employing a full-width section on your Shopify site enhances its modern appeal and dynamically highlights key content, making it stand out and capture attention effectively.

With PageFly, you can easily create a full-width section for your Shopify page. This article will guide you through the process in just a few easy steps. You can also watch this video tutorial:

{% embed url="<https://www.youtube.com/watch?v=HlaBPsng-cQ>" %}

### Requirements

* **PageFly App Installed**: PageFly must be installed on your Shopify store. If you don’t have PageFly yet, you can install it for Free [here](https://apps.shopify.com/pagefly?utm_campaign%3Dapp-listing%26utm_source%3Dmanual%26utm_medium%3Darticle%26utm_content%3Dfull-width-section).
* **Content Prepared**: Prepare the content that you want to include in your full-width section. This might include text, images, videos, or links.

### Gen 2 Layout - How To Create A Full-width Section 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 %}

PageFly Gen 2 makes it easy to create stunning full-width sections for your website. Let's watch this video for step-by-step guidance to enhance your page design effortlessly!

{% embed url="<https://www.youtube.com/watch?v=RxkJHbt5jpQ>" %}

#### Step 1: Add The 1-Column Layout

3. In the PageFly editor, click on **Elements** > choose **PageFly** tab -> **Layout**
4. Drag the blank section element to your page.

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

#### Step 2: Add Elements To Your Section

Open the **Add element** menu. Here, you can choose to add various elements such as text, images, or videos.

For example, to add an image:

3. Click **Elements** > **PageFly** tab-> Add **Image** element, then drag and drop the image element into your section.
4. Go to the **General** tab and hit the **Select image** to upload your image.

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

#### Step 3: Enable full width

Select the section, navigate to the **General** tab > hit the **No** button under the **Enable full width** option. This ensures the section stretches across the full width of the screen.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-18cbb996df863c0310dc4217a9685afe82f23086%2FAD_4nXdCxhx1Z8uyFG0CXS0nVXuf0IyY0dAUTvO-klPRBfXdDH4ltEIhWsrCLUgR5XLE-kWPM7sgN6IT2-ltwHGmwM1I6s0Dd2VJSAqQbJTVIsqFtbK3GWXvQXIo6ajYGu2ubvQ2a_o4DptzCunB4QTRtgkeymkSy-GgsRmb3KFcdDUjqYA.gif?alt=media)

{% hint style="info" %}
**Note**: If you have other sections on your page that are not full-width and you want to expand them, simply perform this step for each of those sections.
{% endhint %}

#### Step 4: Publish The Page And Check The Section On Live View

3. Click the **Publish** button to make your changes live.
4. Review your page in the **Live View** to ensure the section displays correctly.

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

### Legacy Layout - How To Create A Full-width Section With PageFly

#### Step 1: Add The 1-Column Layout

1. In the PageFly editor, click on **Elements** > choose **PageFly** tab -> **Layout**
2. Drag the 1/1 layout element to your page.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d44cbd2c3be718d42fd533eaefc85bf1ad287d5a%2FAD_4nXd8pGvn6888eXN6nUGWKkXbsm_qaI-3NuoYHYN3eg3LusRqkSk9s9WX_ZlyFg-4HSi-kDNRAagyNd4mJAm0CWC_Nu43Njzas_XB7v51PKXAulu9rSRbjTQ_lLh9Og_LX0WJh92KMnP4QTtV1DhI9AkeymkSy-GgsRmb3KFcdDUjqYA.gif?alt=media)

#### Step 2: Add Elements To Your Section

Open the Add element menu. Here, you can choose to add various elements such as text, images, or videos.

For example, to add an image:

1. Click **Elements** > **PageFly** tab-> Add **Image** element, then drag and drop the image element into your section.
2. Go to the General tab and hit the Select image to upload your image.

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

#### Step 3: Enable full width

Select the section, navigate to the **General** tab > hit the **No** button under the **Enable full width** option. This ensures the section stretches across the full width of the screen.

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

{% hint style="info" %}
**Note**: If you have other sections on your page that are not full-width and you want to expand them, simply perform this step for each of those sections.
{% endhint %}

#### Step 4: Publish The Page And Check The Section On Live View

1. Click the **Publish** button to make your changes live.
2. Review your page in the **Live View** to ensure the section displays correctly.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c67a80b98aff6a4e801ed464a9fdefa5b1fffb93%2FAD_4nXfVWBBqlKp5l8ZF6OiyR4f4pKqE65h9twd3fvOICQP2eTJ08H8e52kaDbZS4U-Mwy48QEDV5Vzvyaraz79iiEXwxtKPpHjv-LWwph8YUlHI5z813jC-HbhPWs5yxZ7I6zsLD2JweZ4RzZs4jlhBKgkeymkSy-GgsRmb3KFcdDUjqYA.png?alt=media)

### Use Case

#### The Section Is Still Not Full Width Even After Following Above Steps

Some Shopify themes apply a fixed width to the site's content, which might prevent sections from extending fully across the page. Therefore, with some themes, even though you followed the steps as we introduced, the section is still not full-width.

In this case, you need to follow these steps:

1. From the left menu of PageFly editor, click on **Custom Code Editor**
2. Copy one of the following code snippets

* To adjust the main content container: **.main-content { max-width: 100%; padding: 0;}**
* To adjust the main content container:

**.main-content .wrapper {**

**width: 100%;**

**max-width: 100%;**

**padding: 0 !important;**

**}**

3. Paste the selected code into the Custom CSS section.

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

4. Click **Save**, and then **Publish** your page again.
5. Review the changes on your **Live Page** to ensure the section now displays as full width

If adding the code doesn't resolve the issue, please don't hesitate to contact us through the Live Chat window for assistance. Not all Shopify themes are compatible with these codes so we may need to adjust settings specific to your theme.

### Tips And Best Practice

* Consistent Styling: Ensure that the styling of full-width sections matches the overall design and color scheme of your website for a cohesive look.
* Limit Section Height: While it's tempting to use large amounts of vertical space, keeping your full-width sections concise can help maintain visitor engagement and reduce scrolling.
* Optimize Loading Times: Full-width sections can be heavy due to large images or complex scripts. Optimize these elements to maintain fast page load speeds.

### Frequently Asked Questions

**1. Can I apply animations to full-width sections in PageFly?**

Yes, you can. Simply select the section or element you wish to animate, and choose from the animation options in the General tab.

**2. What to do if the full-width section overlaps other content on your page?**

Overlapping issues are typically caused by incorrect settings in margins or padding. Check the settings in PageFly for the section and nearby elements.

### Additional Resources

[Shopify Product Media Element | How to Use with PageFly](https://help.pagefly.io/manual/shopify-elements-product-media/)

[How to use Shopify App Block element with PageFly section](https://help.pagefly.io/manual/how-to-use-shopify-app-block-element-with-pagefly-section/)