Guide Webflow_

Le Workspace

C'est la section qui permet de mieux contrôler nos sites internet, ainsi que tous les collaborateurs et les utilisateurs externes à votre société (agences, freelancers, etc) qui vont pouvoir accéder à la gestion des sites.

‍

Paramètres (Settings)

Pour accéder au paramètres votre Workspace il suffit de cliquer sur la petite roulette ⚙️ (image ci-dessous) ou de sélectionner Workspaces 🏢 depuis le menu de votre compte.

‍

Voici les paramètres de votre Workspace, nous allons expliquer à quoi servent les divers onglets :

‍

Workspace

Dans ce premier onglet vous pouvez modifier le nom de votre Workspace ainsi y ajouter une image qui représente le représente (taille max. 256x256px).

Ce paramètre est utile pour distinguer vos Workspaces si vous en possédez plusieurs.

‍

Members

L'onglet membres est permet de gérer les collaborateurs et d'inviter des agences web ou des freelancers à travailler sur nos sites.

Il s'agit d'un élément clé si vous souhaitez déléguer la gestion ou la création de vos sites.

⚠️ Ne transmettez jamais vos identifiants !

‍

💡 A la place utilisez l'option Agency or Freelancer Guests et invitez l'adresse info@impactditigal.ch en cliquant sur le bouton [Invite guest] :

‍

Une fois l'utilisateur ajouté, celui-ci doit accepter votre demande pour pouvoir accéder à votre Workspace.

Notez que si vous invitez un utilisateur externe à la gestion de vos sites, il doit posséder une suscription d'agence ou freelancer au minimum.

Les invités des invités ne pourront pas accéder à votre Workspace.

‍

Pour retirer un utilisateur ou annuler l'invitation, il suffit de cliquer sur les trois ●●● dans Role sélectionner Remove from Workspace / Cancel invite.

Pour lui envoyer une nouvelle invitation, vous pouvez sélectionner Resend invite.

‍

Plans

Ici vous vous avez la possibilité d'agrandir votre Workspace.

Cela permet d'avoir plus d'emplacements pour de nouveaux sites ou collaborateurs.

Etant donné que le plan gratuit "Starter" permet de posséder jusqu'à deux sites sur un compte, vous n'avez pas besoin d'augmenter votre Workspace.

‍

Billing

Ici vous pouvez enregistrer et gérer vos moyens de payement.

Si vous souscrivez à un hébergement pour site internet il faut être en possession d'un carte de crédit.

Vous pouvez ajouter des moyens de paiements (cartes de crédit) via le bouton ci-dessous :

‍

Integrations

L'onglet intégration permet d'ajouter des polices personnalisés et l'usage d'applications externes à votre Workspace.

‍

Templates

Ici vous pouvez retrouver vos Templates (modèles de sites) si vous en avez aquis. Si vous

Les sites internet

C'est probablement la partie qui nous intéresse le plus dans ce guide : La gestion de nos sites web ✨.

La gestion des gestion se fait avec trois outils différents :

• Le Designer 📱 (mode de conception et de développement)
• L'Editor 🖊️ (éditeur du site, SEO et du CMS)
• Les Settings ⚙️ (paramètres du site, membres, formulaires, etc.)

Pour accéder au mode de conception (Designer) il suffit de faire un click gauche quant on survole le lien du site, mais nous souhaitons surtout savoir comment accéder aux paramètres pour pouvoir, par exemple y ajouter un nom de domaine ou un hébergement à notre site.

Nous allons donc effectuer un click droit sur l'icône avec les ●●● comme illustré ci-dessous :

Et là on peut constater qu'un petit menu c'est ouvert. Celui-ci qui nous permet non seulement d'accéder aux paramètres et à l'éditeur, mais donne également d'autres fonctionnalités comme :

• Delete : cette action permet de supprimer complètement le site internet.
• Duplicate : créer un copie du site internet. ⚠️ Attention certains paramètres ne peuvent pas être dupliqués comme l'hébergement et les noms de domaines par exemple.
• Move to folder : classe le site dans le dossier souhaité.
• Share : permet de montrer le projet à une autre personne qui pourra analyser sa conception. ⚠️ Cette action ne publie pas le site internet, mais bien la partie technique du site.

Revenons donc sur nos trois outils principaux :

‍

‍

‍

Le Designer

Le Designer permet d'accéder à la structure du site. Il permet ainsi de modifier la composition, le design, le fonctionnement, le code HTML-CSS et la partie réactive (responsive web design) du site et ceci sans écrire la moindre ligne de code!⚠️.

