94
CRÉER SON SITE WEB AVEC WIX Janvier 2017

Atelier numérique : Créer son site web avec Wix

Embed Size (px)

Citation preview

Page 1: Atelier numérique : Créer son site web avec Wix

CRÉER SON SITE WEB AVEC WIX

Janvier 2017

Page 2: Atelier numérique : Créer son site web avec Wix

Bonjour !Nous serons vos animatrices aujourd’hui,

Et vous ?

Page 3: Atelier numérique : Créer son site web avec Wix

PLAN DES 2 JOURNÉES• Rappel sur la première journée• 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

Page 4: Atelier numérique : Créer son site web avec Wix

Rappel

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/templates4. Réfléchir à l’organisation type de vos pages, header, footer5. Préparer un maximum de photos de votre structure et des

alentours 6. Préparer du contenu texte à insérer

Page 5: Atelier numérique : Créer son site web avec Wix

DÉCOUVREZ L’ENVIRONNEMENT

DE WIX

Page 6: Atelier numérique : Créer son site web avec Wix

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

Page 7: Atelier numérique : Créer son site web avec Wix

Créez un compte gratuit

Page 8: Atelier numérique : Créer son site web avec Wix

Ressaisissez vos données

Page 9: Atelier numérique : Créer son site web avec Wix

Sélectionnez le template

• Vous pouvez parcourir tous les templates

• Cliquer sur « Voir » pour avoir une démo du temptate

Page 10: Atelier numérique : Créer son site web avec Wix

Le tableau de bord

Page 11: Atelier numérique : Créer son site web avec Wix

Découvrir l’environnement Wix

Sauvegarder le + souvent possible Aperçu : ce que l’internaute va voirPublier : mettre le site en ligne

Page 12: Atelier numérique : Créer son site web avec Wix

Menu « du haut »

Accéder à l’arborescence

Afficher + ou – d’outils Passer en

mode payant • Zoom +/-• Précédant• Suivant• Visualiser le site en

version « mobile »• Sauvegarder• Aperçu du site • Publier le site

Page 13: Atelier numérique : Créer son site web avec Wix

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 optionnelPeut être déplacée

Page 14: Atelier numérique : Créer son site web avec Wix

Menu « de gauche »

• Arrière-plan• Ajouter un élément• App market• Mes téléchargements• Commencez à rédiger (blog)• Mes shoutouts (newsletter)• Réservations (selon template)

Page 15: Atelier numérique : Créer son site web avec Wix

Référencement de vos pages

Page 16: Atelier numérique : Créer son site web avec Wix

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é.

Page 17: Atelier numérique : Créer son site web avec Wix

Comment fonctionne Google ?

Page 18: Atelier numérique : Créer son site web avec Wix

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 !

Page 19: Atelier numérique : Créer son site web avec Wix

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 !

Page 20: Atelier numérique : Créer son site web avec Wix

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

Page 21: Atelier numérique : Créer son site web avec Wix

Intégrez votre arborescence

Ajoutez autant de pages que nécessairePensez aux pages « filles »Renseignez les infos de pages, la mise en page, les permissionsTravaillez votre référencement

Page 22: Atelier numérique : Créer son site web avec Wix

Intégrez votre arborescence

Page 23: Atelier numérique : Créer son site web avec Wix

Pause

Page 24: Atelier numérique : Créer son site web avec Wix

ADAPTEZ LE DESIGN DE VOTRE SITE

Page 25: Atelier numérique : Créer son site web avec Wix

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

Page 26: Atelier numérique : Créer son site web avec Wix

La ligne de flottaison web

Footer

Page 27: Atelier numérique : Créer son site web avec Wix

Modifier l’arrière-plan de page

3 possibilités : couleur, image ou vidéoPossibilité d’appliquer l’arrière plan aux autres pages du site

Paramètres pour avoir plus d’options

Page 28: Atelier numérique : Créer son site web avec Wix

Ajouter du texte

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

Page 29: Atelier numérique : Créer son site web avec Wix

Référencement de vos textes

Page 30: Atelier numérique : Créer son site web avec Wix

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 oiseauxLa Baie de l’Aiguillon est un espace naturel classé quiaccueille de nombreux oiseaux. Les spécialistes aimentobserver cette faune migratrice tout au long de l’année, etnotamment à l’observatoire de la Pointe d'Arcay.

