Composants simples

Définition: les composants simples sont des éléments HTML de base qui constituent le contenu de votre une page web. Ils sont placé obligatoirement dans un composant un composant conteneur.

Liste des composants simples :

1. Titre
2. Sous titre 
3. Label
4. Paragraphe
5. Ligne
6. Citation
7. Bouton
8. Lien Hypertexte
9. Image
10. Video
11. Icone

Pour ajouter un composant basique, il suffit de faire un "Glisser-déposer" de cet élément dans un composant conteneur.

On peut distinguer les catégories suivantes :

1. Les composant textes.
2. Les composants liens.
3. Les composants multimédias
4. Les autres composants compacts.

Cas d'utilisation : ajouter un composant simple dans une page.

Prerequis :

1. Avoir un compte  utilisateur et être connecté
2. Avoir un site internet

Voici par exemple les étapes pour ajouter un titre dans une page.

1. Aller dans l'espace "Mes sites"
2. Cliquer le site que voulez éditer et cliquer sur "Editer mon site" pour ouvrir l'éditeur visuel.
3. Cliquer sur le premier item du menu latérale de gauche pour ouvrir la liste des composants.
4. Aller dans la section basics, repérer le composant titre et faite un glisser-déposer le titre vers une section de votre page.
5. Cliquer sur le composant pour modifier le texte.

1. la zone n° 1 permet d'ouvrir les composants
2. la zone n° 2 permet de sélectionner le composant cible
3. la zone n° 3 est le conteneur cible
4. la zone n° 4 permet d'accéder
   1. Editer les propriétés de feuille de style
   2. Créer des animations
   3. Ajouter des fonctions javascript
   4. Modifier les propriétés du composant     

Edition du composant : 

Pour éditer le composant cliquer sur le composant, vous verrez apparaitre le menu contextuel et un menu latérale droite.

Le menu contextuel permet d'effectuer des opérations d'éditions rapides: 

1. Modifier les propriétés de styles comme par exemple :la taille du texte, la couleur du texte, l'alignement, etc.
2. Editer le composant
3. Dupliquer le composant
4. Copier le style CSS pour l'appliquer sur un autre élément
5. Recharger le composant
6. Synchroniser le composant 
7. Ouvrir les parametres d'édition dans le menu latéral de droite
8. Supprimer le composant de son conteneur
9. Supprimer définitivement le composant du système

Astuce : "double cliquer" sur m'importe quel composant texte pour ouvrir un éditeur de texte.

Résumé :

Dans cet article vous avez appris :

• à utiliser les composants simples de la plateforme diaango,
• à  ajouter un composant titre dans un conteneur,
• à utiliser le menu contextuel et le menu avancé lateral

Pour aller plus loin :

De la même manière vous pouvez ajouter n'importe quel autre composant dans une page web, à vous de jouer avec les composants et vous familiariser avec l'éditeur visuel.