閲覧室は、サイトに組み込むことができる再利用可能な配置の集まりです。閲覧室を使用すると、同様の設計図(ナビゲーションバー、CTA、フォームなど)をすばやく再利用して、サイトを構築する際の一貫性と効率性を確保できます。閲覧室は、 Webflow マーケットプレイス、または既存のスターター読書室を活用してください。
このモジュールでは、次のことを学びます。
- 読書室の種類
- 読書室の活用方法
- 閲覧室を削除する方法
読書室の種類
読書室にはさまざまな種類があり、次の 2 つの属性によって異なります。 誰が 読書室を制作し、 どこ 読書室の起源。
閲覧室のカテゴリーには以下が含まれます:
- スターター読書室 — Webflowで作られた構造と、基本的なカスタマイズ可能なスタイルを備えた読書室
- マーケットプレイス読書室 — ユーザーが作成した読書室で、 マーケットプレイスライブラリ ページ
初期読書室
初期閲覧室は、Webflow で作成されたデフォルトの閲覧室で、どのサイトでも使用できる 34 のデザインで構成されています。これらの 34 のデザインは、次のセクションに分類されます。
- ナビゲーション
- ヒーロー
- チーム
- ロゴ
- ギャラリー
- 特徴
- 価格設定
- お客様の声
- フッター
独特なデザインの詳細については、当社の初期読書室の記事をご覧ください。
マーケットプレイス読書室
マーケットプレイスライブラリは、Webflowコミュニティの著名なクリエイターが作成したデザインのWebflow評価コレクションです。マーケットプレイスまたは パネルを追加 > レイアウト タブをクリックして、サイトに統合します。マーケットプレイスの閲覧室をサイトに統合する方法について詳しくは、こちらをご覧ください。
マーケットプレイス閲覧室を統合する方法
利用したいマーケットプレイスの閲覧室を選択すると、Webflow マーケットプレイスから直接その閲覧室をサイトに追加できます。1 つのサイトには最大 5 つの閲覧室があることに注意してください。
ルームは、同じワークスペース内のサイトにのみ埋め込むことができます。マーケットプレイスの閲覧ルームを 1 つまたは複数の既存のサイトに導入するには、次の手順を実行します。
- 訪問 市場 > 図書館
- 選択してください 図書館 あなたのサイトに挿入したい
- タップする ライブラリをインストール
- ワークスペースを選択する ワークスペース 落ちる
- 部屋を組み込む既存のサイトを1つまたは複数選択します
- クリック インストール
- プレス デザイナーで開く ポップアップモーダルウィンドウでデザイナーのサイトを公開します
その後、サイト内のルームを取得できます。
新しいサイトにマーケットプレイス ルームを実装するには:
- へ移動 市場 > 図書館
- クリックしてください 図書館 あなたのサイトに含めたいもの
- タップする ライブラリをインストール
- ワークスペースを選択する ワークスペース 落ちる
- クリック サイトを作成してライブラリをインストールする
デザイナーは、ルームがインストールされた新しいサイトを自動的に表示します。デフォルトでは、サイトはルームの名前で命名されます(たとえば、新しいサイトに「クールルーム」という名前のルームをインストールすると、ダッシュボードではサイトの名前は「クールルームサイト」になります)。サイトの名前は、 サイト設定 > 一般的な タブ> 一般設定 > 名前 分野。
観察: サイトに既存のクラスを持つデザインをキャンバスに統合すると、クラス タイトルに番号が増分されて表示されます。たとえば、サイトにすでに「Button」クラスがあり、同じ「Button」クラスを含むデザインを追加すると、セレクター フィールドのデザイン クラス タイトルは「Button-2」に変わります。
観察: マーケットプレイスライブラリには、特定のサイトプランでのみ利用可能な独自のコード埋め込みやフォームファイルアップロード要素が含まれている場合があります。正しい 敷地計画 これらの要素が正確に動作することを保証します。
ルームの利用方法
Webflowデザイナーでは、次の場所に移動して部屋を取得できます。 パネルを追加 > レイアウト タブまたはクイック検索を適用することで、 パネルを追加各部屋には名前が付いています。
ルーム内のデザインにアクセスする方法
各ルームには、サイトに追加できるデザイン (ナビゲーション バー、ヒーロー セグメント、フッターなど) が付属しています。ルーム内のデザインにアクセスするには、次の手順を実行します。
- 展開する パネルを追加 > レイアウト タブ
- を選択 部屋 利用したいデザイン
- デザインのcategoryドロップダウンをクリックすると、そのcategoryのデザインが表示されます(たとえば、スタータールームのナビゲーションデザインにアクセスする場合は、 ナビゲーション)
その後、他の要素と同様に、ルームのデザインを利用できます。ルームのデザインを Webflow キャンバスに埋め込むには、次の操作を行います。
- デザインを押して レイアウト タブをクリックしてキャンバスに追加します
- デザインをキャンバスにドラッグします
- ナビゲータにドラッグします
観察: サイトにすでにクラスが存在するデザインをキャンバスに追加すると、クラス タイトルの数字が増加した状態で表示されます。たとえば、サイトにすでに「Button」クラスがあり、同じ「Button」クラスを含むデザインを追加すると、セレクター フィールドのデザイン クラス タイトルは「Button-2」に変わります。
デザインの拡大版を表示する方法
デザインをキャンバスに追加する前に、拡大してプレビューしたい場合は、拡大バージョンを検査することができます。[追加] パネルからデザインの拡大バージョンを検査するには、次の手順を実行します。
- 展開する パネルを追加 > レイアウト タブ
- デザインの上を滑らせると拡大版が表示されます
ルームの変数を活用する方法
一部のルームクリエイターは、ルームにカラー変数を組み込んでおり、ルームのカラーパレットをデザインに再適用することができます。変数は 変数パネル これらの色変数を使用するデザインをキャンバスに組み込む場合。
ルームのカラー変数を変更して、キャンバス上のカラー変数のすべてのインスタンスを調整できます。
部屋のデザインを探索する方法
部屋のデザインを探索できます 内で 部屋、または 横切って すべてのルームがサイトに統合されます。
参照する際に役立つキーワードをいくつか紹介します。
- ナビゲーションバー
- ヒーロー
- タブ
- 行動ターゲティング
- フッター
- 価格設定
- 形状
- ロゴ
- お客様の声
- コンテンツ
- ボタン
- 落ちる
- 接触
探索する 内で 部屋:
- 展開する パネルを追加 > レイアウト タブ
- を選択 部屋 あなたが閲覧したいデザイン
- デザインキーワードを挿入する ライブラリを検索 バー(例:「navbar」)
探索する 横切って サイトにインストールされているすべてのライブラリ:
- アクセス パネルを追加 > レイアウト タブ
- レイアウトキーワードを挿入します すべてのライブラリを検索 バー(例:「navbar」)
図書館に関する情報にアクセスするには
ライブラリのタイトル、バージョン番号、サイトにインストールしたユーザーなど、ライブラリに関する情報にアクセスできます。ライブラリに関する情報にアクセスするには、次の手順を実行します。
- 開く パネルを追加 > レイアウト タブ
- マウスオーバーして ライブラリタイトル 設定を選択します。歯車ライブラリのタイトルの右側に表示される「
ライブラリに関する情報を表示するモーダル ウィンドウが表示されます。
ライブラリを削除する方法
サイトからライブラリを削除し、追加パネルでアクセスできないようにしたい場合は、ライブラリを削除できます。ライブラリを削除しても、サイトに以前組み込んだライブラリのレイアウトには影響しません。ライブラリはいつでも再インストールできます。
ライブラリを削除するには:
- アクセス パネルを追加 > レイアウト タブ
- タイトルの上にマウスを移動します 図書館 削除するつもりです
- 設定を選択します「歯車ライブラリタイトルの右側にある「
- 選ぶ ライブラリをアンインストールする 「ライブラリを編集」モーダルウィンドウで
- クリック アンインストール 「ライブラリのアンインストール」モーダルウィンドウで
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日