SUPPORT DE FORMATION
ADMINISTRATION SITE INTERNET WORDPRESS
www.vendee-solutions.com
1. « Pour parler le même langage » 4
1.1 Structure d’une page 4
1.2 Les types de contenu 5
1.3 Un peu de vocabulaire 5
1.3.1 Publié / Non publié 5
1.3.2 Responsive 5
2. Pour commencer 5
2.1 Me connecter à l’administration du site internet 5
2.2 Accéder à l’aide (tutos) 6
2.3 Retourner à la page accueil du site 6
3. Outils en ligne pour redimensionner les visuels aux dimensions attendues 6
3.1 Tutoriels 6
3.2 Tailles des visuels 6
4. Contenu de type PAGE 7
4.1 Création de la page 7
4.2 Rédaction de la page 7
4.2.1 Titre 7
4.2.2 Permalien (ou url) 7
4.2.3 Générateur Divi 7
4.2.4 Construction de la page 9
4.3 Modifier une page existante 15
4.3.1 Accéder à la page 15
4.3.2 Modifier la page 15
4.4 Sauvegarder un modèle dans la bibliothèque 16
4.5 Utiliser un modèle depuis la bibliothèque 16
4.6 Créer un bouton lien vers un PDF 16
4.7 Modifier un élément de la Bibliothèque Divi 17
5. Bibliothèque des médias 18
6. SEO référencement : meta description et balise alt des images 19
6.1 Meta description des pages 19
6.2 Balises alt des images 19
7. Formulaire de contact 20
7.1 Accéder aux formulaires de contact déjà existants 20
7.2 Créer un formulaire de contact 20 7.3 Intégrer un formulaire de contact déjà existant dans une page 21
8. Menu 21
8.1 Modifier un item de menu 22
8.2 Insérer un nouveau lien de menu 22
mise à jour 01/02/2018 Le tableau ci-dessous expose les différents risques et moyens de prévention. La prévention des risques n° 1 à 3 est de la responsabilité de 3DX. Ses actions et responsabilités se limitent au conseil concernant la prévention des risques n° 4 à 9. Les éventuels piratages découlant de ces risques engagent donc la responsabilité du client.
Risque
s Sources de piratage Moyens de prévention
1 craquage d’identifiant et mot de passe client
● obligation de mots de passe forts
● surveillance systématique des
tentatives de connexion malveillante 2 faille logicielle mise à jour de sécurité continue des sites
ayant souscrit à l’option sécurité 3 saisie robotisée ultra intensive de
formulaires sur le site filtre anti-robots à jour 4 accès par un tiers à une session
ouverte sur le poste client verrouiller le poste si on le quitte même temporairement
5 saisie de votre mot de passe sur un poste non sécurisé par votre structure
ne jamais faire cela
6 saisie de votre mot de passe sur un
poste tiers sécurisé par votre structure ne pas enregistrer le mot de passe et se déconnecter en quittant le poste
7 virus sur poste client antivirus à jour sur les postes qui ont accès à l’administration du site
8 vol de mot de passe ● ne pas noter son mot de passe
ailleurs que dans un espace sécurisé
● changer le mot de passe si une personne qui le connaît quitte la structure
● désactiver les comptes des personnes qui quittent la structure
9 interception par un tiers de mot de passe transmis en clair sur un site non https
passer votre site en protocole https
Conséquences possibles Natures des risques
● saisie de contenus malveillants
● vol de données
● installation de virus
● interruption de service
● social
● financier
● juridique
1. « Pour parler le même langage »
1.1 Structure d’une page
Une page est composée par différentes “sections”.
Ces sections sont elles-mêmes composées de “lignes” à l’intérieur desquelles on trouve des
“modules”.
1.2 Les types de contenu
● Médias : bibliothèques des images, pdf, pictogrammes, ...
● SA Sliders : diaporamas
● Pages : pages composées de sections
● Contact : formulaire
1.3 Un peu de vocabulaire 1.3.1 Publié / Non publié
Publié=> visible par les internautes
Non publié=> non visible par les internautes, si vous êtes connecté à l’administration vous pouvez visualiser la page, la modifier : c’est le mode «Brouillon» avant validation pour la publication.
Vous pourrez y accéder via la page liste de tous les contenus
1.3.2 Responsive
Responsive: adaptation automatique du site à la largeur du support de l'internaute : smartphone, tablette, ordinateur
2. Pour commencer
2.1 Me connecter à l’administration du site internet
Pour administrer le site internet ne pas utiliser Internet Explorer ni Edge.
=> Privilégier Chrome ou Firefox
- Saisir dans votre navigateur l'adresse suivante : https://[adresse_de_votre_site]/connexion
Vous pouvez alors vous authentifier (identifiant et mot de passe fournis lors de la formation)
2.2 Accéder à l’aide (tutos)
https://[adresse_de_votre_site]/aide
Vous devez être connecté pour avoir accès à cette page.
2.3 Retourner à la page accueil du site
3. Outils en ligne pour redimensionner les visuels aux dimensions attendues
Pourquoi ?
Veillez à ce que vos images soient bien dimensionnées (ni trop petites ni trop grandes) afin d’optimiser la taille donc le poids du fichieret par conséquent en découle letemps de chargementpour l’internaute.
Une image plus grandene sera pas de meilleure qualité sur le site internet etpénalisera le temps de chargement de la page et le référencement par les moteurs de recherche.
3.1 Tutoriels
https://partage.3dxinternet.ovh/doc_support_client/redim-visuel-editeur-photo.pdf https://partage.3dxinternet.ovh/doc_support_client/photopea.pdf
3.2 Tailles des visuels
Dimension du visuel en fonction de la largeur de la page et de l’espace que vous souhaitez utiliser
On peut considérer qu’unvisuel en plein écran fait 1920 px de large.
La largeur de la zone de texte est par défaut de 1080pxmais vous pouvez le régler différemment pour une section donnée.
Adapter en fonction. Si le visuel prend la moitié de la largeur d’une section de 1080px =>
l’image devra faire 540px de large maximum.
4. Contenu de type PAGE
4.1 Création de la page
4.2 Rédaction de la page 4.2.1 Titre
Le choix du titre est primordial car il permet le bon référencement de la page.
4.2.2 Permalien (ou url)
Le permalien est automatiquement généré en fonction du titre de la page.
Néanmoins, il est possible de le modifier manuellement.
4.2.3 Générateur Divi
Ce mode vous donne accès à une construction de page de type «WYSIWYG*». C’est à dire que cela vous permet de voir votre page telle qu’elle sera publiée.
En effet, lorsque vous activez le générateur Divi, vous pouvez utiliser le Visual Builder, véritable interface intuitive.
Nous vous recommandons d’utiliser le générateur Divi dès la création de la page.
* Un peu de culture : «WYSIWYG» est l’acronyme de la locution anglaise «What You See Is What You Get», signifiant littéralement en français «ce que vous voyez est ce que vous obtenez».
2 modes :
1- Générateur DIVI : Mode filaire : recommandé pour la création d’un nouveau contenu
=> Commencer à construire
4.2.4 Construction de la page
Utilisation de modèles de la Bibliothèque (Exemples de modèles sur la page Styles et Modèles : https://[adresse_de_votre_site]/styles-et-modeles)
➢ Construisez votre page par sections.
➢ Choisissez la composition de vos sections(par exemple 2 colonnes ⅔ ⅓).
Déplacer - Réglages - Dupliquer - Changer la structure - Enregistrer dans la Bibliothèque - Supprimer
➢ Insérez les modules choisis.
Par exemple, du texte à gauche et une image à droite.
➢ Une fois votre section terminée, vous pouvez ajouter une nouvelle section.
Chaque élément (section, colonne ou module) peut être déplacé en cliquant dessus et en le faisant glisser.
Les modules sont toujours composés de la même manière, leur paramétrage comporte 3 onglets :
● Contenu : comme son nom l’indique on y trouve le contenu du module ainsi que ses réglages de base. C’est ici aussi qu’on peut modifier l’Étiquette Admin. Cela permet de mieux se repérer ultérieurement. Par exemple, on renomme “Texte” en “Les prestations”.
● Style : tous les réglages de style mais aussi les espaces et les animations.
● Avancé : permet d’ajouter des ID et des classes CSS mais aussi de déterminer si un module doit disparaître sur certains appareils (par exemple sur smartphone une section peut s’avérer superflue).
Vous avez accès à de nombreux modules.
● Texte
Il s’agit d’un éditeur de texte avec toutes les fonctions de base.
Styles personnalisés :
Création d’un lien
Pour créer un lien, cliquez sur
“Insérer/modifier un lien” puis sur la
roue dentelée.
Votre lien peut envoyer :
● vers une url externe ou un pdf de votre site(ex brochure) (auquel cas vous cocherez bien “Ouvrir le lien dans un nouvel onglet”).
Pour un pdf, récupérez l’url du pdf depuis la Bibliothèque de médias
Copier et Coller dans adresse web
● vers une autre page de votre site
Commencer à saisir le nom de la page cible dans Rechercher
cliquer sur le nom qui apparaît dessous Puis cliquer sur Ajouter un lien
Pensez à vérifier que vos liens fonctionnent.
Insertion d’un média
➢ Pour insérer un média, cliquez sur “Ajouter un média”.
2 choix s’offrent à vous :
● sélectionner un média qui appartient déjà à votre bibliothèque
● téléverser un nouveau fichier
➢ Complétez les détails de l’image :
● texte alternatif
➢ Insérez l’image.
=> Bibliothèque des médias
● Code
Ce module permet d’intégrer du code. C’est utile pour insérer un formulaire, une vidéo YouTube, un diaporama.
● Galerie
C’est un moyen de mettre plusieurs images. De plus, elles s’ouvrent en lightbox au clic.
● Bouton
Ce module permet de créer des boutons entièrement personnalisables.
● Image
L’utilisation de ce module est un moyen d’insérer une image sans passer par l’éditeur de texte.
Enregistrement du module
Le module doit être sauvegardé avant de fermer la fenêtre “Paramétrages”.
Ensuite n’oubliez pas de “Publier” ou “Mettre à jour” avant de quitter la page, sans quoi toutes vos modifications seront perdues.
4.3.1 Accéder à la page
Cliquez sur “Pages” > “Toutes les pages”.
Puis sélectionnez “Modifier”.
4.3.2 Modifier la page
2 modes sont possibles :
● générateur Divi : on visualise les blocs
● Visual Builder (Build On The Front End) : on visualise la page telle qu’elle apparaît sur le web
Par défaut le générateur Divi est activé. Pour passer d’un mode à l’autre :
4.4 Sauvegarder un modèle dans la bibliothèque
Pour une page, section, ligne ou module
Cliquez sur “Sauvegarder dans la bibliothèque”.
Nommez le modèle et sauvegardez.
4.5 Utiliser un modèle depuis la bibliothèque
➢ Ajoutez une nouvelle page.
➢ Cliquez sur “Utiliser le générateur Divi”.
➢ Téléchargez le modèle.
ou
4.6 Créer un bouton lien vers un PDF
1- Dans la bibliothèque de média, copier l'adresse web du pdf souhaité que vous avez déposé ou d'un pdf déjà existant
2- Dans la page souhaitée, vous insérez un module Bouton depuis la bibliothèque.
=>
4- Vous cochez la case "Ouvrir dans un nouvel onglet", puis "enregistrer" ou "mettre à jour" ma page
5- Vous enregistrez la page et vous testez si le lien fonctionne correctement (fichier cible et ouverture dans un nouvel onglet).
4.7 Modifier un élément de la Bibliothèque Divi
5. Bibliothèque des médias
Attention si vous supprimez un média (logo, image, pdf) qui est utilisé dans une ou plusieurs pages, vous n’aurez pas de message d’avertissement s'il est utilisé ou non.
Si il est utilisé cela nuira à l’esthétique du site.
Dimensions des visuels : Voir le point de ce document =>DIMENSIONS DES VISUELS
balise alt des images
6.1 Meta description des pages
Ce texte ne sera pas affiché sur la page.
Il est utilisé par les robots pour le référencement.
Il apparaît dans les résultats de recherche des internautes pour les aider dans leur choix de clic.
Conseil pour rédiger ce petit texte :
● brainstorming des mots clés que pourrait saisir un internaute susceptible d’être intéressé par le
contenu de cette page
● rédiger un petit texte résumant le contenu de la page et incitant l’internaute à cliquer
6.2 Balises alt des images
Texte alternatif :
Ce texte sera utilisé par les lecteurs d'écran, les moteurs de recherche, ou lorsque l'image ne peut être chargée.
7. Formulaire de contact
7.1 Accéder aux formulaires de contact déjà existants
Il est possible de dupliquer un formulaire déjà existant.
7.2 Créer un formulaire de contact
➔ Au niveau du tableau de bord, cliquez sur “Contact” > “Créer un formulaire”.
La création du formulaire va engendrer un code à intégrer dans un élément de type “Code”.
page
➔ Copiez le code du formulaire qui vous intéresse.
➔ Insérez un module code dans lequel vous collez ledit code.
8. Menu
Le menu se gère dans “Apparence” > “Menus”
Attention, toute modification du nombre d’item de menu, de la longueur de ces items apportent des changement dans la disposition et donc la structure graphique du menu
Commencez par sélectionner le menu sur lequel vous souhaitez travailler.
8.1 Modifier un item de menu
Appuyez sur le petit triangle de l’item choisi pour le dérouler.
Changez le titre de la navigation.
NB : le <br /> permet d’aller à la ligne.
Vous pouvez retirer un item de menu en cliquant sur “Retirer”.
8.2 Insérer un nouveau lien de menu
Sélectionnez la page choisie puis cliquez sur “Ajouter au menu”.
Enregistrez le menu.
38 RUE DU SÉJOUR, 85170 LE-POIRÉ-SUR-VIE02 51 36 08 50
