ÉDITEUR MANUAL D UTILISATION :

Transcription

1

2 MANUAL D UTILISATION : ÉDITEUR Système «drag & drop» : Gestionnaire de contenus Éditeur du style Ajouter des éléments Annuler/Rétablir Enregistrer... 13

3 Quand nous accédions à l afficheur de l éditeur du site web Zeendo, nous pouvons visualiser une série d options dans la partie supérieure. Utilisateur : dans la partie supérieur gauche, on trouve le bouton «utilisateur». Si vous cliquez dessus, vous serez redirigé dans la section «Sites Web» de la page principale Zeendo. Éditer page boutique : à côté du bouton utilisateur, si vous avez choisi le forfait «Ecommerce», vous trouverez un autre bouton, lequel vous permet d éditer la page Boutique. Pour des amples renseignements sur comment éditer votre page Boutique, lisez la guide d utilisateur E-commerce. Tutoriel : dans la partie supérieur droite, on trouve le bouton «tutoriel?», avec lequel vous pouvez visualiser le vidéo tutoriel qui explique comment fonctionne notre site web. Configuration : à côté du bouton «tutoriel» on trouve le bouton «configuration». Si vous cliquez dessus, vous serez redirigé à la section «Site Web», mais cette fois vous pouvez gérer les domaines et créer un nouveau sous-domaine. Vous pouvez acheter le forfait qui s adapte le mieux à vos besoins : «Basic», «Professional», «Ecommerce». Vous pouvez aussi visualiser les statistiques de votre site web et utiliser l option «Google Analytics». Aperçu : Ici vous pouvez visualiser le résultat final de votre site web. Publier : Une fois vous avez fini d éditer votre site web, vous pouvez la publier. Si vous cliquez sur ce bouton, vous devrez choisir un sous-domaine (si vous n avez pas fait cela avant), et vous serez redirigé une autre fois dans la section «Sites Web» pour gérer les domaines et le sousdomaine. Système «drag & drop» : Avec ce système, vous pouvez cliquer sur l élément désiré, soit entre les éléments de la page, soit entre les fichiers de votre ordinateur, et les déplacer où vous voulez : à l intérieur du web ou dans les espaces correspondants dans le menu d outils.

4

5

6

7

8 Vous pouvez visualiser les formats de ces types de police dans la sous-section «Style et taille de la police» qui se trouve dans la section «Design». - Il permet de changer la couleur du texte que vous êtes en train d éditer. - Il permet d ajouter un lien. - Des outils pour modifier le paragraphe, alignement du texte et les options de la liste. - Il permet d effacer le format que vous étiez en train d éditer. - Il permet de supprimer le bloc de texte créé. Titre Description: Les titres apportent une meilleure visibilité ou donnent une pertinence à une partie déterminée du texte, ou comme l en-tête d un paragraphe. Tip: Si vous double-cliquez dessus, vous visualiserez les mêmes options que apparaissent dans les cadres du texte. Règle Description: La règle est une petite ligne qui peut être déplacée dessous des textes, images, etc. Tip: Quand vous insérez la règle, un menu s ouvre automatiquement dans lequel vous pouvez réguler l épaisseur de la ligne (adapter sa longueur) et décider le type de ligne (solide, avec des points, avec des tirets, etc.). En plus, vous pouvez choisir la couleur que vous préférez. Icône Description: Avec cet élément, on peut ajouter des icônes prédéfinies pour dynamiser la page et la rendre plus claire dans chaque section. Il y a des icônes générales, des icônes de contrôle de formulaires, des icônes de devise, des icônes de l éditeur de textes, des icônes directionnelles, des icônes de vidéo et de marque. Tip: Quand vous déposez l élément où vous voulez, vous pouvez choisir entre deux éléments pour cette option, comme, par exemple, changer la taille de l icône. On peut les utiliser, par exemple, avec des formulaires pour indiquer que l utilisateur peut télécharger un fichier, etc. Bouton Description: Il permet de mettre des liens qui redirigent vers d autres pages, envoyer un ou téléphoner. Tip: Quand vous déposez le bouton où vous voulez, un menu s ouvrira. Dans le cadre pour le titre, vous pouvez mettre le nom désiré pour ce bouton. Avec «style du lien» vous pouvez choisir entre mettre le bouton ou seulement un lien direct à ce que vous voulez. Le contenu permet de décider si vous voulez que le lien fasse référence à une page interne ou à une page externe. Avec le type de lien, on peut décider si le bouton relie avec un téléphone, un mail ou un lien. On peut aussi insérer un fichier téléchargeable. Finalement, on peut choisir si ce lien s ouvrira dans la même page ou différent ; en plus, vous pouvez l aligner à droite, à gauche ou dans le centre.

