cms

Présentation du CMS Wagtail

Nous vous détaillons toutes les fonctionnalités de base du CMS ainsi que celles que nous avons développés pour optimiser les sites internet réalisés par ce CMS.

Alexis Le BaronAlexis Le Baron

Alexis Le Baron

Développeur chez Snoweb

Publié le 16 mars 2021 15:36 (Mise à jour le 16 avril 2021 16:05)

Wagtail est un CMS conçu avec Django. Il permet de créer des pages web facilement pour différents types de sites internet. On peut donc créer :

  • Site vitrine : permet de mettre en avant l'activité d’une entreprise.
  • Portfolio : met en avant les réalisations d'un professionnel, qu'il soit architecte, écrivain, artiste ou encore développeur.
  • Blog : gère les articles d'un blog et les affiche selon des critères de recherche.
  • E-commerce : permet de mettre en avant des produits et de les vendre.
  • Documentation : centre d'aide pour les utilisateurs sous forme de questions / réponses.
  • Et bien d'autres

Le CMS Wagtail se différencie de Wordpress par sa forte personnalisation. Il permet de créer des CMS rapidement avec des outils pour faciliter la vie du développeur.

D'ailleurs, ce site a été créé avec Wagtail 😇

content-cms-site-vitrine-wagtail-light

Les fonctionnalités de Wagtail


Nous détaillons ici quelques fonctionnalités de Wagtail. Retrouvez la liste des fonctionnalités générales d'un CMS ici.

Page du site internet

Actions sur les pages

Wagtail possède un model "Page" sur lequel il est possible d'effectuer plusieurs actions pour accélérer la production des pages.

  • Duplication de page

Cela vous permet de dupliquer à l'identique une page. Un vrai gain de temps lorsque vous devez créer des pages qui se ressemblent ! Créez-en une puis dupliquez-la et modifiez ensuite son contenu.

  • Alias

Un alias est une copie d'une page. Cependant, contrairement à une duplication, l'alias reste synchronisé avec sa page d'origine.

  • Déplacement de page

Cette action permet de déplacer une page d'un site à un autre ou de lui affecter une nouvelle page mère.

Quelques exemples de pages

  • Article de blog : la page d'un article de blog dispose d'un sommaire qui se met à jour automatiquement selon le contenu de l'article, d'articles à lire en lien avec l'article de la page et enfin une option de partage de l'article sur les réseaux sociaux.
  • Page portfolio : cette page est utile pour présenter des réalisations. L'idée d'avoir une page par réalisation permet de n'afficher seulement l'essentiel et de ne pas forcément entrer dans tous les détails.
  • Page document : page particulièrement pratique : elle dispose d'un document intégré comme un PDF par exemple. L'internaute peut alors télécharger ce document, le partager ou l'imprimer.
content-cms-wagtail-pages-dark

Blocs

Steamfield

StreamField permet d'avoir un modèle d'édition de contenu d'une page libre. Les différents types de contenu représentés par des blocs, peuvent être dupliqués et agencés dans n'importe quel ordre.

Personnellement, je trouve que c'est la plus belle invention du CMS.

Grâce à lui, une page de texte peut être coupée par :

  • Titres
  • Sous-titres
  • Images
  • Vidéos
  • Illustrations
  • Tableaux
  • Extrait de code
  • Citation
  • Etc.

RichText

De nombreuses options s'offrent à vous pour modifier le style de votre texte. Vous pouvez organiser la mise en page sur votre site comme vous le souhaitez grâce à ces fonctionnalités :

  • Gras
  • Italique
  • Barré
  • Surlignage
  • Ombre
  • Liste numérotée
  • Citation
  • Interlignage
  • Liens
  • Séparation
  • Etc.

Pensez à la lisibilité de vos textes ! Dans cet article nous vous donnons des astuces pour améliorer l'ergonomie de votre site internet.

Quelques exemples de blocs

  • Timeline : Ce bloc vous permet de raconter l'histoire de votre marque sous forme de frise temporelle. Elle vous permet de définir plusieurs étapes avec des dates, images, et texte.
  • Table : Créez des tableaux efficaces en quelques clics avec des valeurs numériques ou des images : idéal pour présenter une grille de tarifications !
  • Accordéon : La fonction "Texte accordéon" (ou en section dépliable) permet d'étendre une zone de texte longue. On retrouve souvent ce type de blocs pour des FAQs avec le système de questions / réponses.
  • Numbers : Présentez une idées sous forme de nombres ! Vos chiffres clés, le nombre de vos clients, de vos collaborateur ou encore le nombre de café que vous buvez, tout est possible ! Une petit animation viendra égailler le tout.
content-charte-graphique-typographie-light

Multi-sites

Vous avez un projet ambitieux qui inclus plusieurs sites ? Wagtail gère les projets de multi-sites sans alourdir le chargement de vos sites. Si votre marque est présente dans plusieurs langues, la création d'un site multilingue est facilitée et prévue sans ajout de module complémentaire.

