Webflow vous permet de créer des sites web sans code, pour rester rapide. Mais il est toujours possible d'ajouter du code personnalisé, pour rendre votre site plus personnalisé et encore plus puissant. Ce code personnalisé vous permettra de différencier votre site face à ceux de vos concurrents.
Pour ajouter du custom code, vous n'avez pas besoin de connaissances en programmation. Vous avez de nombreuses ressources qui vous permettent de copier-coller une couche supplémentaire de code.
Custom code Webflow, c'est quoi ?
Dès lors que vous ajoutez un élément ou style qui n'est pas natif à Webflow, on parle de custom code.
Vous pouvez ajouter trois types de langages sur Webflow :
- HTML (HyperTexte Markup Language)
Le language HTML est plutôt utilisé pour le contenu. Il permet d'indiquer au navigateur tout le contenu d'une page. C'est-à-dire, les titres, paragraphes, liens, images, etc.
En utilisant du custom code HTML, vous pouvez aussi intégrer un service tiers. Mais ce type d'intégration peut nécessiter d'ajouter aussi du CSS et du JavaScript.
Votre code HTML devra être ajouté comme HTML Embed.
- CSS (Cascading Style Sheets)
Le CSS quant à lui, prend en compte toutes les informations de style. Couleurs, position, typographie, taille, bordure, etc. Il permet donc de définir simplement les styles et classes d'un projet. Il peut aussi s'agir d'un arrière-plan, une ellipse, etc.
N'importe quel élément HTML peut donc recevoir un nom de classe pour personnaliser les styles. Chacune des modifications affectera les éléments de la même classe.
Pour ajouter un éléments CSS, vous devez créer le code CSS à l'intérieur d'une balise <style>.
- JavaScript
Le language JavaScript permet de répondre aux actions des visiteurs sur votre site. Par exemple ouvrir un pop-up, valider un formulaire, récupérer des données, etc.
Il est notamment utilisé par les utilisateurs qui maîtrisent déjà le language. Le JavaScript permet de développer un site Webflow aux fonctionnalités presque illimitées.
Le JavaScript doit être développé dans l'emplacement <body> de votre projet. Votre code sera donc placé sur chacune des pages de votre site, en bas de page. Cela permet de ne pas ralentir le temps de chargement de votre site.
En revanche, vous pouvez aussi exécuter votre code JavaScript à avant l'affichage de votre page. Vous devrez alors l'ajouter à la balise <head>.
Pour ajouter un élément JavaScript, vous devez créer le code à l'intérieur d'une balise <script>.
Comment ajouter du custom code sur mon site Webflow ?
Embed HTML
Vous pouvez ajouter du custom code directement via le panneau "Add menu". En bas, vous trouverez l'élément HTML Embed. Cela vous permet de garder le contrôle sur l'emplacement du custom code ajouté.
En passant par cette méthode, vos éléments personnalisés seront visibles directement depuis votre Designer.
Project Settings
Depuis les paramètres de votre site, vous pouvez ajouter du custom code. Vous trouverez deux emplacements de custom code : à la fin de l'élément <head> et à la fin de l'élément <body>. En ajoutant du custom code depuis les paramètres de votre site, tout ce que vous ajouterez sera associé à toutes les pages de votre site.
Page Settings
Si vous souhaitez ajouter du code à une seule page, accédez aux paramètres de votre page. En bas de votre panneau paramètres, vous trouverez une section custom code. Comme via le project settings, vous pourrez ajouter du custom code dans le <head> ou le <body>.
Nos conseils
- Si votre code personnalisé comporte des balises d'ouverture ou de fermeture, vous devez obligatoirement les ajouter pour assurer un bon fonctionnement. Aussi, évitez d'inclure des balises <html>, <body> ou <head> dans votre custom code. Sinon, votre site ou page risque de ne pas fonctionner.
- L'ajout de balises <script> externes à la balise <head> risque de ralentir le temps de chargement de vos pages. Pour améliorer les performances, vous pouvez ajouter l'attribut "async" ou "defer" dans votre balise <script>.
