Créer un site web simplement et gratuitement avec Weebly (1/2)

I. Introduction à Weebly

Vous souhaitez avoir un petit site internet pour vous ou pour votre entreprise ? Vous avez peu de moyens financiers ou vous n'avez aucune connaissance technique pour développer un site ? Weebly est le service qu'il vous faut, en effet il s'agit d'un outil en ligne gratuit permettant de créer et construire un site facilement par simple "glisser-déposer" d'objets à l'intérieur de vos pages. Il y est également possible de créer des pages blogs pour rédiger des articles et faire réagir vos lecteurs.

De plus, aucune publicité n'est affichée sur vos sites dans la version gratuite de Weebly, et votre site sera parfaitement adapté pour être lu depuis un smartphone ou une tablette.

Notez toutefois que si vous souhaitez une adresse (nom de domaine) personnalisée pour votre site, il faudra débourser quelques euros par mois.
Notez également que certaines fonctionnalités sont limitées en version Free. Lisez cet article si vous souhaitez connaitre les fonctionnalités supplémentaires disponibles dans la version Pro.

Ce tutoriel composé de deux parties va vous expliquer comment utiliser et prendre en main Weebly pour vous aider à créer votre site internet.

Voici le site officiel de l'éditeur :
http://www.weebly.com

II. Explications

1. Inscription et premiers pas sur Weebly

Pour commencer, rendez vous sur http://www.weebly.com et inscrivez vous soit directement avec votre compte Facebook, soit en remplissant les champs requis (nom, email, mot de passe) :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 0

Puis cliquez sur "Inscrivez-vous. C'est gratuit !".

On vous propose ensuite de choisir un thème pour votre site (vous pourrez le modifier facilement plus tard, on va le voir par la suite).
Parcourez alors les différents thèmes et cliquez sur "Choose" pour sélectionner celui que vous souhaitez :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 1

Puis on vous propose de choisir votre nom de domaine, c'est à dire l'adresse à laquelle les internautes pourront consulter votre site web. Ici, si vous souhaitez du gratuit, vous n'aurez d'autres choix qu'utiliser un sous domaine de Weebly, par exemple j'ai choisi http://6ma-informatique.weebly.com :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 2

Puis cliquez sur "Continuer".

On vous souhaite ensuite la bienvenue sur Weebly. Cliquez alors sur "Construire mon site" pour commencer la création de votre site :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 3

Vous arrivez devant l'interface de conception de votre site, avec les différents outils et menus sur la gauche et en haut de l'écran, et la prévisualisation de votre site au centre :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 4

Pour l'instant, vous ne voyez qu'une ébauche provenant du thème que vous avez choisi précédemment. Voyons dans la seconde partie de ce tutoriel comment concevoir votre site web de A à Z grâce aux outils qui sont mis à votre disposition.

2. Conception d'un site web

2.1) Modifier le titre

Vous pouvez commencer par modifier le titre, qui peut être un élément important pour attirer l'attention des visiteurs.

Pour cela sélectionnez le titre déjà présent, vous aurez alors 3 choix : "Off" pour ne pas mettre de titre du tout, "Text" pour mettre du texte ou "Logo" pour mettre un logo (une image) :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 5

Si vous souhaitez mettre du texte par exemple, il vous suffit d'effacer le titre actuel et d'écrire celui que vous souhaitez.

2.2) Changer le thème du site

Si vous souhaitez maintenant ou à n'importe quel moment changer le thème de votre site, cliquez sur le menu "Conception" :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 6

Cliquez ensuite sur "Change Theme" :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 7

Vous arrivez devant la liste des thèmes. Dans le menu de gauche vous avez la possibilité de les trier par couleur ou style.

Pour choisir un thème, placez votre souris dessus, modifiez éventuellement la couleur des boutons, titres, liens.. puis cliquez sur "Choose" (ou "Preview" pour le prévisualiser avant) :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 8

2.3) Modifier les polices du site

