How to turn on design mode and edit in-context

Design Mode in Rocketspark lets you make visual tweaks directly on your site—no guesswork, just straightforward editing.

How to turn on design mode

Adjust Left & Right External Spacing

Adjust Top & Bottom External Spacing

Make the stack full-width

Adjust column gap

Resizing column widths

Vertical stack alignment

Add another column

How to Delete a Column

Access the mobile stack spacing quickly

How to turn on design mode

1. Hover over the top-right corner of any stack
2. Click the Design Mode toggle.

Once activated, you'll see blue handles and other editing tools appear, ready for you to adjust spacing, columns, and more!

Adjust Left & Right External Spacing:

1. Hover over the left or right edge of a stack until blue handles appear.
   
   

2. Click and drag the handle to the left or right to make the space narrower or wider. 
   
   
3. TIP: Hold Shift while dragging to adjust both sides evenly.
   

Adjust Top & Bottom External Spacing:

1. Hover over the top or bottom edge of a stack until blue handles appear.
   
   

2. Click and drag the handle up or down to make the space shorter or taller. 
   

3. TIP: Hold Shift while dragging to apply the same spacing to both top and bottom.
   

    

Make the stack full-width

Need more room to design? You can turn on "full-width" to have content closer to the edge of the page. 

1. Click the three dots (•••) on the stack for more settings. 
   

2. Toggle on “Full Width Editing” 
   This allows your stack to expand beyond its usual boundaries, giving you more space to work with edge-to-edge designs.
   
   
   
   

Adjusting column gap (internal spacing between columns)

1. Hover between two columns until a blue vertical line appears.
   
   
   

2. Click and drag left or right to increase or decrease the space between the columns.
   

Resizing column widths (stack column ratios)

1. Hover between columns until a diamond icon appears.
   
   
   

2. Click and drag the diamond to adjust the column widths.

   • For example, change from a 50/50 split to a 2/3 and 1/3 layout.

Vertical stack alignment

1. Toggle on design mode.
2. Click the three dots (•••) on the stack for more settings.
   
   
   

3. Click to choose:

   • Top Align: Content sticks to the top of the column.

   • Middle Align: Content centres vertically.

   • Bottom Align: Content aligns with the column’s bottom. 

Add another column

The in-context editor lets you dynamically add up to 6 columns or remove columns inside any stack.

1. Toggle on design mode.
2. Click the three dots (•••) on the stack for more settings. 
3. Select Add Column.
   
   
   
   

4. A new column will appear instantly. You can add new blocks or drag existing ones into the new column.
   
   

How to Delete a Column

Removing unused columns is simple and keeps your layout tidy.

1. Hover over the column you want to remove.

2. If there are no content blocks inside the column, a trash icon will appear. Click the trash icon to delete the empty column.
   

3. Confirm the deletion of the column.
   

4. The column will automatically disappear!

Note: Columns cannot be deleted if they contain content blocks. You’ll need to delete or move the content blocks first before removing the column.

Accessing the mobile stack spacing quickly

1. Toggle on design mode.
2. Click the three dots (•••) on the stack for more settings. 
   
   
   
3. This will open the mobile view of the stack you are working on to adjust the width and spacing. 
   You can adjust the column wrapping, column spacing, and stack spacing for the mobile view. 
   
   
4. To edit the size of text on mobile, close the width and spacing settings
   
   
5. Navigate to "heading & paragraphs"
   
   
   
   
6. Toggle to "mobile" and adjust the heading and paragraph styling for mobile. 
   
   
7. Make sure you save your changes!
   

If you need help navigating your editor, please contact support@rocketspark.com