Adding a page

To add a new page click on the + (plus) button at the bottom of the page outline. You can add a new page or a section, which is a collection of pages.

Sections are mainly an organizational aid, but can serve an additional function with relation to section visual uniformity, by using element visibility to show an element or group of elements within a section. 

This is explained in more detail in the documentation about the arrange pane.

A page can be renamed either by clicking on the name in the page outline or by changing it in the inspector.

To delete a page, select its thumbnail and then press the “-” at the bottom of the sidebar. The center button at the bottom of the sidebar duplicates the currently selected page.

The order of pages can be changed by dragging the page thumbnail to the new location.

Pages, sections and the menus

When you create a new menu, by default it will automatically add (and remove) items corresponding to the pages. Top level pages and sections are the main items of the menu, the former link to the pages and the latter are sub-menus with links to the pages in the corresponding section as menu items. Please see Menus for a deeper look to menu elements.

Page headers and footers

Pages in a website usually have a common header. A simple way to achieve this is to place header elements in a layout block or group, then use the visibility options to show the header in all pages. Likewise for footers, with the added “Follow footer” checkbox, to ensure the footer moves along with the page bottom instead of at the top.

The privacy page

Once you enable privacy options, a privacy page will automatically be added to your page outline. This page can only be deleted from the privacy settings. The privacy page is special in that it hosts the privacy banner for editing purposes. While the banner is only edited on this page, it will actually be shown on all pages of the website.

Importing an existing page

Sparkle doesn’t work with HTML internally so it doesn’t load existing pages, but it can import their layout, text and images.

Open “Import Page” from the “Insert” top level menu, enter the address of your old site, or load it from disk, and start the import.

Sparkle will scan the page and extract layout information, then proceed to copy text and images into a newly created page.

If you want to import a full website, you can create a new project, and start the process from the bottom of the template picker window by entering the site address and clicking Import.

This gives a very reasonable approximation of the original page, and is an excellent starting point for a redesign of your old website.

At this point you have imported a single page of your site, but you can proceed to navigate to a different page (click on any link) and import that.

When you have imported all pages you can start the real cleanup work, here are a few suggestions:

• you can remove the header and footer from all imported pages, to create new ones, and use the option to show them in all pages
• you can pick new web fonts and use consistent text styles
• you can use a fresh new color theme

With all these done you will have a great visual refresh with a modest amount of work!

Importing a design from Sketch or Figma

Another way to add a page is by copy/pasting a design from Sketch. This requires installing the Sparkle plugin for Sketch. Likewise you can send a design from Figma to Sparkle, which requires installing the Sparkle plugin for Figma.