Content Block Selection

  • Updated

Selecting and editing individual Content Blocks is one of the most important skills when designing in Act-On’s Email Composer and Landing Page Composer. Every text, image, button, or custom element in your design lives inside a Content Block - and knowing how to select and move them gives you precise control over layout and flow.

Each Composer uses the same interaction model, so once you’ve learned to manage Content Blocks in one, the same approach applies everywhere. For layout-level adjustments, see Working with Rows.

Quick Reference (Advanced Users) - Click to Expand
  • Hover over a Content Block to display the drag handle.
  • Click a block to select it - the sidebar updates with that block’s properties.
  • Icons appear at the bottom-right corner to clone or delete the block.
  • Drag using the handle to move the block within the same Row or to another compatible Row.
  • Each block type (Text, Image, Button, HTML, etc.) shows unique edit options in the sidebar.
Try it like this: Hover over a text block in your email or landing page until the icon appears. Drag it below an image, then click the clone icon to duplicate it. Edit the new copy in the sidebar to create a short follow-up paragraph or a supporting message.

Selecting a Content Block

Each Content Block is its own editable container - a text area, image, or interactive element within a Row. When you select a block, the sidebar reveals its styling and content options. This makes it easy to edit individual sections without affecting the rest of your design.

  1. Hover over a Content Block: Move your cursor over the block until the handle appears on the right. Use this handle to drag the block to a new position.

Hover over a Content Block to reveal the move handle (Email and Landing Page Composer)

  1. Click to select the block: The block is highlighted, and icons appear in the bottom-right corner. Use these to clone (duplicate) or delete the block. Selecting a block automatically deselects any previously selected one.

Selected Content Block showing clone and delete icons

Once selected, the right-hand sidebar updates to show all the settings for that block - such as font style, padding, or link targets. This context-aware editing keeps your workspace simple: you’ll only see controls for the item you’re working on.

In the example above, selecting a text block also opens popup formatting options for titles, paragraphs, lists, or buttons.

Editing and Navigation Tips

As you refine your design, quick navigation and selection accuracy become key. Use these tips to move smoothly between blocks and Rows:

  • One active block at a time: Selecting a new block automatically deselects the current one.
  • Sidebar focus: The sidebar always reflects the active block. Collapse or expand panels as needed for quick editing.
  • Drag precision: You can drag blocks vertically within the same Row or between Rows. Drop targets are highlighted in blue when placement is valid.
  • Keyboard shortcut: Press Esc to deselect a block and return to Row-level editing.
  • Undo/Redo: If you move or delete a block by mistake, use the Undo button in the Composer toolbar to reverse the action.

Block-Specific Settings

Each type of Content Block offers unique editing options in the sidebar:

  • Text blocks: Font, size, color, alignment, and link options.
  • Image blocks: Image upload, alt text, link target, width, and border controls.
  • Button blocks: Button label, color, shape, and link action.
  • Divider blocks: Line style, thickness, and spacing adjustments.
  • Custom HTML blocks: Add or edit custom markup directly in the HTML editor.

These settings ensure each block behaves consistently across devices while keeping your design flexible and reusable.

Best Practices

  • Keep your layout organized - use Rows to group related blocks together.
  • Clone blocks for visual consistency instead of rebuilding from scratch.
  • Preview your design in desktop and mobile modes to confirm alignment and spacing.
  • Use descriptive alt text for all images to support accessibility and deliverability.

Was this article helpful?

Have more questions? Submit a request