Site nivillac.fr : procédure de mise à jour du site internet Commune de Nivillac tutoriel pour l administration du site internet Page 1 www.efficienceweb.com
Sommaire 1. Préambule et prise en main p.3 1.1. Accès à l interface d administration p.3 1.2. Les articles p.5 2. Alimenter le site 2.1. Ajouter ou modifier un article p.8 p.8 2.1.1 Procédure p.8 2.1.2. Ajouter des photos dans un article p.12 2.1.3. Ajouter une galerie photo dans un article p.19 2.1.4. Ajouter des fichiers pdf dans un article p.25 2.1.5 Structurer et mettre en forme un article p.25 2.1.6. Ajouter une carte interactive à un article p.27 2.1.7 Insérer une vidéo p.29 2.2. Gérer l ordre d affichage des articles p.32 2.3. Gérer l agenda p.35 2.3. Gérer l a carte interactive p.41 Commune de Nivillac tutoriel pour l administration du site internet Page 2 www.efficienceweb.com
1. Préambule et prise en main Vous disposez d un accès d administration au site nivillac.fr avec le statut de rédacteur : vous pouvez ainsi gérer l intégralité du contenu de toutes les pages du site (textes, photos, vidéos, cartes, pdf ). Un administrateur a accès a des fonctionnalités supplémentaires : sondages, newsletter, gestion du menu et diaporama de la page d accueil. 1.1 Accéder à l interface d administration Allez sur cette page : www.nivillac.fr/miseajour/ Vous arrivez sur une page d identification, où vous devrez 1.2. Page d accueil de la console d administration Connectez-vous avec votre identifiant et votre mot de passe En cas d oubli de mot de passe, vous pouvez en générer un nouveau Commune de Nivillac tutoriel pour l administration du site internet Page 3 www.efficienceweb.com
Si vous avez saisi correctement vos informations de connexion, vous arrivez sur le «Tableau de bord» : En colonne, vous trouverez le menu qui vous permet d accéder aux différentes sections de l interface d administration. Articles : la plupart des contenus de votre site Evénements : gestion des contenus de type agenda Médias : l ensemble des images et documents qui ont été mis en ligne Profil : gestion de votre compte Commune de Nivillac tutoriel pour l administration du site internet Page 4 www.efficienceweb.com
1.2 Les articles et les catégories Chaque contenu du site est un article qui est associé à une ou plusieurs catégories (une catégorie est une page du site). Cliquez sur «Articles», «Tous les articles». Vous accédez à la liste des articles Vous pouvez filtrer l affichage par «catégories» (une catégorie est égale à une rubrique du site) ou effectuer une recherche libre Pour modifier un article cliquez sur son titre Commune de Nivillac tutoriel pour l administration du site internet Page 5 www.efficienceweb.com
Titre de l article Contenu de l article Bien classer son article dans la bonne catégorie : Les articles créés sont forcément liés au dernier niveau de rubriques existant. Exemple : pour un article à publier dans «Social & Economie» / «Activités économiques» / «Les commerces et entreprises de Nivillac» : il faut cocher la catégorie «Les commerces et entreprises de Nivillac». Catégorie de l article (= page(s) sur laquelle on souhaite que l article apparaisse) Commune de Nivillac tutoriel pour l administration du site internet Page 6 www.efficienceweb.com
Ce qui donne en ligne sur le site : Commune de Nivillac tutoriel pour l administration du site internet Page 7 www.efficienceweb.com
2 Alimenter le site 2.1.1 Procédure Cliquez sur «Articles» Cliquez sur «Ajouter» Commune de Nivillac tutoriel pour l administration du site internet Page 8 www.efficienceweb.com
Saisissez le titre de votre article Saisissez et mettez en forme votre contenu Choisissez la (ou les) catégorie(s) de votre article, donc la/les page(s) du site sur laquelle votre article doit s afficher Commune de Nivillac tutoriel pour l administration du site internet Page 9 www.efficienceweb.com
Le titre que vous avez saisi Le contenu que vous avez saisi La catégorie Cliquez sur «Publier» Votre article est en ligne! Commune de Nivillac tutoriel pour l administration du site internet Page 10 www.efficienceweb.com
Allons voir sur le site ce que ça donne : Ces 2 boutons permettent de voir le résultat de mise en forme sur le site. Le résultat est conforme à nos attentes : Commune de Nivillac tutoriel pour l administration du site internet Page 11 www.efficienceweb.com
2.1.2 Ajouter des photos dans un article Nous allons ajouter une photo en haut à gauche de notre article. Pour voir le curseur, cliquez au début de votre article ou à l endroit où vous souhaitez placer votre photo. Cliquez sur «Ajouter un média» Commune de Nivillac tutoriel pour l administration du site internet Page 12 www.efficienceweb.com
Soit votre image est déjà présente dans la bibliothèque, il vous suffit alors de la sélectionnez soit vous voulez insérer une nouvelle photo. Dans ce dernier cas, cliquez sur «Envoyer des fichiers» Commune de Nivillac tutoriel pour l administration du site internet Page 13 www.efficienceweb.com
Choisissez votre (ou vos fichiers) dans vos documents Cliquez sur «Ouvrir» Commune de Nivillac tutoriel pour l administration du site internet Page 14 www.efficienceweb.com
Saisissez la légende de votre photo dans le champ titre Descendez La cible du lien permet de rendre cliquable la photo pour la voir en plus grand Choisissez l alignement de votre photo (ici à gauche) Choisissez la taille de votre photo (le plus souvent miniature ou moyen) Cliquez sur «Insérer dans l article» Commune de Nivillac tutoriel pour l administration du site internet Page 15 www.efficienceweb.com
Choisissez l alignement de votre photo (ici à gauche) «Lier à» permet de rendre cliquable la photo pour la voir en plus grand Choisissez la taille de votre photo (le plus souvent «moyenne») Cliquez sur «Insérer dans l article» Commune de Nivillac tutoriel pour l administration du site internet Page 16 www.efficienceweb.com
Votre image apparait dans l article. Cliquez sur «Mettre à jour» (ou «Publier» qui s affichera à la place de mettre à jour si vous n avez pas encore publié votre article) Commune de Nivillac tutoriel pour l administration du site internet Page 17 www.efficienceweb.com
Allez voir le résultat sur le site : Commune de Nivillac tutoriel pour l administration du site internet Page 18 www.efficienceweb.com
2.1.3 Ajouter une galerie photo dans un article Nous allons ajouter une galerie photo à la fin de notre article. Vous pouvez saisir du texte si besoin avant ou après votre galerie photos. Mettez le curseur à l endroit où vous voulez insérer votre galerie. Cliquez sur «Ajouter un média» Cliquez sur «sélectionner les fichiers» Commune de Nivillac tutoriel pour l administration du site internet Page 19 www.efficienceweb.com
Cliquez sur «Créer une galerie». Soit vous envoyer en ligne des nouvelles photos, dans ce cas cliquez sur «Envoyer des fichiers, choisissez vos photos et mettes les en ligne (procédure expliquée page 14) Soit vous choisissez vos photos dans la bibliothèque. Commune de Nivillac tutoriel pour l administration du site internet Page 20 www.efficienceweb.com
Sélectionnez vos photos Cliquez sur «Créer une nouvelle galerie». Commune de Nivillac tutoriel pour l administration du site internet Page 21 www.efficienceweb.com
Insérez des légendes si besoin. Cliquez sur «Insérer une galerie» Commune de Nivillac tutoriel pour l administration du site internet Page 22 www.efficienceweb.com
Ce visuel indique qu il y a une galerie dans votre article Publiez ou mettez à jour votre article. Commune de Nivillac tutoriel pour l administration du site internet Page 23 www.efficienceweb.com
Voici le résultat en ligne : Commune de Nivillac tutoriel pour l administration du site internet Page 24 www.efficienceweb.com
2.1.4 Ajouter des fichiers pdf dans un article Faire exactement la même manipulation que pour l ajout de photos. Bien penser à ouvrir le lien dans un nouvel onglet. 2.1.5 Structurer et mettre en forme un article Il est important de bien structurer son article, ce qui évitera d éventuels bugs de mises en page Insérer un sous-titre : Tapez votre texte et appuyer sur la touche «Entrée». Vous allez sauter une ligne ce qui est normal. Ce saut de ligne permet au système de repérer et d isoler les différentes zones de contenu. Sélectionnez votre sous-titre ou placez le curseur sur sa ligne ; Cliquez sur «Titre 2». Astuce : pour aller à la ligne il faut appuyer sur les touches «shift» et «entrée» simultanément. Scinder son article en Insérant un lien «lire la suite» : Placez le curseur sur la ligne où vous voulez couper votre article. Cliquez sur le picto «more». Commune de Nivillac tutoriel pour l administration du site internet Page 25 www.efficienceweb.com
Résultat : Commune de Nivillac tutoriel pour l administration du site internet Page 26 www.efficienceweb.com
2.1.6 Ajouter une carte interactive à un article Dans l ajout ou la modification d un article, vous trouverez en colonne de droite, plus bas, un bloc «Adresse». Saisissez votre adresse de type «nom de la rue, ville» Cliquez sur Placer le marqueur. Affiner la position si nécessaire en déplaçant le marqueur. Publiez ou mettez à jour votre article. Commune de Nivillac tutoriel pour l administration du site internet Page 27 www.efficienceweb.com
Résultat en ligne : la carte s affiche sous votre article Commune de Nivillac tutoriel pour l administration du site internet Page 28 www.efficienceweb.com
2.1.7 Insérer une vidéo Voici comment insérer une vidéo ou un module mis en ligne sur site de partage de vidéos ou de contenu. Dans cet exemple nous allons insérer une vidéo depuis le site Youtube. Sur le site Youtube, copiez l adresse de la page de la vidéo qui vous intéresse. Commune de Nivillac tutoriel pour l administration du site internet Page 29 www.efficienceweb.com
Copiez l adresse, en ayant bien passé une ligne avant (touche Entrée). Commune de Nivillac tutoriel pour l administration du site internet Page 30 www.efficienceweb.com
Voici le résultat en ligne : Commune de Nivillac tutoriel pour l administration du site internet Page 31 www.efficienceweb.com
2.2 Gérer l ordre d affichage des articles au sein d une page Au sein d une page, les articles sont classés par ancienneté : du plus récent au moins récent. Vous pouvez bien sûr personnaliser l ordre d affichage des articles au sein d un page. Cliquez sur «Ordre des articles» Commune de Nivillac tutoriel pour l administration du site internet Page 32 www.efficienceweb.com
Choisissez la catégorie que vous souhaitez réordonner puis cliquez sur «Filtrer». Commune de Nivillac tutoriel pour l administration du site internet Page 33 www.efficienceweb.com
Faites glisser les articles pour les ordonner. Cliquez sur «Mettre à jour». Commune de Nivillac tutoriel pour l administration du site internet Page 34 www.efficienceweb.com
2.3 Gérer l agenda Toute la gestion des 2 agendas (communal et culturel) se fait dans l onglet «Evénements». L essentiel de la mise en forme se fait comme la création d un article. Ajouter un événement : Allez dans «Evénements», «Nouveau» Commune de Nivillac tutoriel pour l administration du site internet Page 35 www.efficienceweb.com
Comme un article, saisissez un titre et le contenu Commune de Nivillac tutoriel pour l administration du site internet Page 36 www.efficienceweb.com
Associez votre événement à la catégorie d agenda de votre choix. Important : saisissez une date dé début et une date de fin. Vous pouvez saisir d autres informations facultatives. Commune de Nivillac tutoriel pour l administration du site internet Page 37 www.efficienceweb.com
Allons voir le résultat : Notre actualité est bien en place. En revanche, dans le calendrier, la photo ne s affiche pas. Il faut utiliser la fonction «Utiliser une image à la une». Commune de Nivillac tutoriel pour l administration du site internet Page 38 www.efficienceweb.com
Dans la modification de l article, cliquez sur «Ajouter un média» pour accéder à la gestion des images. Cliquez sur «Mettre une image à la une». Choisissez une image Cliquez sur «Utiliser comme image à la une». Mettez à jour votre article. Commune de Nivillac tutoriel pour l administration du site internet Page 39 www.efficienceweb.com
Nous avons bien ajouté une image miniature à notre événement dans le calendrier : Commune de Nivillac tutoriel pour l administration du site internet Page 40 www.efficienceweb.com
2.3 Gérer la carte interactive Pour insérer un marqueur dans la carte interactive, il faut procéder exactement comme une carte simple (voir page 27) et attribuez à voir article une souscatégorie de la catégorie «Carte interactive». Commune de Nivillac tutoriel pour l administration du site internet Page 41 www.efficienceweb.com