développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec facebook ou google+. tutoriel...

37
2016 Tutoriel WIX Développeur Dimitri PIANETA

Upload: others

Post on 18-Jul-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

2016

Tutoriel WIX Développeur

Dimitri PIANETA

Page 2: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Table des matières I) Présentations : ......................................................................................3

II) Tarifications : .......................................................................................3

III) Création d’un site web : ..........................................................................4

IV) Ce logger sur site déjà crée : ....................................................................6

V) Présentation de l’éditeur : .......................................................................8

VI) Comment créer un domaine ? .................................................................. 35

Page 3: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

I) Présentations :

Wix.com est une plateforme de développement Web basée sur le Cloud qui réunit des millions

d’utilisateurs à travers le monde. Wix permet à chacun de créer facilement un site de qualité

professionnelle. Aucune connaissance en programmation n’est nécessaire pour créer votre site.

Wix est disponible gratuitement sans limites dans le temps, mais si vous avez besoin de services

professionnels, comme avoir votre propre nom de domaine ou bénéficier d’une assistance prioritaire,

il est possible de choisir parmi quatre forfaits premium, allant de « Connect Domain » à « eCommerce

».

II) Tarifications :

Page 4: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

III) Création d’un site web :

Étape 1 : Inscription Aller sur : http://fr.wix.com/ Cliquez sur « Commencez Maintenant »

Vous arrivez sur une page ou vous devez vous connectez. Vous avez le choix de vous créer un compte,

ou de vous connecter avec Facebook ou Google+.

Page 5: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Étape 2 : Bienvenue sur Wix

Choisissez un thème, puis cliquez sur « OK ».

Sélectionnez le « Template » qui vous plait. Un template est un modèle de site déjà en forme, ou il vous reste plus qu’à ajouter vos textes et photos. Cliquez dessus.

Page 6: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Une nouvelle page s’ouvre : Vous pouvez vérifier si le modèle vous plaît avant de le sélectionner. Si oui cliquez sur « Modifier ce site »

IV) Ce logger sur site déjà crée :

Étape 1 : aller sur http://fr.wix.com/

Page 7: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Étape 2 : aller sur connecter

Étape 3 : la plateforme de contrôle

Page 8: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Étape 4 : Cliquez sur modifier

Voici éditeur de page web.

V)Présentation de l’éditeur :

5.1) Éditeur :

1 2

3

4

5

Page 9: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Menu : de la gestion des pages, de la création de page HTML, gestion du site

Sauvegarde du projet web, Aperçu du site et publier

Onglets d’objets pour créer les éléments pour les pages

Les pages web

Gestions du positionnement des objets dans la page web

5.2) Le menu (1) :

Cliquez sur

Puis un volet avec vos pages

1

2

3

4

5

Page 10: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Si vous voulez créer une nouvelle page cliquez sur « Ajouter Page »

Le menu SITE : Les onglets sont les éléments pour gérer le site web comme la sauvegarde, aperçu,

publier, voir site publié…

Page 11: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Le menu Outils : La gestion des options de l’interface de développement

Le menu Aide :

Page 12: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

5.3) Le menu (2) :

Dézoomer Rétablir sauvegarde aperçu du site publier le site

Annuler Format de l’éditeur ordinateur ou mobile

5.4) Le menu (3) :

C’est la zone qui permet de modifier et de créer la page web.

1er choix de l’arrière-plan : le contenu en fond de la page web

Page 13: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

La première étape : choisir si vous voulez mettre en fond sur vos pages web ou une seule page

Vous avez le choix sur trois paramètres : la couleur du fond, image de fond, ou mettre une vidéo au

fond

Après le choix,

Cliquez sur le bouton suivant :

Vous avez le choix sur les pages : cliquez pour toutes les pages soient appliquées l’arrière-plan ou

sur la page souhaiter

Page 14: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

2ème choix : Ajout de contenu

Je vais décrire l’ensemble des éléments que nous pouvons utiliser.

TEXTE

Texte assorti : sont un éventail des possibilités rapides de zone de texte

