Atelier numérique Créer son site Wix

CRÉER SON SITE
WEB AVEC WIX
10 et 17 décembre 2015

Bonjour !
Nous serons vos animatrices
aujourd’hui,
Et vous ?

PLAN DES 2 JOURNÉES
• Faire le point sur vos “devoirs”
• Découvrir l’environnement Wix
• Adapter le design de vos sites
• Optimiser le contenu de votre site internet
• Diffusion de votre site
• Mise en ligne du site

Vos devoirs ?
1. Terminer le travail de votre arborescence
2. Ouvrir un site sous Wix : http://fr.wix.com/
3. Choisir un template : http://fr.wix.com/website/templates
4. Réfléchir à l’organisation type de vos pages
5. Réfléchir aux informations que vous voulez mettre en haut de
page (header) et en bas de page (footer)
6. Préparer un maximum de photos de votre structure et des
alentours (qualité la plus élevée, nous verrons ensemble quelle est
la taille idéale des photos sur le web)
7. Si possible : préparer du contenu texte à insérer

DÉCOUVREZ
L’ENVIRONNEMENT
DE WIX

Rendez-vous sur http://fr.wix.com/

Sélectionnez un domaine d’activité

Sélectionnez le template
• Vous pouvez parcourir
tous les templates
• Cliquer sur « Voir »
pour avoir une démo
du temptate

Modifiez votre nom d’utilisateur pour
votre nom de domaine gratuit
Cliquez sur
votre nom puis sur
« Paramètres du
compte »

Vérifiez les paramètres du site
À ne pas manquer :
• Nom de domaine gratuit ou
payant : le mettre à jour
• Langue : français
• Info entreprise : renseigner
vos coordonnées
• Réseaux sociaux : penser
« maillage »
• Administrateurs : nommer
un 2ème administrateur

Découvrir l’environnement Wix
Sauvegarder le + souvent possible
Aperçu : ce que l’internaute va voir
Publier : mettre le site en ligne

Menu « du haut »
Accéder à
l’arborescence
Afficher
+ ou – d’outils
Passer en
mode payant • Précédant
• Suivant
• Visualiser le site en
version « mobile »
• Sauvegarder
• Aperçu du site
• Publier le site

Menu « de droite »
La Barre d'Outil de l'Éditeur pour modifier vos éléments :
• Aligner des Éléments
• Rotation
• Faire Pivoter des Éléments
• Taille
• Redimensionner des Éléments
• Position
• Placer les Éléments en Utilisant les paramètres X et Y
Affichage optionnel
Peut être déplacée

Menu « de gauche »
• Arrière-plan
• Ajouter un élément
• App market
• Mes téléchargements
• Commencez à rédiger

Intégrez votre arborescence
Ajoutez autant de pages que nécessaire
Pensez aux pages « filles »
Renseignez les infos de pages, la mise en
page, les permissions
Travaillez votre référencement

Définition du référencement
Indexation d’un site Internet
ou de certaines pages dans les
différents outils de recherche
disponibles sur Internet,
comme les moteurs de
recherche, afin d’en améliorer
la notoriété et la visibilité.

Titre ou title
Un titre par page donnant une indication claire sur le contenu :
nom de la structure + expressions (mots clés)
70 caractères (pour un affichage complet)
Propre à chaque page !

Description
Informe les internautes et Google du contenu de la page.
Le contenu saisi apparaît dans les pages de recherche.
160 à 200 caractères maximum.
Propre à chaque page !

Mots clés ou keywords
Série de mots clés.
N’est plus prise en compte par certains moteurs de recherche.
Le moteur de recherche va privilégier un contenu textuel situé
dans vos pages, vos titres, vos images

Pour mieux comprendre le référencement

ADAPTEZ LE DESIGN
DE VOTRE SITE

L’eyetracking :
l’œil vous dit comment organiser vos pages

Modifier l’arrière-plan de page
3 possibilités : couleur, image ou vidéo
Possibilité d’appliquer l’arrière plan aux
autres pages du site
Paramètres pour avoir plus d’options

Ajouter du texte
Nous vous conseillons de choisir les polices du « texte assorti »
2 – 3 polices max

Et concrètement ça donne quoi ?
Classée Réserve Naturelle, la magnifique Baie
de l'Aiguillon s'adresse particulièrement aux
amoureux de la Nature avec plus de 5000
hectares de vasières et de prés salés où
s'entremêlent les eaux douces et salées
constituant ainsi, une véritable halte
migratoire. Une découverte à prolonger à la
Pointe d'Arcay : Ce bras de sable long de cinq
kilomètres est un lieu d'observatoire privilégié
pour les ornithologues. Deux stations bordent
ces espaces naturels et vous accueillent tout
au long de l'année : L'Aiguillon sur Mer et
la Faute sur Mer. Profitez d'une balade en mer
pour apprécier les belles plages de sable fin
avant une dégustation de coquillages et de
moules ... de Bouchot, naturellement !
H1 : Le littoral du Marais Poitevin
H2 : Le paradis des oiseaux
La Baie de l’Aiguillon est un espace naturel classé qui
accueille de nombreux oiseaux. Les spécialistes aiment
observer cette faune migratrice tout au long de l’année, et
notamment à l’observatoire de la Pointe d'Arcay.
H2 : Le rendez-vous des familles
Pour les familles, deux stations balnéaires bordent cet
espace naturel : L'Aiguillon sur Mer et la Faute sur Mer.
Châteaux de sable, pêche à pied, activités nautiques,
randonnées sont autant d’activités à pratiquer.
H2 : Pour les gourmands
La spécialité culinaire locale est la moule de Bouchot,
naturellement !

