# How to add a new template?

### Add with admin builder feature.

**Step 1:** access **/settings/templates**

**Step 2:** Click the button to clone a template available

![](https://850593793-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MYApEZXe_vNVj_bFjvf%2F-MkjByr9dNPqw6Qh2ZvW%2F-MkjD7NzMtIFAhzYvzeu%2FScreen%20Shot%202021-09-29%20at%2008.42.23.png?alt=media\&token=a65c64b7-7a20-4063-8fea-5ff73145f102)

**Step 3:** Click **button builder** for build template

![](https://850593793-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MYApEZXe_vNVj_bFjvf%2F-MkjByr9dNPqw6Qh2ZvW%2F-MkjDCMbypFcHW8hAASo%2FScreen%20Shot%202021-09-29%20at%2008.42.53.png?alt=media\&token=90bfb4c8-960f-4a68-aa91-ca85c2496352)

### Adding templates with your HTML and CSS code

*This is a guide for programmers. You need HTML and CSS skills to understand it.*

#### **Struct template HTML and CSS**

![](https://850593793-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MYApEZXe_vNVj_bFjvf%2F-MkjByr9dNPqw6Qh2ZvW%2F-MkjJc4aBoNdCEznNBj_%2FMarketing-Online-Page-8.drawio%20\(1\).png?alt=media\&token=6f91092f-bfbe-4601-8484-e86b64f3caf1)

#### Some Rule for CSS and HTML to **fit with the builder**

**General**: \
\- Use **Bootstrap 4.5** default and **font-awesome 5.15** \
\- Separate CSS does not code in HTML\
\- Do not use a **background image and overlay** it will not work with the builder\
\- Don't use **"important attribute"** for **CSS**. The user can't change style in the builder

Use code bellow for set **background image**

```
#id {
    background: url (##image_url##image.jpg) rgba (0, 0, 0, .7);
    background-size: cover;
    background-blend-mode: multiply
}
```

**Upload new image:**

```
#Template HTML or CSS: ##image_url##yourimage.png => Upload yourimage.png to public/images/content_media

```

**Icon:** \
Do not use class **fa-2x fa-3x** (To increase size). Increase the size with CSS