> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hodi.host/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How do I build my showcase website with Sitejet Builder?

![](https://hodi.host/images/kb/191_website-builder.png)

Sitejet Builder is a visual editor, natively integrated into cPanel, that lets you design and publish websites quickly. Hodi provides it at no extra cost, directly from your hosting space. This guide walks you through it **step by step**, from logging in to going live, with a focus on eco-design.

#### Prerequisites

* Access to your Hodi client interface (credentials provided when you placed your order).
* A domain name already created/pointed to the hosting.
* An up-to-date web browser (Chrome, Firefox, Edge, or Safari).
***⚠️ Important**** : before you start, organize your information (text, photos, videos, etc.) and take a few minutes to plan your pages and their structure outside of the SiteJet Builder tool. You'll save considerable time when designing your site!*

#### Access Sitejet Builder via cPanel

1. [Log In](https://help.hodi.host/en/article/how-do-i-access-cpanel-en4rsm/) to **cPanel** in your Hodi interface

2. In the dashboard:

   either click **Get Started** in the featured block,

   ![](https://hodi.host/images/kb/188_sitejet.jpg)

   or open the **Domains ▸ Sitejet Builder** section

   ![](https://hodi.host/images/kb/189_Capture-decran-2025-08-01-a-09.15.24.png)

1. The list of your domains is displayed. Click **Create a Site** (or **Edit Site** if a project already exists) next to the domain you want.

2. The Sitejet platform opens. You're ready to get started!

#### Overview of the Sitejet interface
![](https://hodi.host/images/kb/192_sitejet-board-2.png)

| **Zone** | **Quick Description** |
| ---- |
| **Top bar** | Everything related to navigating your project: Preview mode, Editor mode, Project Settings, and of course the famous **Publish!** button |
| **Left sidebar** | The components (blocks, sections, widgets) used to build your site. Just drag and drop them into the central canvas on the right! |
| **Central canvas** | A real-time preview of your page |
| **Right sidebar** | The properties of the selected component: text, colors, margins, etc. |
| **Hamburger menu** | All the advanced functions of your project (SEO, backups, sharing, export) |

#### Detailed site creation

1. **Start a project**

> Click **Try Sitejet Builder**.

2. **Select a template**

> Browse the categories or use the search bar.
> Click **Preview** to test the demo.
> Confirm with **Use this template**.

3. **Set up the global information**

> Logo, favicon, main color palette.
> Font: favor system fonts to lighten load times.

4. **Customize the pages**

> In the sidebar, drag **components** (header, hero, testimonials…).
> Edit the text directly **inline** or via the panel on the right.
> Replace images with your own optimized visuals (see Eco-design).

   ![](https://hodi.host/images/kb/193_composant.png)

5. **Manage navigation**

> The **Main Navigation** updates automatically when you add/rename a page.
> Use **Pages ▸ Add a page** to create blank pages or duplicate a template.

6. **Advanced features (optional)**

   **> Forms**: drag in a Form block, configure the recipient address.
   **> Responsive**: test the Mobile and Tablet views via the screen icon.
   **> SEO**: Hamburger menu ▸ *SEO & Settings*: title/description tags, sitemap, favicon.

#### Publish your site

1. Click **Publish** (top right corner).

2. Choose your domain and confirm.
   **⚠️ Warning:** All existing files in the root directory will be replaced.

3. Wait a few seconds, then click **View site** to check that it's live.

4. **Need a rollback?**
   Select *Backups* in the hamburger menu and restore a previous version.
   ***⚠️ Important :**** before each publication, download a backup via cPanel ▸ Files ▸ Backup.*

#### Eco-design: best practices!

| Goal | Concrete Action |
| ---- |
| **Reduce media weight** | • Convert your images to **WebP**. • Compress your videos or host them on an external platform (YouTube, PeerTube). |
| **Limit HTTP requests** | • Use a single font (or system fonts). |
| **Improve accessibility** | • Use high-contrast colors. • Add descriptive alt text for each image. |
| **Optimize loading** | • Enable **lazy-loading** for images in *Site Settings ▸ Performance*. • Minify CSS/JS (the *Optimize code* option). |
| **Measure & adjust** | • Test your page on **PageSpeed Insights** and **EcoIndex**.• Fix red flags before publishing. |

#### Additional resources

* SiteJet Builder tutorial videos [https://www.youtube.com/@SitejetWebsiteBuilder](https://www.youtube.com/@SitejetWebsiteBuilder)
* Official cPanel documentation: [Sitejet Builder](https://docs.cpanel.net/cpanel/domains/sitejet-builder/) *(in English)*