Spark Editor: Getting Familiar with the Basics

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

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.

downloads - 2023-11-30T191539.578


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 A Page' button.

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

image-png-Sep-04-2023-05-45-50-5835-PM

Basic Maneuvering

Once the editor has opened, you will see a panel across the top, and the resulting content shown in real time below.

image-png-Sep-04-2023-05-56-56-7040-PM


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.

image-png-Sep-04-2023-06-01-21-6944-PM

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. 

image-png-Sep-04-2023-06-04-28-3929-PM

You are also able to swap between existing Spark Pages directly from the editor. To do this, select the page's name at the top left to collapse your other pages to switch to.

image-png-Sep-04-2023-07-58-56-9884-PM

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.

image-png-Sep-04-2023-06-10-29-5349-PM

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

image-png-Sep-04-2023-06-12-09-5181-PMLayers View

This tab is always related to structural content on the page. On the left, note the blocks for the various sections features the editor offers.

image-png-Sep-04-2023-06-14-28-7724-PM

Blocks

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 tabs can be collapsed like Rows, Design and Advanced.

image-png-Sep-04-2023-06-21-46-1698-PM

You can add new blocks by clicking on the '+ Add New Block' button, duplicate or delete by selecting the appropriate buttons.

image-png-Sep-04-2023-06-27-20-4380-PM

Also, the editor is drag & drop friendly, so you can reorder the blocks by clicking and dragging them.

image-png-Sep-04-2023-06-32-00-9035-PM

As you click on the Add 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.

image-png-Sep-04-2023-06-39-21-5586-PM

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

image-png-Sep-04-2023-06-42-10-8199-PMUndo Your Changes

You can revert the changes on the page during your session in the editor by selecting the 'Undo' button. Choose a specific timestamp to revert back to, or select Page Open to rollback the page to when you first opened it.

image-png-Sep-04-2023-07-46-26-1735-PM

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.

image-png-Sep-04-2023-07-36-12-4999-PM

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

image-png-Sep-04-2023-07-37-27-7110-PM

Further Education about the Spark Editor and Spark Pages: