How to create a full-width section in PageFly
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
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:
Content Prepared: Prepare the content that you want to include in your full-width section. This might include text, images, videos, or links.
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!
In the PageFly editor, click on Elements > choose PageFly tab -> Layout
Drag the blank section element to your page.
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:
Click Elements > PageFly tab-> Add Image element, then drag and drop the image element into your section.
Go to the General tab and hit the Select image to upload your image.
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.
Click the Publish button to make your changes live.
Review your page in the Live View to ensure the section displays correctly.
In the PageFly editor, click on Elements > choose PageFly tab -> Layout
Drag the 1/1 layout element to your page.
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:
Click Elements > PageFly tab-> Add Image element, then drag and drop the image element into your section.
Go to the General tab and hit the Select image to upload your image.
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.
Click the Publish button to make your changes live.
Review your page in the Live View to ensure the section displays correctly.
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:
From the left menu of PageFly editor, click on Custom Code Editor
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;
}
Paste the selected code into the Custom CSS section.
Click Save, and then Publish your page again.
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.
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.
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.
PageFly App Installed: PageFly must be installed on your Shopify store. If you don’t have PageFly yet, you can install it for Free .
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
