セクション テンプレートとは何ですか?

エディターでは、要素とセクションテンプレートを使用することで、追加のコードを必要とせずに、美しいウェブサイトを素早く簡単に作成できます。要素は、アイコン、ボタン、見出し、画像など、ウェブサイトを構築するための個々のオブジェクトを提供します。セクションテンプレートは、要素を組み合わせ、追加のデザインオプションで拡張します。

基礎知識

セクション テンプレートは、一連の要素を保持するコンテナーで構成されます。

例えば、「カード」 セクションテンプレートは、画像要素（オレンジ）、見出し要素（青）、テキスト要素（紫）をコンテナ（赤）内に配置しています。セクションテンプレートで作業しているかどうかは、マウスオーバーまたはクリック時に表示されるオレンジ色の枠線ですぐにわかります。また、セクションテンプレートの名前も表示されます。

これらのあらかじめ構築されたウェブサイトセクションは、カスタマイズ可能なスタイルオプションを提供します。ほとんどのセクションテンプレートには、ウェブサイトを様々な側面からカスタマイズするためのバリエーションと設定が用意されています。

---

セクションテンプレートの使い方

セクションテンプレートを使えば、ウェブサイト構築が簡単になります。例えば、ギャラリーセクションテンプレートでは、複数の既成のバリエーションから選択して、あなたのスタイルに合った魅力的なギャラリーを作成できます。バリエーションとは、セクションテンプレートのオプションセットです。以下の設定を使用して、セクションテンプレートをニーズに合わせてカスタマイズできます。

各セクションテンプレートには固有のクラス（例：.preset-gallery-v3-default）が割り当てられています。ウェブサイトにセクションテンプレートを追加すると、「カスタムCSS」ウィンドウの最後に新しいCSSブロックが自動的に追加されます。このCSSコードには、左側の設定パネルで選択したすべての設定が含まれます。つまり、どちらか一方の変数を変更すると、もう一方の変数にも影響が及びます。

同じセクション テンプレートを使用して 2 つのセクションを作成し、そのうち 1 つを異なるものにしたい場合 (列数が異なるなど)、セクション テンプレート クラスを変更するだけで、新しいクラス名で新しい CSS ブロックが追加されるため、以前のセクション テンプレートの設定は変更されません。

---

レスポンシブ設定

要素設定と同様に、セクションテンプレート設定でもデザイン設定を変更し、表示するデバイスとその表示サイズに応じてデザインを変更できます。例えば、デスクトップ、タブレット、スマートフォンごとに余白やフォントサイズを調整できるため、それぞれのデバイスでウェブサイトのデザインを常に完全にコントロールできます。

これを行うには、エディターの上部にある 3 つのデバイス アイコン (デスクトップ、タブレット、スマートフォンのビューポートを表す) を使用して、目的のビューに切り替え、そのビューに対応する値を具体的に変更します。

以下の例では、ロゴ セクションテンプレートの列数と列間隔をタブレットとモバイルで変更します。これはデスクトップ版の ロゴ です。

これをタブレット用に調整する必要があります。

1. まず、エディターの上部にあるタブレットアイコンをクリックしてタブレットビューに切り替えます。
2. スタイルタブにいて、セクションテンプレートの設定が開いていることを確認してください（要素ではありません）。
3. レイアウトで列の数を変更します。この場合、1行に6つのロゴが適切です。
4. ロゴを近づけるには、ギャップ値を例えば0.5 remに変更します。
5. 列 と ギャップのラベルの色が紫色（タブレットアイコンのように）に変わり、タブレット用に設定が調整されたことを示します。

これをモバイル用に調整する必要があります。

1. まず、エディターの上部にあるスマートフォンアイコンをクリックしてモバイルビューに切り替えます。
2. スタイルタブにいて、セクションテンプレートの設定が開いていることを確認してください（要素ではありません）。
3. レイアウトで列の数を変更します。この場合、1行に2つのロゴを配置すると見栄えがよくなります。
4. ここではロゴの間隔が広い方が見栄えが良いので、値を1 remに変更します。
5. 列 と ギャップ のラベルの色が黄色（スマートフォンアイコンのように）に変更され、スマートフォン用に設定が調整されたことが示されます。

他のデバイスビューで行った変更は、常にすべての小型デバイスに自動的に適用されます。デスクトップビューで行った設定は、上書きされない限り、すべてのデバイスタイプに適用されます。タブレットビューで設定を変更した場合、その設定はモバイルデバイスにも適用されますが、デスクトップデバイスには適用されません。値を変更する前にスマートフォンに切り替えた際に、紫色のラベルが表示されていたことにお気づきかもしれません。変更後は、ラベルが黄色に変わります。