Creating Printable Div

Design help Custom code
1

I’ve created a website for a client where they would like to be able to allow folks to print recipes from their page.

1. Is there a way to have someone press a print button right above the “recipe” and it would open the system print dialog?

2. When I go to print the web site, hidden elements on the page actually show up in the printed version. Is there a certain way things need to be formatted to optimize for printing?

Read-Only Link:
https://preview.webflow.com/preview/bellagrace?preview=6223bed13c8f947c5293d9cf34af5260

Live Site:
www.bellagracewellness.com

2

Bind a click handler on the element to a function that calls this:

Window: print() method - Web APIs | MDN

You’ll need to manually code a print stylesheet.

How To Set Up A Print Style Sheet — Smashing Magazine
Designing For Print With CSS — Smashing Magazine

3

Can anyone explain how to bind the function to a button?

4

Yeah super simple. This is how I did it:

  1. I created a Div and gave it the ID: Printable-Area. I formatted everything that I wanted to be printed in there. I then set the display to hidden so that it would not appear on my website.

  2. Next, go to Project Settings / Custom Code and add this to the head of your Project:

  1. Go to your page and add an HTML Embed Component where you want the button to appear and paste this code into it:
    Print Article

  2. create a text block anywhere and add the class print-area-button to it, then style your button how you want it to look, then delete the text block. You should see your button inside the Embed styled the way you want now.

  3. Publish! Easy Peasy!

See it in action here:

Scroll to the bottom and you will see the button “Print Article”

5

@amypurifoy
Hi, did you include the codes for this? I don’t seem to see any