Elementorで横幅100%(フルワイド)にする方法

Elementorでページを作成するとデフォルトのページテンプレートが適用されるため、フルワイド(横幅100%)にならなかったり、ウィジェットとウィジェットの間にすき間ができてしまうことがあります。

このページではElementorで作成するページを横幅100%にして、デフォルトで挿入されるすき間を詰める方法を解説します。

レスポンシブレイアウトのやり方やウィジェットのスタイリング方法などを「Elementorの使い方 初心者入門ガイド」にまとめているのでこちらもあわせてご覧ください。

Elementorで横幅100%にする方法

まずはデフォルトで横幅固定で中央寄せになっているレイアウトをフルワイドにしてみます。

ページ設定を変える

Elementor編集画面に入ったらまずは左下にある設定アイコンをクリックして固定ページの設定を表示します。

Elementorで横幅100%にする方法 ページ設定を変える1

下の方にある「固定ページレイアウト」の項目で使用するテンプレートを変更します。選択できるレイアウトには次のようなものがあります。

  • デフォルト: Elementorのサイト設定でデフォルトに設定しているもの
  • Elementor キャンパス: Wordpressテーマのヘッダー、フッターを非表示にできるテンプレート
  • Elementor 全幅: サイドバーなどのないフルワイドのテンプレート
  • テーマ: テーマの固定ページテンプレート

フルワイドにしたいので「Elementor 全幅」を選択します。

Elementorで横幅100%にする方法 ページ設定を変える2

これでフルワイドの固定ページテンプレートに切り替わります。

セクションと内部セクションの幅を変える

この状態でセクションはフルワイドになり、セクションの背景は横幅100%で表示できるのですが、セクション内にあるカラムは固定幅で中央寄せになっています。Bootstrap5だと.containerがセットされた状態ですね。

Elementorで横幅100%にする方法 セクションと内部セクションの幅を変える1

カラムも横幅100%にするには、セクションの編集でコンテンツの幅を全幅に設定します。

Elementorで横幅100%にする方法 セクションと内部セクションの幅を変える2

カラム間のすき間を詰める

これで横幅100%になったのですが、カラムとカラムの間にすき間(カラムギャップ)ができてしまっています。これも自動的に挿入されるのですき間を詰める必要があります。

Elementorで横幅100%にする方法 カラム間のすき間を詰める1

カラム間のすき間を詰めるには、セクションの編集でカラムギャップをすき間なしに設定します。

Elementorで横幅100%にする方法 カラム間のすき間を詰める2

これでカラム間のすき間もなくなりピッタリ画面端までコンテンツが表示されるようになります。

ウィジェットとウィジェットのすき間を詰める

あともう一つ自動的にスペースが挿入されるところがあります。同じカラムにウィジェットを追加すると、ウィジェットの間にスペースができてしまいます。

ウィジェット間のスペースを詰めるにはウィジェットを配置しているカラムの設定を表示し、ウィジェットスペース(px)のところを0に設定します(デフォルトは20px)。

Elementorで横幅100%にする方法 ウィジェットとウィジェットのすき間を詰める

これでウィジェット間のすき間もなくなります。

Elementorテンプレートを使う

ホムペディアストアではElementor向けのテンプレートを多数公開しています。すでにレイアウトが調整されたテンプレートを使うことで効率よくWeb制作が可能になります。

Copyright © 2022 homupedia.com