Ajouter une image
Attention au
référencement
de vos images

Modifiez les paramètres de vos images
Renseignez la description ou
balise alternative
Attention aux mots clés
N’oubliez jamais :
1 image vaut 1000 mots !

Optimiser les images pour le web
Pixel
C’est le point qui
compose l’image. Le
pixel est lui-même
constitué de 3 points de
couleurs différentes :
rouge, vert, bleu.
Définition
C’est la « dimension
informatique » de votre
image. Il s’agit de la
largeur et de la hauteur
de l’image exprimée en
pixels.
Résolution
C’est le nombre de
pixels contenus dans un
pouce (=2,54cm). Elle
exprime la densité de
pixels dans l’image et
l’unité de mesure est le
DPI ou PPP (points par
pouce).
Éléments à prévoir :
• Poids des images pour le web: poids 1 Mo maxi = 1024 Ko
• Résolution optimisée pour le web : 72 dpi
• Poids des images pour l’impression : poids mini 5 Mo et résolution de 300 dpi
• Le référencement des images

Les formats d’image pour le web
JPG/JPEG: Joint Photographic Experts Group
Format d’image comprimé le + utilisé sur le web
PNG : Portable Network Graphics
Performant, il réunit presque tous les avantages du JPEG et du GIF et
permet la transparence.
GIF : Graphics Interchange Format
Ce sont des fichiers basse résolution. Permet la transparence et les
images animées.

Ce qu’il faut retenir
72 ou 96 dpi - 600 ko – JPEG

Outils de retouche photo
Microsoft Paint
Photofiltre
Gimp
Pixlr
Photoshop
befunky
picmonkey

Trouvez des visuels « séduction »
de la Vendée
Télécharger le kit de communication Sud Vendée Tourisme
http://goo.gl/forms/YAfskzC1aI
Télécharger le kit de communication Vendée Expansion
http://www.vendee-expansion.fr/kit-com-tourisme/pages/index.html

Trouvez des visuels
pour une occasion spéciale
https://pixabay.com/fr/
https://www.pexels.com/
https://picjumbo.com/

C’est tout pour
aujourd’hui !

Comment réussir sa home page ?

Les infos indispensables du header
• Intégrez votre logo
• Placez votre slogan
• Insérez votre menu de navigation
• Placez une barre de recherche
• Intégrez un « call-to-action »
• Placez les icônes des réseaux sociaux
et des flux RSS
• Intégrez les contacts
• Intégrez un accès à l’espace
personnel de l’utilisateur (mon panier)

Les infos indispensables du footer
• Créez un lien vers le Haut de
page
• Affichez les mentions légales
et le copyright de votre site
• Répétez la navigation
primaire du site
• Insérez des widgets
• Placez les icônes des réseaux
sociaux et des flux RSS

Ajouter de la musique
Est-ce que c’est toujours
une bonne idée ???
Souvenez-vous,
Sabrina vous en a parlé…

Formulaire de contact
• Cliquez sur « Ajouter »
• Puis sur « Contact »
• Sélectionnez le type de
formulaire à intégrer

Google map
• Allez sur www.google.fr/maps
• Recherchez votre
établissement
• Cliquez sur « Partager »
• Choisir « Intégrer la carte »
• Choisir la taille de la carte
• Copier le code
• Coller le code dans votre site

Tableau des prix
• Allez sur « App market »
• Recherchez « Table master »
• Choisissez l’option « Ajouter au site »
• Puis renseignez vos données
• Peaufinez le design

Google Agenda
Vous répondez aux attentes des internautes :
o Vous passez moins de temps à répondre aux demandes de
disponibilités
o Vous optimisez vos locations
Google Agenda vous facilite le quotidien :
o Gratuit
o Outil de gestion interne de vos réservations
o Outil d’affichage sur internet de vos disponibilités
o 1 manipulation = mise à jour de mon agenda + mise à jour de mes
disponibilités en ligne

Open System
Open System : c’est quoi ?
• Une solution de réservation en ligne
• Un contact direct avec le client
• Une gestion autonome de votre offre
• Un rapport qualité / prix imbattable
• Des applications personnalisées pour votre commercialisation
Open System : pour qui ?
• Hôtels
• Campings
• Résidences et villages de vacances
• Chambres d’hôtes
• Locations de vacances et agences immobilières
• Sites touristiques, activités de loisirs
• Restaurants
• Acteurs institutionnels : Offices de Tourisme, Pôles et territoires touristiques