‍

⚠️ L'outil Designer peut s'avérer complexe et il s'adresse principalement aux personnes avec des compétences avancés dans le domaine du web et il est fortement recommandé d'avoir des connaissances minimale en structuration HTML-CSS et en responsive web design. Toute manipulation effectué avec cet outil peut causer un dysfonctionnement du site.

Cet outil ne doit pas être confondu avec l'outil Editor, qui permet de modifier notre site de manière sécurisé.

Si vous souhaitez tout de même apprendre les bases de cet outil vous pouvez suivre le Webflow 101 crash course (uniquement disponible en anglais).

‍

L'Editor

L'Editor (éditeur du site) est l'outil qui permet de modifier le contenu (texte, images, etc.) du site.

Il permet aussi d'accéder au CMS (système de gestion de contenu), de gérer les objets qui se trouvent dans vos collections ainsi que le référencement de vos pages.

Notez que votre compte Webflow vous sert automatiquement comme compte CMS, il n'y a donc pas besoin de refaire un compte CMS pour vous même.

Nous vous invitons à consulter le guide complet pour cet outil si vous souhaitez en savoir d'avantage.

‍

Les paramètres (Projet Settings)

L'onglet Settings nous laisse gérer les paramètres du site dont l'hébergement, le nom de domaine, les formulaires, etc. Nous allons voir les paramètres les plus importants à connaître dans la section à venir.

‍

Dans la partie en haut de la page on retrouve les mêmes raccourcis qu'on a vu précédemment avec quelques fonctionnalités en plus.

Voici un petit récapitulatif de ces raccourcis (allant de gauche à droite):

• A gauche nous avons une petite icône (en gris) qui sert à visualiser notre site si celui-ci a été publiée.
• Parmi les premières options à droite nous avons le transfert de site. Celui-ci permet de transférer le site internet à un autre utilisateur de Webflow. ⚠️ Notez que certains paramètre et l'hébergement ne se transfèrent pas et qu'on utilisera cette option uniquement quant on souhaite changer de propriétaire pour ce projet.
• Ensuite nous avons à nouveau l'option pour supprimer définitivement le site.
• La fonction dupliquer le site crée une copie du site.
• La fonction [Unpublish] dépublie complètement le site et l'utilisateur tombera sure une page 404 à la place. ⚠️ Ceci ne supprimera pas la site, ni l'hébergement.
• Le bouton [Share] permet de partager le projet, ceci peut être utile quant on souhaite montrer le coté technique du site pour se faire aider par une personne ou demander un service spécifique.
• Le bouton [Designer] vous fait entrer dans l'outil de conception.
• Le bouton [Editor] vous permet d'accéder directement à votre CMS.
• Le bouton [Publish] figure quasiment sur chaque onglet du projet et ce sera également le bouton sur lequel on cliquera le plus souvent. Il sert à publier les changements effectués à votre site internet, que ce soit dans les paramètres, l'outil conception ou le CMS. Il est comparable avec un bouton de sauvegarde (sauf qu'on va éviter de publier des choses qui ne sont pas terminés). Si vous possédez plusieurs noms de domaines, vous avez également la possibilité choisir sur lequel vous souhaitez afficher les changement et les autres ne seront pas affectés.

‍

Dans la navigation du bas avons également un menu à tabulations avec plusieurs onglets :

General‍

Ce sont les paramètres généraux du site et on y peut :

