← Back to Documentation

Adding Content Blocks

Content blocks are the building elements of your pages. This guide explains how to add, configure, and manage blocks effectively.

What are Blocks?

Blocks are self-contained content elements that you place on your canvas. Each block type serves a specific purpose:

| Block Type | Purpose | |------------|---------| | Text | Paragraphs and body content | | Heading | Titles and section headers | | Image | Single photographs or graphics | | Gallery | Multiple images in a grid | | Video | Embedded or uploaded videos | | Button | Clickable call-to-action | | Spacer | Vertical empty space | | Divider | Horizontal line separator |

Opening the Block Palette

Access the block palette in three ways:

  1. Click the + button in the toolbar
  2. Press B on your keyboard
  3. Right-click on the canvas and select "Add Block"

The palette shows all available block types with icons and descriptions.

Adding a Block

Method 1: Click to Place

  1. Open the block palette
  2. Click on a block type
  3. Click on the canvas where you want the block
  4. The block appears at that position

Method 2: Drag and Drop

  1. Open the block palette
  2. Drag a block type onto the canvas
  3. Release where you want to place it
  4. Adjust position as needed

Method 3: Keyboard Shortcuts

Some blocks have direct shortcuts:

| Block | Shortcut | |-------|----------| | Text | T | | Heading | H | | Image | I | | Gallery | G | | Video | V |

Press the shortcut, then click to place.

Block Types in Detail

Text Block

For paragraphs, descriptions, and body content.

Features:

  • Rich text formatting (bold, italic, underline)
  • Multiple font options
  • Link insertion
  • Text alignment
  • Custom colors

Best for:

  • Descriptions and bios
  • Article content
  • Captions and notes

Heading Block

For titles and section headers.

Features:

  • Six heading levels (H1-H6)
  • Large, impactful typography
  • SEO-optimized hierarchy

Best for:

  • Page titles
  • Section headers
  • Feature callouts

Image Block

For single images and photos.

Features:

  • Drag-and-drop upload
  • Automatic optimization
  • Lightbox viewing
  • Caption support
  • Link wrapping

Best for:

  • Hero images
  • Featured photos
  • Standalone graphics

Gallery Block

For multiple images together.

Features:

  • Grid, masonry, or slideshow layouts
  • Thumbnail navigation
  • Lightbox support
  • Consistent spacing

Best for:

  • Photo collections
  • Portfolio showcases
  • Product displays

Video Block

For embedded or uploaded video content.

Features:

  • YouTube and Vimeo support
  • Direct video upload
  • Autoplay options
  • Custom thumbnails

Best for:

  • Showreels
  • Tutorials
  • Background videos

Button Block

For clickable calls-to-action.

Features:

  • Customizable text
  • Multiple styles (solid, outline, ghost)
  • Internal or external links
  • Hover effects

Best for:

  • Contact links
  • Purchase buttons
  • Navigation actions

Spacer Block

For adding vertical space.

Features:

  • Adjustable height
  • Invisible element
  • Responsive sizing

Best for:

  • Section separation
  • Layout breathing room
  • Vertical rhythm

Divider Block

For horizontal line separators.

Features:

  • Multiple styles (solid, dashed, dotted)
  • Color customization
  • Width control

Best for:

  • Content separation
  • Visual breaks
  • Section dividers

Managing Blocks

Selecting Blocks

  • Click a block to select it
  • Shift + Click to select multiple blocks
  • Drag a selection box around blocks to select a group
  • Ctrl/Cmd + A to select all blocks

Moving Blocks

  • Drag to freely reposition
  • Arrow keys for precise movement
  • Shift + Arrow for larger steps
  • Snap to grid for alignment (if enabled)

Resizing Blocks

  • Drag corner handles to resize proportionally
  • Drag edge handles to resize one dimension
  • Hold Shift while dragging to maintain aspect ratio
  • Enter exact dimensions in the properties panel

Duplicating Blocks

  1. Select the block
  2. Press Ctrl/Cmd + D or right-click > Duplicate
  3. The copy appears offset from the original
  4. Drag to desired position

Deleting Blocks

  1. Select the block(s)
  2. Press Delete or Backspace
  3. Or right-click > Delete

Block Properties

When a block is selected, the right panel shows its properties:

Common Properties

  • Position - X and Y coordinates
  • Size - Width and height
  • Opacity - Transparency level (0-100%)
  • Rotation - Angle in degrees
  • Link - URL when clicked

Type-Specific Properties

Each block type has unique settings. Click through the tabs in the properties panel to access:

  • Content - The block's main content
  • Style - Visual appearance options
  • Animation - Motion and transitions
  • Advanced - CSS classes, data attributes

Tips for Working with Blocks

  1. Start with structure - Add headings and text first, then images
  2. Use consistent spacing - Spacer blocks help maintain rhythm
  3. Group related content - Keep related blocks near each other
  4. Preview often - Check how blocks appear to visitors
  5. Duplicate for consistency - Copy blocks to maintain formatting

Next Steps

Learn more about specific block types:

Adding Content Blocks - Salon Docs