Advanced Page Editor allows merchants to create a unique customized page by organizing banners, images, videos, and texts by drag-and-drop.
This article will guide you through different actions on Advanced Page:
- How to add new widgets
- Element functions
- Edit header and footer
- Advanced Page layout
- Preview page
- Copy Advanced Page
- New Page Builder
1. How to add new widgets
Step 1
First, go to [Online Store Design] > [Pages] in the Admin panel, then click the Advanced Page button.
Step 2
You can start designing your page with a blank page or with one of the templates.
Step 3
Click the blue Build button on the left, then select the element you want to add to the page.
Step 4
When you drag the element to the page editing area, the green colour block indicates the available position. Otherwise, the element would not be placed.
2. Element functions
Click on the hyperlinks below to view the instructions for various page elements.
- Image Element | Advanced Page
- Video Element | Advanced Page
- Word Element | Advanced Page
- Product Element | Advanced Page
- Social Media Elements | Advanced Page
- Page Title & SEO Settings | Advanced Page
3. Edit header and footer
- The header of the Advanced Page will remain in the editing area, showing "Click here and go to edit header." Click the hyperlink to edit the header on the Menu Navigation page. Please refer to this article for detailed instructions.
- The footer of the Advanced Page will also be shown in the editing area, showing "Click here and go to edit footer." Click the hyperlink to edit the footer on the Menu Navigation page. Please refer to this article for detailed instructions.
*Note: The current edit content will be saved automatically when you go edit the header and footer.
4. Advanced Page layout
- You can add at most 4 elements side by side in each row. The elements will split the width of the layout.
- Click the "cross" icon on the element to drag and move the position; click the bin icon to delete the element.
- If you want to adjust a whole row of components, click the green arrow icon on the right to move up and down the entire row; click the green bin icon to delete the entire row of elements.
5. Preview page
You can preview your page by clicking the green Preview button at the bottom right.
In page preview, you can check how your page is resized when browsing on different devices
From left to right: Mobile > Tablet > Desktop.
Layouts are automatically adjusted, as shown below. Click Close Preview to end the preview.
Don't forget to click "Save" after editing!
6. Copy Advanced Page
You can copy the Advanced Page by clicking the Copy button in Pages Index.
All the widgets would be copied to the new page, including page name, URL, SEO settings. Please remember to update the details in these sections.
*Please be noted that the copy function is only for Advanced Pages.
7. New Page Builder
With SHOPLINE's new page builder, you can optimize the design for advanced pages. Design the announcement board, header & footer, and other widgets to create a unique online store layout. Please read this article for more details.
*Notes:
- The new page builder currently only supports Ultra Chic, Kingsman, Philia and Varm themes.
- After creating a page using the new page builder, the page can still be displayed even if you switch to other themes, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.
- The storefront layouts that support display but do not support editing in the New Page Builder are Dusk, Skya, Sangria, Bianco, and Doris Bien. Other storefront layouts do not support editing or display.
Read more
Comments