Printable Layouts

Want your Webflow website to print beautiful product brochures and property listings?

Here's how.

Demonstration

DEMO - https://printable-layouts.webflow.io/

CLONEABLE - https://webflow.com/made-in-webflow/website/printable-layouts

The Technique

Place this in your site-wide before-/head custom code.

<style>
@media print {
  body *:not(.print-only):not(.print-only *) {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
}
</style>

On every page where you want to support printing, add a div at the bottom of the page with a class of print-only and build your print-specific layout there.

Best Practices

For best results in that printable layout, avoid...

• Background videos
• Background colors
• Background images
• Light-colored text
• Animations

‍

‍

‍