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

# Build Your First Section

Add a Composer widget in Elementor and build your first section, in code, visually, or with AI Chat.


There are two ways to build a section with UiChemy: **write or paste code** (Free), or **build it with AI Chat** (Pro). Pick whichever fits how you work.

### Step 1: Open a Page in Elementor

In your WordPress dashboard, go to **Pages**, then **Edit with Elementor** on the page you want to add a section to.

### Step 2: Add the Composer Widget

Search for **Composer** in the Elementor widget panel and drag it onto the canvas.

### Step 3: Build the Section

<ExpandableGroup>
  <Expandable title="Option A: Write or paste code" default-open="false">
    1. Select the widget and click **Edit Code** to open the **Code tab**, with HTML, CSS, and JS in one view.
    2. Write or paste your markup and styling. UiChemy scopes every CSS rule so it only applies inside that specific Composer widget.
    3. See [Code Tab](/uichemy-composer/uichemy-widget/code-tab) for the full walkthrough.
  </Expandable>

  <Expandable title="Option B: Build it with AI Chat (Pro)" default-open="false">
    1. Select the widget and open the **AI Chat tab**. The first time you use it, connect your own AI, either an Agent Bridge (CLI) or a WordPress AI Connector, see [AI Chat Tab](/uichemy-composer/uichemy-widget/ai-chat-tab) for setup.
    2. Describe the section you want: what it is, its content, and its visual style.
    3. Refine it with follow-up messages, or edit the result directly in the Editor or Code tab.
  </Expandable>
</ExpandableGroup>

### Step 4: Update Content Through the Panel

Once you've built a section either way, **editable fields** appear in the Elementor Content panel, letting you update text, images, and links without touching code. See [Editor Tab](/uichemy-composer/uichemy-widget/editor-tab) and [Editable Fields](/uichemy-composer/concepts/editable-fields).

### Step 5: Publish

Click **Update** or **Publish** in Elementor to finalize the page.

<Callout kind="info">
Screenshot: a Composer widget with a built section, the Content panel showing its editable fields.
</Callout>

### Use Cases

- **Building your first section** to learn the workflow before starting a real project.
- **Prototyping a section quickly**, without a Figma file to convert from.

### Related

<Columns cols={2}>
  <Card title="Editor Tab" href="/uichemy-composer/uichemy-widget/editor-tab">
    Fine-tune styles, spacing, and attributes by hand once you're happy with the structure.
  </Card>
  <Card title="Code Tab" href="/uichemy-composer/uichemy-widget/code-tab">
    Go deeper into the raw HTML, CSS, and JS behind your section.
  </Card>
  <Card title="AI Chat Tab" href="/uichemy-composer/uichemy-widget/ai-chat-tab">
    Describe a change in plain language and let AI Chat make the edit for you.
  </Card>
  <Card title="Editable Fields" href="/uichemy-composer/concepts/editable-fields">
    Turn your section into a reusable template with swappable content.
  </Card>
</Columns>