All Collections
Site Editor
Spark Editor
Spark Editor (Legacy)
Spark Editor: Getting Familiar with the Basics
Spark Editor: Getting Familiar with the Basics

Use the power of the AF editor to create or edit Spark content pages quickly and easily

Brycen Lawson avatar
Written by Brycen Lawson
Updated over a week ago

Spark Editor gives you the opportunity to visually build out your content and flexibly enable unique and powerful features quickly and easily.

The Spark Pages are located under General Content > Spark Pages.

As you enter the Spark Pages, you will see a list of existing Spark Pages, and as well the ability to add new ones by clicking on the "Add New Page" button.

If you want to edit an existing  Spark Page, click on the "Edit Page" button on the right side of the panel.

Basic Maneuvering

Once the editor has opened, you will see a panel on your left, and the resulting content shown in real time on the right.

If at anytime you want to collapse the panel on the left, just select the arrow button on the bottom left.

Also, you may use the "Open The Page In New Window" button to open a new tab in your browser to view the result of your content on the page.

During development, you may want to view how your content will appear from various device sizes. Click the 'Responsive' icon to view the responsive page size options and select from a device size to see your layout update in real time. 

The Settings Tab

In case you want to change the layout of the page, there is a 'Settings' icon that allows you to select a page template and remove header, footer, or both.

Additionally, you can set a featured image, or Upload/Download Templates, which is covered in this tutorial.

The Content Tab

This tab is always related to structural content on the page and will always show first as you enter the editor. In the top left, note the blocks for the various sections features the editor offers.


Your page is built out of blocks. Each block has its own unique customization, which we will cover separately in other tutorials. Here as an example of the Hero block. After clicking on the block you will notice some settings can be collapsed like Block Settings and Content.

You can add new blocks by clicking on the '+ Add New Block' button, duplicate or delete by selecting the appropriate icons. Also, the editor is drag & drop friendly, so you can reorder the blocks by hovering over the re-order button (up and down arrow button).

As you click on the Add New Block button, you will notice all of the block types that are available for selection. Click on the desired one to add it and customize it's settings.

You can also click on + sign to collapse the categories to see which blocks are available, based on what kind of a block you are looking for.

Save Your Changes

Of course, you will want to save your work, so at anytime in your build, you may select the 'Save' button. Any changes you have made will be saved and you can continue making changes to your site.

Once you have completed any changes you want to make, use the 'Exit' button to close out of the editor.

Further Education about the Spark Editor and Spark Pages:

Did this answer your question?