PageFly - Create a full-width section

137 views PageFly 0

In this article, you will learn how to create a section that expand full-width.

3 steps to create a full-width section

Step 1

Inside PageFly editor, choose Add Element > Element > Layout and drag the Full Section.

Where Full Section is located

Step 2

Select the newly created Section that you just dragged into the canvas (the Breadcrumbs trail at the bottom of the screen will show you exactly what element you are currently selected). In the General tab of the Section, disable the Container option.

Container parameter in General tab of Section

Step 3

In the Styling tab, find the Background section.

  • Upload your image banner by clicking on the image icon in Image parameter.
  • Once the image is uploaded,
    • Change the image Position to match your image’s focus point (this setting will be used to define which part of your image can be shown in responsive modes)
    • Change the Size to “Cover”.

Background parameter in Styling tab of Section

In the Styling tab, find the Box Styles section.

  • Edit the top-padding and bottom-padding value to change the height of the section to fit your image’s height.
  • The chain icon in the middle will set the same value for all four sides of Padding and Margin.

Box Styles parameter in Styling tab of Section

Do not forget to Save & Publish your work. That’s it! You have completed all the steps to make a fabulous full-width section for your Desktop/Laptop page. Easy, right?

Note

Some Shopify themes will wrap the content of your site in a fixed width. Therefore, if your section is not full-width after following the previous steps, simply insert this line of code into the Custom CSS box of the Custom Code Editor. Then press Update and Save & Publish your page again to check the result on Live Page.

.main-content { max-width: 100%; padding: 0;}

Custom code to override your store current theme's settings

Mobile optimization

You can check the design on mobile by choosing the Mobile option on the top menu.

We can see the previously assigned bottom-padding value of 500px, the image background got stretched out and does not look good on mobile.

Box Styles parameter in Styling tab of Section on Mobile view

PageFly allows device customization for Styling tab (i.e. changes in styling tab are unique on each device), so choose the Section > Styling tab > set the Padding-bottom to any desired value (300px in our case)

Box Styles parameter in Styling tab of Section on Mobile view

Hit Save & Publish and check the page on your mobile for the result.