> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Advanced & Layout Fields

Advanced & Layout fields empower developers and content teams to embed custom code, apply styles, and build complex page layouts directly within Experro’s CMS. This section covers:

* **Script**
* **Style**
* **Page Editor**
* **Component**
* **Flexible Content**

## 1. Script

The **Script** field lets you include custom JavaScript snippets or code blocks that execute on the front‑end.

### Key Configuration Options

* **Default Tab**

  * *Field Name* : Enter the display name for the field.
  * *Internal Field Name* : This field is auto-populated based on the Field Name.

* **More Tab**

  * **Min/Max Height**: Control the visible height of the code editor, improving readability for longer scripts.

## 2. Style

The **Style** field provides a CSS editor for custom styling rules. Use it to inject scoped CSS for specific pages or components without touching your global stylesheet.

### Key Configuration Options

* **Default Tab**

  * *Field Name* : Enter the display name for the field.
  * *Internal Field Name* : This field is auto-populated based on the Field Name.

* **More Tab**

  * **Min/Max Height**: Adjust the editor’s height to comfortably view your CSS rules.

## 3. Page Editor

The **Page Editor** is a visual, drag‑and‑drop builder that lets editors assemble pages using pre‑configured elements such as text blocks, images, carousels, banners while seeing a live preview of the final layout.

<Tip> Only content types with **“Act as Webpage”** enabled can host a Page Editor field. A user must have permissions to add or modify fields in the schema.</Tip>

**Adding Page Editor to a Content Type**:

1. In your workspace, open **Content Model** from the sidebar.
2. Select the Model you wish to enhance.
3. Click **Add Field** → **Page Editor**.
4. Provide a **Field Name** and **Internal Name**, then **Save**.
5. Switch to **Content Library**, open an entry of that Model, and click **Launch Page Editor**.
6. Drag elements from the toolbar onto the canvas, arrange sections, and customize styles, all with an on‑the‑fly preview.

## 4. Component

Components are reusable field groups (e.g., “Image Card,” “Testimonial Block”) that you define under **Content Model → Components**. Once created, a **Component** field embeds these blocks into your Models:

You can add a component to a content model after you have defined a component from **Content Model → Components**.

In order to add a component to a content model, navigate to the Content Model that you wish to enhance. Click **Add Field**. Select the component that you wish to add to the content model.

Check the section on [Components](/content/content_model/components) for full details on creating and using Components.

## 5. Flexible Content

The **Flexible Content** field provides a free‑form layout builder for editorial teams who need custom page structures beyond predefined Components or the Page Editor. It lets you:

* Mix and match **Sections** (e.g., Hero, Gallery, FAQ) in arbitrary order.
* Define per‑section **Settings** (background color, padding, custom CSS).

### Key Configuration Optiions

* *Field Name* : Enter the display name for the field.
* *Internal Field Name* : This field is auto-populated based on the Field Name.

<Tip> Use Flexible Content when your site requires many unique page templates. For more structured layouts, prefer the Page Editor or Components.</Tip>

## What’s Next

Having configured your advanced and layout fields, you’re ready to learn about **Components** (defining reusable content blocks).