Quick Elements
Tutorials

How do I add blocks and elements to my Quick Elements website?

Add text, images, and other blocks to a page, then move and edit them.

2 min read Updated Sep 2024
How do I add blocks and elements to my Quick Elements website?

Use blocks to add text, images, and other content to a page. You can move them around and change their settings as you work.

← Documentation

Understanding Blocks

Blocks are the fundamental building units of your content. Each paragraph, image, heading, or specialized content type is represented by a block.

Examples of Blocks Include:

  1. Text Blocks: Paragraphs, headings, lists
  2. Media Blocks: Images, videos, audio
  3. Layout Blocks: Columns, groups, spacers
  4. Widget Blocks: Search, calendar, latest posts
  5. Embeds: YouTube, Twitter, etc.

Adding Blocks

  1. Click the “+” icon in the editor, found at the top left of the page.
  2. Browse or search for the desired block type.
  3. Click on the block to add it to your content.

Tip: You can also type “/” in a new line to quickly search and add blocks.

Editing Blocks

  1. Click on any block to select it.
  2. Use the toolbar that appears above the block for quick formatting options.
  3. Look at the right sidebar for additional settings specific to that block type.

If you don’t see the block settings when selecting a block, make sure the “Settings” tab is active at the top right.

Moving and Arranging Blocks

  • Drag and Drop: Click and hold the six-dot icon to drag blocks.
  • Arrow Keys: Use the up and down arrows in the block toolbar.

Working with Groups and Columns

  1. Creating Groups: Select multiple blocks, then click the “Group” option in the toolbar.
    • Access the menu by right clicking with one or more blocks selected in the list view.
  2. Adding Columns: Insert a Column block, then add content blocks within each column.
    • Drag blocks directly under a column to nest the block inside the column.

Reusable Blocks (Patterns)

  1. Create a block or group of blocks.
  2. Click the three-dot menu in the block toolbar.
  3. Select “Create Pattern”.
  4. Give your pattern a name.

To use: Find your saved block in the block inserter under “Patterns”.

Advanced Block Techniques

  1. Block Patterns: Pre-designed layouts found in the block inserter.
  2. Custom HTML: Use the Custom HTML block for more control.

Tips for Efficient Block Editing

  1. Learn keyboard shortcuts for faster editing.
  2. Use the list view to get an overview of your block structure.
  3. Experiment with different block combinations to create unique layouts.