WebflowのSlotsとは？

WebflowにはSlotsというコンポーネントを柔軟に使用できるようにする機能があります。

Slots

上記の公式ドキュメントに使い方は記載されているのですが、いまいち使用用途やメリットなどがわからなかったため、実際に使ってみてわかったことを整理しました。

Slotsとは？

Slotsはその名前の通り、コンテンツを配置するスロット(枠)の機能になります。

デザイナーによって事前に作成されたSlotsを活用することで、
WebflowやHTMLに詳しくない方でもドラッグ&ドロップでパズルの様にWebサイトの構築・修正をすることが出来るようになります。

コンポーネントとは？

Slotsを理解するためにまずはコンポーネント機能を理解する必要があります。

コンポーネントとは、サイト全体で繰り返し使用されるコンテンツをテンプレート化する機能です。

コンポーネント

コンポーネント化されたコンテンツは、一括でサイト全体の変更が可能となるため、サイトの修正を簡単に行うことが出来るようになります。

例えば、コンポーネント化されたヘッダーにページリンクを追加すると、個別で対応することなく、サイト全体のヘッダーにページリンクが追加されます。

コンポーネントでSlotsを使用すると何がうれしいのか

コンポーネント化されたコンテンツは、一括でサイト全体の変更できることがメリットですが、一方でその箇所を個別に修正ができないというデメリットもあります。

Slotsを使うことでコンポーネントの共通化のメリットを教授しながら、特定の箇所のみを柔軟にカスタマイズすることが可能になります。

Slotsの使い方

以下の流れでSlotsを作成していきます。

1. Designerでコンテンツを作成する
2. 1で作成したコンテンツをコンポーネント化する
3. コンポーネント化した要素で可変となるものをSlotsにする

1. Designerでコンテンツを作成する

今回はDesignerで以下のコンテンツを作成しました。

2. 1で作成したコンテンツをコンポーネント化する

 1で作成したコンテンツをコンポーネント化していきます。

以下のカードが3つ繰り返されているデザインのため、カード単位でコンポーネントにして共通化します。

‍

‍

当然ですが3つのカードを同じコンポーネントにして共通化したため同じアイコン、文章になってしまいました。

3. コンポーネント化した要素で変更させるものをSlotsにする

現状はアイコン、文章共に共通化されてしまっているため、Slotsを使って変更できるようにします。

左ペインから「Slot」を選択します。

まずはアイコンをSlot化するので、アイコンをwrapしている要素の上に配置します。

アイコンをwrapしている要素と同じclass名をSlotにつけます。
(この時点では表示が崩れていますが、後ほどSlotではないほうの要素は削除します)

Slotの中にはコンポーネントしか配置できないという制約があるため、アイコンの要素をコンポーネント化します。

‍

余談ですが、コンポーネントにはグループ機能があるのでわかりやすくグループ分けしておくと使いやすいでしょう。

Slotではないほうの元の要素は不要のため削除します。

コンポーネント内の編集画面から、全体の要素の編集画面に戻ると、コンポーネント配下にSlotが表示されていることが確認できます。

この中に先ほど作成したアイコンのコンポーネントを配置します。
※Slot内にはコンポーネントのみ配置可能です

Slot内にアイコンを配置すると、他のカードも同じコンポーネントを使用しているのにもかかわらず、
設定したカードにのみアイコンが設定されています。

同じ要領でテキストの部分もSlot化していきます。

テキストをwrapしている要素と同じclass名をSlotにつけます。

Slotではないほうの元の要素は不要のため削除します。

テキストはより柔軟に変更できるようにリッチテキストにします。

空のリッチテキスト要素を出し、元になったテキスト要素と同じクラス名をつけます。

リッチテキスト内のテキストを変更できるように以下の設定を行います。

Create & connect new propertyを選択します。

Createを選択します。

リッチテキストの設定で以下の表示になっていればOKです。

Slot内で使えるようにコンポーネント化します。

各カードのテキスト用のSlot内に上記で作成したリッチテキストのコンポーネントを配置します。

一番左のカードのみテキストの文章を変更してみました。

Slot化したことにより、同じコンポーネント内であるにもかかわらず、違う文章を入力することが出来るようになりました。

補足：Slot内の権限

Webflowではユーザーのロールによって権限を絞ることできますが、
Slot内の要素のみ変更可能なように権限を絞ることもできるようです。(マーケターロール)

この機能を使うことでデザインを壊さずに、デザイナー以外のメンバーもWebサイトの作成、修正を行うことが出来ます。

詳細は以下の記事をご参照ください。

ドラッグアンドドロップでより早くページ構築できるようになりました！

まとめ

Slotを使うことでコンポーネントの共通化の恩恵を受けながらも、柔軟な修正が可能になります。

ユーザーのロールによってSlot内のみを変更できるようにもできるため、メンバーが多い大規模サイトなどではSlotは大いに活用できそうですね。

‍