コンテナウィジェット
最終更新
最終更新
ウェブサイトにコンテナウィジェットを追加する方法について。コンテナを追加するには、まず「ウィジェット」に移動し、「コンテナ」を選択してください。
コンテナを設置したら、様々な設定を利用して、ページのセクションを完璧に作成およびデザインすることができます。
コンテナ設定について詳しく見ていきましょう。
以下の項目が表示されます：
ブロック設定
カラム設定
ブロック表示タブ
ブロックを追加
コンテナ内では以下の編集が可能です：
背景色
ビデオの追加
グラデーション
オーバーレイ
形状分割
アンカーポイント
詳細に入る前に、主要なコンテナ要素を見てみましょう。
コンテナやブロックと同様に、分割を行って複数の横列（行）や縦列（カラム）を作成することができます。以下の画像は、コンテナ/ブロックが3つのにカラム（列）に分割されている様子を示しています。
この操作を行うには、選択したコンテナ/ブロックの上部にマウスをホバーします。最大5列に分割できるボタンが表示されます。
下の画像では、カラムに色を追加しているため、何を意味しているのかが視覚的にわかります。
コンテンツにカラムを使う方法を説明する前に、縦列（行）を作成する方法について説明します。新しい行を追加して、先ほど作成した3列の上または下に配置することができます。先ほど作成したカラムをクリックすると、プラス＋のアイコンが表示されます。これをクリックすると、例えば上に新しい行が追加されます。
下の画像は、先ほど作成したカラムの上に新しい行を追加したところです。今回は2つのカラムに分割しました。参考として、白と黒を使っています。
これで、以下を含む１つのコンテナができました：
2列の行
3列の行
グローバルカラムは、複数のページで同じブロックを使用したい場合に、デザインのスピードアップに役立ちます。グローバルカラム設定を使用すると、1か所で更新するだけで、同じグローバルカラム情報を持つすべてのカラムに変更が反映されます。
まず、グローバルカラムにしたいカラムを選択します。次に、設定のポップアウトに移動し、「これはグローバルカラムです」を選択します。
選択するとドロップダウンメニューが表示されますが、初めて操作する場合は、以下のように1つのオプションしか選択できません：
このオプションを選択した後、カラムの名前を付けて保存をクリックします。これで、選択したカラムがグローバルカラムになりました。つまり、このカラムを複数のページにコピー＆ペーストした場合、一つのグローバルカラムを編集すると、他のすべてのグローバルカラムにも変更が反映されます。
下の画像に表示されているのは、グローバルカラムに変更したカラムです。ここにある他のカラムは影響を受けません。
カラムを削除または名前を変更する必要がある場合は、オプションの選択を解除するか、「名前を変更」テキストをクリックしてください。
アンカーポイントとは、ウェブサイトのセクションのことで、訪問者がテキスト内のリンクやコールトゥアクションボタンをクリックしたときに移動させたい場所のことです。
例えば、ウェブサイトに特定のセクションへ移動させたいボタンがある場合、訪問者がそのボタンをクリックすると、アンカーポイントが設定されたセクションに直接移動します。
アンカーポイントを追加する方法：
「コンテナの設定」→「アンカーポイントを選択」→「アンカーポイントにラベルを付けて参照できるようにする」最後に、ボタンなどのコールトゥアクションがある場所に、アンカーポイントのリンクを追加してください。
コールトゥアクションからアンカーポイントを追加する
起点となるコールトゥアクションを選択します。この場合はボタンを使用します。
アンカー ポイントを選択 > 次に、アンカー ポイントが配置されているページ/セクション、またはファネルのステップを選択します。 以前にラベルを付けたのと同じラベルが付けられます。
必要に応じて、「モバイルとデスクトップ」の異なるデバイスで異なるアンカーポイントを設定することができます。
ドロップダウンメニューにアンカーポイントが表示されない場合は、アンカーポイントを保存したことを確認してください。そうすれば、ドロップダウンメニューに表示されるようになります。
コンテナで設定できることは、
コンテナの遅延
コンテナのドラフトを隠す/作る
ブロック/コンテナの位置決め
コンテナの遅延は、すべてのウィジェットの遅延と同じように機能します。あなたのウェブサイトを訪問した人に、コンテナ全体が表示されるタイミングを選択することができます。
コンテナを非表示にするかドラフトにすると、ウェブサイトの訪問者からそのコンテナ全体が見えなくなります。
そして最後に、ブロック/コンテナの位置決めです。これは、コンテナをページ内で素早く上下に移動させる方法です。
