How can I add a "Print Page" button to my website using Webflow and custom CSS to make the content print-friendly?

To add a "Print Page" button in Webflow and ensure the content is print-friendly, follow these steps:

​

1. Add a Print Button

• Create a button element in the Webflow Designer where you want users to initiate printing.
• Label it with text like "Print Page" to make its functionality clear.

​

2. Implement Print Functionality with Custom Code

• Go to Project Settings and click on the Custom Code tab.
• In the Footer Code section, add the following script:

  ```javascript

  <script>

    document.querySelector('.print-button-class').addEventListener('click', function() {

      window.print();

    });

  </script>

  ```

• Replace .print-button-class with the appropriate class name you've assigned to your button.

​

3. Customize Print Styles with CSS

• Go to the Page Settings of the page where you want custom print styles.
• In the Custom CSS section, add print-specific CSS rules:

  ```css

  <style>

    @media print {

      / Hide navigation bar /

      .navbar { display: none; }

      / Adjust font size for better readability /

      body { font-size: 12pt; }

​

      / Specific elements to display /

      .main-content { display: block; }

​

      / Example of hiding other non-essential elements /

      .no-print { visibility: hidden; }

    }

  </style>

  ```

• Target elements you wish to hide or adjust for print-based output using selectors like .navbar or .no-print.

​

4. Preview the Print Styles

• Use the Print Preview option in your browser to test and adjust the CSS as needed.
• Ensure that only the relevant content sections are visible and formatted correctly when printed.

​

Summary

To add a "Print Page" button using Webflow and custom CSS, first create a button for users to click, apply JavaScript to execute the print command, and then style your content with CSS to ensure it is print-friendly. Always test in different browsers to confirm functionality and appearance.