# Adding Page Content

{% hint style="info" %}
The information in this section refers to definitions and concepts introduced in the [Page Editor Tour](https://docs.zingy.ai/app-editor/page-editor/page-editor-tour) section.
{% endhint %}

{% hint style="success" %}
You can use the information in this section for adding content to both *Pages* and *Forms*.
{% endhint %}

The page's content is displayed in the Page Content area of the Page Editor. 

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FGX9967XWUtM5x2btdTaf%2Fimage.png?alt=media&#x26;token=769343a7-dbae-4840-8bb4-5638829ec9dd" alt="Page Editor - Page Content area"><figcaption><p> v</p></figcaption></figure></div>

***

The following sections describe the various ways you can add content to a page.

### 1) Adding content from the Page Element Library

Content from the page element library can be added in following ways:

#### **a) Drag and drop element from the library**

Select the element from the sidebar and drag it into the page content area.&#x20;

In the example below, we add the 2 column layout element into the page and then add an image and a heading into the two columns.

Depending on the element, you can drag it into another element or to any part of the page.

e.g. Layout columns can only be added to Layout rows. For details on various other built-in elements, please see  [Built-in elements in Page Element Library](https://docs.zingy.ai/app-editor/page-editor/built-in-elements) .&#x20;

{% embed url="<https://youtu.be/TAlQnNCe0lE>" %}
Video: Add content using drag and drop from library
{% endembed %}

#### **b) Select element on your page and click to add**

You can also add content to the page by pre-selecting an element in the page content area and then clicking on the desired element in the library.

In the example below we select the column on the right and then click on the 'Image' element to add it.

{% embed url="<https://youtu.be/C5WqyH2fPMc>" %}
Video: Click to add content
{% endembed %}

***

***

### 2) Importing HTML code

The Page Editor allows importing HTML code into the main body or into an existing element on the page. Please note that only certain elements allow importing HTML code inside them.

The example below shows how to import html code into the main body of your page. If your page already has existing content, the new content will be appended to the end of the page.

{% embed url="<https://youtu.be/GdufyHZYwMs>" %}
Video: Import HTML into main body
{% endembed %}

The example below imports an image via HTML code into a layout column. If the selected element already has content, the new content will be appended to the end.

{% embed url="<https://youtu.be/en1t7m2s9ns>" %}
Video: Import HTML inside another element.
{% endembed %}

When you enter your HTML code, **do not include** javascript code via the **`script`** tag, CSS files via the **`link`** tag or style definitions via the **`style`** tag.&#x20;

{% hint style="danger" %}
Disallowed tags will be removed from the HTML code.

Disallowed tags include unsafe ones like **`script`**&#x6F;&#x72;**`link`**, and tags that form the page skeleton like **`html`**, **`head, body`** or ones that usually appear within the **`head`** tag like **`title`**, **`meta`**, **`style`**, etc.

Zingy supports Bootstrap based CSS classes. For more information see: <https://getbootstrap.com/docs/4.6/getting-started/introduction/>
{% endhint %}

{% hint style="success" %}
You can add custom scripts, css files and define custom styles for your page via the Page Settings screen. If you want these to be applied to all pages of your app, you can do this via the App Settings screen.
{% endhint %}

***

### 3) Using :magic\_wand:AI Wiz

If you are looking for some ideas and inspiration, AI Wiz can help you generate layouts and content by simply typing what you want in plain English.&#x20;

For more information please see: [Using AI Wiz in the Page Editor](https://docs.zingy.ai/app-editor/page-editor/using-ai-wiz-in-the-page-editor).

### See also

{% content-ref url="working-with-page-elements" %}
[working-with-page-elements](https://docs.zingy.ai/app-editor/page-editor/working-with-page-elements)
{% endcontent-ref %}

{% content-ref url="editing-text" %}
[editing-text](https://docs.zingy.ai/app-editor/page-editor/editing-text)
{% endcontent-ref %}