Webflow hack: Designer-specific content

When building out the index page of the Blockhead CSS Framework, I realized I needed to share two different messages to two different audiences. If you're visiting the site in the browser, you need to be pointed toward the Made In Webflow page in order to clone the project & begin using it. But if you've cloned the project & are viewing it in the Webflow Designer, you need to be alerted that it's a placeholder page that can be deleted when you begin building your site. Luckily, a small bit of custom CSS in an HTML embed element allows us to tailor content based on context.

<style type="text/css">

	/* Hide designer-only content when viewed in browser */
  .designer-only {
  	display: none;
  }
  
  /* Show designer-only content when viewed in the Designer */
  .wf-design-mode .designer-only {
  	display: block;
  }
  
  /* Hide browser-only content when viewed in the Designer */
  .wf-design-mode .web-only {
  	display: none;
  }
</style>

This allows any content with the <class>Designer Only<class> class will only show up in the designer & any content with the <class>Web Only<class> class will only show up on the live site.

But this hack can be used in ways other than just hiding & showing. You can edit the CSS to re-style specific content if the <class>WF Design Mode<class> class is present. This means displaying conditional content like tool tips that would be hidden by default on the live site, allowing clients to more easily update content. Or re-styling certain content to make it easier for a client to find where to make edits.

This idea comes out of my philosophy that a project is an environment for your client to work in every bit as much as it is a product or piece of marketing.