> For the complete documentation index, see [llms.txt](https://docs.zillapage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zillapage.com/frequently-asked-questions/how-to-add-a-new-template.md).

# 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

![](/files/-MkjD7NzMtIFAhzYvzeu)

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

![](/files/-MkjDCMbypFcHW8hAASo)

### 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**

![](/files/-MkjJc4aBoNdCEznNBj_)

#### 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