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

  1. On the top left side of the PrestaShop backoffice, click Creative Elements > Content Anywhere.
  2. Click to Edit at displayHome item.
  3. Click Edit with Creative Elements to enter Live Page Builder.

Main Areas

Main areas
Main areas

The page builder includes these main areas:

  1. Header Panel: Choose a general style (colors, fonts) or use the search field to find a widget.
  2. Widgets / Widget Settings: Choose a widget and configure it.
  3. Preview Button: Enables you to preview the page. Once clicked it hides/shows the panel.
  4. Footer Panel: View page, Go back to Dashboard, Save page.
  5. Content Area: Drag & drop widgets and design your page.
  6. Add New Section / Template: Choose between creating a new section or inserting an existing template.

Add New Section

  1. Click this button to create a new section or simply drag a widget from the panel and drop it in the content area.
  2. Select Your Structure: Choose a structure for your section (Later, you can edit the exact width of every column).
Add section
Add section

Add template

Click this button to launch the Template Library and insert one of our pre-designed templates or one of your own.

Add template
Add section

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.
Section options
Section options

Edit Widget

  • 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.
Edit widget
Edit widget

Responsive Mode

  • To view how the page looks like on different devices, click on the Responsive Mode button, in the footer.
  • Choose between the different devices.
Responsive mode
Responsive mode
© WebshopWorks - Professional PrestaShop Addons