> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Design Mode: Build Without Code

A step-by-step walkthrough for updating text, images, links, and visual styles in a Composer using the Elementor panel, no code required.


Design mode is the default state when you select a Composer widget in Elementor, there's no switch to turn on, it's just what you get unless you open the Code tab or AI Chat. See [Design Mode](/uichemy-composer/uichemy-widget/design-mode) and [Design vs Developer Mode](/uichemy-composer/concepts/design-vs-developer-mode) for the concept; this page is the practical walkthrough.

### Step 1: Select the Composer Widget

Click any Composer widget on the Elementor canvas. The left panel switches to show its **Content** and **Style** tabs.

### Step 2: Edit Content

Open the **Content** tab and update the **Text**, **Links**, and **Media** sections, one field per piece of editable content. Changes update live on the canvas, no save step needed to preview. See [Editable Fields](/uichemy-composer/concepts/editable-fields) for what each field type does and how dynamic data binding works.

### Step 3: Adjust Visual Styles

Open the **Style** tab. The **Composer** section has three buttons:

- **Edit Layer** (**Edit**), opens the layer editor.
- **Edit Code** (**Edit**), opens the [Code tab](/uichemy-composer/uichemy-widget/code-tab).
- **Edit With AI** (**Chat**), opens [AI Chat](/uichemy-composer/uichemy-widget/ai-chat-tab).

Click **Edit Layer** to open the layer editor: the rendered section, a layer tree, and a properties panel. Select any element to reposition it, change padding and colors, or reorder layers. See [Editor Tab](/uichemy-composer/uichemy-widget/editor-tab) for the full set of style controls.

### Step 4: Publish

Design mode changes preview live in the editor, but they only go live on the site after you click **Update** or **Publish** in Elementor.

### What Design Mode Can't Do

Design mode intentionally can't add or remove elements, change the layout structure, write Twig expressions, add forms, load external libraries, or change responsive breakpoints. See [Design vs Developer Mode](/uichemy-composer/concepts/design-vs-developer-mode) for the full list, these require [Developer Mode](/uichemy-composer/build/developer-mode) or [AI Chat](/uichemy-composer/uichemy-widget/ai-chat-tab) (Pro).

### Use Cases

- **Updating text and images after a conversion**, without opening the Code tab.
- **A content editor or client making routine updates**, safely, without a way to break the layout.
- **Quick visual tweaks**, spacing, color, or layer order, without leaving Elementor's own editor.

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Can I use Design mode on any Composer widget?" default-open="false">
    Yes. Any Composer widget with content shows its editable fields in the panel, regardless of whether the widget came from a Figma conversion, AI Chat, or hand-written code.
  </Expandable>

  <Expandable title="Why doesn't my edited text appear on the published page?" default-open="false">
    The Elementor editor updates live as you type, but publishing your change requires clicking **Update** or **Publish**.
  </Expandable>

  <Expandable title="How do I identify which field is which when they aren't labeled clearly?" default-open="false">
    Click into a field, the corresponding element highlights on the canvas. The field's current value (shown as placeholder text) is usually enough to tell them apart too.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Editable Fields" href="/uichemy-composer/concepts/editable-fields">
    See the editable fields Design mode is built around.
  </Card>
  <Card title="Content Tab" href="/uichemy-composer/build/content-tab">
    See practical patterns for using editable fields well.
  </Card>
  <Card title="Editor Tab" href="/uichemy-composer/uichemy-widget/editor-tab">
    See the panel controls Design mode gives you.
  </Card>
  <Card title="Developer Mode" href="/uichemy-composer/build/developer-mode">
    Switch to code when you need more control.
  </Card>
</Columns>