Vous pouvez aussi gérer vos sites différemment les uns des autres dans les différentes langues.

Plus de détails sur la fonctionnalité multi-site de Wagtail dans cet article.

Formulaire

Pour permettre à vos cibles et prospects de vous contacter, vous avez la possibilité de créer des formulaires complets. Vous pouvez y intégrer jusqu'à 13 types de champs différents et vous pouvez indiquez certains champs comme obligatoires.

Voici quelques champs disponibles :

  • Text : texte court du type "nom" ou "prénom"
  • Textarea : texte long du type "description"
  • Email : adresse e-mail
  • Number : numéro de téléphone
  • Date : choix d'une date
  • Checkbox : cases à cocher multiples
  • Radio : Case à cocher unique
  • Url : lien vers une page web
  • Select : liste déroulante
  • Etc.

Vous collaborez dans votre équipe à l'aide de Slack ? Récupérez sans peine le contenu d'un formulaire sur un channel Slack pour intégrer le contenu d'un formulaire ou d'une section HTML reçus par e-mail directement sur votre site web.

Il est possible de personnaliser et de recevoir les informations du formulaire en fonction de votre besoin.

Pensez à bien structurer vos formulaires ! Dans cet article nous vous donnons des astuces pour améliorer l'ergonomie de votre site internet.

Embed

Cette fonctionnalité vous permet d'intégrer à votre page un élément de contenu externe embarqué :

  • vidéo youtube, vimeo, ect...
  • pdf
  • page web
  • iframe

Images

Les images d'un site web peuvent considérablement impacter ses performances. Avec Wagtail, les images sont optimisées pour qu'elles aient un poids optimal. De plus, Wagtail redimensionne les images automatiquement pour garantir un format idéal sans perte de qualité.

Grâce au lazy loading, le chargement de l'image se fait au bon moment. Intégrez une image sur un site en quelques clics, elle se redimensionnera automatiquement et convertira les formats png ou jpg en webp.

Enfin, trier et ranger vos images grâces au collections de Wagtail.

Gestion des utilisateurs

Depuis le back-office, vous pouvez gérer et donner accès aux membres de votre équipe pour éditer du contenu. Il existe plusieurs niveaux de droits d'accès et vous avez la possibilité de voir en direct les actions réalisées par les autres membres.

Grâces au collections de Wagtail, vous pouvez trier et ranger vos documents.

content-cms-wagtail-gestion-utilisateurs-light

Sitemap

Pour le référencement naturel, il est utile de créer un sitemap. Il va améliorer l'exploration du site par les moteurs de recherche. Avec Wagtail, vous pouvez gérer les sitemap de tous vos sites y compris les multilingues.

Workflow

Lorsque que vous avez une équipe éditoriale, vous pouvez organiser le contenu à produire. Vous pouvez automatiser ces différentes phases de rédaction :

  • Relecture
  • Mise en brouillon
  • Publication

API

Connectez les données de vos pages, sites et blocs à une API. Wagtail dispose d'outils pour qu'un développeur puisse facilement le faire. Vous avez donc la possibilité de transmettre les données de votre système de gestion de contenu à n'importe quelle autre application.

Redirection des pages

Il arrive parfois que les URL de vos pages changent. Par exemple, lors d'une refonte de site internet, ma page /contact est maintenant en /rendez-vous dans la barre d'adresse de mon navigateur. Grâce aux redirections, vous pouvez facilement indiquer à Google ce changement de page pour votre référencement naturel.

Fonctionnalités techniques


Voici une liste de quelques fonctionnalités techniques que nous utilisons avec Wagtail pour améliorer les pages.

Pages statics

Grâce aux pages statiques, le chargement du texte modifié ne se fait pas depuis la base de données mais directement depuis un fichier avec toute la page web. Ce qui permet d'avoir un chargement ultra rapide ! La vitesse d'affichage des pages s'accélère afin de proposer à l'utilisateur une expérience vraiment fluide. Pour en savoir plus sur les pages statics : voir cet article

HTTPS

Le protocole HTTPS permet de sécuriser la connexion à votre site web. Les informations qui circulent sur votre site web comme les e-mail ou les mots de passe sont sécurisé.

Alpine.js

Tous nos sites sont réalisés en utilisant la technologie Alpine.js. Grâce à cela, le chargement de la page est accéléré pour plus de fluidité au moment de la lecture des pages. L'expérience utilisateur est donc améliorée !

Tailwind

Tailwind nous permet, entre autres, de donner l'apparence à votre site web. Il gère :

  • La couleurs des liens
  • La taille de la police
  • Les thèmes
  • Les buttons
  • Et bien d'autres

Ce langage nous garantit des sites bien agencés, rapides et avec un code facilement maintenable.

Sécurité niveau A

La sécurité de votre site est importante et se construit dès la conception sur le site. C'est pourquoi nous sommes très vigilants sur ces questions afin de vous prémunir contre les attaques.

