ProDon:Back-office : Différence entre versions
| Ligne 2 : | Ligne 2 : | ||
<span style="color: rgb(255, 0, 0);">'''ATTENTION : Ce document est présentement en rédaction/révision, il est possible que certaines parties soient manquantes ou désuètes.'''</span> | <span style="color: rgb(255, 0, 0);">'''ATTENTION : Ce document est présentement en rédaction/révision, il est possible que certaines parties soient manquantes ou désuètes.'''</span> | ||
| − | <br><span style="color: rgb(255, 0, 0);">'''ATTENTION :'''</span> Ce document est conçu pour la '''version 5.0.4''' de '''ProDon'''. Pour accéder à la '''version 5.0.3''', | + | <br><span style="color: rgb(255, 0, 0);">'''ATTENTION :'''</span> Ce document est conçu pour la '''version 5.0.4''' de '''ProDon'''. Pour accéder à la '''version 5.0.3''', [[ProDon:Back-office_5.0.3|cliquer ici]]. |
| Ligne 21 : | Ligne 21 : | ||
{| width="20%" cellspacing="1" cellpadding="1" border="1" class="wikitable" | {| width="20%" cellspacing="1" cellpadding="1" border="1" class="wikitable" | ||
|- | |- | ||
| − | |Pour se créer un compte LogiZone, | + | |Pour se créer un compte LogiZone, accéder à un formulaire. |
|- | |- | ||
|[[Fichier:ProDon5 Fr BackOffice_003.png]] | |[[Fichier:ProDon5 Fr BackOffice_003.png]] | ||
| Ligne 38 : | Ligne 38 : | ||
== Accès au back-office == | == Accès au back-office == | ||
| − | Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, | + | Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, l'utilisateur devra recevoir les accès pour que ce compte accède au back-office. |
| − | À partir de ProDon, pour donner les accès au compte LogiZone qui pourra apporter des modifications au back-office, | + | À partir de ProDon, pour donner les accès au compte LogiZone qui pourra apporter des modifications au back-office, se rendre dans la « Gestion des formulaires Web ». |
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1" | {| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1" | ||
|- | |- | ||
| − | | colspan="2" | Dans cette fenêtre, | + | | colspan="2" | Dans cette fenêtre, aller sur l'onglet « Accès JeDonneEnLigne ». |
|- | |- | ||
| Ligne 63 : | Ligne 63 : | ||
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice 007.png]]<br> | | colspan="2" | [[Fichier:ProDon5 Fr BackOffice 007.png]]<br> | ||
|- | |- | ||
| − | | width="50%" |<span style="color: rgb(255, 0, 0);">'''A'''</span>: Dans cette case, | + | | width="50%" |<span style="color: rgb(255, 0, 0);">'''A'''</span>: Dans cette case, entrer le courriel qui a été utilisé pour le compte LogiZone. |
| − | |<span style="color: rgb(255, 0, 0);">'''B'''</span>: Généralement, | + | |<span style="color: rgb(255, 0, 0);">'''B'''</span>: Généralement, inscrire le nom de la personne qui utilisera ce courriel pour accéder à la LogiZone. Cette option est très intéressante surtout quand les utilisateurs ont des courriels non-conventionnels ou qu'ils sont à l'extérieur de l'organisation (firme informatique ou marketing externe à l'organisation). |
|- | |- | ||
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''C'''</span>: La case à cocher « Back-office » donne les accès à l'utilisateur pour utiliser le back-office. | | colspan="2" | <span style="color: rgb(255, 0, 0);">'''C'''</span>: La case à cocher « Back-office » donne les accès à l'utilisateur pour utiliser le back-office. | ||
| Ligne 93 : | Ligne 93 : | ||
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_009.png]]<br> | | colspan="2" | [[Fichier:ProDon5 Fr BackOffice_009.png]]<br> | ||
|- | |- | ||
| − | | width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> | + | | width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> S'assurer d'être dans la bonne section. |
| − | | <span style="color: rgb(255, 0, 0);">'''B''':</span> | + | | <span style="color: rgb(255, 0, 0);">'''B''':</span> Cliquer sur ce bouton pour créer un nouveau thème. |
|} | |} | ||
| Ligne 106 : | Ligne 106 : | ||
|- | |- | ||
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Cette section permet de dupliquer un thème déjà existant. C'est dans la liste déroulante de gauche qu'il faudra sélectionner le thème à dupliquer. | | width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Cette section permet de dupliquer un thème déjà existant. C'est dans la liste déroulante de gauche qu'il faudra sélectionner le thème à dupliquer. | ||
| − | | <span style="color: rgb(255, 0, 0);">'''B''':</span> Pour créer un nouveau thème, | + | | <span style="color: rgb(255, 0, 0);">'''B''':</span> Pour créer un nouveau thème, appuyer sur le bouton « Nouveau ». |
|} | |} | ||
| Ligne 135 : | Ligne 135 : | ||
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Cette section permet de définir le nom du thème. | | <span style="color: rgb(255, 0, 0);">'''B''':</span> Cette section permet de définir le nom du thème. | ||
|- | |- | ||
| − | | <span style="color: rgb(255, 0, 0);">'''C''':</span> Cette case à cocher permet d'appliquer ce thème par défaut. Quand un thème est par défaut, il s'applique automatiquement à tous les formulaires à moins qu'il y ait un thème spécifique lié dans ProDon. Pour savoir comment faire, | + | | <span style="color: rgb(255, 0, 0);">'''C''':</span> Cette case à cocher permet d'appliquer ce thème par défaut. Quand un thème est par défaut, il s'applique automatiquement à tous les formulaires à moins qu'il y ait un thème spécifique lié dans ProDon. Pour savoir comment faire, consulter [[ProDon:Back-office#Lier_le_back-office_dans_ProDon|cette section]]. |
| <span style="color: rgb(255, 0, 0);">'''D''':</span> Cette case à cocher permet d'afficher l'image d'entête seulement sur la première page du formulaire. | | <span style="color: rgb(255, 0, 0);">'''D''':</span> Cette case à cocher permet d'afficher l'image d'entête seulement sur la première page du formulaire. | ||
|- | |- | ||
| Ligne 208 : | Ligne 208 : | ||
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_015.png]]<br> | | colspan="2" | [[Fichier:ProDon5 Fr BackOffice_015.png]]<br> | ||
|- | |- | ||
| − | | colspan="2" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour ouvrir le menu pour configurer, | + | | colspan="2" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour ouvrir le menu pour configurer, cliquer sur la case de la ligne qui doit être ajustée. |
|- | |- | ||
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_016.png]]<br> | | colspan="2" | [[Fichier:ProDon5 Fr BackOffice_016.png]]<br> | ||
| Ligne 231 : | Ligne 231 : | ||
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_017.png]]<br> | | colspan="2" | [[Fichier:ProDon5 Fr BackOffice_017.png]]<br> | ||
|- | |- | ||
| − | | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour choisir la couleur de fond de la page d'accueil, | + | | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour choisir la couleur de fond de la page d'accueil, passer par l'option « Palette ». |
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section. | | width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section. | ||
|- | |- | ||
| Ligne 261 : | Ligne 261 : | ||
|- | |- | ||
| − | | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour choisir la couleur de fond des formulaires, | + | | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour choisir la couleur de fond des formulaires, passer par l'option « Palette ». |
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section. | | width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section. | ||
| Ligne 276 : | Ligne 276 : | ||
| − | |<span style="color: rgb(255, 0, 0);">'''F''':</span> La case à cocher « Afficher le rond dans la barre d'étape » permet d'afficher un cercle dans lequel il y aura les numéros d'étapes. | + | |<span style="color: rgb(255, 0, 0);">'''F''':</span> La case à cocher « Afficher le rond dans la barre d'étape » permet d'afficher un cercle dans lequel il y aura les numéros d'étapes. Cette case doit être cochée pour voir les options <span style="color: rgb(255, 0, 0);">'''G'''</span> et <span style="color: rgb(255, 0, 0);">'''H''' </span>. |
|- | |- | ||
| Ligne 287 : | Ligne 287 : | ||
|- | |- | ||
| − | |<span style="color: rgb(255, 0, 0);">'''I''':</span> L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. | + | |<span style="color: rgb(255, 0, 0);">'''I''':</span> L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. Cette option doit être activée pour que la section « Titre » soit affichée. |
| Ligne 311 : | Ligne 311 : | ||
== Ajouter des fichiers dans le back-office == | == Ajouter des fichiers dans le back-office == | ||
| − | Pour ajouter des fichiers, | + | Pour ajouter des fichiers, cliquer sur la section « Mes fichiers » et cliquer sur ajouter. |
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1" | {| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1" | ||
| Ligne 340 : | Ligne 340 : | ||
| <span style="color: rgb(255, 0, 0);">'''B''':</span> L'utilisateur peut voir la quantité d'espace prise par ses fichiers. | | <span style="color: rgb(255, 0, 0);">'''B''':</span> L'utilisateur peut voir la quantité d'espace prise par ses fichiers. | ||
|- | |- | ||
| − | | colspan="2" |<span style="color: rgb(255, 0, 0);">'''C''':</span> Pour retirer un fichier, | + | | colspan="2" |<span style="color: rgb(255, 0, 0);">'''C''':</span> Pour retirer un fichier, cliquer sur le bouton supprimer. |
|} | |} | ||
| Ligne 346 : | Ligne 346 : | ||
== Créer un groupe d'images dans le back-office == | == Créer un groupe d'images dans le back-office == | ||
| − | Pour créer un groupe d'images, | + | Pour créer un groupe d'images, cliquer sur la section « Mes groupes d'images » et cliquer sur ajouter. Il est recommandé de créer des groupes d'images pour toutes les langues utilisées par l'organisation. |
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1" | {| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1" | ||
| Ligne 372 : | Ligne 372 : | ||
|- | |- | ||
| − | | width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> | + | | width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> Ici, entrer le nom du groupe d'images. |
| − | | <span style="color: rgb(255, 0, 0);">'''B''':</span> Cette case à cocher permet d'utiliser ce groupe d'images par défaut. Quand un groupe d'images est par défaut, il s'applique automatiquement à tous les formulaires à moins qu'il y ait un groupe d'images spécifique lié dans ProDon. Pour savoir comment faire, | + | | <span style="color: rgb(255, 0, 0);">'''B''':</span> Cette case à cocher permet d'utiliser ce groupe d'images par défaut. Quand un groupe d'images est par défaut, il s'applique automatiquement à tous les formulaires à moins qu'il y ait un groupe d'images spécifique lié dans ProDon. Pour savoir comment faire, consulter [[ProDon:Back-office#Lier_le_back-office_dans_ProDon|cette section]]. |
|} | |} | ||
| Ligne 434 : | Ligne 434 : | ||
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1" | {| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1" | ||
|- | |- | ||
| − | | colspan="2" | Alors, partout où cette section est apparue, | + | | colspan="2" | Alors, partout où cette section est apparue, cliquer sur le bouton « Production ». |
|- | |- | ||
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_028.png]] | | colspan="2" | [[Fichier:ProDon5_Fr BackOffice_028.png]] | ||
| Ligne 453 : | Ligne 453 : | ||
== Lier le back-office dans ProDon == | == Lier le back-office dans ProDon == | ||
| − | Ensuite, il est nécessaire de lier les autres thèmes aux éléments de ProDon. Pour qu'un thème qui n'est pas le thème par défaut soit utilisé, | + | Ensuite, il est nécessaire de lier les autres thèmes aux éléments de ProDon. Pour qu'un thème qui n'est pas le thème par défaut soit utilisé, aller dans la modification/consultation d'un formulaire web. |
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1" | {| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1" | ||
|- | |- | ||
| colspan="2" | | | colspan="2" | | ||
| − | Pour ce faire, | + | Pour ce faire, retourner à cette fenêtre: |
|- | |- | ||
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_032.png]] | | colspan="2" | [[Fichier:ProDon5_Fr BackOffice_032.png]] | ||
Version du 2 juin 2017 à 07:56
| Back-office |
ATTENTION : Ce document est présentement en rédaction/révision, il est possible que certaines parties soient manquantes ou désuètes.
ATTENTION : Ce document est conçu pour la version 5.0.4 de ProDon. Pour accéder à la version 5.0.3, cliquer ici.
Introduction
Le back-office est relié au module Dons en ligne.
Il permet de gérer tous les éléments visuels de la page d'accueil et des formulaires.
C'est également à partir de cette fonction qu'il est possible de modifier les polices de caractères, les couleurs ainsi que les images apparaissant sur le site JeDonneEnLigne de l'organisation.
Tout d'abord, l'utilisateur doit se créer un compte LogiZone et obtenir les accès au Back-Office. Ensuite, il pourra découvrir toutes les fonctionnalités du Back-Office. Finalement, tout ce qui sera créé dans le back-office et qui ne sera pas étiquetté « par défaut » devra être lié dans ProDon. Ce lien viendra mettre à jour les ajustements apportés.
Création d'un compte LogiZone
Un compte LogiZone est un profil qui, une fois les accès attribués, permettra à l'utilisateur d'accéder au back-office. En tant qu'utilisateur, il sera possible de travailler dans le back-office afin de modifier et ajuster le visuel aux couleurs de l'organisation.
| Pour se créer un compte LogiZone, accéder à un formulaire. |
|
| Il faudra ensuite cliquer sur le bouton « Connexion » dans le haut à droite de la page. |
| L'utilisateur devra compléter les formulaires afin de se créer un compte. | |
| |
| Permet de créer un nouveau compte LogiZone. Il suffira de suivre les étapes et d'entrer les informations nécessaires afin de compléter la création. |
Accès au back-office
Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, l'utilisateur devra recevoir les accès pour que ce compte accède au back-office.
À partir de ProDon, pour donner les accès au compte LogiZone qui pourra apporter des modifications au back-office, se rendre dans la « Gestion des formulaires Web ».
| Dans cette fenêtre, aller sur l'onglet « Accès JeDonneEnLigne ». | |
 | |
Cliquer sur le  pour ajouter un utilisateur.
| |
| NOTE: À partir du bas de cette fenêtre, il est possible de créer une clé de cryptage. Il n'est pas nécessaire d'en avoir une. | |
|
Ensuite, cette fenêtre s'ouvre: | |
 | |
| A: Dans cette case, entrer le courriel qui a été utilisé pour le compte LogiZone. | B: Généralement, inscrire le nom de la personne qui utilisera ce courriel pour accéder à la LogiZone. Cette option est très intéressante surtout quand les utilisateurs ont des courriels non-conventionnels ou qu'ils sont à l'extérieur de l'organisation (firme informatique ou marketing externe à l'organisation). |
| C: La case à cocher « Back-office » donne les accès à l'utilisateur pour utiliser le back-office.
| |
|
Le courriel lié au compte LogiZone apparaîtra ici. | |
 |
Créer des thèmes dans le back-office
Ensuite, il faudra se connecter dans le back-office.
|
Après s'être connecté au back-office, l'utilisateur arrivera à cette fenêtre: | |
 | |
| A: S'assurer d'être dans la bonne section. | B: Cliquer sur ce bouton pour créer un nouveau thème. |
|
Cette fenêtre s'ouvrira: | |
 | |
| A: Cette section permet de dupliquer un thème déjà existant. C'est dans la liste déroulante de gauche qu'il faudra sélectionner le thème à dupliquer. | B: Pour créer un nouveau thème, appuyer sur le bouton « Nouveau ». |
| Dans la création de thèmes, l'utilisateur verra 6 onglets: | |
| |
| A: L'onglet « Options » sert notamment nommer le thème ainsi que lui attribuer le statut par défaut. |
B: L'onglet « Palette » sert à définir toutes les couleurs qui seront utilisées dans ce thème. |
| C: L'onglet « Polices » sert à définir les polices de texte qui seront utilisées dans ce thème. |
D: L'onglet « Page d'accueil » sert à configurer les couleurs et les polices qui seront utilisées dans la page d'accueil. |
| E: L'onglet « Formulaire » sert à configurer les couleurs et les polices qui seront utilisées dans le formulaire. |
F: L'onglet « CSS » permet de programmer dans le back-office. |
L'onglet « Options »
|
Alors, cette fenêtre s'ouvre: | |
 | |
| A: Cette section permet de choisir le type de thème qui sera créé. Les choix possibles sont: créer un thème pour la page d'accueil et les formulaires, créer un thème pour la page d'accueil seulement ou créer un thème pour les formulaires seulement. | B: Cette section permet de définir le nom du thème. |
| C: Cette case à cocher permet d'appliquer ce thème par défaut. Quand un thème est par défaut, il s'applique automatiquement à tous les formulaires à moins qu'il y ait un thème spécifique lié dans ProDon. Pour savoir comment faire, consulter cette section. | D: Cette case à cocher permet d'afficher l'image d'entête seulement sur la première page du formulaire. |
| E: Cette case à cocher permet d'afficher le titre seulement sur la première page du formulaire. | F: Dans toutes les fenêtres, ce bouton ramène l'utilisateur à la vue d'ensemble de tout ce qu'il y a dans cette section. Par exemple, lorsque l'utilisateur est dans les thèmes, ce bouton le ramène à la vue d'ensemble de tous les thèmes du back-office. Contrairement aux boutons du fureteur, il ne permet pas de revenir à la page précédente. |
| G: Évidemment, ce bouton permet de sauvegarder. De plus, dès qu'un changement est détecté dans une section, lorsque l'utilisateur change de section, le back-office demande une sauvegarde. | |
L'onglet « Palette »
|
L'onglet « Palette » permet de définir toutes les couleurs qui seront utilisées dans les autres onglets du back-office. Généralement, les utilisateurs y configurent les couleurs de leur organisation. À partir de la version 5.0.4, cet onglet est divisé en 2 colonnes et chacune de ces colonnes appelle un utilitaire différent. | |
 | |
| A: Pour la précision des couleurs, le système du back-office utilise les fonctions rvba. Les nombres doivent être situés entre 0 et 255. Le premier nombre contrôle la quantité de rouge, le second la quantité de vert, le troisième la quantité de bleu et le dernier chiffre contrôle la transparence (alpha). Plus ce chiffre est près de 1,0, plus cette couleur sera opaque, plus il est près de 0,0, plus cette couleur sera transparente. | B: Si l'utilisateur ne détient pas les nombres pour ses couleurs, cette section utilise un autre utilitaire. Ce système du back-office utilise les fonctions rgba, hsla et hex. |
| En cliquant sur A de la section précédente, cette page s'ouvre. | |
 | |
| A: Cette option permet d'ajuster la quantité de rouge. | B: Cette option permet d'ajuster la quantité de vert. |
| C: Cette option permet d'ajuster la quantité de bleu. | D: Cette option permet d'ajuster la transparence de la couleur. |
| E: Cette case permet de prévisualiser le résultat. | |
| En cliquant sur B de la première section, cette page s'ouvre. Cette section du back-office utilise les fonctions rgba, hsla et hex. | |
 | |
| A: Cette option permet d'ajuster la couleur. | B: Cette option permet d'ajuster la saturation de la couleur. |
| C: Cette option permet d'ajuster la luminosité. | D: Cette option permet d'ajuster la transparence de la couleur. |
| E: Cette case permet d'entrer la couleur en hexadécimal. | F: Cette case permet d'entrer la couleur en rvba. |
| G: Cette case permet d'entrer la couleur en hsla. En utilisant les quatre curseurs de défilement, cela revient à travailler en hsla. | H: En appuyant sur cette case, l'utilisateur aura un aperçu de la couleur sélectionnée et y verra 4 possibilités d'éclaircissement. |
| I: En appuyant sur cette case, l'utilisateur aura un aperçu de la couleur sélectionnée et y verra 4 possibilités d'assombrissement. | J: Ce pourcentage permet d'ajuster le dégradé de couleur des options « éclaircir » et « assombrir ». |
| K: Cette case permet d'obtenir 3 couleurs potentiellement complémentaires à la couleur sélectionnée par l'utilisateur. Note: La couleur de droite est la couleur originale. | |
L'onglet « Polices »
|
L'onglet « Polices » permet de définir la police standard ainsi que la couleur de la police lesquelles seront utilisées dans les formulaires créés par le back-office. Généralement, les utilisateurs y configurent la police générale de leur organisation avec une couleur qui se lit bien à travers les couleurs de l'organisation. | |
 | |
| A: Pour ouvrir le menu pour configurer, cliquer sur la case de la ligne qui doit être ajustée. | |
 | |
| B: L'option « Police » permet de choisir l'apparence du texte. | C: L'option « Couleur du texte » permet de choisir la couleur des écritures dans les formulaires et la page d'accueil. |
| D: L'option « Palette » permet de choisir la couleur du texte parmi les couleurs définies dans l'onglet précédent. Elle est utilisée dans plusieurs sections du Back-office. | E: L'option « Style » permet d'afficher le texte en gras (B) ou en italique (I). |
| F: L'option « Taille » permet de déterminer la taille du texte. | G: La section « Aperçu » donne la chance de prévisualiser tous les choix précédemment effectués. |
L'onglet « Page d'accueil »
|
L'onglet « Page d'accueil » permet de configurer les couleurs et les polices utilisées dans la page d'accueil. | |
 | |
| A: Pour choisir la couleur de fond de la page d'accueil, passer par l'option « Palette ». | B: L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section. |
| C: L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard. | D: L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. Lorsque cette option est activée, la section « Titre » est affichée. |
| E: L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre de la page d'accueil. | F: L'option « Nom des formulaires » permet de déterminer la couleur, la taille et le style des noms des formulaires. |
| G: L'option « Description sous le nom des formulaires » permet de déterminer la couleur, la taille et le style des descriptions sous le nom des formulaires. | H: L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée. |
| I: L'option « Boutons » permet de configurer la couleur du texte, le style et la taille du texte des boutons de la page d'accueil. | J: L'option « Liens » permet de configurer la couleur du texte, le style et la taille des liens hypertextes de la page d'accueil. |
L'onglet « Formulaire »
| L'onglet « Formulaire » permet de configurer les couleurs et les polices utilisées dans les formulaires. | |
 | |
| A: Pour choisir la couleur de fond des formulaires, passer par l'option « Palette ». | B: L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section. |
| C: L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard. | D: L'option « Barre d'étape » permet de choisir la couleur, la taille, le style et la couleur de fond de la barre d'étape. |
| E: L'option « Barre d'étape (page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond de la page active de la barre d'étape.
|
F: La case à cocher « Afficher le rond dans la barre d'étape » permet d'afficher un cercle dans lequel il y aura les numéros d'étapes. Cette case doit être cochée pour voir les options G et H . |
| G: L'option « Barre d'étape rond » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle dans la barre d'étape.
|
H: L'option « Barre d'étape rond(page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle de la page active de la barre d'étape. |
| I: L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. Cette option doit être activée pour que la section « Titre » soit affichée.
|
J: L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre de la page d'accueil. |
| K: L'option « Titre des participants » permet de déterminer la couleur, la taille et le style des titres des participants.
|
L: L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée. |
| M: L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons des formulaires. | N: L'option « Bouton (confirmer) » permet de configurer la couleur de fond
et la couleur de texte ainsi que le style du bouton confirmer des formulaires. |
| O: L'option « Liens » permet de configurer la couleur du texte, le style et la taille du texte des liens hypertextes des formulaires. | |
Ajouter des fichiers dans le back-office
Pour ajouter des fichiers, cliquer sur la section « Mes fichiers » et cliquer sur ajouter.
|
|
Ensuite, cette fenêtre s'ouvrira: | |
 | |
| Il faudra alors aller trouver les images qui doivent être ajoutées. Ensuite, la fenêtre de recadrage apparaîtra: | |
 |
|
Ensuite, cette fenêtre s'ouvrira: | |
 | |
| A: Ici, l'utilisateur peut voir le fichier qui vient d'être ajouté. | B: L'utilisateur peut voir la quantité d'espace prise par ses fichiers. |
| C: Pour retirer un fichier, cliquer sur le bouton supprimer. | |
Créer un groupe d'images dans le back-office
Pour créer un groupe d'images, cliquer sur la section « Mes groupes d'images » et cliquer sur ajouter. Il est recommandé de créer des groupes d'images pour toutes les langues utilisées par l'organisation.
|
| L'utilisateur y verra 4 onglets: | |
| |
| A:L'onglet « Options » pour nommer le groupe d'images et le mettre par défaut. |
B:L'onglet « Image de fond » pour déterminer quelles seront vos images de fond. |
| C:L'onglet « Image d'entête » pour déterminer quelles seront vos image d'entête. |
D:L'onglet « Réseaux sociaux » pour déterminer quelle sera votre image pour les réseaux sociaux. |
L'onglet « Options »
 | |
| A: Ici, entrer le nom du groupe d'images. | B: Cette case à cocher permet d'utiliser ce groupe d'images par défaut. Quand un groupe d'images est par défaut, il s'applique automatiquement à tous les formulaires à moins qu'il y ait un groupe d'images spécifique lié dans ProDon. Pour savoir comment faire, consulter cette section. |
L'onglet « Image de fond »
 | |
| A: Cette option permet de définir l'image de fond de la page d'accueil pour les ordinateurs. | B: Cette option permet de définir l'image de fond de la page d'accueil pour les tablettes. |
| C: Cette option permet de définir l'image de fond de la page d'accueil pour les cellulaires. | D: Cette option permet de définir l'image de fond des formulaires pour les ordinateurs. |
| E: Cette option permet de définir l'image de fond des formulaires pour les tablettes. | F: Cette option permet de définir l'image de fond des formulaires pour les cellulaires. |
| NOTE: Pour les images de fond, la taille maximale suggérée pour les images de fonds est de 1920 x 1080 pixels. Si l'image est plus grande, il est possible que le fureteur ne charge pas l'image. | |
L'onglet « Image d'entête »
 | |
| A: Cette option permet de définir l'image d'entête pour les ordinateurs. | B: Cette option permet de définir les dimensions de l'image. |
| C: Cette option permet de définir où l'image sera alignée dans l'entête. | D: Cette option permet de définir l'image d'entête pour les tablettes. |
| E: Cette option permet de définir l'image d'entête pour les cellulaires. | F: Il est important de considérer cet avertissement. Il n'y a pas vraiment de limite concernant la hauteur, mais la largeur des images d'entête ne doit pas dépasser 960 pixels. |
L'onglet « Réseaux sociaux »
 | |
| Cette option permet de choisir l'image qui apparaîtra sur les réseaux sociaux quand le formulaire ou la page d'accueil sera partagé. | |
| Note : De plus, la grandeur minimale des images de réseaux sociaux est de 600 x 315 pixels. La taille recommandée est de 1200 x 630 pixels. Pour toute autre taille, il est recommandé de suivre le ratio 1.91:1. | |
Envoyer les formulaires en production
Après avoir créé toutes les bases du back-office, il est temps d'envoyer le tout en production.
| Alors, partout où cette section est apparue, cliquer sur le bouton « Production ». | |
| |
| Lorsque le bouton est rouge, le formulaire/le groupe d'images n'a jamais été mis en production. | |
| |
| A: Lorsque le bouton est jaune, le formulaire/le groupe d'images a été modifié et les modifications ne sont pas encore appliquées, donc elles ne sont pas en production. | B: Nouveauté: Il est maintenant possible d'annuler les changements avant que le formulaire soit envoyé en production. |
| |
| Quand le bouton est vert, le formulaire/le groupe d'images est en production et toutes les modifications sont en fonctions. | |
Lier le back-office dans ProDon
Ensuite, il est nécessaire de lier les autres thèmes aux éléments de ProDon. Pour qu'un thème qui n'est pas le thème par défaut soit utilisé, aller dans la modification/consultation d'un formulaire web.
|
Pour ce faire, retourner à cette fenêtre: | |
| |
| A: Dans cette case, l'utilisateur pourra sélectionner le thème créé sur le back-office. | B: Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en français. |
| C: Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en anglais. | D: Le groupe français est la division dans laquelle sera classée la version française du formulaire. |
| E: Le groupe anglais est la division dans laquelle sera classée la version anglaise du formulaire. | |
Nom du document : ProDon:Back-office
Version : 5.0.4
