さまざまな画面サイズで要素を非表示にする

Webflow でデバイスベースの可視性を制御します。

以前は、Webflow デザイナーには、さまざまな画面サイズでの表示を調整するための個別の要素の具体的な選択肢が含まれていました。デスクトップとタブレットでは表示したいが、モバイル画面では表示したくない要素がある場合は、他の画面サイズではその要素の表示を無効にします。

しかし、この方法により、真実の情報源が複数存在するようになりました。

画面サイズに基づいて表示を管理するには、デザイナーの上部にあるブレークポイント選択を使用して、その特定のクラスの表示プロパティを display: none に設定します。表示を元に戻すには、リセットするだけです。

要素ごとに可視性に影響を与えるには (たとえば、そのクラスのすべての要素を非表示にしたくない場合)、次のようにします。

  1. コンボクラスを導入する(例えば、「hidden」)
  2. display: none で定義します

その後、その要素 (またはそのコンボ クラスが割り当てられている他の要素) のみが非表示になります。

さまざまな画面サイズでのスタイル設定について詳しく説明します。

特定の画面ブレークポイントに合わせてカスタマイズされたトリガーとアニメーションの詳細をご覧ください。

ユアン・マック