PageFly - Create a full-width section

1349 views 2

In this article, you will learn how to create a section that expand it 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 to the page.

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, disable the Container option.

Container parameter in General tab of Section

Step 3

In the Styling tab, under Background section. Then,

  • Upload the image background by clicking on the image icon in Image variable.
  • Once the image is uploaded,
    • Change the image Position to match your image’s focus point (this setting is 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, under Box Styles section.

  • Edit the top-padding and bottom-padding value to change the height of the section to fit your image’s height. Use percentage (%) to keep it responsive.
  • 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 doing the above steps, simply follow this:

  • First, open the Custom Code Editor
  • Copy this code
    • .main-content { max-width: 100%; padding: 0;}

and paste it into the Custom CSS section

  • Hit Update, then Save & Publish your page again
  • Finally, check the result on Live Page.

Custom code to override your store current theme's settings

Mobile optimization

To double-check, you can review the page on mobile by choosing the Device Switcher > Mobile option on the top menu.

In this example, we can see, with the previously assigned bottom-padding value of 500px, the image background is stretched out and it does not look good on mobile.

Box Styles parameter in Styling tab of Section on Mobile view

PageFly allows device custom 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

Finally, hit Save & Publish and check the page on your mobile for the result.

Was this helpful?