Vue d'ensemble de l'éditeur visuel 

Diaango intègre un éditeur visuel innovant qui permet de créer facilement des contenus et pages web dynamiques. Dans cet article nous allons abordons les aspects essentiels de l'éditeur pour vous permettre de le prendre en main.

Pré-requis:

1. Avoir un compte utilisateur
2. Avoir un site internet

Pour commencer voyons comment accéder à l'éditeur visuel et éditer les pages :

1. Cliquez sur le lien Mes sites dans le menu principal pour accéder au tableau de bord.
2. Cliquez sur le site que vous voulez éditer.
3. Cliquez sur  le lien "Editer mon site" pour ouvrir l'éditeur.

L'image ci-dessous vous permet d'avoir un aperçu global de l'ensemble des options disponibles dans l'éditeur.

Dans la suite nous allons découvrir ensembles les différentes sections de l'éditeur pour vous permettre de vous familialiser avec celui et de l'utiliser pour personnaliser vos pages.  

Zone 1: les sous menus 

1. Menu des composants : permet de sélectionner les composants à ajouter dans votre page
2. Menu structure hiérarchique : permet d'afficher la composition hiérarchique de votre page, vous pouvez utiliser ce menu pour accéder notamment aux composant cachés, non visible à cause des restrictions d'affichage.
3. Menu éditeur d'api : Permet d'accéder l'interface d'édition des apis pour créer des appels http/https, tester des webservices, créer des environnements et des Flux de traitements complexes
4. Menu pages : permet d'afficher la liste des pages
5. Menu sites : permet d'afficher la liste des  sites web auquel vous avez accès
6. Menu système de fichiers : permet d'accéder à la gestion de vos fichiers 
7. Menu bibliothèque photo : permet d'afficher la bibliothèque de vos gratuites
8. Menu bibliothèque vidéo : permet d'afficher la bibliothèque de vidéos gratuites

Zone 2:  Design responsive

Vous permet de créer de tester l'affichage responsive de votre page, Un composants responsive  s'adapte parfaitement à différents résolutions d'écrans. Diaango propose actuellement 3 types d'affichages responsive :

1. Desktop : correspond à l'affichage sur les écrans d'ordinateurs dont la résolution est supérieur à 720 pixels.
2. Tablet : correspond à l'affichage sur les écrans tablets dont la résolution est inférieur ou égale à 720 pixels.
3. Mobile : correspond à l'affichage sur écrans dont la résolution est inférieur ou égale à 420 pixels.

Zone 3:   sélection de page 

Zone 4:  Menu haut de droite

Permet les opérations ci-dessous :

1. Aller à la page d'accueil de diaango
2. Défaire une opération d'édition
3. Refaire une opération d'édition
4. Ajouter une nouvelle page
5. Modifier la page actuelle
6. Synchroniser la page actuelle
7. Afficher un aperçu de la page
8. Afficher/cacher les traits d'édition des composants
9. Afficher/Cacher le menu latéral de droite
10. Accéder au menu d'édition de la charge graphique
11. Afficher les blocs techniques que diaango à intégrer automatique dans votre page (Ces bloc permettent un fonctionnement optimal de votre site, vous ne pouvez pas les modifier ou supprimer ces blocs) 

Zone 5:   menu latéral droite

 Permet de réaliser les opérations ci-dessous :

1. Modifier le style d'un composant (voir la liste des propriétés de feuille de style)
2. Animer vos composants
3. Modifier les informations d'un composant
4. Editer la charge graphique
5. Etc.

Zone 6:  Menu contextuel d'édition rapide

Le menu contextuel permet d'effectuer des opérations d'édition rapide d'un composant :

1. Afficher / cacher le menu
2. Ouvrir le menu latéral droite
3. Recharger le composant
4. Modifier les informations du composant
5. Synchroniser le composant
6. Déplacer le composant plus haut
7. Déplacer le composant plus bas
8. Dupliquer le composant
9. Copier le style du composant
10. Supprimer le composant de son conteneur
11. Supprimer définitivement le composant du système (Attention cette opération est irréversible)
12. Modifier les propriétés de feuille de style 
    1. Configurer la position du composant
    2. Configurer les marges intérieurs et extérieurs
    3. Configurer les bordures
    4. Configurer l'alignement du texte
    5. Configurer la taille et la couleur du texte
    6. Configurer l'image et la couleur de fond
    7. Supprimer les animations
    8. Définir une rotation
    9. Définir la taille et la hauteur
    10. Définir le position  z-index du composant sur l'axe Z
    11. Ajouter des modèles de données et définir des traitements annexes pour les formulaires de saisies

Résumé : dans cette article vous avez découvert l'éditeur de contenu de diaango, pour aller plus loin vous pouvez commencer à personnaliser vos composants en utilisant les différents menu à votre disposition.

Pour aller plus loin nous recommandons les articles ci-dessous :

• Ajouter ou modifier une page
• Synchroniser la page encours d'édition
• Design responsive
• Editer la charte graphique
• Menu des composants
• Arborescence de la page
• Ajouter des APIs
• La liste des pages
• Listes des sites
• Système de fichier depuis l'éditeur
• Bibliothèque d'images
• Bibliothèque de vidéos

Consultez notre centre d'aide pour obtenir des solutions pour des besoins spécifiques.