Spark Editor: Spark Creator

Test your creativity with the Spark Creator Block which allows you to build out custom blocks and create unique content.

Go into the Spark Editor, and click on 'Add New Block'.

image-png-2

Find the Spark Creator and click on the 'Add Block' button.

image-png-3


Once you have the block added, select the block from Layers View to start editing and adding content. First thing you will notice is that there are the 3 tabs, Rows, Design, and Advanced.

image-png-4

image-png-Aug-29-2023-08-38-33-9961-PMRows

The Rows tab is the place where you add your content. You can add a new row by selecting 'Add New Row'. (you can have multiple Rows in a Block)

image-png-Aug-29-2023-09-11-02-2864-PM

Rows act the same way as blocks in its basic functions. You can delete, duplicate, rename (right click), and re-order.

image-png-Aug-29-2023-09-26-42-4383-PM
Each row that is created will have Columns, Settings, and Advanced tabs.

image-png-Aug-29-2023-10-32-06-8717-PM

Columns

Collapse the Columns tab and select the Add Columns button to add a new column.

image-png-Sep-04-2023-03-07-44-8573-PM

You will be offered layout choices which you can choose from.

image-png-Sep-04-2023-03-08-35-8545-PM
Once you choose a layout, you can add, edit, delete, and duplicate columns.

image-png-Sep-04-2023-03-18-01-3951-PM

You can also adjust the column's width and spacing.

image-png-Sep-04-2023-03-20-53-5790-PM

When you edit a column, it will have Widgets, Design, and Advanced tabs.

image-png-Sep-04-2023-03-26-52-0108-PM

Widgets

Under the Widgets tab you will have different widgets to add, starting from Text Widgets, Image, Button, to some of more complex widgets like Video, Map, Lead Forms, etc.

image-png-Sep-04-2023-03-47-47-6850-PM


Each widget will be different in terms of their customization options. Also, each widget will have 3 tabs similar to the previous elements:

image-png-Sep-04-2023-03-52-22-2164-PM

These options also vary depending on the widget type.

Design

In the Design settings, you can adjust things like Background, Overlay, Spacing, Responsiveness, Display None (Click on the device size to hide the block), and Borders. 

image-png-Aug-29-2023-09-04-44-8174-PM

Row's Design tab has the same options that you can adjust for the Block settings, with few exceptions like 'Container' and 'Alignment':

image-png-Sep-01-2023-11-24-40-2398-PM
Column's Design tab has the same options as Block and Row's, with the exceptions shown below:

image-png-Sep-04-2023-03-41-49-7272-PM-1

 

Advanced

For advanced CSS usage.

image-png-Aug-29-2023-08-56-29-8765-PM