9 Formulaire Description: cette section est très outil pour la communication avec les clients ou pour obtenir des informations sur eux. Tip: Quand vous faites glisser l élément, un menu s ouvrira montrant les outils nécessaires pour donner une structure au formulaire. Avec le bouton «Ajouter d éléments au formulaire», un nouveau menu s ouvrira, dans lequel vous trouverez différents options pour les ajouter. Une fois le structure est complétée, vous pouvez mettre un titre en cliquant sur le bouton en forme de crayon ; vous pouvez aussi personnaliser le message de confirmation et choisir le type de stockage désiré pour les s reçus. Carte Description: Grâce à la carte, les utilisateurs peuvent visualiser l emplacement de l entreprise en visitant le site web. Tip: Après de faire glisser la carte où vous voulez et le déposer, un menu s ouvrira. Ici vous pouvez écrire l adresse, la ville et le pays. Finalement, vous pouvez régler le zoom pour décider comment visualiser l emplacement et le type de carte désiré : carte routière, satellite ou hybride. Boîte Description: La boîte est une forme rectangulaire avec un texte à l intérieur, dont la fonction principale est de souligner le contenu. Tip: Faites glisser l élément et déposez-la où vous voulez. Une fois l élément est mis, un menu s ouvrira pour le modifier. Si vous cliquez sur l icône en forme de roue, un menu d outils s ouvrira pour pouvoir changer le titre et la description de ce que vous voulez écrire. En cliquant sur le bouton avec le point rouge, vous pouvez modifier le texte : le remplissage, la longueur et la largeur de la boîte et l alignement dans le centre, à gauche ou à droite. Finalement, avec le sélecteur de couleurs, vous pouvez changer la couleur de la boîte et son opacité avec la barre «Alpha». Citation Description: Utilisez ce bouton pour ajouter une phrase inspirante ou pour mentionner les mots d une célébrité. Tip: Sélectionnez cette icône et faites-la glisser où vous voulez. Une fois elle est mise, un menu déroulant s ouvrira avec des options pour éditer le texte et mettre l autour de la citation. Souvenez-vous que la couleur du texte sera la même que celle-ci du fond. HTML Avec ce bloc, vous pouvez insérer n importe quel élément qui n est pas prédéfinie ; un iframe, une table, un banner, etc. Vous pouvez aussi aligner le code à gauche, à droite ou dans le centre.

