> For the complete documentation index, see [llms.txt](https://docs.antsomi.com/cdp-365-user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.antsomi.com/cdp-365-user-guide/media-template.md).

# Media Template

### <img src="https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2Fxko4x4pDK8pXkoI2LS2R%2Fimage.png?alt=media&amp;token=4de173bc-c890-455d-bcdc-3950a4354b69" alt="" data-size="line"> Media template is an application used to design banner ads displayed on customers' websites

1. Log into the **CDP** system, after logging in click the menu in the left corner of the screen
2. Select the menu as follows: **MEDIA TEMPLATE -> Media template**

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FhIpAvU6bqeKAo2u2wJt2%2Fimage.png?alt=media\&token=7173fe95-4a9c-49ad-b608-961b81035046)

3\. After clicking on **Media template**, the UI is displayed as below

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F7Q96xgPgcHN6WtDokfSZ%2Fimage.png?alt=media\&token=f3aeee4a-b056-434a-9b35-d9c9904ba404)

4\. Select **Blank Template** to create a new template

After clicking on Blank Template, then it will show all types for users to choose

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2Fcjv5D0liQGKveBLH2WH1%2Fimage.png?alt=media\&token=4cae0861-dd1e-4b28-99de-009fd6c37e21)

### <img src="https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FJ6dvoLzdw1cqcZgXYHSe%2F2.png?alt=media&amp;token=8f8eab64-7edd-43e9-ad74-e3a35d2b6551" alt="" data-size="line"> Design Template&#x20;

After selecting the type, the page design will be displayed as below&#x20;

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FFqOAgprAz2kusGCeQTCm%2Fimage.png?alt=media\&token=081c6f04-7a1a-4528-8eae-7fa1e8473f63)

#### SETTING

Click on an empty space outside the page design to set up the general configuration for the media template.&#x20;

Settings includes 2 parts: Basic and Advanced, Corresponding to each type, there will be different settings

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FEvhuYGmlzhBseEzAY4w9%2Fimage.png?alt=media\&token=eb1e390a-a660-4606-9b98-6fd8e084c4d1)

#### BLOCK

Click the Home button to open the Block panel

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FBsAkXgbz99lYycGbqoXx%2Fimage.png?alt=media\&token=6082f926-86e2-46b9-a36c-e75730e02ffe)

Block then 2 types:

**Standard**: Includes the available blocks of the system. Users can drag and drop into the page design to design media according to their needs (Columns,Text, Image, Button, Optin Fields, Yes/No, Countdown, Video, Coupon Wheel, Spacer, Divider, Icons, HTML)

**Saved Blocks**: Includes user-created and saved blocks.

#### COLUMN

Dragging and dropping the **COLUMN** icon from the block list to the page design will display the interface as shown below.

By default, it will display a 1-column type and display the Setting panel.

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FScUqfwKweVrWFqhbM5b8%2Fimage.png?alt=media\&token=ce58e57f-cbfc-462b-89b9-a26ef79cffc9)

1. Click to drag and drop to change the position of the column&#x20;
2. Clicking will display the Settings panel

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FywO46wzTaPqYSVspzg24%2Fimage.png?alt=media\&token=cc79f739-9b37-4fe0-9695-83609a693a0c)

3\.  Clicking will duplicate the column and all the contents inside the column. The duplicate column will display below the original column.

4\. Clicking will remove the column.

**Similar to setting, each block has content and advanced**

#### TEXT

Drag and drop the **TEXT** icon from the block list into the column to display the interface as shown below.

Default Text: Your Special Bonus Offer // Has Been Unlocked!

There are some actions you could do with the Text block, to do so, hover to the block and choose the action you want.

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F5WsayWWtAFHWcBRnQmlB%2Fimage.png?alt=media\&token=30bbcbc3-a871-46bf-999e-1d1f20317493)

1,2,4,5 same function as Column&#x20;

3\. Click to save the block. Clicking will display a pop up Save block as shown below if the block has not been saved before.

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2Fhe9BCz0prBjQelfEb1JU%2Fimage.png?alt=media\&token=760caa80-76a4-42ea-8da4-70181b596bf2)

If the block has been saved, a pop up will appear as shown below

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FdAAV5JXVO9K2JfXSUM11%2Fimage.png?alt=media\&token=e590fbfe-a821-4bc7-a4cc-9ca8c0eea5df)

**Similar to setting, each block has content and advanced**

#### IMAGE