content-cms-site-vitrine-code-light

CDN

La technologie CDN ou Content Delivery Network, permet d'accélérer le chargement des images et des informations tout en boostant le SEO du site !

AMP

La technologie AMP permet d'accélérer jusqu'à 85% la vitesse de chargement des pages sur mobile. Pour vous, cela signifie avoir un site avec un taux de rebond plus faible et une meilleure visibilité. Cette technologie est idéale pour la construction d'un e-commerce.

PWA

Les Applications web progressives ou PWA, rassemblent les propriétés d'un site web avec une application mobile.

Quels sont les avantages de la PWA ?

  • Un site internet qui fonctionne même si vous ne recevez plus internet
  • Il est également possible de télécharger le site internet sous forme d'application mobile depuis un navigateur web !

Fonctionnalités design


Voici une liste de quelques fonctionnalités design que nous avons ajouté dans notre Wagtail pour améliorer les pages.

content-refonte-site-internet-design-light

Theme

Couleurs

Personnalisez les couleurs de votre thème à volonté ! Laissez libre court à votre créativité et choisissez en toute autonomie les couleurs les plus adaptées pour présenter vos activités :

  • Typographies
  • Blocs de texte
  • Boutons

Typographie

Chaque marque se différencie par ses couleurs et sa typographie, alors ne perdez pas ça ! Jouez sur les styles de vos typographies pour donner de l'âme à vos textes et à votre site. Vous pouvez modifier :

  • La typographie
  • La taille
  • Les attributs des caractères comme : gras, italique, citation ...

SVG

Utiliser le format SVG c'est voir les choses à long terme ! Le SVG est un format d'image vectorielle utilisé pour des illustrations. L'atout des SVG est qu'ils sont très léger et donc ne vont pas nuire à l'optimisation de votre site.

Notre support SVG vous assure que le SVG sera lisible sur tous les navigateurs. Vous avez aussi un accès à la bibliothèque d’animations SVG pour vous permettre de les modifier directement dans Wagtail.

Micro Interactions

Les micro-interactions tendent à créer une expérience digitale vraiment immersive ! Ce sont de courtes animations pour faire interagir l'utilisateur avec le site. Cela passe par l'animation d'un bouton au passage de la souris ou encore une barre de défilement pour voir la progression sur la page web.

Sur chaque site que nous faisons, nous en proposons.

Galerie

La fonctionnalité Gallerie offre la possibilité d'ajouter ou de modifier plusieurs images mise en page sous forme de galerie photo. Elle permet d'agrémenter un article ou une page du site.

Pour chaque galerie, il est possible d'ajouter un "slider", ou carrousel, pour permettre d'afficher plusieurs images à la suite avec un défilement pour une immersion dans votre univers en quelques secondes. Le défilement entre les images est automatique.

Icons

Accédez à une bibliothèque d'icons gratuite pour personnaliser votre site et faciliter la navigation de vos lecteurs avec des pages graphiques ! Ajoutez également vos propres icons simplement si vous le souhaitez.

Autres fonctionnalités


Voici une liste de quelques autres fonctionnalités que nous avons ajouté dans notre Wagtail.

content-outil-google-search-console-light

Google Analytics

Chaque projet de site doit être pensé avec une stratégie digitale. Pour suivre le trafic et les résultats des actions marketing, nous installons un outil de suivi des statistiques sur tous nos sites.

Google Schemas

Les données structurées participent au référencement naturel des pages d'un site. Ces données attirent l'attention des internautes lorsqu'ils affichent les résultats de recherche Google. Les schémas google sont sous cette forme :

  • HowTo
  • BreadcrumbList
  • WebPage
  • FAQ

Google My Business Review

Obtenez des avis clients facilement avec l'option Google My Business Review. L'outil est connecté à votre compte Google My Business et affiche les avis reçus sur votre compte.

Newsletter

Parfaire votre présence en ligne et votre stratégie de contenu est un jeu d'enfant avec notre fonctionnalité newsletter. Récupérez les e-mails de vos prospects, envoyez et programmez vos prochaines campagnes d'emailing rapidement.

Yoast

Yoast est un plugin de référence dans le domaine du SEO. En tant qu'utilisateur, il vous sera facile de contribuer au référencement naturel de votre site en remplissant les métadonnées en quelques clics. Yoast vous affichera alors les points positifs et négatifs à travailler sur votre page.

Socials

Cette fonctionnalité est utile pour partager une actualité, une information ou article de blog sur vos réseaux sociaux. Partagez directement les liens de vos pages vers les réseaux sociaux en un clic.

Calendly

Organisez votre activité à l'aide de Calendly. Cette fonctionnalité affiche un calendrier de réservation pour que vos clients puissent réserver directement un rendez-vous avec vous. Vous recevrez une confirmation du rendez-vous par email.

Vous souhaitez en savoir plus surWagtail?