Elementorを理解する上で重要な３つの要素の１つ、 セクション
Elemetorの基本とも言える「セクション」「カラム」「ウィジェット」について理解する事で、いち早く使いこなせると思います。そこで、それぞれの要素について解説していきたいと思います。
「セクション」と「カラム」について
多くの人はエクセルを使った事があるかと思います。（使った事ないよという人でも分かるように説明するのでご安心を）簡単に言えば、「セクション」はエクセルで言う行にあたります。
青い枠で囲まれた部分がセクションです。
少しわかりずらいですが、グレーの部分がカラムになります。エクセルで言えば列、またはセルとなります。上の画像では、１セクションの中に４カラムあることになります。
このカラムの中にテキストや画像など様々なウィジェットを入れる事が出来ます。セクションはカラムの入れ物で、カラムはウィジェットの入れ物のイメージです。
セクションの各種設定（レイアウト編）
（レイアウト）伸縮セクション
これはWordPressのテーマの構成関係なく、表示画面の幅いっぱいにセクションを広げる事が出来ます。画像は極端な例ですが、２カラムのテーマを使用している際に、この伸縮セクションをオンにする事で、下の画像の様に、テーマの構成を無視して全幅となります。
黒枠のセクションだけを「伸縮セクション」ONにした時です。WordPressのテーマ構成を完全に無視し、セクション幅が画面いっぱいまで広がってる事が分かると思います。反対に、青い枠のセクションはOFFにしている為、テーマの構成を守り、領域の範囲に留まっています。
（個人的な意見ですが、一からデザインする場合はあまり使わないですね。）
（レイアウト）コンテンツの幅
コンテンツの幅には２種類のタイプがあります。「全幅」と「ボックス」です。これはセクションに対し、コンテンツの領域＝すなわちカラムの幅を設定するものです。「全幅」を選択した場合、下の画像の様にセクションに対して、中のコンテンツ領域（＝カラム）は名一杯の幅に広がります。
一方で、「ボックス」を選択し、幅を設定した場合、セクションに対しカラムの幅が制限されます。
これらの使い分けにより、コンテンツの配置を上手く調節する事が可能です。
（レイアウト）カラムのすき間
デフォルト、隙間なし、狭い、拡張、広い、さらに拡張の６種から選べます。少し詳しい方であれば、「マージンやパディングとどう違うの？」と思うかもしれませんが、あくまでセクションに対するカラムの幅という事で、一気に設定する事が可能です。
パディングでも表現としては同じ事が出来ます。かつ、細かい設定が出来ます。個々のスタイルにもよりますが、自分はカラムの隙間を「隙間なし」に設定し、パディングで個々に調整する方法が好きです。
ここでは、セクションに対する設定（つまりは、「この中のカラムやウィジェットはセクション単位で一括で設定できますよー」という事です）
（レイアウト）高さ
セクションの高さを決める設定です。デフォルト・画面幅に合わせる・最小の高さの３種から選ぶ事が出来ます。「デフォルト」は中身のコンテンツに合わせて大きさが変わります。「画面幅に合わせる」は下の図の様に、ブラウザの表示エリアいっぱに高さが保たれます。
黒枠がセクションの範囲です。画面いっぱいに高くなっているのが分かるかと思います。一方で「最小の高さ」を選択し、高さを指定する事で、そのセクションの高さは保たれます。
345ピクセルに高さを設定すると、中身のウィジェットがその高さを超えない限り、345ピクセルを保ちます。※絶対高さ固定ではなく、最低の高さという事に注意しましょう。
（レイアウト）カラム位置
セクションに対し、カラムを位置をストレッチ・上・中央・下の４種で設定する事が出来ます。
緑のカラムが黒枠のセクションに対し配置されている事が分かります。ストレッチは少々分かりづらいので、下の画像を参照下さい。
これはカラム位置（上）の場合です。赤の点線がカラムになります。これをストレッチに設定すると・・・
おわかり頂けただろうか？赤点線がセクションいっぱいに広がったのを。繰り返しですが、あくまでセクションに対してのカラムの位置となります。次に出てくるコンテンツ位置と密接した関係にあるので、次に進みます。
（レイアウト）コンテンツ位置
ここで言うコンテンツとはウィジェットを指します。セクションに対し、コンテンツの位置を設定します。ただし！ここで注意しなくてはいけないのは、あくまでウィジェットはカラムの中に入るものですので、カラムに対しても影響してきます。例えば、カラムの位置を「上」に設定し、コンテンツの位置を「中央」にした場合、どこにウィジェットが表示されるか・・・というと
カラムの位置どおり、上のままになります。つまり、コンテンツの位置はカラムに依存する事になります。少しややこしいですが、知っておくと後々配置に関して悩まなくて済むかもしれません。
（レイアウト）HTML タグ
セクションがコード上、何なのか？を指定する事が出来ます。とだけ、ここではお伝えしておきます（笑）
（レイアウト）構成
セクションに対するカラム構成をリセットできます。例えば編集している内にカラム構成がぐちゃぐちゃに・・・（汗）「あぁ〜リセットしたい！」といった時に一番下の「構成をリセット」をクリックすると、
綺麗に？というか、リセットされます！
セクションの各種設定（スタイル編）
（スタイル）背景
大きく普通とホバーに分かれます。「普通」は通常表示と考えて下さい。一方「ホバー」はマウスがセクショ領域に入った時の背景になります。
（Gif動画の扱いに慣れておらず見づらいですが、ホバーの意味がご理解頂けると幸いです・・・汗）
次に「背景タイプ」が３つに分かれます。
①クラッシック ②グラデーション ③動画
①クラシックには、単色カラー背景または画像背景が設定出来ます。単色カラーの場合は「色」のカラーパレットをクリックし、好きな色またはカラーコードで指定出来ます。「画像」の場合は、WordPressにアップロードされた画像を背景に使用する事が可能です。
画像背景はさらに細かい設定が出来ます。
位置：背景画像の配置を設定する事が出来ます。上中下左右に加え、カスタムが選択出来ます。カスタムは上下の位置を設定出来ます。
添付：「スクロール」と「固定」が設定出来ます。固定は分かりやすく背景がスクロールしても固定表示される設定です。
（すみません・・・動画の扱いも慣れていない為、見づらいですが、背景が動かない事が確認頂けたら幸いです・・・汗）
「スクロール」（視差効果）ですが、これについては少々Javascriptをいじらないといけないみたいです。（現在調査中ですので、分かり次第別途記事にしたいと思います。）
繰り返し：背景画像を連続して表示するか、しないかを選択出来ます。
サイズ：背景画像の全体が見える様に縮小して配置するか、拡大して背景対象範囲をカバーするかなど設定出来ます。
これらの設定は組み合わせによって色々な表現が可能かと思いますので、色々触りながら、自身のイメージとマッチする設定をお試し下さい！
実はグラデーションは色々出来る！
２色を選択し、各種の境界線をコントロールするイメージです。１色目の場所と２色目の場所の関係で様々な表現が可能となります。さらには角度の設定をすることで、境目を斜めにしたり、水平・垂直に出来たりと、表現の幅が広がります。これはセクションのみならず、カラムやウィジェットの背景にも共通しており、複雑なデザインも可能となります。
（スタイル）背景オーバーレイ
上記のいづれかの背景を設定すると表示されるメニューとなります。背景に対し、背景オーバーレイはレイヤーの様な扱いになります。設定可能な項目は、上記の背景の設定項目に加え、「透明度」「CSSフィルタ」「ボタンモード」があります。
透明度：背景オーバーレイをどの程度透過させるかを設定出来ます。０〜１の間で設定可能で、１は背景オーバーレイ１００％となり、０は背景オーバーレイが透明になります。
CSSフィルタ：画像に対して、明るさ・コントラスト・色合いなどが各種設定出来ます。わざわざ画像編集ソフトで編集しなくても、ある程度の調整はCSSフィルタで可能となります。
ボタンモード：フォトショップなどの画像編集ソフトを触った事がある方はなんとなく分かるかと思いますが、レイアー効果を意味してます。背景に対し、背景オーバーレイをどの様に扱うかを設定出来ます。各効果についてはここでは割愛します。（触って頂いた方がなんとなく分かるかと思います）
（スタイル）ボーダー
セクションの枠線を設定する項目になります。
背景同様に、普通とホバー（セクション領域にカーソルが入った際の設定）がそれぞれ設定出来ます。
ボーダータイプ：枠線の種類を設定可能です。（下の画像は点線）
色：枠線の色を設定出来ます。（下の画像はグレー）
幅：枠線の太さを上下左右別々に設定出来ます。（下の画像は上下左右15）
ボーダー丸み：枠線の丸みを設定出来ます。
上下左右それぞれ丸みを設定出来ます。上の画像は思い切って２００に設定してみました。セクション自体の形を変えるものではないのですが、背景も合わせて切り取られた形となります。
ボックスシャドー：セクションに対し、影をつける事が出来ます。
（注意）セクションの幅は指定出来ない為、まっさらなページの場合は影が左右にはみ出てしまいますので、垂直だけの設定をおすすめします。
シェイプ区切り：セクションの上下を対象に、区切りのデザインを設定出来ます。シェイプの種類は豊富で、下の動画を眺めて頂ければ分かると思います。
それぞれのデザインに幅や高さが設定でき、区切りのデザインをある程度コントロールすることが出来ます。また、区切られた部分の背景色も設定が出来、前後のセクションとデザインをつなぐ事も可能です！反転や左右反転など、デザインにもよりますが、細かく設定出来る為、表現の幅は広がります。
書体については、割愛致します。（個人的にはここで設定するより、ページ全体の設定で行った方が良いかと。。。あくまで個人的見解です）
セクションの各種設定（詳細編）
マージン：セクションの周りの余白を設定出来ます。
パディング：セクション内のカラムとの幅を設定出来ます。
（上の画像）デフォルトの設定
（上の図）マージンを50に設定した場合
（上の図）パディングを１００に設定した場合
これらを上手く使う事で、カラムをコントロールしたり、上下のセクションとの距離をとったりと、ある意味ページの構成に影響する設定が可能です。
Z-index：セクションのレイヤー表示優先順位を設定出来ます。
上の図の場合、緑のセクションに対し、下のセクションが入り込む形となります。上の緑のセクションのZ-indexを下のセクションより大きい数字で設定しています。数字が大きい方が上とおぼえておくと良いかもしれません。
（お詫び：レスポンシブは別の機会にご紹介したいと思います）
まとめ
セクションとカラム、そしてウィジェットとの関係性が分って頂けたら、この記事は十分かと思います。セクションはページの構成に大きく影響しますので、是非マスターしてかっこいいページを作ってみて下さい！特にセクションとカラムの関係は良く使い、背景の設定だけでも色々な表現が出来ると思います。セクションの技的なものも、別の機会でご紹介したいと思います！