Si vous souhaitez personnaliser les polices de votre site, par exemple la police de caractère, la taille du titre ou du texte, la couleur etc... cliquez sur "Change Fonts" dans les options de conception :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 9

Vous pouvez alors modifier à votre guise de haut en bas : le titre du site, le titre des paragraphes, le texte des paragraphes et les liens web :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 10

2.4) Modifier l'en-tête

Voyons comment modifier l'en-tête de votre site, qui affiche une image par défaut selon le thème que vous avez choisi. Là encore, c'est un élément très important pour attirer l'attention.

Dans un premier temps, survolez l'image, cliquez sur le bouton en forme d'engrenage en haut à droite puis choisissez la mise en page que vous souhaitez pour votre en-tête :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 11

Pour modifier l'image maintenant, cliquez sur le bouton "Edit Image" :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 12

Cliquez ensuite sur "Add Image" :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 13

Puis sélectionnez une image à partir de votre ordinateur ou sur internet :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 14

Redimensionnez l'image éventuellement de manière à combler les blancs autour puis cliquez sur "OK" :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 15

Vous pouvez également, si vous le souhaitez, y ajouter des effets ou du texte.

Enfin cliquez sur "Save" en haut à droite pour enregistrer les changements effectués. La première fois on vous demande si vous souhaitez sauvegarder l'en-tête sur toutes les pages, seulement sur la page actuelle, ou seulement sur les pages sélectionnées :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 16

Voici le résultat de mon exemple :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 17

2.5) Ajouter des éléments sur les pages du site

Voyons maintenant comment ajouter toutes sortes d'éléments sur les pages de votre site. Pour l'instant vous ne devez avoir qu'une seule page mais nous verrons ensuite comment en ajouter d'autres.

Tous ces éléments se trouvent sur la gauche dans le menu "Construire" et répartis dans différentes catégories :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 18

Catégorie BASIC :

Dans la catégorie BASIC vous avez la possibilité d'ajouter des titres, du texte, des images, des galeries photos, des cartes, ou un formulaire de contact.

Par exemple pour ajouter du texte, faites glisser l'objet TEXT à l'aide de votre souris vers un espace vide sur la page de votre site :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 19

Il vous suffit maintenant de taper le texte que vous souhaitez et le mettre en forme à l'aide des outils de rédaction :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 20

Autre exemple, vous souhaitez ajouter un formulaire de contact. Faites alors glisser l'objet CONTACT FORM sur votre page, le formulaire par défaut apparait :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 21

Vous pouvez modifier le titre, les champs du formulaire, le bouton d'envoi... et vous pouvez ajouter tout un tas d'éléments à partir du menu de gauche toujours en utilisant le même procédé de glisser/déposer :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 22

Pour modifier l'adresse mail sur laquelle seront envoyés les messages provenant de votre formulaire, modifier le message de confirmation que vos internautes verront ou encore modifier le bouton d'envoi, cliquez sur votre formulaire puis sur "Form Options" en haut à droite :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 23

Puis effectuez les changements que vous souhaitez :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 24

Catégorie STRUCTURE :

A partir des éléments de structure mis à votre disposition, vous allez pouvoir ajouter des séparations, des colonnes ou des boutons :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 25

Pour l'exemple je vais ajouter un trait de séparation entre mon texte et mon formulaire. Pour cela il suffit de faire glisser l'objet DIVIDER à l'endroit souhaité, ce qui donne ceci :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 26

Autre exemple, vous souhaitez ajouter des colonnes. Pour cela faites glisser l'objet COLUMNS à l'endroit souhaité sur votre page :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 27

Choisissez le nombre de colonnes que vous souhaitez.

Vous pouvez maintenant faire glisser d'autres objets (texte, image, etc...) dedans y compris des éléments déjà présents sur votre page. Pour cela il suffit de les faire glisser à l'intérieur des colonnes en maintenant le bouton comme ci-dessous enfoncé :

Créer un site web simplement et gratuitement avec Weebly (1/2) image 28

III. Conclusion du tutorial

=> CLIQUEZ ICI pour lire la deuxième partie du tutoriel.