Comment mettre en ligne mon site sur Webflow

Une tutoriel complet, et des astuces pour mettre votre sit en ligne votre site Webflow sur votre nom de domaine

Par

Camille

10 mins

mins de lecture

Sommaire

Partager

Vous êtes prêt à mettre votre nouveau site en ligne ?

Voici un article qui va couvrir de A à Z la démarche pour le faire vous même, et ce, peu importe que vous soyez technique ou non.

Vérifier mon site

La première chose qu’il est important de se demander avant de rendre publique votre nouveau site Webflow, c’est “est-ce que mon site est prêt ?”

Je vous ai préparé une petite checklist des choses à vérifier :

  • Les meta description et title tag : très important pour votre référencement, ils sont modifiables en quelques cliques dans Webflow
  • Le responsive : il est primordiale que votre site soit visionnable sur toutes les tailles d’écran, et cela inclu le mobile, mais aussi les tablettes et les écrans de plus de 1920px
  • Les alt texts de vos images : c’est la crème de la crème, mais si vous avez la possibilité de vérifier les alt texts de votre site au passage, votre référencement n’en sera que meilleur !
  • Des effets de hover sur tous les éléments cliquables (voir ici, comment ajouter des effets de hover simple sur Webflow)
La plupart des développeurs considèrent que le projet est terminé dès la mise en ligne, en vérifiant ces points avant, vous vous assurez que vous êtes couvert par le développement de votre site et qu’il n’y aura pas de frais supplémentaires 😉

Ce dont vous aurez besoin pour mettre en ligne votre site

  • Accès au site Webflow en tant qu’administrateur (pas éditeur)
  • Accès à la modification de la zone DNS du domaine sur lequel vous voulez publier le site
  • Avoir un plan payant sur votre site, ou de quoi en prendre un

Si j’ai parlé chinois sur l’un de ces deux éléments, je vous conseille de lire cet article sur les différents types d’accès sur Webflow ou celui-ci vous expliquant ce qu'est un DNS, pour vous permettre d’y voir plus clair !

Si vous en avez la possibilité, nous vous conseillons de partager ces accès à votre développeur afin qu'il le fasse à votre place, ou de planifier un appel pour le faire en live avec lui. Bien que la manipulation soit simple, les conséquences peuvent être importante si vous avez d'autres choses que votre site internet sur le domaine (mail ou application par exemple) et trouver les origines du problème peut s'avérer long !

Etape 1 : direction Webflow

La première chose que vous allez avoir à faire se trouve chez Webflow.

Vous allez faire un tour dans les paramètres pour changer quelques option :

Ce n'est pas obligatoire pour votre mise en ligne, mais nous vous le conseillons vivement ! Pas d'effet secondaire autre que celui d'avoir un site plus rapide 😁

Nous vous conseillons aussi de vérifier que vous avez bien une favicon et un webclip de paramètrés, cela permet une finition parfaite de votre site !

Toujours en restant dans Webflow, vous allez ensuite vous rendre dans la section "publishing

Etape 2 : Direction votre DNS

Dans notre cas, nous allons utiliser OVH. Votre interface sera peut-être légèrement différente, mais les fonctionnalités et les types seront toujours les mêmes 😉

Prenez <contact> avec nous

Nous aimons les challenges

//
Contactez-nous
-
-
->
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
5/5

Nos clients vous en parlent

Il faut avouer que nous ne sommes pas très objectifs sur nos prouesses, mais eux... oui !

Les avantages de travailler avec Codelius : réactivité, flexibilité et rigueur.

Mathieu

CEO @ hyffen

L'équipe Codelius est exceptionnelle : professionnelle, très compétente et profondément investie dans la réussite du projet. Leur contribution a été essentielle au développement de notre site. Ils nous ont apporté une vraie valeur, aussi bien dans le prototypage avancé que dans le suivi en production. Nous les considérons vraiment comme une extension de notre équipe.

Juliet Clark

Head of Product, BoxMedia

Travailler avec Codelius et Camille a été une expérience fantastique. Camille est une véritable experte avec une connaissance et une expérience très étendues de Webflow. La collaboration s’est toujours faite d’égal à égal et la communication était simple et agréable. J’ai vraiment apprécié son initiative lorsqu’elle proposait des retours sur les idées de design et sa volonté de mettre en place une structure solide pour les couleurs et les composants derrière le design. J’ai beaucoup appris grâce à notre collaboration et je choisirais Codelius à nouveau sans hésiter.

Isabell H.

Senior Product Designer

Collaborer avec Camille a été très simple. Nous avons travaillé via un Google Doc et WhatsApp, et une seule visioconférence rapide a suffi. J’ai été très satisfait du prix ainsi que de la qualité du site.

Chris Tyler

Founder @ Search Party Capital

Camille est tellement forte que je ne vous la recommanderai pas je veux la garder pour moi tout seul ;p Super fluide, rapide et diablement efficace. Clairement au-dessus des mes attentes et brief parfaitement cerné avec finalement peu d'éléments. Une pépite !

Basptiste W.

CEO @ uRoot

