Nous avons conçu Webflow spécifiquement pour les designers et développeurs qui veulent donner vie à leurs idées rapidement, magnifiquement, et de manière responsive. Mais cela ne signifie pas que Webflow est seulement pour les initiés du design. En fait, c'est aussi une plateforme puissante pour les blogueurs de tous types, des équipes marketing internes à quiconque veut construire sa marque en ligne.
Mais pour le blogueur moyen, Webflow pourrait sembler une plateforme imposante. Nous sommes donc ici pour vous montrer qu'il est en fait assez simple de commencer à bloguer avec Webflow.
Mais d'abord …
Pourquoi bloguer avec Webflow ?
Il y a toutes sortes de raisons de bloguer avec Webflow, mais voici quelques favorites :
1. C'est facile de commencer rapidement, et d'apprendre en cours de route
Comme nous allons vous le montrer dans cet article, c'est super facile de commencer à bloguer avec Webflow.
Vous commencerez par faire de petits ajustements au design visuel et aux structures de contenu, mais vous voudrez bientôt personnaliser davantage. Et Webflow constitue une excellente plateforme d'apprentissage. En jouant avec l'outil et en regardant nos vidéos tutoriels, vous pourrez transformer votre blog en une expérience véritablement personnalisée pour vos lecteurs.
2. Webflow inclut un CMS intuitif
Pour bloguer rapidement et efficacement, vous avez vraiment besoin d'un CMS (système de gestion de contenu). Et bien qu'il existe une multitude d'options, Webflow se distingue pour deux raisons :
- Édition sur la page. Il n'y a rien de plus intuitif que de double-cliquer sur du texte et de l'éditer. Directement sur la page. C'est comme écrire et éditer sur Medium, mais vous mettez réellement à jour votre site web. Génial.
- Types de contenu facilement personnalisables. Nous appelons nos types de contenu « Collections », et il est vraiment facile de peaufiner des Collections existantes, ou d'en créer de nouvelles depuis zéro, surtout à mesure que vous maîtrisez le Designer.
Lectures connexes : Comment utiliser Webflow CMS comme outil de modélisation de contenu
3. C'est favorable au SEO
Si vous êtes sérieux au sujet du blogging, vous devez aussi être sérieux au sujet de l'optimisation pour les moteurs de recherche (SEO). Car c'est ainsi que les gens trouvent le contenu formidable que vous produisez.
Heureusement, Webflow vous aide à exceller en SEO en étant :
- Rapide
- Codé proprement
- Responsive
De plus, il vous permet de :
- Définir vos structures d'URL (qui sont par défaut dans un format convivial, c'est-à-dire lisible)
- Générer automatiquement les meta-titres, descriptions, et paramètres Open Graph (OG) basés sur votre contenu, afin que vous puissiez utiliser des champs déjà écrits pour les métadonnées, ou les créer manuellement
- Ajouter des balises alt aux images
Bon, maintenant que c'est réglé, voici comment commencer à bloguer avec Webflow.
Lectures connexes : SEO de site web : le guide ultime pour se classer sur Google
Comment commencer à bloguer avec Webflow
Bon, passons aux détails concrets.
Étape 1 : Choisissez un modèle CMS Webflow
D'abord, consultez nos modèles responsives, et assurez-vous de cliquer sur le filtre « CMS ». (Si vous avez cliqué sur ce lien, c'est déjà fait pour vous.)
Pourquoi ? Parce qu'utiliser un modèle alimenté par CMS vous donne accès à l'édition sur la page et au panneau CMS, donc vous n'aurez pas besoin de plonger dans le Designer plus complexe jusqu'à ce que vous soyez prêt.
Nous avons plusieurs modèles alimentés par CMS, mais pour garder les choses simples, nous utiliserons le modèle de blog Tokyo, gratuit et minimaliste.
Si vous le souhaitez, vous pouvez aussi consulter nos modèles de blog, car ce sont aussi des modèles CMS (système de gestion de contenu), mais ils sont filtrés spécifiquement pour les sites de blog uniquement.
Étape 2 : Personnalisez le design de votre site
Pour garder les choses simples, nous ferons juste quelques petits ajustements au design visuel du modèle de blog Tokyo en utilisant le Webflow Designer.
Mise à jour de la typographie
D'abord, nous mettrons à jour la police par défaut du site. La typographie a un effet massif sur la façon dont les gens perçoivent et ressentent un site web, donc c'est un changement simple avec beaucoup de retour sur investissement.
La police par défaut du modèle, Montserrat, est une sans serif géométrique amicale, ce qui est sympa. Mais nous cherchons à écrire des avis d'applications concentrées sur les besoins des travailleurs tech modernes, donc nous voulons quelque chose de plus digne.
En parcourant le menu déroulant de police dans le panneau Typographie, nous ne voyons rien qui convienne exactement, donc nous allons aux paramètres de notre site en cliquant sur le W dans le coin supérieur gauche, puis Site Settings.
Puis cliquez dans l'onglet Fonts et ouvrez le menu déroulant Google Fonts – où nous pouvons choisir parmi n'importe laquelle de l'immense collection de Google Fonts.
Nous allons choisir une autre sans serif appelée Work Sans, donc nous la chargeons (en s'assurant de sélectionner le poids fin, qui a une sensation de design suisse délicat) et retournons au Designer.
Pour garder les changements efficaces, nous voulons faire de Work Sans la police par défaut pour tout le site. Pour cela, nous devons en faire la police du Body du site.
Dans Webflow (et dans le web design en général), Body est l'entité fondamentale de votre site, donc si vous voulez qu'un choix de style affecte tout sur le site, commencez là. Pour sélectionner le Body et le styliser, je clique sur "Body" dans le navigateur à gauche du Designer.
Puis, dans le panneau de style à droite du Designer, je clique dans le champ Selector, et sélectionne Body (All Pages). Cliquez sur cette balise, puis c'est de retour au panneau Typographie pour choisir la nouvelle police, et bam(!) – le rebranding a commencé.
Remarque : en général, il est préférable de styliser les balises plutôt que de créer des sélecteurs uniques pour tout sur votre site. Cela garantit que vos changements ont les effets les plus larges, et aide à garder votre code propre.
Le basculement de la balise Body vers Work Sans a changé une grande partie du texte sur le site, mais pas tout. C'est parce qu'une des lois essentielles du CSS est la spécificité : les classes plus spécifiques prennent le dessus sur les moins spécifiques. C'est pourquoi des éléments comme les titres restent en Montserrat : la balise de titre est plus spécifique que la balise body.
Donc maintenant nous allons parcourir tout le texte qui est encore en Montserrat, et le mettre à jour vers Work Sans. Après avoir changé le nom du site, venons aux liens nav, et un autre élément important de Webflow.
Quand nous cliquons sur le lien « Blog », nous voyons qu'il a deux sélecteurs : Nav Link et Current. « Current » nous dit qu'une transition est appliquée à ce sélecteur. Puisque le web est un médium interactif, le site peut refléter les actions que les gens font sur le site. Dans ce cas, le sélecteur change de couleur pour montrer que Blog est la page actuelle.
Cela n'affecte pas les changements de police, mais c'est à noter à mesure que vous approfondissez les personnalisations de design dans Webflow.
Une fois la page d'accueil (flux du blog) terminée, passez au modèle de pages individuelles d'articles de blog (en utilisant le sélecteur de page en haut à gauche). Ici nous voyons que tandis que le texte du corps est défini en Work Sans, les titres restent en Montserrat.
La difficulté est que nous ne pouvons pas styliser directement le contenu de l'article de blog puisqu'il est, encore une fois, tiré de la Collection. Donc nous ajouterons un deuxième champ Rich Text au canevas et lui donnerons le même nom de classe que le contenu dynamique (dans ce modèle, « Blog Content »). Ensuite nous pouvons styliser les H2 et H3 dans le rich text et observer les sous-titres se mettre à jour dans le contenu du blog ci-dessus.
N'oubliez surtout pas de supprimer cet élément Rich Text que vous avez ajouté ! Sinon, il apparaitra sur chaque article de blog que vous publiez. (Idem pour tout élément non dynamique que vous ajoutez à un modèle de page de Collection.)
Ajouter un peu de style Material avec une ombre de boîte
Bon, donc simplement changer la police de notre blog en a beaucoup transformé. Mais nous voulons faire un autre changement simple qui aura aussi beaucoup d'impact.
Comme je suis un grand fan de l'approche de design Material de Google et des interfaces basées sur des cartes, nous voulons transformer ces teasers de blog en cartes. Ne vous inquiétez pas, c'est super simple.
Sélectionnez simplement tout le conteneur pour le teaser – cette chose qui englobe l'image, le titre de l'article, les métadonnées, l'extrait, et le lien – puis ajoutez une ombre de boîte depuis la section Effects du panneau de style.
Et voilà, nous avons rendu notre blog assez distinct de notre modèle source, et il a toujours l'air formidable. Tout cela sans toucher au code.
Étape 3 : Personnalisez vos Collections
Comme mentionné précédemment, nous appelons les types de contenu « Collections » – et elles sont faciles à rendre vôtres. C'est aussi ici que nous plongeons dans le côté Designer du CMS Webflow !
D'abord, vous devrez mettre à jour la Collection Categories pour correspondre aux sujets sur lesquels vous écrirez. Alors, ouvrez simplement le panneau Collections à gauche, cliquez sur Categories, puis parcourez chaque catégorie, en mettant à jour ce qui est pertinent pour votre blog.
En faisant cela, assurez-vous de mettre à jour à la fois le champ Name et l'URL. Après tout, vous ne voulez pas que vos articles sur les applications web aient « musique » dans leur URL (à moins bien sûr que ce soit une application de musique) !
Vous verrez un avertissement indiquant que changer l'URL cassera l'ancienne URL, mais c'est correct. Vous n'avez pas encore publié, donc vous n'avez en fait cassé aucune URL encore, et tous les articles de blog associés aux catégories que vous éditez se mettront à jour automatiquement.
Si vous avez besoin de plus de catégories, cliquez simplement sur +New, et si vous en avez besoin de moins, cliquez simplement sur Delete dans la catégorie.
Étape 4 : Mettez à jour les articles de blog d'exemple
Chaque modèle Webflow vient avec du contenu d'exemple pour remplir le design, mais vous voudrez évidemment mettre à jour tout ce contenu pour correspondre à votre vision éditoriale.
Vous pouvez faire cela de deux façons :
- Mettez à jour le contenu dans le Designer, avant la publication. Si vous êtes préoccupé que quelqu'un voie votre blog rempli de contenu d'exemple, vous voudrez peut-être prendre cette voie.
- Publiez votre site et mettez à jour le contenu dans l'Editor. Puisque les chances que quelqu'un tombe accidentellement sur notre blog flambant neuf sont faibles – et parce que je veux vous présenter l'Editor – nous prendrons cette voie.
Pour publier votre site, cliquez simplement sur le bouton Publish en haut à droite, puis cliquez sur l'icône de lien à droite du nom du site. Cela ouvrira le site dans l'Editor – le côté front-end du système de gestion de contenu de Webflow.
À la différence du tableau de bord de WordPress, l'Editor Webflow ne se comporte pas (majoritairement) comme un backend. Au lieu de cela, il vous permet de vous déplacer sur le site en utilisant vos liens de navigation réels sur la page et d'éditer le contenu directement sur la page.
En tant que rédacteur, c'est incroyablement précieux, car la façon dont les mots apparaissent sur la page compte vraiment. De plus, cela supprime une couche d'abstraction ennuyeuse entre vous et votre contenu quand vous n'avez pas à "prévisualiser" vos changements.
Remarque : changer le titre d'un article de blog sur la page ne modifiera pas son URL. Vous pouvez faire cela dans le Editor Panel.
Pour ouvrir le Editor Panel, cliquez simplement sur Pages ou Collections. Le panneau glisse alors vers le haut, vous permettant de parcourir votre contenu statique (Pages) et contenu dynamique (Collections). Puis cliquez simplement sur un article pour l'ouvrir et mettre à jour le titre et l'URL.
Ce qui est formidable ici, c'est que la page d'accueil (flux du blog) tire les titres et URL des articles de blog dynamiquement, donc vous ne casserez pas réellement d'URL (encore une fois !).
Remarque : éditer les URL de pages statiques cassera les liens vers elles, puisqu'elles ne sont pas dynamiques.
Maintenant vous êtes en route pour créer un magnifique blog dans Webflow.
Autonomiser les créateurs de contenu et designers
Capter l'attention dans le climat en ligne d'aujourd'hui devient féroce. Vous avez besoin d'une plateforme qui vous permet de vous démarquer. Une plateforme qui vous permet de vous marquer vous-même et de créer un site web totalement original – avec du code propre et le SEO à l'esprit.
À mesure que le web devient plus accessible, et que plus de gens créent du contenu formidable en ligne, l'image de marque et la stratégie de contenu deviendront le facteur différenciant.
Avec cela, il est important de trouver des façons de fusionner création de contenu et développement visuel ensemble. Pensez à comment votre contenu alimente vos designs et comment vos designs alimentent votre marque. Voici à une nouvelle vague de création.
