Guide complet d'utilisation

# Documentation Izibrick - Créateur de pages

Bienvenue dans la documentation du système de création de pages Izibrick. Ce guide vous aidera à maîtriser tous les outils disponibles pour créer des sites web professionnels.

## Table des matières

1. [Introduction](#introduction)
2. [Concepts de base](#concepts-de-base)
3. [Les Containers](#les-containers)
4. [Les Widgets](#les-widgets)
5. [Templates prédéfinis](#templates-prédéfinis)
6. [Guides pratiques](#guides-pratiques)
7. [Astuces et bonnes pratiques](#astuces-et-bonnes-pratiques)

---

## Introduction

Izibrick utilise un système modulaire simple et puissant pour créer vos pages web. Vous construisez vos pages en empilant des **containers** qui contiennent des **colonnes**, et dans ces colonnes vous placez des **widgets** (éléments de contenu).

**Architecture :**
```
Page
└── Container (structure)
└── Colonnes (mise en page)
└── Widgets (contenu)
```

## Concepts de base

### Container
Un **container** est une section de votre page. Il définit :
- La largeur du contenu (Boxed, Narrow, Full-width)
- Le nombre de colonnes (1, 2, 3 ou 4)
- Les proportions entre colonnes (50/50, 30/70, etc.)
- Le style (couleur de fond, image, espacement)

### Colonnes
Les **colonnes** organisent le contenu horizontalement. Vous pouvez choisir différents ratios :
- **1 colonne** : Contenu pleine largeur
- **2 colonnes** : 50/50, 30/70, 70/30, 40/60, 60/40
- **3 colonnes** : 33/33/33, 25/50/25
- **4 colonnes** : 25/25/25/25

### Widgets
Les **widgets** sont les éléments de contenu que vous placez dans les colonnes. Chaque widget a une fonction spécifique (texte, image, formulaire, etc.).

---

## Les Containers

### Types de largeur

#### Boxed (Encadré)
- Largeur maximale : 1200px
- Centré automatiquement
- Idéal pour : contenu principal, articles

#### Narrow (Étroit)
- Largeur maximale : 800px
- Centré automatiquement
- Idéal pour : textes longs, lecture confortable

#### Full-width (Pleine largeur)
- Prend toute la largeur de l'écran
- Idéal pour : bannières, galeries, sections visuelles

### Layouts disponibles

#### Une colonne
```
┌─────────────────────────────────┐
│ Contenu │
└─────────────────────────────────┘
```
**Usage :** Texte centré, bannières, sections simples

#### Deux colonnes (50/50)
```
┌────────────────┬────────────────┐
│ Colonne 1 │ Colonne 2 │
└────────────────┴────────────────┘
```
**Usage :** Texte + image, comparaisons

#### Deux colonnes (30/70)
```
┌──────┬─────────────────────────┐
│ Col1 │ Colonne 2 │
└──────┴─────────────────────────┘
```
**Usage :** Sidebar + contenu principal

#### Deux colonnes (70/30)
```
┌─────────────────────────┬──────┐
│ Colonne 1 │ Col2 │
└─────────────────────────┴──────┘
```
**Usage :** Contenu principal + sidebar

#### Trois colonnes
```
┌──────────┬──────────┬──────────┐
│ Col 1 │ Col 2 │ Col 3 │
└──────────┴──────────┴──────────┘
```
**Usage :** Services, fonctionnalités, grilles

#### Quatre colonnes
```
┌──────┬──────┬──────┬──────┐
│ Col1 │ Col2 │ Col3 │ Col4 │
└──────┴──────┴──────┴──────┘
```
**Usage :** Icônes, logos, petits éléments

### Configuration avancée

#### Espacement (Padding)
Contrôle l'espace autour du contenu du container
- Format : `60px 0` (haut/bas gauche/droite)
- Exemples :
- `60px 0` : Espace vertical seulement
- `40px 20px` : 40px vertical, 20px horizontal

#### Gap (Espacement entre colonnes)
- Par défaut : 30px
- Ajustable de 0px à 60px
- Plus grand = plus d'espace entre colonnes

#### Couleur de fond
- Couleur unie (ex: `#f8fafc`)
- Transparent
- Image de fond

---

## Les Widgets

### 1. Hero (Bannière)

**Description :** Bannière d'en-tête avec titre, sous-titre et bouton d'action

**Options :**
- **Type de fond :**
- Dégradé de couleurs
- Image statique
- Carrousel d'images
- Vidéo (YouTube, Vimeo, locale)
- **Hauteur :** Small (150px), Medium (400px), Large (600px), Fullscreen (100vh)
- **Alignement :** Gauche, Centre, Droite
- **Overlay :** Calque sombre pour améliorer la lisibilité

**Cas d'usage :**
- Page d'accueil : Grande bannière avec message principal
- Pages internes : Petite bannière avec titre de page

**Exemple de configuration :**
```
Titre: "Bienvenue sur notre site"
Sous-titre: "Découvrez nos services"
Type de fond: Image
Hauteur: Large
Overlay: Oui (40% opacité)
Bouton CTA: "En savoir plus"
```

### 2. WYSIWYG (Éditeur de texte)

**Description :** Éditeur de texte riche pour tout type de contenu

**Fonctionnalités :**
- Formatage : Gras, Italique, Souligné
- Titres : H1, H2, H3, H4
- Listes : À puces, Numérotées
- Liens : Internes, Externes
- Images : Insertion, Redimensionnement
- Alignement : Gauche, Centre, Droite, Justifié
- Couleurs : Texte et fond

**Cas d'usage :**
- Textes d'introduction
- Articles et descriptions
- Contenu mixte texte/images
- Listes de caractéristiques

### 3. Contact Form (Formulaire de contact)

**Description :** Formulaire de contact configurable

**Champs disponibles :**
- Nom
- Email (obligatoire)
- Téléphone
- Sujet
- Message

**Options :**
- Texte du bouton personnalisable
- Message de confirmation
- Validation automatique
- Envoi par email

**Configuration recommandée :**
```
Afficher nom: Oui
Afficher email: Oui
Afficher téléphone: Oui
Afficher sujet: Non (pour formulaire simple)
Afficher message: Oui
Texte bouton: "Envoyer"
```

### 4. Blog (Liste d'articles)

**Description :** Affiche vos articles de blog

**Options :**
- **Layout :** Grille ou Liste
- **Colonnes :** 2, 3 ou 4 colonnes
- **Éléments affichés :**
- Image mise en avant
- Extrait de l'article
- Date de publication
- Auteur
- **Nombre d'articles par page**

**Cas d'usage :**
- Page blog principale
- Section "Derniers articles"
- Archives par catégorie

### 5. Map (Carte Google Maps)

**Description :** Carte interactive Google Maps

**Configuration :**
- Adresse ou coordonnées GPS
- Niveau de zoom
- Type de carte (Route, Satellite, Hybride)
- Hauteur de la carte

**Cas d'usage :**
- Page contact : Localisation de votre entreprise
- Page à propos : Carte avec plusieurs points

### 6. Video (Vidéo)

**Description :** Intégration vidéo responsive

**Sources supportées :**
- YouTube
- Vimeo
- Fichier local (MP4, WebM)

**Options :**
- Ratio : 16:9, 4:3, 21:9
- Lecture automatique
- Afficher les contrôles
- Boucle

---

## Templates prédéfinis

Izibrick propose des templates prêts à l'emploi pour démarrer rapidement.

### 1. Page d'accueil - Hero + Services

**Structure :**
1. Hero avec image de fond
2. Titre section services (1 colonne)
3. Grille 3 colonnes pour services

**Idéal pour :** Sites vitrines, landing pages

### 2. Page Contact - Simple

**Structure :**
1. Hero avec titre "Contactez-nous"
2. 2 colonnes (60/40) :
- Formulaire de contact
- Coordonnées (WYSIWYG)

**Idéal pour :** Pages contact standard

### 3. Page À propos - Texte + Image

**Structure :**
1. Hero avec titre et sous-titre
2. 2 colonnes (50/50) : Texte + Image
3. Section valeurs (1 colonne)

**Idéal pour :** Présentation entreprise, histoire

### 4. Page Services - Grille

**Structure :**
1. Hero "Nos Services"
2. Grille 2x2 de services avec cartes stylisées

**Idéal pour :** Présentation de services/produits

### 5. Page vierge

**Structure :** Aucun container
**Idéal pour :** Partir de zéro avec une créativité totale

---

## Guides pratiques

### Comment créer une page d'accueil ?

1. **Choisir un template**
- Cliquer sur "Charger un template"
- Sélectionner "Page d'accueil - Hero + Services"

2. **Personnaliser le Hero**
- Cliquer sur le widget Hero
- Modifier le titre et sous-titre
- Ajouter votre image de fond
- Ajuster la hauteur et les couleurs

3. **Modifier les services**
- Cliquer sur chaque colonne
- Éditer le contenu WYSIWYG
- Ajouter titres et descriptions

4. **Ajouter d'autres sections**
- Glisser un nouveau container
- Choisir un layout
- Ajouter des widgets

5. **Enregistrer**

### Comment créer une page Contact ?

1. **Utiliser le template Contact**
- "Charger un template" → "Page Contact - Simple"

2. **Personnaliser le Hero**
- Modifier le titre si nécessaire
- Changer la couleur ou l'image

3. **Configurer le formulaire**
- Cliquer sur le widget Contact Form
- Activer/désactiver les champs souhaités
- Personnaliser le texte du bouton

4. **Ajouter vos coordonnées**
- Éditer le widget WYSIWYG dans la colonne de droite
- Ajouter adresse, téléphone, email, horaires

5. **Optionnel : Ajouter une carte**
- Ajouter un container en bas
- Insérer un widget Map
- Configurer votre adresse

### Comment organiser un layout complexe ?

**Exemple : Section Témoignages**

1. Container Boxed, 1 colonne
- Widget WYSIWYG : `<h2>Ce que disent nos clients</h2>`

2. Container Boxed, 3 colonnes
- Colonne 1 : WYSIWYG avec témoignage 1
- Colonne 2 : WYSIWYG avec témoignage 2
- Colonne 3 : WYSIWYG avec témoignage 3

3. Styler chaque témoignage avec du HTML :
```html
<div style="padding: 20px; background: #f8fafc; border-radius: 8px;">
<p style="font-style: italic;">"Un service exceptionnel !"</p>
<p style="font-weight: bold; margin-top: 10px;">— Jean Dupont</p>
</div>
```

---

## Astuces et bonnes pratiques

### Structure de page

✅ **À faire :**
- Commencer par un Hero pour les pages importantes
- Alterner les couleurs de fond pour séparer les sections
- Utiliser des containers Boxed pour le contenu principal
- Espacer généreusement (padding 60px minimum)

❌ **À éviter :**
- Trop de colonnes sur mobile (3-4 colonnes deviennent 1 sur mobile)
- Texte blanc sur fond clair
- Manque d'espacement entre sections
- Trop de widgets dans une seule colonne

### Hiérarchie visuelle

1. **Hero** : Message principal, accroche
2. **Introduction** : 1 colonne, texte centré
3. **Contenu principal** : 2-3 colonnes
4. **Appel à l'action** : 1 colonne, bouton visible

### Performance

- Optimiser les images avant de les uploader
- Limiter les vidéos en lecture automatique
- Ne pas abuser des widgets lourds (maps, vidéos)

### Accessibilité

- Utiliser les bons niveaux de titres (H1, H2, H3)
- Assurer un bon contraste texte/fond
- Tester sur mobile régulièrement

### Responsive (Mobile)

Le système Izibrick est **automatiquement responsive** :
- 3-4 colonnes → 2 colonnes sur tablette
- Toutes colonnes → 1 colonne sur mobile
- Les vidéos et images s'adaptent automatiquement

**Conseil :** Prévisualiser toujours sur mobile avant de publier

### Cohérence visuelle

- Utiliser les mêmes espacements partout (ex: padding 60px)
- Garder la même palette de couleurs
- Utiliser les mêmes styles de boutons
- Respecter la hiérarchie typographique

### Optimisation SEO

1. **Hero titles** : Utiliser des mots-clés importants
2. **Contenu WYSIWYG** : Structurer avec H2, H3
3. **Images** : Ajouter des descriptions pertinentes
4. **Onglet Référencement** : Remplir titre et description SEO

---

## Raccourcis clavier

| Raccourci | Action |
|-----------|--------|
| `Ctrl + S` | Sauvegarder la page |
| `Suppr` | Supprimer l'élément sélectionné |
| `Échap` | Fermer le panneau d'édition |

---

## Support

Besoin d'aide ? Contactez le support Izibrick :
- Email : support@izibrick.com
- Documentation en ligne : https://docs.izibrick.com

---

**Version de la documentation :** 1.0
**Dernière mise à jour :** 2025-01-22