H2 : Le rendez-vous des famillesPour les familles, deux stations balnéaires bordent cetespace 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 gourmandsLa spécialité culinaire locale est la moule de Bouchot,naturellement !

Page 31: Atelier numérique : Créer son site web avec Wix

Pausedéjeuner

Page 32: Atelier numérique : Créer son site web avec Wix

Ajouter une image

Attention au référencement de vos images

Page 33: Atelier numérique : Créer son site web avec Wix

Modifiez les paramètres de vos images

Renseignez la description ou balise alternativeAttention aux mots clés

N’oubliez jamais :1 image vaut 1000 mots !

Page 34: Atelier numérique : Créer son site web avec Wix

Optimiser les images pour le web

PixelC’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éfinitionC’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

Page 35: Atelier numérique : Créer son site web avec Wix

Outils de retouche photo

Microsoft Paint

PhotofiltreGimp

Pixlr

Photoshop

befunky

picmonkey

Page 36: Atelier numérique : Créer son site web avec Wix

Les formats d’image pour le web

JPG/JPEG: Joint Photographic Experts GroupFormat d’image comprimé le + utilisé sur le web

PNG : Portable Network GraphicsPerformant, 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.

Page 37: Atelier numérique : Créer son site web avec Wix

Trouvez des visuels « séduction » de la Vendée

Télécharger le kit de communication Sud Vendée Tourismehttp://www.svtpro.fr/boite-outils/phototheque/

Télécharger le kit de communication Vendée Expansionhttp://www.vendee-expansion.fr/kit-com-tourisme/pages/index.html

Page 38: Atelier numérique : Créer son site web avec Wix

Trouvez des visuels pour une occasion spéciale

https://pixabay.com/fr/

https://www.pexels.com/

https://picjumbo.com/

Page 39: Atelier numérique : Créer son site web avec Wix

Quelques exemples pour s’inspirer

http://www.danse-classique-aix.com/http://www.g-speedshop.com/

http://www.gardensbymark.com/http://www.oliba.fr/

http://www.kubiik.com/

Page 40: Atelier numérique : Créer son site web avec Wix

Ajouter une galerie

Page 41: Atelier numérique : Créer son site web avec Wix

Pause

Page 42: Atelier numérique : Créer son site web avec Wix

Ajouter un bouton…

Page 43: Atelier numérique : Créer son site web avec Wix

… et donc un lien !

Page 44: Atelier numérique : Créer son site web avec Wix

Ajouter une boîte

Page 45: Atelier numérique : Créer son site web avec Wix

Modifiez votre nom d’utilisateur pour votre nom de domaine gratuit

Cliquez sur votre nom puis sur « Paramètres du compte »

Page 46: Atelier numérique : Créer son site web avec Wix

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

Page 47: Atelier numérique : Créer son site web avec Wix

C’est tout pour aujourd’hui !

Page 48: Atelier numérique : Créer son site web avec Wix

Bonjour !Nous serons vos animatrices aujourd’hui,

Et vous ?

Page 49: Atelier numérique : Créer son site web avec Wix

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

Page 50: Atelier numérique : Créer son site web avec Wix

Comment réussir sa home page ?

Page 51: Atelier numérique : Créer son site web avec Wix

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)

Page 52: Atelier numérique : Créer son site web avec Wix

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

Page 53: Atelier numérique : Créer son site web avec Wix

Ajouter un diaporama

Page 54: Atelier numérique : Créer son site web avec Wix

Et si vous vous lanciez dans un blog ?

1.Cliquez sur Ajouter sur le côté gauche de l'Éditeur2.Cliquez sur Blog3.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…?

Page 55: Atelier numérique : Créer son site web avec Wix

Ajouter un menu

Page 56: Atelier numérique : Créer son site web avec Wix

Ajouter une bande

Page 57: Atelier numérique : Créer son site web avec Wix

Ajouter une forme

Page 58: Atelier numérique : Créer son site web avec Wix

Ajouter une vidéo

Page 59: Atelier numérique : Créer son site web avec Wix

Ajouter de la musique

Est-ce que c’est toujours une bonne idée ???

Page 60: Atelier numérique : Créer son site web avec Wix

Ajouter des réseaux sociaux

Page 61: Atelier numérique : Créer son site web avec Wix

Ajouter un blog

Page 62: Atelier numérique : Créer son site web avec Wix

Ajouter un outil de contact

Page 63: Atelier numérique : Créer son site web avec Wix