10 3.2. IMAGES Avec cette option, vous pouvez ajouter des images, une gallérie ou une vidéo. Image Description: Mettez une image dans la place désirée de votre site web. Tip: Après de faire glisser et mettre le bloc d image, vous visualiserez automatiquement une ligne grise et un cadre avec l image d une caméra s ouvrira, où vous pouvez glisser et déposer les images désirées ou cliquer pour chercher des images parmi vos documents. Configuration d image: - Étirer l image dans le conteneur : L image sera ajustée à la taille du conteneur. Si vous ne sélectionnez pas cette option, l image se visualisera avec sa taille originale, mais c est possible que sa taille varie par rapport à celle-ci du fichier original. - Ouvrir comme lightbox : Avec cette option, l image s ouvrira avec une taille plus grande lorsque vous cliquez dessus. Vous pouvez changer l image quand vous voulez en sélectionnant l icône. - Lien à l image : Vous pouvez ajouter un lien externe à votre image pour rediriger aux utilisateurs, qui cliquent sur ce bouton, à un web externe ou à une autre section. Avec ce lien externe, ils pourront aussi télécharger un fichier. Pour faire cela, vous devrez remplir les options montrées dans chaque onglet. Info de l image: En sélectionnant le crayon qui se trouve dans la partie gauche du menu, vous pouvez ajouter un titre et une description à l image. Cliquez sur le bouton d information et vous pouvez l éditer. En plus, vous pouvez choisir le «type de légende» pour choisir où mettre le titre et la description de l image. Après toutes les modifications, cliquez sur l icône pour sauvegarder les changements. Galerie Cette section vous permettra d ajouter plusieurs images au même temps et construire une galerie de photos sur votre page. Après de faire glisser la section «Galerie» à votre site web, un menu s ouvrira pour vous permettre de sélectionner le style du galerie désire: «Quadrillage» «Empilés», «Transition», «Transition +». Ajustements de la galerie Une fois sélectionné le style de présentations des images, faites glisser les images où une caméra apparaît ou cliquez pour chercher les images parmi vos documents. Ajustements de chaque image de la galerie Vous pouvez éditer les ajustements de chaque image comme titre, liens et description de chaque image dans le bouton en forme de roue (ajustements), lequel apparaît chaque fois que vous passez le pointeur de la souris sur l image.

11 Configuration de l image Dans cette section pour pouvez éditer l information de l image, les titres et les liens (externes ou à sections de votre propre site web) ; en plus, vous pouvez choisir si vous voulez les ouvrir dans la même page ou dans une autre nouvelle). La procédure est la même que pour une image individuelle. Information de l image : Quadrillage Sur le bouton en forme de crayon, vous pouvez éditer et déterminer la présentation de la galerie, combien d images par ligne vous voulez et si vous désirez mettre un remplissage (et l épaisseur) entre chaque image. Miniatures carrés Si vous désirez que toutes les images aient la même taille, sélectionnez l option «Miniatures carrées». Cette option est recommandée si les options ne sont pas éditées et n ont pas la même taille. Info de l image : Transition Le mode «transition» vous permet de faire glisser chaque image, automatiquement o manuellement. Autoplay: vous pouvez choisir si les images se passent automatiquement, ou c est l utilisateur qui doit le faire. Contrôles et montrer pieds de photo: En plus vous pouvez ajouter les options «contrôles» afin que l utilisateur puisse passer les photos manuellement et «montrer pieds de photo» pour voir l information de chaque photo. Pagination: Cette option vous permet de faire une présentation de photos en les sélectionnant par pages, dans la barre inférieure dessus l image, comme indiqué ciaprès. Miniatures: Cette option vous permet de visualiser la partie inférieure de l image, où les autres images en miniature sont montrées, pour sélectionner celle-ci que vous voulez voir. Type de charger: Cette option vous permet de choisir comment vous voulez regarder la transition d une image à une autre, si en forme de cercle ou de barre. Type d animation: Cette option vous permet de choisir la façon pour changer d une image à une autre parmi les options de la liste. Info de l image : Empilés Cette option empile les images ajoutées dans la colonne, en ajustant leur tailles à la largeur de la colonne ou sont insérées.

