コンポーネントビルダーを使い始めましょう

このトピックでは、コンポーネントビルダーでコンポーネントを作成する際に取るステップの概要を提供します。多くのステップについては、より詳細なドキュメントへのリンクを提供しています。このガイドはコンポーネント作成の流れを理解するための出発点として意図されており、リンク先のドキュメントでさらに詳しく読むことができます。

!注コンポーネントを一から作る代わりに、共有コンポーネントのコピーをインポート して、自分で作成する出発点として使うことも可能です。

コンポーネントを一から構築するには:

1. ナビゲーションヘッダーで 「デザイン」をクリックします。その後、左側のサイドバーでコンポーネント ビルダー リンクをクリックします。
2. コンポーネントビルダーのコンポーネントタブで**「**コンポーネントを追加」をクリックします。
3. 「 新しいコンポーネントを作成する 」ダイアログで、コンポーネントの名前を入力し、そのコンポーネントが属するコレクションを選択します。 「保存」をクリックします。
4. 編集を開始するにはコンポーネントをクリックしてください。
5. 空のコンポーネントキャンバスはグリッドを含むセクションです。コンポーネントのレイアウト作業を始めるには、グリッドをクリックしてドラッグして1 つ以上のコンテナを描いてください。これらのコンテナはグリッド上でドラッグすることで移動でき、サイズもいつでも変更できます。
6. コンテナをクリックすると対応するコンテキストバーが開きます。コンテキストバーでは、コンテナが自動的に Block型が割り当てられているのがわかります。各コンテナの種類を変更するには、 ブロック 名の近くの矢印をクリックし、 Card、 Image、 Block quote、 Component、 HTMLブロックなどの別のブロック要素を選択してください。
7. コンテナ内で「 追加要素 」をクリックすると、別の ブロック要素や テキスト要素(コンテナ内の インライン要素 )を追加できます。また、コンポーネント内で別のコンポーネントを ラップ することも可能です。さまざまな 種類の要素 についてはこちらで詳しく学びましょう。
8. その後、エレメントに静的または 動的な コンテンツを追加でき、エレメント の設定 や スタイル も可能です。
9. オプションとして、レスポンシブコンポーネントを作成するには、「 バージョンを追加 」または「 複製バージョン 」を何度もクリックして、異なるデバイスタイプごとにできるだけ多くのバージョンを追加できます。ブレークポイント設定 ツールを使って、各バージョンで使用するデバイスタイプを指定することもできます。
10. コンポーネントが準備できたら、ページビルダーで使うためにステージングし、公開してウェブサイトで公開できます。また、コンポーネントの埋め込みコード(レスポンシブコンポーネントの場合は全バージョンも含む)も入手でき、他のページビルダーで使うことができます。