Page Edit Top Panel | SP Page Builder (Pro) - Documentation | JoomShaper
JoomShaper’s 14th Birthday: 35% Off All Products! Redeem Now!

SP Page Builder (Pro)

Updated Last: 19 June 2024

Page Edit Top Panel

SP Page Builder 5 Top Edit Panel

The Page Edit Top Panel sits at the beginning of the backend editor and consists of some useful buttons like Side Topbar, Undo & Redo, Preview, Save Options, and More.

Side Topbar (Hamburger Menu): 

Undo & Redo

Perform undo/redo as many times as you want. This means you can undo/redo changes even after clicking on the Save button and closing the entire page


Instantly get a quick preview of your created layout and newly made changes.

Save options

SP Page Builder 5 Top Edit Panel

The save options consist of 3 buttons - Save & Close, Save as Copy, and Save & New. 

  • Save & Close: Choosing Save & Close will save your changes and close the current page and take you to the dashboard. 
  • Save as Copy: Save as Copy will create a duplicate copy of your current page which you can access from the dashboard. 
  • Save & New: Choosing Save & New will save your current page and a prompt for creating a new page will appear.

Three Dots Options

SP Page Builder 5 Top Edit Panel

After the Save options, you will find 3 dots for some additional options. Clicking on the three dots will open some extra features. These features include Clear Content, Export, Import, and Close. 

  • Close: Choosing the “Close” button will exit your current page and take you back to the SP Page Builder dashboard.
  • Export: Click “Export” to export a page, SP Page Builder module, or article content you’ve created. Doing so will provide you with a .json file that should be downloaded from that page. 
    Notice! You can reuse exported pages also on different websites, but you have to be sure that it contains the same list of addons and image structure. If not, part of the content may not work. Exported .json file does not contain any addon code inside, only layout and page settings. Also, you need to have the same images stored in the new destination to get the visuals. 
  • Import: To import a saved page from the backend editor click the “Import” button. You’ll see a prompt to choose the .json file, select it and you’ll get the page right away. 
  • Clear Content: Choosing “Clear Content” will remove all the addons and related settings that you used and implemented on that page. 

Page Rename + Switch to Frontend Editor

SP Page Builder 5 Top Edit Panel

The Page Rename panel sits right after the Page Edit Top panel which will let you easily rename your page from the space where the page name is shown. You can also switch to the frontend editor by clicking on the Frontend Editor button from the same area right beside the page name. 

While using the backend editor you can also collapse or expand this area using the inverted V symbol below the Page Rename field. This will add to making your overall editing interface more spacious and distraction-free.