Diviで全幅画面を均等に二分割するレイアウトの作り方

こんにちはナオミです。

このチュートリアルでは、全幅画面を二分割し、左に画像、右にテキストを表示するレイアウトの作り方を紹介します。

Diviでフルワイド分割レイアウトの作り方

こんな感じのレイアウトができます。

動画内容 – フルワイド分割レイアウトの作り方

  1. 均等に二分割した行を挿入
  2. 左に画像、右にテキストを挿入
  3. 行をフルワイドに設定
  4. 余分なスペースを取り除く
  5. テキストを上下左右真ん中に行くように設定

テキストを真ん中に持ってくる

ステップ5が知っていないと、難しいのではないかと思います。

 行の中の詳細→カスタムCSSにいき、列2のメインのところに、次のように入力します。

margin-top: auto;
margin-bottom: auto;

そして、行→デザイン→サイズ変換→『列の高さを均等割付』を『はい』にします。

これでテキストが真ん中にくるはずです。

レイアウトのダウンロード

ここから動画で作ったレイアウトとダウンロードできます。

Diviのことをもっと深く知りたい方は、Divi完全マニュアルをご覧ください。

「Diviで全幅画面を均等に二分割するレイアウトの作り方」に2件のコメントがあります

  1. いつも参考にさせていただいています。

    このレイアウトを
    スマホでも1行表示できればと思います。

    可能でしたらご教授ください。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top