Ajouter plus
Flash : « pas bien » car pas visible
sur tous les supports
Boutons de connexion au site : pour
mettre des accès privés
Ancres : pour les sites one page
Boutons document : pour mettre un
doc en téléchargement

Intégrez une vidéo Youtube avec du code
• Allez sur www.youtube.com
• Choisissez la vidéo à intégrer
• Cliquez sur « Partager » et choisir « Intégrer »
• Cliquez sur « Plus » pour personnaliser le design
• Copiez le code
• Collez le code dans votre site

Est-ce que vous avez pensé à …
Mentions
légales

OPTIMISEZ LE
CONTENU DE VOTRE
SITE

Faire des liens de page à page
2 objectifs :
• Favoriser la navigation
• Travailler le référencement
Ils pointent vers un autre contenu utile (une autre page interne
ou externe, un document à télécharger… = le maillage)
Ils sont explicites
Ils intègrent des mots clés
On évite : Cliquez ici pour télécharger nos tarifs.
On privilégie : Cliquez ici pour télécharger nos tarifs.

Widget météo ou carte d’ensoleillement ?
• Allez sur http://www.meteofrance.com/meteo-widget
• Sélectionnez la taille du widget
• Renseignez la commune
• Copiez le code
• Intégrez le dans votre site wix

PENSEZ DIFFUSION
DE L’INFO ET
MAILLAGE

Maillage Facebook
Cliquez sur « Ajouter »
Puis sur « Réseaux sociaux »
Et sélectionnez le widget de
votre choix
Paramétrez votre compte et
choisissez la mise en page

Maillage site d’avis
Allez sur http://www.tripadvisor.fr/Widgets
Recherchez le nom de votre établissement
Sélectionnez le widget de votre choix et paramétrez le
Copiez le code HTML généré automatiquement
Revenez sur l’editeur de votre site
Cliquez sur « ajouter » et choisir « Plus » puis « Code HTML »
Cliquez sur « Saisir code » puis « Mettre à jour »

Maillage signature mail
o Le contact : nom, prénom
o Votre logo, une image
o (votre photo ? la règle d’or : HUMANISEZ)
o Votre adresse
o Le lien vers votre site internet
o Le lien vers votre page facebook, google +,
tripadvisor ou autre réseau …

o WiseStamp extension Firefox et Chrome permet
d’afficher votre signature électronique
o Compatible : Gmail, Yahoo Mail, AOL, Hotmail
o Vous pouvez facilement tout personnaliser, y compris
vos profils sociaux, partager automatiquement vos
messages blog, citations, nouvelles, signets et plus
encore …

Maillage avec vos supports papier

Communiquez
Communiquez
sur votre
présence
Pensez
« maillage »

Bien réfléchir au nom de domaine
Il doit être ni trop court ni
trop long
Il doit refléter votre
activité principale
Il doit être facile à retenir
spontanément par vos
visiteurs
Utiliser le tiret – pour
éviter une succession de
mots
Ajouter le nom de la
commune si elle est bien
référencée

Transférer un nom de domaine existant
o Possible en version pro
o Pour .com
Pas à pas :
https://fr.wix.com/support/html5
/domaines/transferts-de-
domaines/kb/transf%C3%A9rer-
un-domaine-achet%C3%A9-
ailleurs-chez-wix
https://fr.wix.com/support/html5
/domaines/connecter-mon-
domaine-%C3%A0-
wix/kb/instructions-pour-
plusieurs-h%C3%A9bergeurs-de-
domaines-ex-network-solutions-
godaddy-yahoo-etc

Consultez le centre d’assistance
https://fr.wix.com/support/html5/

Et si vous vous lanciez dans un blog ?
1.Cliquez sur Ajouter sur le côté gauche
de l'Éditeur
2.Cliquez sur Blog
3.Cliquez sur une mise en page de blog
pour l'ajouter ou faites là glisser vers
l'intérieur de votre page
Quel est l’intérêt ?
• Pour le référencement
• Pour humaniser, montrer votre « vision »
• Pour se positionner en expert
• Pour nouer une relation plus informelle
• Pour avoir du contenu pertinent sur les
réseaux sociaux
• Pour le plaisir…?

Merci !
bit.ly/enquete-satisfaction-atelier
Des questions ?
Sud Vendée Tourisme
Tél. : 02 51 87 69 07
c.loizeau@sudvendeetourisme.com

CRÉDITS ET SOURCES :
Photos :
Pixabay
Pexel
Death to stock
Creative commons
wikipedia
Sources :
Réseau Animateur Numérique de Territoire
France
Centre d’aide Facebook
Think with Google
Baromètre Raffour 2015
Leblogdumoderateur
Etourisme.info
Atelier numérique Jimdo du Bocage Normand
Atelier numérique Jimdo du Vignoble de
Nantes
Conférence “C’est quoi un bon site web?” par
Web Créatif

Atelier numérique Créer son site Wix

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (14)

Similaire à Atelier numérique Créer son site Wix

Similaire à Atelier numérique Créer son site Wix (20)

Plus de Sud Vendée Tourisme

Plus de Sud Vendée Tourisme (20)

Atelier numérique Créer son site Wix