5 Steps to Create Full-width Section on PageFly Pages

OverviewClick to copy

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:

RequirementsClick to copy

  • 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.
  • Content Prepared: Prepare the content that you want to include in your full-width section. This might include text, images, videos, or links.

How To Create A Full-width Section With PageFlyClick to copy

Step 1: Add The 1-Column LayoutClick to copy

  1. In the PageFly editor, click on Add element > Layout.
  2. Drag the 1/1 layout to your page.

Step 2: Add Elements To Your SectionClick to copy

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 Add element > Image, 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.

Step 3: Disable Fixed WidthClick to copy

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

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.

Step 4: Publish The Page And Check The Section On Live ViewClick to copy

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

full width section

Use CaseClick to copy

The Section Is Still Not Full Width Even After Following Above StepsClick to copy

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 Add Custom Code
  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;

}

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

full width section

  1. Click Save, and then Publish your page again.
  2. 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 PracticeClick to copy

  • 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 QuestionsClick to copy

Can I Apply Animations To Full-width Sections In PageFly?Click to copy

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

What To Do If The Full-width Section Overlaps Other Content On Your Page?Click to copy

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

Additional ResourcesClick to copy

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us