④プラグインElementorのレイアウトの考え方ーセクションって?カラムって?-

さて、前回に引き続きElementor講座いきます。

きっとElementorで一番難しいのはココ!
レイアウトの考え方なのです。

Elementorの1番基本の使い方(復習)

、入れたいエレメント(中身)をポイッと放り込む
、エレメントを調整する(コンテンツ、スタイル、詳細)
、保存する

たったこれだけです(笑)
さあどんどんやってみましょう!

色々入れてみると、ルールが見えてきます。

Elementorのレイアウトルール

ポイント1
エレメント上下に配置される。横には並べられない。

必ずエレメントは上か下に配置されます。
横に入れることはできません。

じゃあ横に並べたい時はどうしたらいいの?
横に追加したいときには「カラム」の追加が必要になります。

Elementorエレメントを入れると、勝手に「セクション」と「カラム」が追加されてます。
この「セクション」と「カラム」を使って、
左右2分割に違うエレメント入れたり、4分割したり6分割したり。。。ということが可能になります。

カラムとは

Elementorカラムは、レイアウトのためだけに必要なものです。
エレメントを上下に配置するだけでOKでしたら、カラムのことは特に意識する必要ないです。
エレメントを左右に並べたい、つまり画面幅を分割したい時にだけ使います。

エレメント左上にマウスを持ってくると、□が2つ並んだマークがあります。
ここを右クリックすると、カラムを追加したりコピーしたりすることができます。
必要なだけカラムを入れて、エレメントをレイアウトしましょう。

ポイント2
カラムは横には追加できますが、上下には並べられません

セクションとは

セクションとは、意味のあるかたまりの枠組みです。

なんじゃそりゃ(笑)

はい、もう下の図になると訳分からなくなりましたね(笑)
大丈夫です。分からなくて。私も描いてて分からくなりました(笑)
自分がココにこれを入れたいんだけど、うまく配置できないな~って思った時にこの記事をもう一度振り返ってみて下さい。

一応使い方を説明すると、セクション水色の枠組みです。

画面幅いっぱいのカラム
画面を2分割したカラム上下に並べたいとしましょう。

ですがポイント2の通り、カラムは上下に追加できないのです。
なので、上下に並べたい時にはセクションを追加する必要があります。

インナーセクションて何よ?ってことですが、
セクションの中に入れるセクションです。そのまま(笑)

1つのかたまりなのに、レイアウト上セクションが分かれてしまうことがあります。

例えば図の例だと、「さちこぴぺって?」という見出しがあって、
さちこぴぺについて説明している写真と文章が下に続きます。
これは、さちこぴぺについての1つのまとまりですよね。

なので、全部をまとめて1つのセクションに入れて、中身はインナーセクションを使っています。
こうすることで、セクションの背景に色をつけたり、画像を入れたり
更にインナーセクションに違う背景色をつけることができます。

これがセクションです!!ドヤッッッ!!

とりあえず、私にはこれ以上簡単には説明できませんでした(笑)

よく分からなかった方は、実際に触っていくうちに感覚がつかめてくるので、ジャンジャン触って下さい。

因みに、セクションの水色の枠の上にマウスを持ってくると、●6つ×が見えます。
ここからセクション追加したり、編集したり、削除したりできます。

まとめ

エレメント(中身)<カラムセクション(枠組み)
エレメント上下に配置される。横には並べられない。
カラム横に追加できる。上下には並べられない。
セクションは枠組み。セクションの中にセクションを入れられる(インナーセクション)。

④プラグインElementorのレイアウトの考え方ーセクションって?カラムって?-” に対して1件のコメントがあります。

  1. たたみ より:

    はじめまして。いつも参考にさせていただいています。
    質問なのですが、何か所か!/?が点滅するマークがでているのですが、何を意味するのでしょうか。
    解決策がみつからず、こちらよりご質問させていただきました。

    1. 木村なつき より:

      返信が遅くてすみませんm(__)m
      コメントありがとうございます。
      点滅のマークとのことですが、解決されましたでしょうか。
      スクリーンショットなどをお送りいただくとお答えできるかもしれません。

コメントを残す

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

CAPTCHA