Valider son code personnalisé directement dans Webflow

Webflow est un outil no-code super pour créer des sites web personnalisés. L'outil offre une large gamme de fonctionnalités natives afin de développer des projets professionnels. Cependant, il se peut que si vous souhaitez utiliser une fonctionnalité "avancée", il vous faille coder un peu. Webflow dispose d'option pour ajouter du code personnalisé à son projet, mais il y a quelques limites à son éditeur de code.

Dans notre article, nous allons parler d'une extension qui permet de changer le thème de son code et de le valider directement dans l'outil Webflow !

Ajouter du code personnalisé dans Webflow

Dans Webflow, vous pouvez ajouter du code :

Dans la balise <head> du projet (via les paramètres généraux du projet)
Dans la balise <head> de vos pages (via les paramètres de vos pages)
Avant la fermeture de la balise <body> de vos pages (via les paramètres de vos pages)
Avant la fermeture de la balise <body> du projet (via les paramètres généraux du projet)
Directement dans votre page (avec un élément "embed")

Les inconvénients de l'éditeur de code de Webflow

Il y a deux points "négatifs" concernant le custom code de Webflow :

Webflow ne valide pas votre code directement dans l'outil (il y a un message "Le code personnalisé n'est pas validé. Un code incorrect peut causer des problèmes avec la page publiée." lorsqu'on ajoute du code personnalisé dans l'éditeur de code). Les erreurs ne sont pas détectées (par exemple une syntaxe qui manque).
On ne peut pas changer le thème du code (la personnalisation des couleurs du code pour mieux identifier les fonctions, les variables, les balises, etc.)

Ces deux points peuvent être contraignants si l'on veut optimiser son développement. En effet, une erreur de code peut vite arriver. Bien évidemment la console peut nous aider à identifier les erreurs, mais cela signifie de publier notre projet, d'inspecter la page, détecter notre erreur, revenir sur le projet, la corriger, etc., etc.

L'extension Code Pro For Webflow

Heureusement, l'agence Webflow Vconnectdots a compris ce problème et résout ces contraintes grâce à leur extension Code Pro For Webflow. Grâce à cette extension chrome, il est possible d'optimiser et personnaliser l'éditeur de code Webflow.

L'extension permet de :

Valider le code
Ajouter des thèmes à l'éditeur de code Webflow

Validation du code Webflow

La validation du code dans Webflow est un défi pour les développeurs web. Webflow ne valide pas les codes personnalisés, ce qui peut poser des problèmes pour les développeurs. Code Pro For Webflow valide le code HTML, CSS et JavaScript.

S'il y a un problème de syntaxe ou une autre erreur, une petite icône va s'afficher à côté de la ligne qui cause le problème. Si l'erreur est critique, alors l'icône est un rond rouge avec une croix à l'intérieur, sinon nous avons une icône avertissement en jaune.

En survolant l'icône, nous pouvons avoir des détails sur le problème, l'erreur qu'il y a.

On peut également venir choisir de cocher ou décocher l'option de validation pour le code.

Ajout de thèmes à l'éditeur de code Webflow

En ce qui concerne l'éditeur de code Webflow, il n'y a pas encore d'options de thème disponibles. Les développeurs préfèrent souvent coder sur un fond sombre pour une meilleure coloration syntaxique et une distinction visuelle plus claire entre les différents éléments de code. Cependant, il n'y a pas encore de thèmes disponibles dans Webflow.

Avec Code Pro For Webflow, nous avons le choix entre 15 thèmes différents (3024 Night, Ambiance, Base16 Dark, Base 16 Light, etc.). Pour choisir un thème, il suffit de cliquer sur le bouton "Change Theme" au-dessus de l'éditeur de code.

Cette extension pour Webflow permet de gagner énormément de temps et optimiser l'ajout de custom code dans son projet. Pour améliorer encore plus sa productivité dans Webflow, n'hésitez pas découvrir le Top 5 des extensions Webflow à avoir !

Découvrez également comment utiliser ChatGPT pour ajouter du code facilement à son projet !