Formulaire de contact

• Cliquez sur « Ajouter »• Puis sur « Contact »• Sélectionnez le type de

formulaire à intégrer

Page 64: Atelier numérique : Créer son site web avec Wix

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

Page 65: Atelier numérique : Créer son site web avec Wix

Pausedéjeuner

Page 66: Atelier numérique : Créer son site web avec Wix

Ajouter une liste

Page 67: Atelier numérique : Créer son site web avec Wix

Tableau des prix

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

Page 68: Atelier numérique : Créer son site web avec Wix

Ajouter une boutique

Page 69: Atelier numérique : Créer son site web avec Wix

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

Page 70: Atelier numérique : Créer son site web avec Wix

C’est quoi un widget ?

Page 71: Atelier numérique : Créer son site web avec Wix

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

Page 72: Atelier numérique : Créer son site web avec Wix

Widget météo

• 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

Page 73: Atelier numérique : Créer son site web avec Wix

Est-ce que vous avez pensé à …

Men

tions

lég

ales

Page 74: Atelier numérique : Créer son site web avec Wix

Pause

Page 75: Atelier numérique : Créer son site web avec Wix

OPTIMISEZ LE CONTENU DE VOTRE

SITE

Page 76: Atelier numérique : Créer son site web avec Wix

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 explicitesIls 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.

Page 77: Atelier numérique : Créer son site web avec Wix

PENSEZ DIFFUSION DE L’INFO ET

MAILLAGE

Page 78: Atelier numérique : Créer son site web avec Wix

Maillage site d’avis

Allez sur http://www.tripadvisor.fr/WidgetsRecherchez le nom de votre établissementSélectionnez le widget de votre choix et paramétrez leCopiez le code HTML généré automatiquementRevenez sur l’editeur de votre site Cliquez sur « ajouter » et choisir « Plus » puis « Code HTML »Cliquez sur « Saisir code » puis « Mettre à jour »

Page 79: Atelier numérique : Créer son site web avec Wix

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 adresseo Le lien vers votre site interneto Le lien vers votre page facebook, google +,

tripadvisor ou autre réseau …

Page 80: Atelier numérique : Créer son site web avec Wix

Maillage avec vos supports papier

Page 81: Atelier numérique : Créer son site web avec Wix

Communiquez

Communiquez sur votre présencePensez

« maillage »

Page 82: Atelier numérique : Créer son site web avec Wix

MISE EN LIGNE DU SITE

Page 83: Atelier numérique : Créer son site web avec Wix

Bien réfléchir au nom de domaine

Il doit être ni trop court ni trop longIl doit refléter votre activité principaleIl 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

Page 84: Atelier numérique : Créer son site web avec Wix

Transférer un nom de domaine existant

o Possible en version proo Pour .com

Pas à pas :https://support.wix.com/fr/article/transf%C3%A9rer-un-domaine-achet%C3%A9-ailleurs-chez-wix

Page 85: Atelier numérique : Créer son site web avec Wix

Forfaits premium

Page 86: Atelier numérique : Créer son site web avec Wix

POUR ALLER + LOIN

Page 87: Atelier numérique : Créer son site web avec Wix

Outil de contrôle SEO

Page 88: Atelier numérique : Créer son site web avec Wix

App Market : pour + tard…

Page 89: Atelier numérique : Créer son site web avec Wix

Centre d’activité

Page 90: Atelier numérique : Créer son site web avec Wix

Newsletter avec ShoutOut

Page 91: Atelier numérique : Créer son site web avec Wix

Smart Actions

Page 92: Atelier numérique : Créer son site web avec Wix

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

Page 93: Atelier numérique : Créer son site web avec Wix

Merci ! Des questions ?

Sud Vendée TourismeTél. : 02 51 87 69 [email protected]

Vendée Vallée Tél. : 02 44 40 20 [email protected]

Page 94: Atelier numérique : Créer son site web avec Wix

CRÉDITS ET SOURCES :

Photos : PixabayPexelDeath to stockCreative commons wikipedia

Sources : Réseau Animateur Numérique de Territoire FranceCentre d’aide FacebookThink with GoogleBaromètre Raffour 2015 LeblogdumoderateurEtourisme.infoAtelier numérique Jimdo du Bocage NormandAtelier numérique Jimdo du Vignoble de NantesConférence “C’est quoi un bon site web?” par Web Créatif