Important !
Cet outil donne la possibilité de modifier le contenu et le référencement de son site internet.
Impact Digital décline toute responsabilité en cas de plainte d'autrui pour du contenu inapproprié ou illégal. Nous rappelons que les images, vidéos ainsi que d'autres fichiers peuvent être soumis à des droit d'auteur et qu'il en faut posséder une licence ou un accord spécifique pour leur usage sur internet. Tout le contenu fourni par Impact Digital a été procuré de manière légale avec une licence au moment de la remise de l'éditeur CMS.
Il est strictement interdit d'utiliser votre site internet pour diffuser du contenu haineux, raciste ou choquant. L'installation volontaire de logiciels malveillants, de liens à piège ainsi que le vol de donnés sont considéré comme illicite. Impact Digital peut se permettre de bloquer l'accès à l'éditeur, voir de suspendre le site si de tels actes sont signalés ou détectés.
Veuillez également veiller aux informations que vous transmettez sur votre site ou sur internet en général. N'y diffusez jamais des informations trop personnelles ou sensibles comme par exemple : carte de crédit, numéro AVS, adresse privé, adresse ip, etc. Notez que peut importe la sécurité, tout ce que vous publiez sur internet pourra être accessible par le monde entier et le restera à vie.
Les modifications effectués avec l'éditeur sont sous votre responsabilité. Si vous le souhaitez, vous avez la possibilité de demander une réinitialisation du site vers une version antérieure (jusqu'à 14 jours max.), au risque de perdre toutes les modifications entreprises durant ce laps de temps.
Prise en main de Webflow (Workspace)
Qu’est-ce que Webflow?
Webflow est l'outil de développement et de gestion de sites web "No-Code" du futur. Grâce à sa flexibilité, ses services et son CMS personnalisable, il ouvre de toutes nouvelles possibilités dans le développement et la gestion de sites internet.
Pourquoi utiliser Webflow ?
En tant que plate-forme, Webflow offre à votre entreprise le cadre idéal pour une présence en ligne personnalisée. Nous sommes des experts de Webflow, c'est-à-dire que nous concevons et développons des sites web qui sont 100% adaptables, faciles à gérer via CMS, rapides, sûrs et fiables : De la simple page d'atterrissage jusqu'au site internet complexe doté de fonctions supplémentaires (presque) infinies.
🚀 Un CMS hautement moderne et personnalisable
Le CMS de Webflow est l'une des plus grandes raisons pour lesquelles Webflow connaît une croissance rapide.
Vous souhaitez apporter vous-même de petites modifications à votre site web ? Avec le Webflow CMS, c'est très facile, sans connaissances en développement.
Vous pouvez ainsi gérer rapidement et de manière autonome les contributions au blog, les textes et le contenu, ce qui vous permet d'économiser du temps et de l'argent à long terme.
Un système de gestion de contenu (en abrégé CMS) est une fonction qui permet d'éditer des contenus tels que des textes ou des images.
Le CMS permet donc, dans le cas de systèmes et de sites web complexes, de modifier facilement les contenus et de permettre aux utilisateurs qui ne sont pas familiarisés avec la technologie de procéder à des modifications.
Jusqu'à présent, les CMS étaient souvent incompréhensibles, les limites du CMS étaient très vite atteintes et l'utilisateur final ne pouvait guère y apporter de modifications importantes.
Webflow a créé ici une solution très belle et simple, qui est également facile à comprendre pour les clients finaux.
🏷️ Optimisation facile et rapide du référencement naturel
L'optimisation de votre site web pour les moteurs de recherche est réalisable directement dans le CMS avec Webflow. Cela comprend des fonctionnalités SEO telles que :
- Mise en place de redirections 301 Contrôle des structures URL
- Gestion des balises titres, des méta-descriptions et des balises IMG
- Génération automatique de sitemaps XML
- Personnalisation des OpenGraph et des liens de partage
- Balisage sémantique HTML
- Optimisation de chargement pour les pages.
- Pas de mise en place laborieuse de paramètres SEO.
⚡ Chargement éclair
Grâce à l'hébergement en CDN d'Amazon Cloudfront® (AWS) et Fastly®, le temps de chargement des sites web seront toujours super rapides, même pour les sites avec des contenus volumineux et complexes, grâce à une large bande passante réservée.
🛠️ Maintenance technique automatique
Il n'y a plus de mises à jour techniques et de maintenance de logiciel à effectuer, car Webflow configure tout automatiquement et est toujours à la pointe de la technologie.
🔌 Indépendant du plug-in
Avec Webflow, votre site est totalement indépendant des plug-ins. Cela rend votre site web non seulement plus sûr, mais aussi plus durable, car vous ne dépendez pas de développeurs d'applications inconnus.
Bien entendu il sera toujours possible d'installer des applications externes sur votre site. Webflow étend continuellement ses fonctionnalités et permet ainsi des solutions toujours plus complexes.
🔒 Certificat SSL
Webflow offre une navigation sécurisée pour vous et vos clients en https. La sécurité des données selon la norme ISO27018.
🛡️ Sécurité des données
Webflow possède une infrastructure informatique moderne et hautement sécurisée, crypte vos données et respecte les lois sur la transmission et le stockage de données de la Suisse et de l'UE et détient une certification officielle du Swiss-US Privacy Shield.
💾 Sauvegardes régulières et automatiques
Sauvegardes automatiques et régulières de vos sites web, permettant de les restaurer en un seul clic.
✨ Une structuration du code claire et précise
Grâce à un code html-css auto-structuré de manière propre et claire, la collaboration avec les développeurs, les concepteurs, les intégrateurs et les experts SEO devient un jeu d'enfant.
La structure continue du code permet aux concepteurs et dévloppeurs d'avoir rapidement une vue d'ensemble, même sans phase intensive d'onboarding, et de procéder à des extensions même après coup. Il permet également d'être lu et compris facilement par des robots et d'être mieux référencé.
👥 Une plateforme de gestion multi-sites et multi-utilisateurs
L'outil Webflow permet également de gérer facilement plusieurs sites à la fois, ainsi que les accès de vos collaborateur et des intervenants et tout ceci via un seul compte.
S’enregistrer et se connecter
Afin de pouvoir prendre son site internet en main, il faut d'abord se créer un compte sur Webflow. Ce compte est entièrement gratuit et vous payeriez uniquement l'hébergement de vos sites internet et les prestations supplémentaires si vous souhaitez étendre votre licence et héberger des sites supplémentaires.
Dans notre cas le compte "starter" sera largement suffisant, car il nous permettra de gérer jusqu'à deux sites internet.
Si vous avez déjà crée un compte, vous pouvez simplement vous reconnecter avec votre adresse e-mail et votre mot de passe au moyen de ce lien.
La première chose que vous allez remarquer c'est que le site est en anglais. Ceci est du car Webflow se focalise sur le progrès et l'amélioration plutôt que la commercialisation et les autres langues sont encore en cours de développement. De plus il existent déjà pleins d'outils additionnels pour traduire Webflow dans une autre langue. Pour notre usage ne vous inquiétez pas car tout sera expliqué en français et l'usage en général ne sera vraiment pas complexe.
Sur cette première fenêtre (image ci-dessus), on vous demande de renseigner les champs avec les informations suivantes :
- Prénom [First name]
- Nom de Famille [Last name]
- Votre adresse e-mail [Email]
- Mot de passe [Password]
Veillez à bien mémoriser votre e-mail et votre mot de passe, car vous en aurez besoin plus tard pour accéder à la gestion de votre compte et de votre site internet.
Si vous oubliez votre mot de passe, vous avez la possibilité de demander une réinitialisation par e-mail.
Durant la création du compte on vous posera quelques questions sur votre niveau avec le web et votre niveau avec la création/gestion de sites internet. Vous pouvez répondre librement à ces questions ou continuer en cochant simplement "other" si vous n'avez pas de réponse.
Une fois que vous avez terminé la création de votre compte, vous verrez la fenêtre suivante apparaître sur votre écran :
Vu que nous venons de créer notre compte, Webflow vous propose alors de démarrer directement avec un nouveau site internet. Cet interface que vous avez devant vous s'appelle le "Designer" et il permet de réaliser toute la partie front-end (partie visible par l'utilisateur) d'un site internet.
Nous pouvons passer toute cette étape de conception, car votre site internet vous sera directement transféré par nos soins.
Pour quitter le Designer et accéder à votre tableau de bord veuillez faire un click droit sur la petite icône (tout en haut à gauche) et sélectionner "Dashboard".
Et nous voici donc sur notre tableau de bord (Dashboard). C'est depuis ici que nous allons pourvoir gérer tous nos sites internet :
Nous allons en apprendre plus sur cette partie Webflow dans le prochain tutoriel.
Se déconnecter de Webflow
Pour se déconnecter de son compte Webflow, il suffit de cliquer sur la gestion de votre compte (partie mise en évidence-ci dessous) et de sélectionner Sign Out dans le menu déroulant.
Note: Vous pouvez vous reconnecter à votre Dashboard de Webflow à tout moment en cliquant sur ce lien.
Tant que que vous vous n'êtes pas déconnecté du site ou que vous ne naviguez pas en navigation privé, vous vous reconnecterez automatiquement sur votre Dashbord. Vous n'avez donc pas besoin de rentrer vos identifiants à chaque fois en allant consulter le site de Webflow.
Voilà tout ce qu'il faut savoir pour la création de votre compte Webflow. Dans le guide suivant, nous vous invitions à consulter la prise en main de l'interface de Webflow.
Le transfert d'un site internet
Réceptionner un site
Dans ce guide nous souhaitons savoir comment récupérer notre site internet si celui-ci a été réalisé par une agence ou une autre personne.
Pour cela il existe les possibilités suivantes :
- Nous transmettre l'e-mail de votre compte Webflow, si vous souhaitez garder les accès à votre Workspace uniquement pour vous. Dans ce càs vous allez recevoir votre site internet directement sur votre compte. Demander le transfert du site
- Nous transmettre les accès (e-mail et mot de passe) à votre compte Webflow* si vous avez décidé de nous en confier la gestion. Nous contacter
*Si vous avez activé une authentification à deux étapes, il faudra prévoir à nous autoriser pour être en mesure de se connecter à votre compte.
Qu'importe votre choix, voici le message qui s'affichera sur votre Workspace quant un site internet est en cours de transfert :
Pour accepter le transfert du site internet, il suffit de cliquer se le lien orange "Accept and transfer the site." dans la petite boîte de dialogue qui c'est ajoutée sur votre tableau de bord.
Attention : Vous devez avoir au moins une place de libre sur votre workspace. Le compte starter vous permet de gérer uniquement deux sites internet.
Transférer un site internet
Avec Webflow vous avez également la possibilité de transférer votre site internet à un autre utilisateur ou à l'un de vos Workspaces.
Cependant, il faut noter qu'il n'y a certaines configurations du site qui ne se transmettent pas tel que :
- L'hébergement
- Les utilisateurs du CMS
- La configuration du formulaire
Attention : Ne transmettez pas votre site internet si vous souhaitez qu'on intervienne sur le site. Il existe des moyens bien plus pratiques et vous ne perdez pas le paramètres-ci dessus. Cette fonctionnalité sert uniquement à changer de propriétaire.
Pour transférer un site internet ouvrez les paramètres [Settings] de votre site internet et cliquez sur la petite icone ci dessous :
Il suffit ensuite d'entrer l'e-mail de la personne ou de sélectionner un de vos Workspaces et de lui envoyer le site.
La personne qui réceptionne le site doit être en possession d'un compte Webflow.
Voilà tout ce qu'il faut savoir sur le transfert d'un site internet.
Interface et fonctionnalités
Voici le Dashboard :
Comme on peut le constater, c'est une page sur laquelle on peut-y trouver plusieurs informations à propos de notre compte, notre Workspace et nos sites internet. Cette page va vous servir de tableau de bord pour vos sites internet et sera la page principale de ce guide.
Le Dashboard est divisé en quatres parties :
- La navigation du site Webflow 🧭
- La gestion de votre compte 🔑
- Le Workspace 👥
- Les sites internet 🌐
Navigation
Il s'agit du menu principal du site Webflow.
Celui-ci est contient les onglets suivants
- L'onglet Dashboard, permet d'accéder à votre Workspace et à la gestion de votre compte.
- L'onglet Marketplace, permet de découvrir le marché digital de Webflow. On y trouve plusieurs produits dont des maquettes de sites internet, des applications, des librairies et même des concepteurs web du monde entiers qui y proposent leur services.
- L'onglet Learn, permet d'apprendre à développer votre site internet avec l'outil Webflow Designer.
- L'onglet Resources, permet de trouver l'aide, accéder au support de Webflow et de faire des échanges avec la communauté Webflow.
Gestion du compte
Cet onglet du site permet de gérer votre compte Webflow. On y retrouve plusieurs options pour modifier votre compte, votre Workspace ainsi que des notifications importantes tels que les mises à jour.
Similaire à la plupart des comptes que l'ont possède sur internet, votre compte Webflow vous permet de:
- Modifier votre profil publique [Public profile].
- Modifier vos informations et vos identifiants [Profile settings].
- Accèder à la gestion de votre Workspace [Workspaces].
- Suivre les actualités et les mises à jour sur Webflow [Updates].
- Se déconnecter du site [Sign Out].
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.
Héberger un site internet
Afin d'être en mesure de publier un site sur internet et de profiter pleinement de ses fonctionnalités, il sera obligatoire de réserver un hébergement web. Heureusement, Webflow permet de passer cette étape en quelques cliques seulement.
Qu'est-ce qu'un hébergement web?
Un hébergement est un espace virtuel de stockage qui se trouve chez un hébergeur. Cela fonctionne un peu de la même manière qu'un service cloud et il a les rôles suivants :
- Stocker le site web et ses fichiers (images, textes, polices, etc).
- Rendre le site accessible 24h/24 et 7j/7.
- Fournir une adresse IP unique, qui permet d'identifier et de joindre cet espace.
Webflow est directement lié aux services d'hébergement AWS un des hébergements les plus sécurisés et fiables qui vous fait bénéficier des avantages suivants :
- Les sites internet et le CMS sont totalement indépendants des noms de domaines ou d'autres services.
- Les sites internet restent toujours compatibles avec les mises à jour effectués par l'hébergeur.
- Un temps de chargement parmi les plus rapides du monde, grâce au CDN (réseau de diffusion de contenu) inclus de Fastly®.
- Un certificat SSL ce qui garanti une connexion sécurisée pour les visiteurs de votre site internet.
- Possibilité de lier un nombre infini de noms de domaines à votre site internet.
- Possibilité de sélectionner individuellement les noms de domaines sur lesquels on veut publier.
- Publication des changements rapides et en un seul clique.
- Le site internet reste accessible 24h sur 24 et 7 jours sur 7.
- Possibilité de payer au mois ou à l'année.
- Possibilité de résilier l'hébergement d'un site à tout moment, tout en gardant accès à la gestion du site.
- Sauvegardes automatiques et régulières de votre site.
- Vos données sont cryptés et sécurisés.
Réserver un hébergement web
Pour réserver un hébergement avec Webflow, veuillez vous rendre sur votre Dashboard et rendez vous dans les paramètres [Settings] du site internet à héberger.
Une fois dans les paramètres de votre site internet, veillez sélectionner l'onglet [Plans & Billings].
Nous voici donc avec plusieurs choix à disposition pour héberger le site.
Le premier choix à effectuer se trouve en haut à droite, il va définir si l'on souhaite payer son hébergement au mois ou à l'année. Comme pour la plupart des services, un paiement annuel nous permet de profiter d'une réduction.
Note: que chez Webflow vous payez toujours en avance.
Si vous décidez de ne pas renouveler l'hébergement, celui-ci sera automatiquement désactivé et le site internet sera dépublié de suite. Le site internet sera conservé dans l'état dans lequel il se trouvait au moment de la dépublication et vous n'allez donc pas perdre l'accès à celui-ci. Vous pouvez à tout moment réserver un nouvel hébergement.
Le 2ème choix vous permet de décider si vous souhaitez héberger un site vitrine ou un e-commerce. Pour cette étape, vous pouvez laisser la sélection par défaut.
Et pour finir le 3ème choix à effectuer est celui de l'hébergement. Il s'agit du choix le plus important, car il va définir les capacités du site internet et du CMS.
Voici un petit récapitulatif des hébergements à disposition :
Starter
Hébergement par défaut de Webflow qui sert à la modification du projet ou à tester celui-ci.
Il ne s'agit pas réellement d'un hébergement, mais plutôt d'un statut par défaut d'un site qui n'a aucun hébergement attribué.
- Pas ne nom de domaine.
- Pas de référencement.
- CMS non-inclus.
- Maximum 50 envois via formulaire.
- Bande passante réservée de 1Go (CDN régional: Suisse-Europe).
Basic
Il s'agit de l'hébergement de base pour un site internet. Il est uniquement utilisé pour les très petits sites statiques, qui ne demandent aucune modification du contenu.
- Ajout de noms de domaines.
- Référencement limité.
- CMS non-inclus.
- 500 envois/mois via formulaire.
- Bande passante réservée de 50Go (CDN régional: Suisse-Europe)
⚠️ Le CMS n'est pas inclus dans cet hébergement. Les mises à jours du site devront se faire directement via le Designer, ce qui demande des connaissances avancées.
CMS
Hébergement par défaut de Webflow. Il s'agit de la meilleure option pour un site vitrine.
- Ajout de nom. de domaines.
- Référencement naturel possible via CMS.
- CMS + éditeur inclus.
- Jusqu'à 2000 entrées dans les collections de votre CMS.
- 1000 envois/mois via formulaire.
- Bande passante réservée de 200Go (CDN régional: Suisse-Europe)
Business
L'hébergement business est une version premium de l'hébergement CMS. Il profite des mêmes avantages qu'un hébergement CMS, mais avec des limites biens supérieures. De plus, il permet de télécharger des fichiers (jusqu'à 10Mo) directement sur le site au moyens d'un formulaire. Cet hébergement est recommandé uniquement si on souhaite dépasser les limites d'hébergement CMS, qui sont déjà largement suffisantes pour les sites vitrines standards.
- Ajout de noms de domaines.
- Référencement naturel possible via CMS.
- CMS + éditeur inclus.
- Jusqu'à 10000 entrées dans les collections de votre CMS.
- 2500 envois/mois via formulaire.
- Possibilité de télécharger des fichiers via formulaires.
- Bande passante réservée de 400Go (CDN mondial)
Comme mentionné ci-dessus, l'hébergement CMS est la meilleure option pour un site vitrine et cela même pour un petit site web qui requière peu de mises à jour de contenus.
L'hébergement Basic s'utilise principalement pour les sites qui ne nécessitent aucun changement une fois en place (ex: une page campagne). L'hébergement Business permet d'augmenter les capacités du CMS, mais s'adresse aux grands sites internet, avec beaucoup de trafic et de contenu et sur lesquels il est nécessaire d'intervenir très souvent.
Note: Il est possible de modifier l'hébergement à tout moment.
Veuillez donc sélectionner celui qui correspond le mieux à votre projet en cliquant sur le bouton [Upgrade to...] et remplissez vos informations de paiement dans la fenêtre qui vient d'apparaître.
Une fois terminé, vérifiez que vos informations sont bien correctes et cliquez sur le bouton: [Pay $XXX.XX USD now]
Et voilà ! Après votre achat, vous allez recevoir une confirmation de paiement et votre site est officiellement hébergé sur le World Wide Web. Dans la section suivante, nous allons apprendre à ajouter un ou plusieurs noms de domaines à notre site.
Résilier un hébergement
Voici un guide étape par étape qui décrit comment résilier un hébergement sur Webflow :
- Connectez-vous à votre compte Webflow. C'est là que vous pourrez gérer votre site web et l'hébergement.
- Sélectionnez le site web pour lequel vous souhaitez annuler l'hébergement. Vous verrez une liste de tous les sites web que vous avez créés dans votre compte Webflow.
- Cliquez sur le bouton "Paramètres". Cela ouvrira les paramètres du site web, où vous pourrez configurer les options d'hébergement de votre site web.
- Allez à la section "Hébergement". C'est là que vous pourrez gérer les options d'hébergement de votre site web.
- Annuler l'hébergement. Pour annuler l'hébergement de votre site web, il suffit de cliquer sur le bouton "Downgrade to Starter". Vous serez invité à confirmer votre action, donc assurez-vous de vouloir annuler votre hébergement avant de continuer.
- Confirmez l'annulation. Après avoir cliqué sur le bouton "Downgrade to Starter", vous serez invité à confirmer le choix. Assurez-vous d'avoir une sauvegarde de tout fichier ou donnée important avant de confirmer l'annulation.
- Attendez que l'annulation prenne effet. Une fois que vous avez confirmé l'annulation, cela peut prendre quelques minutes pour que l'annulation prenne effet. Vous recevrez un e-mail de confirmation une fois que l'annulation est terminée.
Si vous avez des questions ou des préoccupations, n'hésitez pas à contacter le service d'assistance clientèle de Webflow pour obtenir de l'aide.
Ajouter un nom de domaine
Vous souhaitez remplacer l'URL ".webflow.io" de votre site ? Il est possible d'ajouter un nom de domaine personnalisé très simplement depuis votre compte Webflow. Ce mode d'emploi vous guidera étape par étape à travers le processus pour que vous puissiez facilement offrir à votre site un nom de domaine personnalisé.
Qu'est-ce qu'un nom de domaine ?
Un nom de domaine est simplement l'adresse de votre site web. C'est ce que les gens tapent dans leur navigateur web pour accéder à votre site. Il s'agit généralement d'un nom facile à retenir qui représente votre entreprise ou votre organisation, comme par exemple "monentreprise.com". Le nom de domaine permet aux utilisateurs de trouver votre site facilement et de s'y connecter en toute simplicité.
Un nom de domaine sert principalement à :
- Se réserver une identité unique sur internet
- A rediriger les visiteurs vers la bonne adresse IP
- Faciliter l'accès aux visiteurs (par ex: un nom facile à retenir et à écrire)
Chaque nom de domaine est unique. Il se réserve auprès d'un fournisseur de nom de domaine qui se définit en tant que registrar.
Note: Si vous avez déjà un hébergement sur Webflow, vous aurez aussi la possibilité de réserver votre nom de domaine en allant dans l'onglet [Publishing].
💡 Si vous possédez déjà un nom de domaine ou que celui-ci a été réservé pour vous par quelqu'un d'autre vous pouvez passer directement à cette section.
Choisir un registrar
Un registrar est une entreprise qui vous permet d'acheter et d'enregistrer un nom de domaine pour votre site web. C'est comme une sorte de guichet unique où vous pouvez trouver et acheter le nom de domaine que vous souhaitez, et ensuite l'enregistrer auprès d'eux. Les registrars facilitent le processus d'enregistrement et de gestion de votre nom de domaine, en vous permettant de le configurer, de le renouveler et de le transférer vers un autre fournisseur si vous le souhaitez. En somme, les registrars vous permettent de réserver votre propre adresse sur Internet pour que les gens puissent accéder à votre site web en toute simplicité.
Vu que les tarifs et les services ne sont pas les mêmes chez chaque registrar, le choix de celui-ci est personnel et peut s'orienter selon vos besoins :
- Ergonomie et gestion du site du registrar
- Prix
- Services inclus
- Sécurité
- Langue du support
Note: Vous pouvez également posséder plusieurs noms de domaines chez un même registrar ou chez plusieurs registrars. Ce choix dépend également des décisions selon les sujets évoqués ci-dessus. Il est tout à fait possible de réserver un nom de domaine Suisse .ch chez un registrar à l'étranger.
Si vous n'avez que peu, voir aucune expérience avec les registrars, nous recommandons de vous inscrire et de réserver votre nom de domaine auprès d'Infomaniak pour les raisons suivantes :
- Une gestion facile de vos noms de domaines et de la zone DNS.
- Une interface ergonomique et facile d'usage
- Un bon rapport qualité/prix.
- Possibilité de renouveler automatiquement votre nom de domaine.
- Permet d'ajouter plusieurs utilisateurs à votre organisation.
- Support inclus en cas de problèmes avec l'un de vos produits.
- Possibilité de créer des e-mails personnalisés avec vos nom de domaine.
- Livraison rapide du nom de domaine
Réserver un nom de domaine
Pour réserver un nom de domaine, il suffit de se connecter chez son registrar et de choisir l'option commander/réserver un nom de domaine.
La plupart des registrars proposent directement cette option sur leur page d'accueil.
Entrez ensuite le nom de domaine souhaité dans la barre de recherche. Ex: monsite.ch
Si le nom de domaine est disponible, il suffit de sélectionner sélectionner celui-ci et de cliquer sur "continuer".
Il suffit ensuite de procéder à une marche à suivre ou l'on a occasion pour ajouter plusieurs options liés à votre nom de domaine (modifiables ultérieurement) pour terminer par le moyen de paiement.
Important: avec un site Webflow, il n'est pas nécessaire de choisir l'option hébergement web, car celui-ci sera réservé directement via Webflow.
Si le nom de domaine a été réservé correctement, vous allez recevoir une confirmation et celui-ci vous sera délivré au plus tard dans les 72h qui suivent (~ 5min-15min chez Infomaniak).
Ajouter et paramétrer un nom de domaine sur mon site
Une fois l'hébergement du site en place, on a la possibilité de lier des noms de domaines au site internet.
Pour ce faire il suffit de se rendre dans l'onglet [Publishing] dans les paramètres de votre site :
Ici nous avons deux possibilités pour ajouter un nom de domaine :
La première consiste à simplement entrer le nom de domaine qu'on a déjà réservé chez un registrar et cliquer sur [Add Domain].
Note : Il faut entrer uniquement le nom de domaine sans les www ou le https:// par ex. monsite.ch
La 2ème possibilité est de réserver le nom de domaine directement via Webflow sur Google Domains ou GoDaddy.
Une fois que le nom de domaine a été ajouté correctement, on reçoit les adresses qui servent à connecter le nom de domaine au site :
Ces adresses doivent être ajoutées dans la zone DNS (espace administratif) de votre nom de domaine.
Accéder et modifier la zone DNS d'un nom de domaine
On accède à cette zone via l'interface de notre registrar où nous avons réservé le nom de domaine. Vous pouvez trouver ci-joint un guide fourni par l'entreprise Infomaniak Network SA qui vous explique comment accéder et gérer cette zone*. Voici comment modifier la zone DNS de votre nom de domaine :
Important : étant donné que chaque registrar utilise une console et méthode différente pour modifier les DNS, veuillez vous fier directement au guide DNS de votre registrar. Si vous n'arrivez pas à trouver comment modifier les DNS de votre nom de domaine, nous conseillons de contacter le support de votre prestataire registrar.
Veuillez si possible toujours effectuer une sauvegarde ou prendre une capture d'écran de vos paramètres précédents. Cela permettra de revenir en arrière à tout moment en cas de mauvaise configuration. Si vos noms de domaines sont gérés par une entreprise/personne tierce, vous pouvez également leur transmettre les informations à mettre en place sur votre nom de domaine.
- Connectez-vous au site web de votre registrar de nom de domaine
C'est ici que vous pourrez modifier votre zone DNS. - Trouvez la section Gestion des DNS
Une fois connecté, cherchez la section "Gestion DNS", "Serveur de nom de domaine (DNS)" ou "Gestion du serveur de nom". C'est là que vous pourrez apporter des modifications à votre zone DNS. - Localisez la section des enregistrements A
Dans la section Gestion du DNS, repérez la zone où vous pouvez gérer les enregistrements "A". Un enregistrement "A" est une adresse IP attribuée à un nom de domaine. - Ajouter deux nouveaux enregistrements A
Cliquez sur l'option "Ajouter un enregistrement A" ou "+Ajouter". Ici, vous pourrez ajouter les deux nouveaux enregistrements A que vous voulez ajouter à votre zone DNS. Pour chaque enregistrement A, vous devrez spécifier le nom d'hôte (par exemple, www) et l'adresse IP (par exemple, 192.0.2.1). - Localisez la section des enregistrements CNAME
Ensuite, trouvez la section où vous pouvez gérer les enregistrements "CNAME". Un enregistrement "CNAME" est utilisé pour faire correspondre un nom de domaine à un autre. - Ajouter un nouvel enregistrement CNAME
Cliquez sur l'option "Ajouter un enregistrement CNAME" ou "+Ajouter". Ici, vous devrez spécifier le nom d'hôte (par exemple, blog) et le nom de domaine cible (par exemple, exemple.com). - Enregistrez vos modifications
Une fois que vous avez ajouté les deux nouveaux enregistrements A et l'enregistrement CNAME, veillez à enregistrer vos modifications en cliquant sur le bouton "Enregistrer" ou "Mettre à jour".
Note : veuillez noter que les modifications apportées aux enregistrements DNS peuvent prendre jusqu'à 48 heures pour prendre effet, en raison du fonctionnement de la mise en cache DNS. Toutefois, le processus est généralement plus rapide et peut prendre de quelques minutes à quelques heures.
Configurer les types A
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in facilisis libero, eget congue lorem. Nulla non ligula eget erat aliquam lacinia a eget felis. Nulla turpis sapien, ultricies sit amet suscipit quis, auctor id risus.
Configurer le type C
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in facilisis libero, eget congue lorem. Nulla non ligula eget erat aliquam lacinia a eget felis. Nulla turpis sapien, ultricies sit amet suscipit quis, auctor id risus.
Voici un exemple d'une console DNS avec les deux adresses de type A et le CNAME paramétrés correctement :
Une fois que le nom de domaine a été connecté correctement, Webflow peut confirmer ceci en affichant le statut "Connected" :
Note : Le processus de connexion peut prendre jusqu'à 48h selon le registrar.
Si vous avez plusieurs domaines connectés à votre site internet, vous avez également la possibilité de choisir un nom de domaine par défaut. Ceci permet de rediriger tous les noms de domaines sur le nom de domaine par défaut/principal.
Publier et dépublier mon site sur un nom de domaine
Avec Webflow vous avez la possibilité de facilement publier et dépublier votre site internet d'un nom de domaine, sans à avoir à modifier le nom de domaine :
1. Connectez-vous à votre compte Webflow
C'est là que vous pourrez gérer votre site web et le publier sur votre domaine.
2. Sélectionnez le site web que vous souhaitez publier ou dépublier
Une fois connecté, sélectionnez le site web que vous souhaitez publier ou dépublier. Vous verrez une liste de tous les sites web que vous avez créés dans votre compte Webflow.
3. Cliquez sur le bouton "Paramètres"
Après avoir sélectionné votre site web, cliquez sur le bouton "Paramètres". Cela ouvrira les paramètres du site web, où vous pourrez configurer les options de publication de votre site web.
4. Allez à la section "Domaines"
Dans les paramètres du site web, allez à la section "Domaines". C'est là que vous pourrez ajouter votre domaine et configurer les options de publication de votre site web.
Ajoutez votre domaine
Si vous ne l'avez pas déjà fait, ajoutez votre domaine à votre site web. Vous pouvez le faire en cliquant sur le bouton "Ajouter un domaine personnalisé" et en entrant le nom de votre domaine.
Publiez votre site web
Pour publier votre site web, il suffit de cliquer sur le bouton "Publier". Votre site web sera alors accessible à l'adresse du domaine que vous avez ajouté à l'étape 5.
5. Dépublier votre site web
Pour dépublier votre site web, allez à la section "Domaines" dans les paramètres du site web et cliquez sur le bouton "Dépublier". Cela rendra votre site web non accessible à l'adresse du domaine que vous avez ajouté à l'étape 5.
Note: Il est important de noter que les modifications apportées à l'adresse de votre site web et à ses options de publication peuvent prendre quelques minutes pour prendre effet. Cependant, une fois que cela est fait, votre site web devrait être accessible à votre domaine souhaité.
Foire aux questions (FAQ)
Qu'est-ce que Webflow ?
Webflow est une plateforme de développement de sites web qui vous permet de créer des sites web sans avoir besoin de coder.
Ai-je besoin de connaissances en codage pour utiliser Webflow ?
Non, Webflow est conçu pour être facile à utiliser pour les personnes qui n'ont pas de connaissances en codage. Vous pouvez utiliser l'interface de type glisser-déposer pour créer votre site web.
Quels sont les tarifs de Webflow ?
Webflow propose des plans tarifaires payants, mais il offre également une version gratuite limitée appelée "Plan Starter". Avec le plan gratuit, vous pouvez créer jusqu'à deux projets avec un nombre limité de pages et de formulaires. Le plan gratuit ne permet pas l'utilisation de certaines fonctionnalités avancées telles que la possibilité d'utiliser un domaine personnalisé, l'hébergement de sites de commerce électronique, et la création de sites avec membres et CMS.
Si vous avez besoin de plus de fonctionnalités ou d'un plus grand nombre de projets, vous pouvez passer à un plan tarifaire payant qui offre des fonctionnalités supplémentaires et des options d'hébergement plus avancées. Le coût des plans tarifaires payants varie en fonction de la complexité et de la taille de votre projet.
Comment puis-je publier mon site web créé avec Webflow ?
Pour publier votre site web, vous devez acheter un plan d'hébergement Webflow et connecter votre nom de domaine à votre site web. Vous pouvez ensuite publier votre site web en un seul clic.
Puis-je ajouter des fonctionnalités personnalisées à mon site web créé avec Webflow ?
Oui, vous pouvez ajouter des fonctionnalités personnalisées à votre site web créé avec Webflow en utilisant du code personnalisé ou en utilisant les intégrations proposées par Webflow.
Comment modifier le contenu de mon site internet avec Webflow ?
Webflow dispose d'un système de gestion de contenu (CMS) qui vous permet de facilement modifier le contenu de votre site web sans avoir besoin de toucher au code. Voici les étapes pour modifier le contenu de votre site internet avec Webflow :
- Connectez-vous à votre compte Webflow et accédez au projet de site web que vous souhaitez modifier.
- Cliquez sur l'onglet "CMS" dans la barre de navigation supérieure.
- Vous verrez une liste de collections CMS que vous avez créées pour votre site web. Cliquez sur la collection qui contient le contenu que vous souhaitez modifier.
- Une fois que vous êtes dans la collection, vous pouvez ajouter, modifier ou supprimer des éléments en utilisant l'interface de type glisser-déposer de Webflow. Par exemple, vous pouvez modifier le texte, les images ou les liens de votre contenu.
- Après avoir effectué les modifications, assurez-vous de publier les changements en cliquant sur le bouton "Publier" en haut à droite de l'interface.
C'est aussi simple que cela ! Le système CMS de Webflow est très facile à utiliser et vous permet de modifier le contenu de votre site web rapidement et facilement.
Veuillez-vous référer à ce guide pour en savoir plus.
J'ai fait une erreur en modifiant mon site internet comment puis-je corriger ceci?
Webflow offre une fonctionnalité de sauvegarde automatique, qui enregistre régulièrement des versions précédentes de votre site web. Si vous rencontrez un problème avec votre site Webflow, vous pouvez restaurer une version antérieure en accédant à la section "Backups" de votre site Webflow et en sélectionnant la version que vous souhaitez restaurer.
Webflow offre-t-il un service d'assistance clientèle ?
Oui, Webflow propose un service d'assistance clientèle par e-mail, chat en direct et forums de la communauté. Vous pouvez également consulter leur base de connaissances pour trouver des réponses à vos questions.