Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
Quoi de neuf
Nouveaux messages
Nouveaux articles
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Magasin
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
RealityGaming
Comment utiliser Weebly de A à Z !
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Veenox GTP" data-source="post: 2865100" data-attributes="member: 56393"><p style="text-align: center"><span style="color: #ff8000"><strong><img src="http://image.noelshack.com/fichiers/2014/07/1392506385-weebly.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </strong></span></p> <p style="text-align: center"><strong><span style="color: rgb(255, 128, 0)">B</span></strong><span style="color: rgb(255, 128, 0)">onjour à tous, c'est Veenox.</span></p> <p style="text-align: center"><span style="color: #ff8000">Je vous présente aujourd'hui un tutoriel intitulé :</span></p> <p style="text-align: center"><span style="color: #ff8000"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Qu'est-ce que Weebly et à quoi sert-il ?</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Weebly vous permet de créer un site gratuitement et de le personnaliser à votre guise selon un model prédéfini, ou de le créer vous même.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="font-size: 18px"><span style="color: rgb(0, 89, 179)">Comment utiliser Weebly de A à Z !</span></span></strong></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-size: 15px"><span style="color: #0059b3">Etant donné que vous expliquez toutes les fonctionnalités présente sur le site, je vais vous apprendre les bases pour personnaliser votre site du mieux possible ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="color: #0059b3"></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Commençons le tutoriel !</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="color: #0059b3">Rendez vous sur le site </span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="color: #0059b3"><a href="http://www.weebly.com/?lang=fr" target="_blank">http://www.weebly.com/?lang=fr</a></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="color: #0059b3"></span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="color: #0059b3">Vous arrivez sur une page d'inscription basique, rensegnez 3 informations :</span></span></p> <ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Nom complet</span></li> <li data-xf-list-type="ul"><span style="color: #0059b3">E-mail</span></li> <li data-xf-list-type="ul"><span style="color: #0059b3">Mot de passe</span></li> </ul> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">Une fois ceci fait, cliquez sur "Inscrivez vous, c'est gratuit !"</span></p> <p style="text-align: center"><span style="color: #0059b3">Maintenant, 3 choix s'offre à vous, je ne vais faire qu'un exemple avec "site" puisque c'est sensiblement la même chose, même outils,...</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://img842.imageshack.us/img842/3540/7o3h.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="color: rgb(0, 89, 179)"><span style="font-size: 18px"><u>Site</u></span></span></strong></p><p></p><p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">Pour commencer, choisissez un model de départ.</span></p> <p style="text-align: center"><span style="color: #0059b3">Je vais utiliser le premier.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez remarquer que sur chaque model, vous avez la possibilité de changer la couleur de celui-ci.</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">Je vais choisir choisir la couleur </span><span style="color: rgb(255, 128, 0)">orange</span><span style="color: rgb(0, 89, 179)">.</span></p> <p style="text-align: center"><span style="color: #0059b3">Cliquez ensuite sur "Choose"</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">Une nouvelle page va s'ouvrir, </span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://img811.imageshack.us/img811/5460/5bak.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Pour utiliser Weebly gratuitement, prenez la première option.</span></p> <p style="text-align: center"><span style="color: #0059b3">Si vous souhaitez avoir votre propre domaine choisissez la solution 2 mais il vous en coûtera environ 39€00 pour un an.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Je vais donc continuer avec le première alternative.</span></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">Rentrez le nom souhaitez.</span></p> <p style="text-align: center"><span style="color: #0059b3">Là deux cas sont possible :</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Le nom choisi est disponible.<img src="http://reality-gaming.fr/attachments/valide-png.14808/" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></li> <li data-xf-list-type="ul"><span style="color: #0059b3">Le nom choisi n'est pas disponible. <img src="http://reality-gaming.fr/attachments/errone-png.14809/" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></li> </ul> <p style="text-align: center"><span style="color: #0059b3">Dans le deuxième cas, changez pour en trouver un qui est disponible.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Cliquez ensuite sur "Continuer" </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Cliquez sur "Construire mon site"</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous arriverez donc sur votre model choisi au départ.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://www.flaticon.com/png/64/8566.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong><u>Outils</u></strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous avez beaucoup d'outils pour le personnaliser, je vais vous détailler les plus importants.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <ul> <li data-xf-list-type="ul"><span style="color: rgb(0, 89, 179)">L'outil titre : Il vous permet d'ajouter un titre à l'endroit choisi de la page. </span></li> </ul><p><span style="color: #0059b3">Vous disposez également d'un éditeur de texte très complet.</span></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil texte <img src="http://www.flaticon.com/png/32/25673.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> : Il sert à ajouter du texte où vous voulez sur le site.</span></li> </ul><p><span style="color: #0059b3"> <img src="http://i.imgur.com/iHaQ3fe.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p><p><span style="color: #0059b3"></span></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil "Galerie" <img src="http://www.flaticon.com/png/32/3949.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> : Il vous permet d'ajouter une galerie d'image à votre site comme ceci :</span></li> </ul><p><span style="color: #0059b3"><img src="http://img132.imageshack.us/img132/5072/vqzj.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p><p style="text-align: center"></p><p></p><p><span style="color: #0059b3">Si vous souhaitez ajouter plus de deux images, modifier la partie "Colonnes" avec le nombre d'images souhaité.</span></p><p><span style="color: #0059b3"></span></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil bouton : Il vous permet d'ajoutez un "bouton". Dés qu'on clique dessus, nous serons redirigé vers une page web. </span></li> </ul><p><span style="color: rgb(0, 89, 179)"><img src="http://i.imgur.com/Ve7Ncbh.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p><p></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil formulaire de contact <img src="http://www.flaticon.com/png/32/14462.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> : Il vous permettera d'ajouter un formulaire à votre site en choisissant le nom des champs à remplir, l'adresse e-mail de destination,...</span></li> </ul> <ul> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil youtube <img src="http://www.flaticon.com/png/32/25178.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> : Il sert à intégrer une vidéo sur le site web.</span></li> </ul> <ul> <li data-xf-list-type="ul"><span style="color: rgb(0, 89, 179)">L'outil colonnes : Celui ci créera una séparation latérale entre deux éléments de votre choix.</span></li> </ul> <ul> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil icône de réseaux sociaux <img src="http://www.flaticon.com/png/32/14598.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> : </span></li> </ul><p><span style="color: #0059b3">Il ajoutera les logo's des réseaux sociaux souhaités, vous pourrez mettre le lien de vos pages personnelles.</span></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil fichier : Il vous permet de proposer un fichier en téléchargement sur votre site.</span></li> <li data-xf-list-type="ul"><span style="color: #0059b3">L'outil sondage : Il sert à ajouter un sondage sur le site.</span></li> </ul><p></p><p style="text-align: center"><span style="color: #0059b3"><strong>Voilà pour ce qui est des options.</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #0059b3"><strong><img src="http://www.flaticon.com/png/64/35592.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>La modification du model de départ</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Ce site est <strong>très simple d'utilisation</strong>, en effet pour modifier un élément de votre page web, vous n'avez qu'à cliquez dessus.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Exemple pour le titre du site : </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://img827.imageshack.us/img827/4680/ijpi.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous avez pu remarquer que sur mon model, j'ai plusieurs pages.</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">Pour modifier le titre de celle-ci, cliquez sur "Page" en haut.</span></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://i.imgur.com/OCe7T59.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez donc <strong>modifier le titre de ces pages</strong>, en ajouter d'autres puis modifier le type d'entête.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://i.imgur.com/QuKCzOj.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="color: #0059b3">(A noter que vous pouvez également protégé la page d'un mot de passe mais que c'est tout de même peu sécurisé.)</span></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pourrez ensuite agrémenter ces pages grâce aux outils présentés <strong>plus tôt</strong> dans le tutoriel.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="color: rgb(0, 89, 179)"><img src="http://www.flaticon.com/png/64/14171.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></strong></p> <p style="text-align: center"><strong><span style="color: rgb(0, 89, 179)"></span></strong></p> <p style="text-align: center"><strong><span style="color: rgb(0, 89, 179)"></span></strong></p> <p style="text-align: center"><span style="color: #0059b3"><strong>L'onglet "Conception"</strong></span><strong><span style="color: rgb(0, 89, 179)"> </span></strong></p> <p style="text-align: center"><strong><span style="color: rgb(0, 89, 179)"></span></strong></p> <p style="text-align: center"><span style="color: #0059b3">Voilà à quoi il ressemble :</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://img822.imageshack.us/img822/1513/mbsh.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Il vous permettra de modifier la police de tous les textes présents sur le site, de changer la couleur de base, j'avait par exemple choisit </span><span style="color: #ff8000">orange</span><span style="color: #0059b3">, je peut changer d'avis pour du bleu ou une autre couleur.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous disposez aussi d'un éditeur d'HTML/CSS si vous vous y connaissez dans ce domaine.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <ul> <li data-xf-list-type="ul"><span style="color: #0059b3">La zone de recherche : Pour en bénéficier, il faut être "pro". Elle est là en tant qu'outil de recherche pour l'utilisateur du site, qui pourra trouver plus facilement ce qui l'intéresse.</span></li> <li data-xf-list-type="ul"><span style="color: #0059b3">Icônes sociales : Vous pouvez activez ou désactiver les icônes de réseaux sociaus qui sont sur votre site;</span></li> <li data-xf-list-type="ul"><span style="color: #0059b3">Numéro de téléphone : Dnas mon model, il se trouvait à gauche des icônes de résaux sociaux. Vous pouvez le remplacez par des lettres comme "Suivez moi sur les résaux sociaux",...</span></li> </ul> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>L'onglet Boutique</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Il existe également un outil boutique sur Weebly pour proposer un shop en ligne.</span></p> <p style="text-align: center"><span style="color: #0059b3">Cependant, je trouve Jimdoo plus simple d'utilisation pour cela, je vous invite donc à aller voir le tutoriel de mon ami @[USER=33070]Rivals GTP[/USER]</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Cependant, pour en créer un avec Weebly, cliquez simplement sur <strong>boutique </strong>dans la barre bleu du haut. Vous aurez ensuite les étapes à réaliser pour créez une boutique :</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><img src="http://i.imgur.com/SVMDgfr.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Cliquez simplement sur "Add" à gauche De la tâche puis, configurez l'add comme vous voulez.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">A gauche, vous avez plusieurs commande, certaines correspondent à des taches (voir image du dessus)</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Mais voici la listé détaillée de celle-ci :</span></p><p></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Dashboard : C'est là ou* vous trouvez les tâches ci-dessus.</span></li> </ul><p><span style="color: #0059b3"></span></p><p> <span style="color: #0059b3"></span></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Product : Il vous permet d'ajouter des produits pour votre boutique. Vous pouvez donner un nom au produit, une description, un prix, et indiqué si c'est un objet "physique" ou un produit dématérialisé. (pour les produits dématérialisés, vous devez être "pro" sur le site.)</span></li> </ul><p><span style="color: rgb(0, 89, 179)">Vous pouvez aussi ajouter des options en bas de la page comme : la couleur, la possibilité de cocher les produits souhaités puis de pouvoir les acheter,...</span></p><p></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Storefront : Vous pouvez modifier la mise en page de votre voutique. Bien sûr pour cela il faut déjà y avoir mis des produits,...</span></li> </ul><p></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Categories : Vous pouvez ajouter des catégories si vous vendez beaucoup de choses. Si vous êtes spécialisé dans un seul domaine. Vous pouvez la encore ajouter des produits correspondant à une catégories.</span></li> </ul><p></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Coupon : Il faut être "pro" pour pouvoir l'utiliser. Elle vous permet de créer des coupons de réduction à donner à des clients fidèles,...</span></li> </ul><p></p><ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Orders : Comme dit plus haut, c'est là ou* vous trouverez toutes les commandes passée sur votre site.</span></li> </ul> <ul> <li data-xf-list-type="ul"><span style="color: #0059b3">Dernière commande et non des moindres, <strong>Settings</strong></span></li> </ul> <p style="text-align: center"><span style="color: #0059b3">La commande<strong> settings</strong> vous permet de modifier plusieurs choses. Encore une fois je vais vous énumérer les onglets présents.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>General</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez modifier la devise d'achat dans "Currency"</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez modifier l'unité de poids, Pound est mis de base, pour mettre ça en koli, il faut être "pro" </span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous aurez aussi la possibilité de changer le mode d'achat, de base vous avez "Ajouter au panier" vous pouvez le modifier en "Achat immédiat" mais là encore, il faut être "pro"</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez renseigner les informations de votre entreprise avec : une adresse, un numéro de téléphone,un e-mail.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Ceci apparaîtra sur votre "facture".</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Checkout</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">En français : caisse</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez ajouter paypal en moyen de paiement, seulement il faudra être "Business" (19$/mois)</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #0059b3">Vous avez de base, l'option de paiement de Stripe. </span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #0059b3">Vous devrez donc créer un compte stripe pour l'utiliser.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Display</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">En français : affichage</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pourrez modifier le nombre de colonnes de produit, puis le nombre de produits par page.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez également modifier la taille des images des catégories, puis la taille des images des produits.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous pouvez mettre cette disposition en <strong>Sidebar</strong> (barre latérale)</span></p> <p style="text-align: center"><span style="color: #0059b3">Ou le laisser en <strong>Block</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Shipping</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">L'onglet navigation, il est inaccessible sans avoir l'option "Business" je ne peut donc pas vous le présenter.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Taxes</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Lui aussi, inaccessible sans "premium"</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Emails</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous différents type d'e-mail à envoyer automatiquement lorsque quelqu'un passe une commande sur le site.</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Vous avez le choix entre ceux ci :</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Order confirmation - Confirmation de commande</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Download confirmation - Confirmation de téléchargement</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Order shipped - Commande expédiée</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Refund e-mail - E-mail de remboursement</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3">Canceled e-mail - E-mail d'annulation de la commande</span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"><span style="color: #0059b3"><strong>Voilà c'est tout pour la partie boutique.</strong></span></p> <p style="text-align: center"><span style="color: #0059b3"></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)"><img src="http://faience-carrelage-exterieur.carrelages-discount.com/images/separateur.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: #ff8000"><strong>C</strong>e tutoriel est maintenant fini, je vous ai appris l'essentiel à la conception d'un site web avec Weebly.</span></p> <p style="text-align: center"><span style="color: #ff8000"></span></p> <p style="text-align: center"><span style="color: rgb(255, 128, 0)">Bonne soirée,</span></p> <p style="text-align: center"><span style="color: #ff8000">Veenox.</span></p> <p style="text-align: center"><span style="color: #ff8000"></span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p></blockquote><p></p>
[QUOTE="Veenox GTP, post: 2865100, member: 56393"] [CENTER][COLOR=#ff8000][B][IMG]http://image.noelshack.com/fichiers/2014/07/1392506385-weebly.png[/IMG] [/B][/COLOR] [B][COLOR=rgb(255, 128, 0)]B[/COLOR][/B][COLOR=rgb(255, 128, 0)]onjour à tous, c'est Veenox.[/COLOR] [COLOR=#ff8000]Je vous présente aujourd'hui un tutoriel intitulé : [/COLOR] [COLOR=#0059b3][B]Qu'est-ce que Weebly et à quoi sert-il ?[/B] Weebly vous permet de créer un site gratuitement et de le personnaliser à votre guise selon un model prédéfini, ou de le créer vous même. [/COLOR] [B][SIZE=5][COLOR=rgb(0, 89, 179)]Comment utiliser Weebly de A à Z ![/COLOR][/SIZE][/B] [SIZE=4][COLOR=#0059b3]Etant donné que vous expliquez toutes les fonctionnalités présente sur le site, je vais vous apprendre les bases pour personnaliser votre site du mieux possible ! :) [/COLOR][/SIZE] [COLOR=#0059b3][B]Commençons le tutoriel ![/B] [/COLOR] [SIZE=4][COLOR=#0059b3]Rendez vous sur le site [URL]http://www.weebly.com/?lang=fr[/URL] Vous arrivez sur une page d'inscription basique, rensegnez 3 informations :[/COLOR][/SIZE][/CENTER] [LIST] [*][COLOR=#0059b3]Nom complet[/COLOR] [*][COLOR=#0059b3]E-mail[/COLOR] [*][COLOR=#0059b3]Mot de passe[/COLOR] [/LIST] [CENTER][COLOR=rgb(0, 89, 179)]Une fois ceci fait, cliquez sur "Inscrivez vous, c'est gratuit !"[/COLOR] [COLOR=#0059b3]Maintenant, 3 choix s'offre à vous, je ne vais faire qu'un exemple avec "site" puisque c'est sensiblement la même chose, même outils,... [IMG]http://img842.imageshack.us/img842/3540/7o3h.png[/IMG] [/COLOR] [B][COLOR=rgb(0, 89, 179)][SIZE=5][U]Site[/U][/SIZE][/COLOR][/B][/CENTER] [CENTER] [COLOR=rgb(0, 89, 179)]Pour commencer, choisissez un model de départ.[/COLOR] [COLOR=#0059b3]Je vais utiliser le premier. Vous pouvez remarquer que sur chaque model, vous avez la possibilité de changer la couleur de celui-ci.[/COLOR] [COLOR=rgb(0, 89, 179)]Je vais choisir choisir la couleur [/COLOR][COLOR=rgb(255, 128, 0)]orange[/COLOR][COLOR=rgb(0, 89, 179)].[/COLOR] [COLOR=#0059b3]Cliquez ensuite sur "Choose" [/COLOR] [COLOR=rgb(0, 89, 179)]Une nouvelle page va s'ouvrir, [/COLOR] [COLOR=#0059b3][IMG]http://img811.imageshack.us/img811/5460/5bak.png[/IMG] Pour utiliser Weebly gratuitement, prenez la première option. Si vous souhaitez avoir votre propre domaine choisissez la solution 2 mais il vous en coûtera environ 39€00 pour un an. Je vais donc continuer avec le première alternative.[/COLOR] [COLOR=rgb(0, 89, 179)]Rentrez le nom souhaitez.[/COLOR] [COLOR=#0059b3]Là deux cas sont possible : [/COLOR][/CENTER] [LIST] [*][COLOR=#0059b3]Le nom choisi est disponible.[IMG]http://reality-gaming.fr/attachments/valide-png.14808/[/IMG] [/COLOR] [*][COLOR=#0059b3]Le nom choisi n'est pas disponible. [IMG]http://reality-gaming.fr/attachments/errone-png.14809/[/IMG] [/COLOR] [/LIST] [CENTER][COLOR=#0059b3]Dans le deuxième cas, changez pour en trouver un qui est disponible. Cliquez ensuite sur "Continuer" Cliquez sur "Construire mon site" Vous arriverez donc sur votre model choisi au départ. [/COLOR] [COLOR=#0059b3][IMG]http://www.flaticon.com/png/64/8566.png[/IMG] [B][U]Outils[/U][/B] Vous avez beaucoup d'outils pour le personnaliser, je vais vous détailler les plus importants. [/COLOR][/CENTER] [LIST] [*][COLOR=rgb(0, 89, 179)]L'outil titre : Il vous permet d'ajouter un titre à l'endroit choisi de la page. [/COLOR] [/LIST] [COLOR=#0059b3]Vous disposez également d'un éditeur de texte très complet.[/COLOR] [LIST] [*][COLOR=#0059b3]L'outil texte [IMG]http://www.flaticon.com/png/32/25673.png[/IMG] : Il sert à ajouter du texte où vous voulez sur le site.[/COLOR] [/LIST] [COLOR=#0059b3] [IMG]http://i.imgur.com/iHaQ3fe.png[/IMG] [/COLOR] [LIST] [*][COLOR=#0059b3]L'outil "Galerie" [IMG]http://www.flaticon.com/png/32/3949.png[/IMG] : Il vous permet d'ajouter une galerie d'image à votre site comme ceci :[/COLOR] [/LIST] [COLOR=#0059b3][IMG]http://img132.imageshack.us/img132/5072/vqzj.png[/IMG] [/COLOR] [CENTER][/CENTER] [COLOR=#0059b3]Si vous souhaitez ajouter plus de deux images, modifier la partie "Colonnes" avec le nombre d'images souhaité. [/COLOR] [LIST] [*][COLOR=#0059b3]L'outil bouton : Il vous permet d'ajoutez un "bouton". Dés qu'on clique dessus, nous serons redirigé vers une page web. [/COLOR] [/LIST] [COLOR=rgb(0, 89, 179)][IMG]http://i.imgur.com/Ve7Ncbh.png[/IMG][/COLOR] [LIST] [*][COLOR=#0059b3]L'outil formulaire de contact [IMG]http://www.flaticon.com/png/32/14462.png[/IMG] : Il vous permettera d'ajouter un formulaire à votre site en choisissant le nom des champs à remplir, l'adresse e-mail de destination,...[/COLOR] [/LIST] [LIST] [*][COLOR=#0059b3]L'outil youtube [IMG]http://www.flaticon.com/png/32/25178.png[/IMG] : Il sert à intégrer une vidéo sur le site web.[/COLOR] [/LIST] [LIST] [*][COLOR=rgb(0, 89, 179)]L'outil colonnes : Celui ci créera una séparation latérale entre deux éléments de votre choix.[/COLOR] [/LIST] [LIST] [*][COLOR=#0059b3]L'outil icône de réseaux sociaux [IMG]http://www.flaticon.com/png/32/14598.png[/IMG] : [/COLOR] [/LIST] [COLOR=#0059b3]Il ajoutera les logo's des réseaux sociaux souhaités, vous pourrez mettre le lien de vos pages personnelles.[/COLOR] [LIST] [*][COLOR=#0059b3]L'outil fichier : Il vous permet de proposer un fichier en téléchargement sur votre site.[/COLOR] [*][COLOR=#0059b3]L'outil sondage : Il sert à ajouter un sondage sur le site.[/COLOR] [/LIST] [CENTER][COLOR=#0059b3][B]Voilà pour ce qui est des options.[/B] [/COLOR] [COLOR=#0059b3][B][IMG]http://www.flaticon.com/png/64/35592.png[/IMG] [/B] [B]La modification du model de départ[/B] Ce site est [B]très simple d'utilisation[/B], en effet pour modifier un élément de votre page web, vous n'avez qu'à cliquez dessus. Exemple pour le titre du site : [IMG]http://img827.imageshack.us/img827/4680/ijpi.png[/IMG] Vous avez pu remarquer que sur mon model, j'ai plusieurs pages.[/COLOR] [COLOR=rgb(0, 89, 179)]Pour modifier le titre de celle-ci, cliquez sur "Page" en haut.[/COLOR] [COLOR=#0059b3][IMG]http://i.imgur.com/OCe7T59.png[/IMG] Vous pouvez donc [B]modifier le titre de ces pages[/B], en ajouter d'autres puis modifier le type d'entête. [IMG]http://i.imgur.com/QuKCzOj.png[/IMG] [/COLOR] [SIZE=3][COLOR=#0059b3](A noter que vous pouvez également protégé la page d'un mot de passe mais que c'est tout de même peu sécurisé.)[/COLOR][/SIZE] [COLOR=#0059b3]Vous pourrez ensuite agrémenter ces pages grâce aux outils présentés [B]plus tôt[/B] dans le tutoriel. [/COLOR] [B][COLOR=rgb(0, 89, 179)][IMG]http://www.flaticon.com/png/64/14171.png[/IMG] [/COLOR][/B] [COLOR=#0059b3][B]L'onglet "Conception"[/B][/COLOR][B][COLOR=rgb(0, 89, 179)] [/COLOR][/B] [COLOR=#0059b3]Voilà à quoi il ressemble : [IMG]http://img822.imageshack.us/img822/1513/mbsh.png[/IMG] Il vous permettra de modifier la police de tous les textes présents sur le site, de changer la couleur de base, j'avait par exemple choisit [/COLOR][COLOR=#ff8000]orange[/COLOR][COLOR=#0059b3], je peut changer d'avis pour du bleu ou une autre couleur. Vous disposez aussi d'un éditeur d'HTML/CSS si vous vous y connaissez dans ce domaine. [/COLOR][/CENTER] [LIST] [*][COLOR=#0059b3]La zone de recherche : Pour en bénéficier, il faut être "pro". Elle est là en tant qu'outil de recherche pour l'utilisateur du site, qui pourra trouver plus facilement ce qui l'intéresse.[/COLOR] [*][COLOR=#0059b3]Icônes sociales : Vous pouvez activez ou désactiver les icônes de réseaux sociaus qui sont sur votre site;[/COLOR] [*][COLOR=#0059b3]Numéro de téléphone : Dnas mon model, il se trouvait à gauche des icônes de résaux sociaux. Vous pouvez le remplacez par des lettres comme "Suivez moi sur les résaux sociaux",...[/COLOR] [/LIST] [CENTER][COLOR=#0059b3] [B]L'onglet Boutique[/B] Il existe également un outil boutique sur Weebly pour proposer un shop en ligne. Cependant, je trouve Jimdoo plus simple d'utilisation pour cela, je vous invite donc à aller voir le tutoriel de mon ami @[USER=33070]Rivals GTP[/USER] Cependant, pour en créer un avec Weebly, cliquez simplement sur [B]boutique [/B]dans la barre bleu du haut. Vous aurez ensuite les étapes à réaliser pour créez une boutique : [IMG]http://i.imgur.com/SVMDgfr.png[/IMG] Cliquez simplement sur "Add" à gauche De la tâche puis, configurez l'add comme vous voulez. A gauche, vous avez plusieurs commande, certaines correspondent à des taches (voir image du dessus) Mais voici la listé détaillée de celle-ci :[/COLOR][/CENTER] [LIST] [*][COLOR=#0059b3]Dashboard : C'est là ou* vous trouvez les tâches ci-dessus.[/COLOR] [/LIST] [COLOR=#0059b3] [/COLOR] [LIST] [*][COLOR=#0059b3]Product : Il vous permet d'ajouter des produits pour votre boutique. Vous pouvez donner un nom au produit, une description, un prix, et indiqué si c'est un objet "physique" ou un produit dématérialisé. (pour les produits dématérialisés, vous devez être "pro" sur le site.)[/COLOR] [/LIST] [COLOR=rgb(0, 89, 179)]Vous pouvez aussi ajouter des options en bas de la page comme : la couleur, la possibilité de cocher les produits souhaités puis de pouvoir les acheter,...[/COLOR] [LIST] [*][COLOR=#0059b3]Storefront : Vous pouvez modifier la mise en page de votre voutique. Bien sûr pour cela il faut déjà y avoir mis des produits,...[/COLOR] [/LIST] [LIST] [*][COLOR=#0059b3]Categories : Vous pouvez ajouter des catégories si vous vendez beaucoup de choses. Si vous êtes spécialisé dans un seul domaine. Vous pouvez la encore ajouter des produits correspondant à une catégories.[/COLOR] [/LIST] [LIST] [*][COLOR=#0059b3]Coupon : Il faut être "pro" pour pouvoir l'utiliser. Elle vous permet de créer des coupons de réduction à donner à des clients fidèles,...[/COLOR] [/LIST] [LIST] [*][COLOR=#0059b3]Orders : Comme dit plus haut, c'est là ou* vous trouverez toutes les commandes passée sur votre site.[/COLOR] [/LIST] [LIST] [*][COLOR=#0059b3]Dernière commande et non des moindres, [B]Settings[/B][/COLOR] [/LIST] [CENTER][COLOR=#0059b3]La commande[B] settings[/B] vous permet de modifier plusieurs choses. Encore une fois je vais vous énumérer les onglets présents. [B]General[/B] Vous pouvez modifier la devise d'achat dans "Currency" Vous pouvez modifier l'unité de poids, Pound est mis de base, pour mettre ça en koli, il faut être "pro" Vous aurez aussi la possibilité de changer le mode d'achat, de base vous avez "Ajouter au panier" vous pouvez le modifier en "Achat immédiat" mais là encore, il faut être "pro" Vous pouvez renseigner les informations de votre entreprise avec : une adresse, un numéro de téléphone,un e-mail. Ceci apparaîtra sur votre "facture". [B]Checkout[/B] En français : caisse Vous pouvez ajouter paypal en moyen de paiement, seulement il faudra être "Business" (19$/mois)[/COLOR] [COLOR=#0059b3]Vous avez de base, l'option de paiement de Stripe. [/COLOR] [COLOR=#0059b3]Vous devrez donc créer un compte stripe pour l'utiliser. [B]Display[/B] En français : affichage Vous pourrez modifier le nombre de colonnes de produit, puis le nombre de produits par page. Vous pouvez également modifier la taille des images des catégories, puis la taille des images des produits. Vous pouvez mettre cette disposition en [B]Sidebar[/B] (barre latérale) Ou le laisser en [B]Block[/B] [B]Shipping[/B] L'onglet navigation, il est inaccessible sans avoir l'option "Business" je ne peut donc pas vous le présenter. [B]Taxes[/B] Lui aussi, inaccessible sans "premium" [B]Emails[/B] Vous différents type d'e-mail à envoyer automatiquement lorsque quelqu'un passe une commande sur le site. Vous avez le choix entre ceux ci : Order confirmation - Confirmation de commande Download confirmation - Confirmation de téléchargement Order shipped - Commande expédiée Refund e-mail - E-mail de remboursement Canceled e-mail - E-mail d'annulation de la commande [B]Voilà c'est tout pour la partie boutique.[/B] [/COLOR] [COLOR=rgb(0, 89, 179)][IMG]http://faience-carrelage-exterieur.carrelages-discount.com/images/separateur.png[/IMG][/COLOR] [COLOR=#ff8000][B]C[/B]e tutoriel est maintenant fini, je vous ai appris l'essentiel à la conception d'un site web avec Weebly. [/COLOR] [COLOR=rgb(255, 128, 0)]Bonne soirée,[/COLOR] [COLOR=#ff8000]Veenox. [/COLOR] [/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
RealityGaming
Comment utiliser Weebly de A à Z !
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut