更新日時 2021年 4月 30日
ドラッグ＆ドロップ ページ エディターでは、レイアウトを再配置したり、ページのさまざまなセクションにカスタムの背景スタイルを適用したりできます。ドラッグ＆ドロップ編集機能は、スターターテンプレート、既定のHubSpotテーマテンプレート、またはドラッグ＆ドロップエリアのあるコードテンプレートを使用して作成されたページで利用できます。
ドラッグ＆ドロップエディターについて
ドラッグ＆ドロップエリアは、ウェブサイトコンテンツのブロックであるモジュールで構成されます。これらのモジュールは、横の行または縦の列で配置できます。行と列は要素のセクションにグループ化できます。
これらの要素をグループ化することで、一連の背景スタイルをページの任意のセクションに適用できます。行、列、またはセクションをドラッグ＆ドロップしてページレイアウトを調整することもできます。
- モジュール：ウェブサイトコンテンツの個別ブロック。リッチ テキスト モジュールなど、モジュールによっては、複数のタイプのコンテンツを含めることができます。
- 列：複数のモジュールまたは行を縦に積み重ねたもの。ページ上で列を移動または再配置したり、背景色やスタイルを列全体に適用したりできます。
- 行：モジュールまたは列を横に並べたもの。ページ上で行を移動または再配置したり、背景色やスタイルを行全体に適用したりできます。
- セクション：複数の行または列をまとめたグループ。セクション全体を移動したり、背景色またはスタイルをセクション全体に適用したりすることができます。
モジュールのコンテンツを編集する
モジュール内のコンテンツをカスタマイズするには、モジュールの上にカーソルを置き、以下のいずれかのアイコンをクリックします。
- モジュールを編集： コンテンツエディターまたは左側のパネル内でモジュールのコンテンツを編集します。
- モジュールをスタイル設定する：サイドバーエディター内でモジュールのスタイル設定を管理します。ほとんどのモジュールスタイルは［スタイル］タブで管理できますが、テーマに固有のいくつかのスタイルオプションは［オプション］タブで使用可能になります。
- モジュールを複製：ページ上にモジュールのコピーを作成します。
- モジュールを削除：モジュールをページから削除します。
行、列、またはセクションを編集する
行全体、列全体、または要素のセクションのスタイルを編集できます。たとえば、コンテンツを中央揃えにしたり、背景画像を適用したり、ページ上で要素の周囲の間隔を編集したりできます。
行、列、セクションのスタイルを編集するには、次のようにします。
- ページエディターで、行、列、またはセクションの上にカーソルを重ねて矢印アイコンをクリックし、［［行／列／セクション］をスタイル設定］を選択します。
- 行、列、セクションの周囲のパディングと余白をカスタマイズするには、サイドバーエディターで［位置合わせとスペース］をクリックします。
- セクションの背景を編集するには、サイドバーエディターで［背景］をクリックし、以下のいずれかのスタイルオプションを選択します。
- なし：背景の色や画像を削除します。
- 色：背景として単一の色を設定します。16進値を入力するか、カラーピッカーをクリックして色を選択してから、透明度の値を入力します。
- 画像：背景として画像を設定します。新しい画像を追加するには、［アップロード］をクリックしてコンピューターから画像を追加するか、または［画像を参照］をクリックしてファイルから画像を選択します。
- グラデーション：背景として2色のグラデーションを設定します。［方向］ドロップダウンメニューをクリックし、グラデーションの方向を選択します。それぞれの色について、16進値を入力するか、カラーピッカーをクリックして色を選択してから、透明度の値を入力します。
- 既存の要素のコピーを作成するには、その要素にカーソルを合わせ、矢印アイコンをクリックした後、［［行／列／セクション］をコピー］を選択します。
- ページから要素を削除するには、その要素にカーソルを合わせ、矢印アイコンをクリックしてから、［［行／列／セクション］を削除］を選択します。
ページにモジュールを追加する
ページにモジュールを追加するには、サイドバーエディターで目的のモジュールをクリックし、そのモジュールをページにドラッグして適切な位置にドロップします。
ページのレイアウトを調整する
ページ上の要素の幅を調整するには、列の間にある垂直方向の区切りをクリックし、ドラッグして幅を調整します。
ページのスタイルを編集する
ページ上の色、フォント、間隔を編集するには、サイドバーエディターの［デザイン］タブをクリックします。- スターターテンプレートを使用している場合、テキスト、フォーム、ボタンに適用されるフォント、スタイル、色を変更できます。
- 開発者が作成した、ドラッグ＆ドロップエリアのあるコードテンプレートを使用している場合、開発者がどのテンプレートに含めたスタイルオプションを使用できます。
- テーマテンプレートを使用している場合、テーマ設定にアクセスして編集できます。
