About The Page Content
Have you ever wondered how you could keep track of all of the sections and elements on your page like a whole picture? Page Content 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.
How To Access Page Content
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.
Gen 2 Layout – Page Configuration
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.
Add A New Flex Section
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.
Reordering Elements
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.
Show And Hide
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.
Rename, Duplicate Or Delete
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.
Legacy Layout – Page Content Configurations
Add A New Section
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.
Reordering Elements
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.
Show And Hide
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.
Rename, Duplicate Or Delete
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.
Common Cases
Difficulty Finding Specific Elements in the Page Content
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.
Elements Not Reordering as Expected
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).
Frequently Asked Questions
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.
Previous article