Titres : zone de texte de titre équivalent à html5 (<h1> </h1>, <h2></h2>….)

Paragraphe : zone de paragraphe équivalent à html5(<p> </p>)

Exemple : (Titre)

Page 15: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Pour modifier le texte cliquez sur le bouton Modifier texte, puis une fenêtre de paramètre apparait.

Exemple : (Paragraphe)

Identique que l’exemple de titre

IMAGE

C’est la zone pour afficher une image

dans sa page internet.

Thèmes du titre la grosseur de la police et autres

paramètres rapide

La police du texte

Taille de la police du texte

Gras (B), Italique(I), Souligné (U), couleur du texte,

couleur soulignement, lien hypertexte,

Alignements, Puces, Réduire/augmenter la marge

Effets sur le texte

Espacement du texte

Page 16: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Exemple : Charger une image d’un répertoire de l’ordinateur

1. Aller sur

2. Choisir une image que vous avez sauvegarder :

3. Cliquez sur l’image pour la sélectionnée soit deux cliques de la souris gauche ou sur le bouton

Ajouter à la Page

4. Si vous voulez mettre une nouvelle image, cliquez sur « Télécharger images »

Page 17: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

GALERIE

C’est la zone pour créer une galerie d’image.

Exemple :

1. Changer images : cliquez sur le bon charger images

2. Une fenêtre apparaît de gestion des images

Page 18: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Pour ajouter une image cliquez sur ajouter images puis sélectionner une image à droite, il

est possible de mettre un titre, un lien hypertexte, description.

Pour supprimer une image, sélectionner l’image puis appuyez sur la corbeille.

Page 19: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

BOUTON

C’est la zone pour créer un bouton. Il y a un grand nombre de bouton à choisir.

Exemple :

Par exemple modifier le texte du bouton, cliquez sur « Changer texte »

Page 20: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

On souhaite par exemple, mettre en lien ouverture ou téléchargement du pdf.

Allez sur la zone « Ajouter un lien », la fenêtre est la suivante

Page/ancre est le lien dans les pages de votre site web

Adresse internet : mettre un lien d’un url d’un autre site web

Document : mettre un document que vous avez sauvegarder dans notre espace

Haut de page : pour revenir en haut de page web

Bas de page : pour aller en bas de page web

Page 21: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Ici pour mon exemple, je souhaite mettre un document pdf :

Puis sur Choisir fichier, une fenêtre suivante s’affiche :

Soit vous avez sauvegarder un fichier donc sélectionner le fichier que vous voulez mettre dans le

bouton, puis deux cliques ou sur appliquer.

Soit mettre un nouveau document donc aller Télécharger documents. Puis mettre le document qui

va se télécharger, puis sélectionner puis cliquez deux fois.

Page 22: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Puis en fin faite « Terminé »

Exemple 2 : Changer que le lien

Cliquez sur

Puis même étape que l’exemple 1.

Page 23: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

BOITE

Sont des zones containers qui permet de mettre par exemple après une zone de texte.

Page 24: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

BANDE

Sont des bandes qui permet de faire des entêtes du sites ou autres parties dans le site.

Page 25: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

FORME

Sont des formes pour mettre dans la page.

Page 26: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

VIDEO

Mettre une vidéo sur le site soit par Youtube, Vimeo.

Page 27: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

MUSIQUE

Mettre un morceau ou des morceaux de musique. Il possible de choisir son lecteur de musique.

Exemple :

1) Choisir le lecteur que vous voulez mettre

2) Puis la fenêtre de vos fichiers sauvegardés ou mettre un nouveau fichier « Télécharger

morceaux)

Page 28: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Réseaux Sociaux

Sont les icônes pour faire les liens avec les réseaux sociaux.

Page 29: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Contact

Sont les différents formulaires pour envoyer des mails ou la carte google map.

Exemple : Formulaire de mail

1) Allez sur Configurer votre e-mail

pour marquer votre mail

Page 30: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Exemple : Google map

1) Allez sur changer adresse

2) Puis la fenêtre suivante :

