PageFly - Create a full-width section

2710 views Linh 3

In this article, you’ll learn how to create a section that expands the full-width of your page.

3 steps to create a full-width section

Step 1

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

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 have currently selected). In the General tab of the Section, disable the Set Fixed Width option.

Step 3

In the Styling tab, find the BACKGROUND section.

  • Upload your image banner by clicking on the image icon in the Background Image parameter.
  • Once the image is uploaded, click on the More Settings button.
    • Change the Background 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 Background Size to “Cover”.

In the Styling tab, find the SPACING section.

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

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 follow these steps:

  • First, open the Add Custom Code window
  • Copy this code
    .main-content { max-width: 100%; padding: 0;}
    and paste it into the Custom code editor section
  • Hit Save change button, then Publish your page again
  • Finally, check the result on Live Page.

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 350px, the image background got stretched out and does not look good on mobile.

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


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

Was this helpful?