[...] Codelius a su répondre à ce besoin, en nous offrant des résultats rapides et propres. Lorsque nous avons eut des besoins un peu plus poussés, [...] ils ont su aller au-delà de la technologie pour créer une solution custom ! Ils sont restés présents et disponibles pour répondre à nos questions et nous aider à prendre en main le tout !

Grégoire G.

CEO @ Albert School

Du design au développement, le rendu est celui voulu, et c'est vraiment très beau. On est ravis du projet. Côté dev pour - mise en place du design, Camille a été superbe de patience et de flexibilité pour s'assurer que j'obtienne, au pixel près, le résultat désiré. Chapeau Camille !

Jeff

Manager @ Relookitchen

Camille est la personne qu’il vous faut pour vos projets webflow, airtable et autres outils nocode. Elle est professionnelle, à l’écoute et réalise un travail de grande qualité. Je recommande sans hésitation !

Sébastien P.

Gérant @ Magicien Professionnel

Camille et l’équipe Codelius ont livré exactement ce dont nous avions besoin, dans les délais — ce fut un plaisir de travailler avec elle et nous avons hâte de retravailler avec eux à l’avenir.

Tessa

Co-Founder @ Pipeline Solution

Travailler avec l’agence Codelius et Camille a rendu l’IT agréable, pas stressant. Elle a cette combinaison unique de compréhension du design global, d’apports expérimentés, de touche artistique française et de capacité à mettre en œuvre des solutions personnalisées de bas niveau. À la fin du projet, j’aurais aimé qu’elle soit une collègue. J’espère retravailler avec elle un jour.

Adam M.

Operations Manager & BI Analyst @ Nordlux Australia

Nous sommes certifiés experts par Webflow eux-même depuis 2020. Il s’agit de notre outil de prédilection, avec Webflow nous pouvons faire des merveilles !

Nos développements Webflows prennent majoritairement leurs base depuis une maquette Figma. Elle permet à nos clients de valider un design avant de le concevoir.

Nous sommes partenaires d’une agence de webdesign pour combiner nos savoirs-faire et proposer à nos clients la meilleure option pour leurs projets les plus fous.

Pourquoi ?
Comment ?

Vos questions, nos réponses

Pourquoi ne pas simplement créer une application avec un “AI builder” ?

L’IA et les AI builders ne sont pas des solutions miracles. Ce sont des outils. Puissants, certes, mais des outils malgré tout.
Chez Codelius, nous les utilisons quotidiennement — non pas comme des solutions “tout-en-un”, mais comme des accélérateurs.

Si vous souhaitez une application fiable, évolutive et réellement adaptée à votre activité, des mains humaines restent indispensables.
L’IA peut générer des idées, des ébauches ou des composants, mais elle ne remplace ni une architecture réfléchie, ni des choix UX cohérents, ni une rigueur technique, ni un accompagnement dans la durée.

En résumé : l’IA accélère la création, mais seule l’expertise humaine garantit un produit durable.
Nous combinons les deux — jamais l’un au détriment de l’autre.

Êtes-vous des experts certifiés Webflow ?

Oui. Notre équipe est officiellement certifiée experte par Webflow depuis début 2022.

Nous nous tenons en permanence informés des meilleures pratiques, des nouvelles fonctionnalités et des évolutions de la plateforme.
Cela nous permet de livrer des projets fiables et évolutifs, ainsi que de proposer des sessions de formation basées sur les connaissances Webflow les plus récentes et les plus exigeantes.

Combien de personnes travaillent chez Codelius ?

Nous sommes actuellement une équipe de trois experts Webflow, chacun avec ses propres spécialisations : développement sur mesure, design et gestion de projet.
Lorsque c’est nécessaire, nous collaborons également avec un réseau restreint d’agences partenaires et de freelances de confiance, afin de répondre à des besoins techniques spécifiques ou à des périodes de forte demande.

Votre expérience, elle, reste toujours simple et fluide : vous disposez d’un interlocuteur unique dédié, et nous nous chargeons de tout le reste en coulisses.

Combien de temps dure le développement ?

Cela dépend de l’ampleur de votre projet : nombre de pages, niveau de complexité, animations, fonctionnalités avancées, ou encore les éléments que vous pouvez fournir (maquettes, images, guidelines, etc.).

Mais comme « ça dépend » n’est jamais une réponse satisfaisante, voici des délais réalistes basés sur les types de projets que nous réalisons.

• Site Web avec maquettes fournies
À partir de 15 jours de développement.

• Site Web conçu avec un design assisté par IA
À partir de 3 semaines (design + développement).

• Site Web avec design professionnel sur mesure
(Conçu par une agence partenaire)
À partir de 1 mois (design + développement).

• Application Webflow (comptes utilisateurs, fonctionnalités custom)
À partir de 1 semaine lorsqu’elle est construite sur un site existant.
Des fonctionnalités plus avancées peuvent étendre le délai à plusieurs mois.

• Applications natives ou applications React complexes
Conçues et développées entièrement sur mesure.
Les délais sont établis au cas par cas, mais dépassent rarement 3 mois entre la conception initiale et la mise en production.

Chaque projet a ses particularités.
La manière la plus fiable d’obtenir un délai précis est de nous expliquer ce que vous souhaitez construire : nous vous fournirons alors un planning clair, réaliste et adapté à votre ambition.