Drag in the **IMAGE** icon from the block list to the column to display the **Image Selection** Popup

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FoluK34NTppMz0MwrGKUW%2Fimage.png?alt=media\&token=5b1a8a44-9c01-4bd7-b888-3b0c29f585a8)

Select "**Use**" to display the image on page design or icon "**Remove**" to remove the image from the gallery

**Select Image from computer:** Used to upload images from the client's computer.

After selecting "**Use**", show image on page design

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FXXp7nh9yXtTOFwjjTdLk%2Fimage.png?alt=media\&token=9c382c54-bda3-40ba-97b5-8459bbeaf110)

When hover, display options similar to Text

**Similar to setting, each block has content and advanced**

#### BUTTON

Dragging in the **BUTTON** icon from the block list into the column will display the interface as shown below.

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FSDvgMakCYpuYUSSUl0cN%2Fimage.png?alt=media\&token=ce1e0f1d-8e07-4fff-9baa-8a6fb7fad955)

When hover, display options similar to Text

**Similar to setting, each block has content and advanced**

#### OPTIN FIELDS&#x20;

Dragging the **OPTIN FIELDS** icon from the block list to the column will display the interface as shown below.&#x20;

Hover in the newly added block will display the actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F2KNWz5lQt4gw0OaY7zMX%2Fimage.png?alt=media\&token=693e02d2-4ba7-484b-8fc7-04cd1375c734)

**Similar to setting, each block has content and advanced**

*Note: each page has only 1 optin field*

#### YES/NO

Dragging the **YES/NO** icon from the block list to the column will display the interface as shown below.

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FTmWnfifjosUMuya1AyK4%2Fimage.png?alt=media\&token=01a9ab80-1ee3-428b-a5da-661b4cd6ea72)

**Similar to setting, each block has content and advanced**

**COUNTDOWN**

Dragging the **COUNTDOWN** icon from the block list to the column will display the interface as shown below.

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FNqMfTJw7Gn8b7u9kDrWm%2Fimage.png?alt=media\&token=04bc37c2-c7c6-4ac3-8fe0-886c356d9848)

**Similar to setting, each block has content and advanced**

#### **VIDEO**

Dragging the **VIDEO** icon from the block list to the column will display the interface as shown below.

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FKQKix7oGRuPenww8rnuD%2Fimage.png?alt=media\&token=1cb6cdf6-ddb2-4a12-82b9-927036cc6e86)

**Similar to setting, each block has content and advanced**

**COUPON WHEEL**&#x20;

Dragging the **COUPON WHEEL** icon from the block list to the column will display the interface as shown below.

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FjlkM6P5o0wYLTrcYB2gy%2Fimage.png?alt=media\&token=3859e3b2-9c43-4573-9cc3-0dbf244c8d0c)

**Similar to setting, each block has content and advanced**

Note: only fullscreen and gamified type have block coupon wheel&#x20;

#### **SPACER**

Dragging the **SPACER** icon from the block list to the column will display the interface as shown below.

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FVwIiorBbYh9jqFWTOZWF%2Fimage.png?alt=media\&token=299547ce-8979-412b-aace-4d37a18e6041)

**Similar to setting, each block has content and advanced**

**DIVIDER**

Dragging the **DIVIDER** icon from the block list to the column will display the interface as shown below.

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FSkLXP9IEDyu5cpenHLEO%2Fimage.png?alt=media\&token=3fd3baca-4296-4ad8-b34d-94373db3ab19)

**Similar to setting, each block has content and advanced**

#### **ICONS**

Dragging the **ICONS** icon from the block list to the column will display the Icon Selection pop up as shown below.&#x20;

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FeRDO9syP7pUVYgWlj3PG%2Fimage.png?alt=media\&token=46376baf-0e9f-48ff-9578-da782277ca24)

Clicking on an icon will display the interface as shown below.&#x20;

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FLCAglVExgjgadgS3EtWc%2Fimage.png?alt=media\&token=5a80d2c9-1e4d-43a2-821e-ca74c0f41998)

**Similar to setting, each block has content and advanced**

#### **HTML**

Dragging the **HTML** icon from the block list to the column will display the interface as shown below.

Hovering over the newly added block will display actions as shown below similar to Text

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F9OypWNVHsdXiszflVvDn%2Fimage.png?alt=media\&token=623d2fb8-b3a5-4b3d-abed-8b0018ef6c5b)

**Similar to setting, each block has content and advanced**