行を使用して希望のレイアウトを構築する

行要素とその機能について詳しくは、 行要素の記事.

ここでは、行とステップバイステップのガイドを使用した主要なレイアウトの例をいくつか示します。

ヒーローバナーのデザイン

ヒーロー バナーは、ページの上部に配置される目立つバナーで、通常は背景画像、見出し、CTA ボタンが含まれます。 

あらかじめデザインされた ヒーローバナー要素 このため、Row 要素を使用すると、より優れた制御と柔軟性が得られます。

作成手順:

ステップ1： ドラッグアンドドロップ 2列の行これにより、ヒーロー バナーの基本レイアウトが作成されます。

ステップ2： ヒーローバナーをカスタマイズするには 設定 タブには何も表示されないことに注意してください。

下にスクロールします 経歴 の横にあるボックスをクリックします 画像 セクションの画像背景を設定します。

ギャラリーを参照して利用可能な画像を選択したり、新しい画像をアップロードしたりできます。

ステップ3： テキスト ブロック、見出し、またはボタン要素などのその他の要素をレイアウトにドラッグ アンド ドロップします。

各要素をカスタマイズするには、 設定 and 詳細タブ 調整用に。

ステップ4： に 背景サイズを調整する, セクションをクリックしてその構成を開きます。

に移動します 高機能 タブで余白とパディングを微調整します 間隔 理想的なフィット感のためのセクション。

ステップ5： モバイル ビューに切り替えて、応答性を高めるためにレイアウトを調整します。

デザイン製品内訳セクション

階層化された製品内訳レイアウトは、構造化された視覚的に魅力的な方法で製品の機能や仕様を強調するのに最適です。

作成手順:

ステップ1： ドラッグアンドドロップ 2列の行これは、製品の内訳レイアウトの基礎となります。

ステップ2： ドラッグして 画像要素 左の列に移動し、希望の画像をアップロードします。

ステップ 3: サンプルのようなアイコンとテキストブロックを含む内訳コンテンツを作成するには、別の行要素をドラッグアンドドロップします。 右の列に入力します。

ステップ4： アイコン、テキスト ブロック、見出し、アイテム リスト、ボタン要素など、好みの要素を列に追加します。

そして、自分の好みに合わせてカスタマイズできます 設定 タブには何も表示されないことに注意してください。

ステップ5： モバイル ビューに切り替えて、応答性を高めるためにレイアウトを調整します。

デザイン製品の詳細

詳細な製品セクションでは、製品の画像、説明、購入オプションを整理するカスタム レイアウトを作成できます。

作成手順:

ステップ1： ドラッグ 2列の行 あなたの編集者へ。

ステップ2： を置く 画像 左の列に追加 見出し, テキストブロック, ボタンなど、右側の列に表示されます。

ステップ3： プレースホルダーテキストを置き換え、画像をアップロードし、追加した要素を自由にカスタマイズしましょう。また、CTAボタンにリンクを追加することもできます。

カルーセル内に推薦ボックスをデザインする

設計するには カルーセル内の推薦ボックス、 次の手順を実行します：

ステップ1： ドラッグ カルーセル要素 あなたのページに。

ステップ2： カルーセル内に、 2列の行列のサイズを好みに合わせて調整します。次に、左の列に画像を挿入し、右の列にテキストを挿入します。

ステップ3： 自分のスタイルに合わせて各要素の外観を調整します。

ステップ4： コピー/貼り付け スライドを複製し、それぞれを新しいコンテンツで更新する機能。

最適化されたレイアウトを作成するための詳細なデザインのヒントやチュートリアルについては、 ジェムページアカデミー.