Page 31: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Menu

Choix du menu soit menu Horizontal ou vertical.

Page 32: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Liste

Sont une liste de paraphe selon une certaine forme.

BLOG

Faire un blog.

PLUS

Sont des éléments en plus comme mettre du code HTML, FLASH, Bouton PayPal, bouton documents.

Page 33: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

3ème choix : Mettre des gadgets

Il est possible d’acheter ou mettre des gadgets gratuits sur votre site.

Page 34: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

4ème choix : Gestions des téléchargements (en gros le cloud de Wix)

5ème choix : Gestion du blog

Page 35: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

5.5) Le menu (4) :

C’est la zone de fabrication de la page web avec les composants du menu (3).

VI) Comment créer un domaine ?

Prix D'un Domaine Wix Après la Première Année Gratuite

Lorsque vous achetez un domaine Wix en utilisant un bon d'achat pour un domaine gratuit,

le bon d'achat inclut une souscription gratuite pour un pour un domaine.

Apres la première année, le prix du renouvellement de votre domaine Wix varie entre 14.95 et

15.95 euros pour la seconde année (par année).

Gardez à l'esprit que ce prix n'inclut pas les facteurs suivants :

Le type d'extension du domaine Votre devise locale Le nombre d'années sélectionnée Ajout de l'inscription privée Vos lois fiscales ou de TVA locales

Pour contrôler le coût du renouvellement :

1. Connectez-vous à votre compte Wix. 2. En haut à droite, placez votre souris sur le panneau d'utilisateur. 3. Cliquez sur Facturation et paiements. 4. Sous Souscriptions de Domaines, à côté du domaine concerné, cliquez sur Gérer. 5. Cliquez sur Afficher à côté de Montant prochain paiement.

Acheter un domaine chez Wix

Pour acheter un domaine :

1. Cliquez sur Site dans la barre supérieure de l'Éditeur. 2. Cliquez sur Connecter domaine. 3. Cliquez sur Obtenez un nouveau nom de domaine.

Remarque : Si vous n'avez pas encore acheté un forfait Premium pour votre site, vous serez invité à en acheter un.

4. Cliquez sur Acheter un nouveau nom de domaine, ou si vous avez déjà un domaine, cliquez sur Ajouter domaine puis cliquez sur Acheter un nouveau nom de domaine

5. Saisissez le nom de domaine dans la barre de recherche. 6. Cliquez sur Rechercher.

Page 36: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

7. Si le domaine est disponible, cliquez sur Obtenir pour l'enregistrer avec Wix. Remarque : Si le domaine n'est pas disponible, retournez à l'étape 5 et essayez avec un autre domaine ou une autre extension.

8. Choisissez la période d'inscription. 9. Cliquez sur Continuer. 10. Saisissez (ou modifiez) vos coordonnées de contact. 11. Cliquez sur Continuer. 12. Sélectionnez une option d'inscription :

o Inscription privée : Vos coordonnées de contact n'apparaîtront pas dans les informations de votre domaine sur WHOIS. Vous pouvez activer ou désactiver l'inscription privée quand vous le souhaitez.

o Inscription publique : Vos informations resteront accessibles publiquement sur WHOIS. Vous ne pouvez pas modifier cette inscription en privée, même lors du renouvellement.

13. Cliquez sur Continuer. 14. Sélectionnez votre méthode de paiement.

Remarque : Lorsque vous atteignez l'écran de paiement, assurez-vous que le bon de réduction est affiché sur le côté droit.

15. Cliquez sur Valider l'achat.

Suggestion : Cliquez ici pour en savoir plus sur le choix du nom de domaine le plus

pertinent pour vous.

Remarque : Pour connecter votre domaine, cliquez ici.

Page 37: Développeur - dimitripianeta.fr wix.pdf · ou de vous connecter avec Facebook ou Google+. Tutoriel WIX Étape 2 : Bienvenue sur Wix Choisissez un thème, puis cliquez sur « OK »

Tutoriel WIX

Edition 2016

Site dimitripianeta.fr