Diviの使い方4、三つのセクションのタイプ

Diviの使い方4、セクションの違い

こんにちは、ナオミです。

Diviのビルダーには欠かせないセクションですが、以下の三つのセクションがあります。

Diviの使い方、セクションを使い分ける
  • 通常セクション
  • 専門セクション
  • フルワイド

この記事ではそれぞれの特徴と使い方を紹介していきます。

Divi『通常セクション』の使い方

これは今までの記事や動画で使ってきた、その名前の通りの通常のセクションです。

Diviの使い方、通常のセクションと行

通常セクションに挿入できる行の種類は豊富です。

Diviの使い方、通常セクションのワイヤーフレーム2

このように、4列の行、1列の行、そして2列の行のように、色々な行の形を重ねてレイアウトを作っていきます。

Diviの使い方、通常セクションテスト

このようにモジュールを追加できます。

特に理由がなければ、通常セクションを使いましょう。

Divi『専門セクション』の使い方

Diviの使い方、専門セクション

専門セクションを選択すると、このリストが出ます。

なんか複雑でよくわからない・・・

と思うかもしれませんが、実はシンプルです。

緑は『行』、オレンジは『モジュール』を示す

例えばこれをみてください。

Diviの使い方、専門セクションの例

このセクションを選択すると、真ん中から半分に分けて、左はモジュール、右は行になります。

Diviの使い方、左はモジュール、右は行

このようになります。

右の行を増やすことも、さらに列を分けることもできます。

ですが注意して頂きたいのは、次のことです。

専門モジュールの行は最大で三つにしか分けれない

Diviの使い方、専門モジュールの行は三つにしか分けれない

この画像のように、専門モジュールの中の行は最大で三つにしか分けることができません。注意してください。

専門セクションで出来て、通常セクションで出来ないこと

一見専門セクションの形も通常セクションで出来るように見えますが、出来ないものもあります。

例えば右にモジュールが置けるこの形を見てください。

どうやって通常セクションでこの形を作れるでしょうか?

通常セクション内で二つの行を重ねたら、同じことを出来るように思うかもしれませんが、右のオレンジの部分は、下まで突き抜けてます。

行は二つ重ねても突き抜けません。

このページは上の専門セクションの形を使って作っています。

Diviの使い方、専門セクションのブログページ
【超簡単】Diviでフォトギャラリーを作る方法

右側に他の記事へのリンクなどを貼ったサイドバーがあります。

そして左はコンテンツです。

このようなレイアウトの時は、専門セクションを使うべきですね。

動画でも説明しています。

Divi『フルワイドセクション』の使い方

フルワイドセクションはその名の通り、全幅をとるセクションです。

大きな違いは二つあります。

フルワイドモジュールが使える

Diviの使い方、フルワイドモジュールリスト

この9つのモジュールが使えます。通常モジュールは使えません。

フルワイドセクションでは行が使えない

そうなんです。フルワイドセクションでは、全幅の一列しかないため、行を使って分ける方法はないのです。

いつフルワイドセクションを使うべきか

この9つのモジュールを見ますと、全幅のヘッダーやタイトルやメニューなど、ページに二つは置かないものが多いです。

フルワイドセクションを使う場面は、ページの一番上に大きくヘッダーを表示させる時などが多いと思います。

またはページの途中で大きくセクションを区切る時などですね。

フルワイドモジュールに関する動画もあります。


いかがだったでしょうか?

この三つのセクションを使い分けて、かっこいいレイアウトを作って行きましょう!

それではまた。

コメントする

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