Creative Elements is a visual page builder module for PrestaShop enabling the creation of web pages in a live, visual way.
Edit your Home page
- On the top left side of the PrestaShop backoffice, click Creative Elements > Content Anywhere.
- Click to Edit at displayHome item.
- Click Edit with Creative Elements to enter Live Page Builder.
The page builder includes these main areas:
- Header Panel: Choose a general style (colors, fonts) or use the search field to find a widget.
- Widgets / Widget Settings: Choose a widget and configure it.
- Preview Button: Enables you to preview the page. Once clicked it hides/shows the panel.
- Footer Panel: View page, Go back to Dashboard, Save page.
- Content Area: Drag & drop widgets and design your page.
- Add New Section / Template: Choose between creating a new section or inserting an existing template.
Add New Section
- Click this button to create a new section or simply drag a widget from the panel and drop it in the content area.
- Select Your Structure: Choose a structure for your section (Later, you can edit the exact width of every column).
Click this button to launch the Template Library and insert one of our pre-designed templates or one of your own.
Section / Column Options
- Section: You can edit, duplicate or delete a section. You can also save it as a template.
- Column: You can edit, duplicate, add or delete a column. You can also drag & drop it anywhere on your page.
- Widget: Click the content to edit, duplicate or delete a widget.
- Resize Column: Drag right & left to change the width of your columns.
- Add Widget: Drag a widget from the left panel and drop it into a column.
- To Edit a widget, click the pencil icon.
- On the Panel header, you can choose to edit the widget's content and style.
- Every Widget has a different setting.
- You can Save your current changes at any stage.
- When you have finished designing, click the 'X' button at the bottom panel and view the page.
- To view how the page looks like on different devices, click on the Responsive Mode button, in the footer.
- Choose between the different devices.