Streaming live at 10am (PST)

Conditional Visibility HTML Output

The conditional visibility does exactly what is says, making some elements invisible on the page (display: none), which means the content itself is still in the HTML source.

However, there are times based upon the conditions, where I don’t want the content or section to compile at all in the HTML output if the condition is not met. This is more of a conditional compiling than conditional visibility. Is there any way to achieve this, excluding content entirely from the HTML, without having to create multiple collections of essentially the same data type?

I could get around this if Webflow allowed for multiple Collection Page templates for the same data collection, but as far as I know you can only have 1 page template for each collection.

FYI, I’m using this for landing pages, meaning that depending upon the conditions (ad content, keyword, or promotion), the page structure and sections will change. Including the unnecessary content in the HTML may increase the page load time, expose unwanted content if the user views the source code, and also may affect my quality score when the adsbot scrapes the page and sees unrelated content.

Here is an example of the same collection template rendering 2 different ways:

Is my only option to create multiple Collections of the same data type?


1 Like

+1 any news on this? It would be very helpful to be able not to display this!

You have no access to the rendering engine so you cannot conditionally manipulate the generated HTML, apart from what you can control, the contents of a CMS collection item(s), and the filters applied to a collection list.

You can manipulate the html contents with JavaScript, but that is client side. Meaning the output was already send to the client.

A way to have more control would be to use additional collections that could be related to your landing page collection. Then you select the parts you want to show per item, and when empty, you can control visibility (rendering).

Example Collection:

  • Landing Pages, (Fields would be unique to a LP)

Referenced Collections (one to one or one to many):

  • LP Images
  • LP Social Proofs
  • LP Calls To Action
  • LP Features

With this structure creating variants for campaigns / add groups is trivial. On top of this you could run Google experiments and to do A/B or MV testing and manipulation with JQuery for example.