この記事では、パーツの配置方法について説明します。
基本的には、レフトメニューよりパーツをドラッグ＆ドロップすることでパーツを追加・配置することができます。

❶ パーツの配置

パーツの配置は、左のレフトメニューに表示されるパーツパレットからのドラッグ＆ドロップで配置することができます。

複数のパーツを組合せて作成されている「プリセット」もドラッグ＆ドロップで追加することができます。プリセット内の「セクション」「パーツ」「Unsplash画像」のいずれも任意の場所に追加することができます。

❷ 配置後の移動

配置されたパーツは、ドラッグ＆ドロップで移動することができます。また、各要素毎に表示されるメニューからの移動も可能です。

❸ 自由な位置に配置する

「絶対位置」とは、パーツの位置を、そのパーツを囲んでいる親要素を基準に指定する設定です。
たとえば、画像の上に文字を重ねる、複数のパーツを重ねて配置するなど、通常の配置では難しいレイアウトを作成することができます。

🔻配置したパーツを選択し、詳細設定画面から「絶対位置」にチェックを設定します。

設定後は、マウスでパーツをドラッグすることで、任意の位置に配置することができます。

パーツ同士が重なった場合は、「重なり順」を設定することで、どのパーツを手前に表示するかを指定できます。

🔻パーツを選択し、設定画面から「重なり順」の数値を設定します。

数値が大きいほど手前に表示されます。

「auto」の場合は、親要素と同じ順序で表示されます。

通常の配置では、セクションやパーツなど、それぞれの要素に応じた配置ルールに沿って移動します。

「絶対位置」を設定すると、親要素を基準にパーツの位置を自由に指定できるため、通常の配置では難しい自由なレイアウトを作成できます。

例えば画像の上にテキストを重ねるなど、複数のパーツを重ねて表示する場合に活用できます。

例：セクションの中に配置された画像パーツやテキストパーツに絶対位置を設定した場合