12 Vidéo Ce bloc vous permettra d ajouter une vidéo mise en externe pour être montée directement dans le contenu de votre page. Note: L exemple de cette guide est fait en utilisant une vidéo de Youtube, mais c est aussi possible en utilisant une vidéo de Vimeo, mais les options de code d insertion (HTML) peuvent être différentes. Il y a deux formes d ajouter une vidéo dans votre site web: avec une recherche de vidéo sur Youtube ou en utilisant les options de vidéo avec l insertion de code (HTML) Recherche de vidéo sur Youtube: Dans la barre de recherche vous pouvez trouver le nom de la vidéo sur Youtube. Sélectionnez-le et il apparaîtra automatiquement dans le contenu de votre page. Dans l icône d information vous trouverez l option d insertion de vidéo pour code HTML. Option de vidéo - insertion de code (HTML): Dans le cadre de code d insertion, vous pouvez coller le code HTML. Pour obtenir ce code, vous ne devez que chercher la vidéo sur Youtube et la sélectionner dans l option «insérer» dans l onglet «partager cette vidéo». 3.3 CONTENEURS Les blocs de structures permettent de donner une forme au contenu de votre page. Vous pouvez ajouter conteneurs de 1 à 6 colonnes et faire votre site web plus pratique pour les visiteurs. Colonnes Pour ajouter un conteneur de colonnes, vous ne devez que faire glisser le bloc jusqu à la place désirée et le déposer. Une fois il est mis, vous pouvez ajouter des éléments dans les différentes conteneurs ou colonnes : images, buttons, textes ou c est aussi possible de laisser le champ vide. Dans la partie supérieure de la structure, vous pouvez voir ces options : Avec le bouton à gauche, vous pouvez cloner la colonne dans laquelle vous êtes en train de travailler: images, texte ou n importe quel élément déposé sera dupliqué. Le bouton du centre permet de cacher ce conteneur pour la version mobile de votre web. Finalement, avec le bouton à droite (corbeille), vous pouvez supprimer ce conteneur.

13 Autrement, les boutons qui apparaissent à droite affectent à toute la structure, et pas seulement à un conteneur en concret: Le premier bouton, ou deux roues apparaissent, permettent de configurer les files. Quand vous cliquez dessus, vous regarderez: - La partie supérieur permet d organiser les colonnes : quand vous les glissez, vous les changez de position. Vous pouvez aussi choisir si vous voulez une langueur complète (100%), si les blocs remplis ou pas ou agrandir le fond. - L opacité permet de modifier le fond de la structure, maintenir la même couleur, l assombrir ou l atténuer. - Vous pouvez aussi modifier le fond de la structure en glissant une image de votre ordinateur et en la déposant (drag&drop). En plus, si vous pouvez sélectionner l option de remplir le fond, l image sera ajustée. Le deuxième bouton, dans lequel il y a un rectangle avec une flèche, déplacez la structure complète vers le haute ou vers le bas, en dépendant de la partie du bouton cliqué. Le bouton, dans lequel il y a deux rectangles, vous permet de cloner la structure complète en vertical; toute la structure sera reproduite exactement dessus. Le bouton gris en forme de corbeille vous permet de supprimer toute la structure RÉSEAU SOCIAUX Facebook Like Copiez l URL de votre page Facebook dans le champ direction. Comme ça, vous serez rédigerez automatiquement au «j aime» de votre page sur cette réseau social. Mise en page L option «Mise en page» vous permettra de sélectionner comment montrer l option «j aime». Il y a 4 options pour montrer cette icône dans le contenu de votre page: - Standard - Bouton - Bouton de comptage - Boîte à compter Largeur Avec cette option, vous pouvez modifier comment apparaît le texte montré sous la forme standard pour l ajuster à vos besoins.

14 Envoyer Si vous sélectionnez le bouton «envoyer», vous verrez l option de partage le lien. Montrer faces Si vous sélectionnez cette option, vous pouvez voir l image de profile des personnes qui ont cliqué sur «j aime» Google Plus Copiez l URL de votre page de Facebook dans le champ direction. Comme ça, vous pouvez être redirigé automatiquement au «j aime» de votre page sur Google+. Dans «annotation», vous pouvez sélectionner la taille de l icône parmi: - Aucun (sans annotation) - Bulle - En ligne Vous pouvez aussi choisir la taille du bouton du réseau social: petit, à moyen, standard, haut. Twitter Follow Quand vous sélectionnez cette option, vous pouvez introduire le nom de l utilisateur de votre compte Twitter. Après, vous pouvez choisir la taille de l icône : moyen ou grand. Finalement, choisissez si montrer le compte ou pas. Vous pouvez aussi choisir la langue. 4. Annuler/Rétablir Cette option vous permet d annuler ou rétablir les dernières modifications sur votre site web. 5. Enregistrer Cette option vous permet d enregistrer les changements réalisés pour les voir en temps réel.