Créer un bouton Imprimer la page sur son site Webflow

Si vous êtes propriétaire d'un site Webflow et que vous souhaitez offrir à vos utilisateurs la possibilité d'imprimer facilement une page de votre site, ajouter un bouton "Imprimer la page" peut être une solution simple et efficace.

Dans cet article, nous allons vous montrer comment ajouter un bouton d'impression à votre site Webflow en quelques étapes simples.

Étape 1 : Ajouter un bouton sur sa page

La première étape de ce tutoriel consiste à ajouter un bouton sur votre page. Pour ce faire, vous devez tout simplement insérer un élément link block ou button sur votre page (vous pouvez aussi utiliser d'autres types d'éléments si vous le souhaitez vraiment).

Vous pourrez personnaliser entièrement le style et les interactions de l'élément qui servira de bouton (pensez à bien nommer votre classe pour garder une structure Client-First).

Pro Tip : Pour garder un site web accessible, nous vous conseillons d'ajouter les attributs personnalisés suivants à votre bouton

Name : role
Value : button

&

Name : aria-label
Value : Bouton pour imprimer la page web

Étape 2 : Donner un ID au bouton

Maintenant que vous avez ajouté le bouton à votre page, vous devez lui donner un ID personnalisé. Pour ce faire, sélectionnez le bouton, puis accédez à l'onglet "Settings" dans la barre latérale droite de Webflow. Sous l'option "ID", vous pouvez entrer l'ID que vous souhaitez utiliser pour le bouton.

Dans notre exemple, nous avons utilisé l'ID "print".

Étape 3 : Ajouter un script

Dans cette troisième étape, vous devez ajouter un script qui permettra au bouton d'imprimer la page lorsqu'il est cliqué. Pour ce faire, vous pouvez ajouter le script suivant dans les paramètres de votre page (dans la section : Before </body> tag) :

<script> 
$("#print").click(function() { window.print(); }); 
</script>

Si vous n'avez pas utilisé l'ID "print" dans l'étape précédente, il faudra remplacer #print par #VotreID.

Bonus : Personnaliser ce qui doit être imprimé

Enfin, vous pouvez personnaliser ce qui doit être imprimé ou non en utilisant des règles CSS. Pour ce faire, vous pouvez ajouter du code CSS dans les paramètres de votre page (dans la section : Inside <head> tag).

Par exemple, si je ne souhaite pas qu'il y ait ma navbar et mon footer lorsque j'imprime la page, je peux ajouter le code suivant :

<style> 
@media print {
  .navbar3_component, .footer7_component {
    display: none;
  }
}
</style>

Ici "navbar3_component" et "footer7_component" sont respectivement les noms des classes de ma navbar et mon footer.

Dans "@media print{", on peut ajouter le CSS que l'on veut pour personnaliser l'impression de sa page au maximum.

Étape Finale : Publier son projet

Il vous faudra publier votre projet pour tester le bouton et pouvoir imprimer votre page web !

En suivant ces quelques étapes simples, vous pouvez ajouter un bouton "Imprimer la page" à votre site Webflow pour faciliter l'impression de vos contenus. N'oubliez pas que la personnalisation de l'affichage de votre page imprimée est une étape importante pour offrir une expérience utilisateur optimale.

Pour aller plus loin dans Webflow, vous pouvez également découvrir comment ajouter un bouton d'ajout au calendrier sur votre projet !