• Changer le nom principal du site.
• Choisir un nom de domaine provisoire : exemple.weblflow.io.
• Classer le site dans un dossier.
• Modifier le favicon (petite îcone que l'on voit sur les onglets des navigateurs et dans nos favoris.)
• Modifier la zone horaire (l'heure Suisse est sélectionnée par défaut). Ceci peut être utile quant on veut programmer un article crée avec le CMS pour qu'il s'autopublie à l'heure choisie.
• Choisir la langue du site. Cela permet au navigateurs d'identifier la langue plus facilement et de proposer directement au personnes qui ne parlent pas la langue de la traduire dans la leur. Les initiales par défaut pour le Français sont : fr.

‍

Members

Permet gérer les rôles du site et d'inviter de nouveaux membres à accéder au CMS du site internet. Il faut au minimum un hébergement CMS pour pouvoir ajouter des collaborateurs.

⚠️ Cette option requiert au minimum un hébergement CMS.

‍

Publishing

L'onglet de publication permet d'ajouter et supprimer des noms de domaines à votre site. Pour ajouter un nouveau nom de domaine vous pouvez simplement entrer le nom que vous souhaitez ajouter à votre site (sans les préfixes). Exemple : monsite.ch, siteweb.com, etc.

⚠️ Cette option requiert au minimum un hébergement basique.

‍

Plans & Billing

Voici l'onglet le plus important pour pouvoir publier son site : l'hébergement et la facturation. C'est bien depuis cet onglet que nous allons pouvoir choisir notre hébergement et gérer notre méthode paiement.

Puisqu'il s'agit d'un paramètre essentiel pour pouvoir publier un site internet, nous allons en parler un peu plus loin dans ce guide.

Cette étape est obligatoire si on veut publier son site internet.

‍

SEO

SEO signifie "Search engine optimisation" ce qui donne "optimisation des moteurs de recherche" en français. Cet onglet ne sert pas à améliorer notre référencement, mais permet plutôt de faire le contraire en bloquant des informations qu'on ne souhaite pas référencer sur notre site.

Il est recommandé de laisser ces paramètres par défaut.

‍

Forms

Cet onglet vous permet de gérer la sortie de tous vos formulaires sur le site. Voici un petit récapitulatif des champs à renseigner :

• From Name: Ceci est le nom principal de vos formulaires. Quant vous allez recevoir un e-mail, l'émissaire du mail correspondra à ce titre. Ex. Mon Site Internet.
• Send to: Il suffit d'entrer l'adresse e-mail qui va recevoir tous les envois des formulaires. Si vous voulez ajouter plusieurs e-mails, il faut ajouter une virgule après chaque adresse. Ex. : info@exemple.ch, contact@exemple.ch, service@exemple.ch, etc.
• Subject Line: Il s'agit du sujet mentionné quant vous allez recevoir un e-mail. Ex : Nouvelle demande depuis le formulaire du site internet.
• Reply To Address: Ce champs sert à répondre directement à l'adresse e-mail qui a soumis la demande (champ e-mail requis sur le formulaire.) Cette option n'est pas obligatoire et s'utilise en général avec une adresse qui utilise des réponses automatiques.
• Email Template: Purement optionnel, ce champs permet d'écrire du texte ou du code HTML personnalisé pour formater le mail ou de le tier automatiquement si on utilise un filtrage sur sa boîte e-mail.

Notez que ces champs s'appliquent uniquement pour les formulaires par défaut de Webflow. Si vous utilisez un autre service de traitement de donnés tels que Microsoft Forms, Google Forms, Mailchimp, Infomaniak, Typeform etc. il faut paramétrer ceux-ci directement chez le prestataire de service.

‍

Librairies

Permet d'accéder rapidement à vos librairies si vous en utilisez pour votre site internet.

‍

Fonts

Ici vous pouvez gérer les typographies utilisés sur votre site internet. Toutes les typgraphies porposés de Webflow sont libres de droit. Si vous le shouaitez vous avez églament la possibilité de télécharger et d'installer votre propre typographie sur le site en cliquant sur le bouton [Upload] dans custom fonts.

⚠️ Attention : Si vous utilisez une typographie personnalisé, il faut que vous en soyez propriétaire ou que vous possédez une licence exclusivement pour l'affichage web. Comme pour les images, vidéos et musiques, tout abus peut donner suite à une plainte de la part de la fonderie typographique.

‍

Backups

Ce sont les sauvegardes de votre site internet.

En cliquant sur [Preview] vous avez la possibilité de prévisualiser une ancienne version du site avant de la restaurer en cliquant sur [Restore].

Webflow crée un point de restauration votre site lorsque vous appuyez sur Cmd+Shift+S (ou Ctrl+Shift+S sur Windows) et sauvegarde automatiquement après chaque publication. Il crée également une sauvegarde de l'état actuel lorsque vous restaurez une ancienne version.

‍

Intergrations

Dans cet onglet vous avez la possibilité d'intégrer facilement vous outils de tracking et des APIs tels que Google Analytics et Facebook Pixel.

Il suffit de renseigner les champs avec votre ID de tracking et Webflow s'occupe de mettre en place le code de manière automatique sur toutes les pages.

Il y a également une option pour bloquer les cookies de Facebook Pixel, mais cela concerne uniquement les pays membre de l'Union Européenne.

‍

Custom Code

Cet onglet permet d'insérer du code personnalisé sur toutes les pages à la fois. Cela est vraiment utile si on doit installer un module ou une application externe à notre site et qui doit se charger sur chaque page.

⚠️ Le bon fonctionnement du code sous votre responsabilité. Un mauvais usage peut avoir un impact sur le temps de chargement, voir créer une erreur sur votre site internet.