How to use Page outline to organize page layout?
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
Have you ever wondered how you could keep track of all of the sections and elements on your page like a whole picture? is the answer to that question.
The outline is just a simple record of sections, rows, columns and specific elements used on your page. Thanks to this feature, you can easily navigate to the element you would like to work on by clicking on the name of that element on the layout.
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
To access the Page Content, from the PageFly editor, navigate to the left menu and click on the Page Content button (the first icon from the top).
Normally, your page is divided into sections (Legacy Editor) or flex sections (Gen 2 Editor). To explore more of what each section contains, open it by clicking on the arrow next to each section.
In the case of Legacy Editor, this will expand the section to show rows, columns, and other elements inside.
For Gen 2 Editor, flex section can expand to show multiple layers of elements nested inside.
Before diving into the detailed guidelines below, watch this insightful video to learn how to build sections, blocks, and flex layouts for responsive Shopify pages with the new Gen 2 Editor.
If you want to add a new section to your page content, you can drag and drop a new element from Element menu.
You can also create a new page by selecting from PageFly templates or save sections.
Add New Sections Using Templates
Using templates allows you to quickly add pre-designed sections to your page, saving you time and ensuring a professional look.
To add a new section using templates: Hit the Add section button > Select Templates > Find your desired template and hit Select to add it to your page.
Add A New Flex Section Using Saved Sections
Using saved sections lets you reuse flex sections you’ve previously customized and saved, maintaining consistency across your pages.
To add a new flex section using saves sections: Hit the Add section button > Select Saved sections > Find your desired saved section and hit Select to add it to your page.
You can rearrange the positions of flex sections or elements. The Page Content allows you to drag these items to the desired position as long as they are on the same level.
You can show and hide flex sections or elements with just one click on the eye right next to the sections or elements.
Note: This action will apply to the device that you are on. For example, if you are working on a mobile view, the “hide” action will only be applied to the mobile view.
Hidden sections will appear blurred in the page content, indicating they are hidden on that specific device.
To do these actions, please click the three dots on the right. You will find the options of Rename, Duplicate or Delete.
If your page content’s width is insufficient to show all elements, use the horizontal scrolling feature to see all your elements.
If you want to add a new section to your page content, you can drag and drop a new element from Element menu.
You can also create a new section by choosing PageFly Template or Saved sections.
Add New Sections Using Templates
Using templates allows you to quickly add pre-designed sections to your page, saving you time and ensuring a professional look.
To add a new section using templates: Hit the Add section button > Select Templates > Find your desired template and hit Select to add it to your page.
Add A New Section Using Saved Sections
Using saved sections lets you reuse sections you’ve previously customized and saved, maintaining consistency across your pages.
To add a new section using saves sections: Hit the Add section button > Select Saved sections > Find your desired saved section and hit Select to add it to your page.
You can rearrange the positions of sections, columns, rows, or elements. The Page Content allows you to drag these items to the desired position as long as they are on the same level.
You can show and hide sections, rows, columns, or elements with just one click on the eye right next to the section, rows, columns, or elements.
Please note that this action will apply to the device that you are on. For example, if you are working on a mobile view, the “hide” action will only be applied to the mobile view.
Hidden sections will appear blurred in the page content, indicating they are hidden on that specific device.
To do these actions, please click the three dots on the right. You will find the options of Rename, Duplicate or Delete.
If your page content’s width is insufficient to show all elements, use the horizontal scrolling feature to see all your elements.
You may have trouble locating specific elements in the page content, especially on complex pages with many sections and elements. In this case, utilize the search function within the PageFly editor to quickly find elements by their names or types. Additionally, collapsing and expanding sections in the page content can help to better organize and navigate through the elements.
When trying to drag and drop elements to reorder them, users might find that elements do not move to the desired position. In this case, ensure that elements are being moved within the same level in the hierarchy (e.g., sections to sections, columns to columns).
1. Can I rename sections and elements in the Page Content panel for better organization?
Yes, you can rename sections and elements for better organization. Click the three dots on the right of the section or element you want to rename and select Rename. Enter the new name and save it. This helps keep your page content organized and makes it easier to identify different parts of your layout.
2. How do I ensure my page outline is well-organized in PageFly?
To ensure your page outline is well-organized, use clear and descriptive names for your sections and elements. Consistently use the "Rename" function to label each part of your page accurately. This practice helps you quickly locate and edit elements as needed.
3. What is the difference between section (Legacy Editor) and flex section (Gen 2 Editor)?
Sections allow users to design page layout in row-column container structure and can be added both in PageFly Sections and PageFly pages. Flex sections, on the other hand, don’t have row-column structure. It allows adding elements directly on PageFly pages and more flexible customized layout by Flex blocks.
Important note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
