WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

【Elementor Flexbox Container】コンテナ機能の余白(隙間)をなくす方法

【Elementor Flexbox Container】コンテナ機能の余白(隙間)をなくす方法

【Elementor Flexbox Container】コンテナ機能の余白(隙間)をなくす方法

Elementorの新機能、Flexbox Container(以下、コンテナ)ウィジェットはとても便利な機能です。既存の状態では設定で「有効化」する必要がありますが、今後は正式リリース予定となっています。弊社がElementor公式に問い合わせた際も、「今後はコンテナの利用をおすすめする」との返答がありました。

参考:How do I learn about Flexbox Containers? | Elementor
https://elementor.com/help/container-element/

※コンテナ機能を試す際は、新しいサイトもしくはテストサイトでの試用をおすすめします(現行のサイトでコンテナを有効化するとセクションと共存することになるため)

今回は受講生の方より、このコンテナ機能の余白についてのご質問をいただいたため、画像と動画で解説していきますね。

コンテナを利用した際の隙間(余白)について

こちらはコンテナを利用して、画像を挿入した画面です。このように白い隙間が入っています。なお、margin(マージン)やpadding(パディング)は指定していません。

【Elementor】コンテナ機能の余白(隙間)をなくす方法

白い状態だとわかりにくいため、コンテナの背景色に黄色を設定しました。

【Elementor】コンテナ機能の余白(隙間)をなくす方法

隙間(余白)をなくしたいときは、パディングを0にしよう

コンテナのパディングを0に指定することで隙間をなくすことができます。まずはコンテナのコンテンツ部分のパディング設定を変更しましょう。

隙間が狭くなりましたね。次に、コンテナの大枠部分の設定を変更しましょう。

すべてのコンテナ(コンテンツ部分)のパディングを0にすると隙間がなくなる

すべて対応すると、黄色の背景色が見えなくなりました。スマホビューでもこのとおりです。

【Elementor】コンテナ機能の余白(隙間)をなくす方法

補足:スタイルのコピーとペーストを活用しよう

すでにあるコンテンツのパディングを変更したい場合は、スタイルのコピーとペーストが便利です。

パディングを0にしたコンテナの設定をコピーして、時短につなげましょう。動画では設定済みの右下のスタイルをコピーしています。

追記:記事通りに対応しても反映しない場合

「記事通りにやったのに反映しない」とのご連絡をいただきました。このケースは「ページの属性」をご確認いただき、デフォルトテンプレートからElementor全幅に変更いただくことで解決しました。これはデフォルトテンプレートだとページの横幅がテーマの設定に影響をうけるためです。

デフォルトテンプレート Elementor全幅

ほかにも「画像」ウィジェットを使うと余白が残ってしまう場合があるので、そのときは画像ウィジェットを使わず、コンテナに背景を画像として設定してみてください。

 開催中のWordPress講座・セミナー

サイト制作&運営のお悩みを解決しませんか?

~ あなたのための特別カリキュラムでお悩み解決 ~
・制作・運営のちょっとした困ったを解決!
・集客&効率化のアドバイスも!
・オンラインレッスンだから全国どこでも参加可能
・受講後も安心!メールサポート付き

【東京開催】対面レッスンのElementor講座

~ 対面でのセミナーを再開しました~
ノーコードで簡単にデザインができる
大人気プラグイン「Elementor」の対面での講座です。

新しいWordPress作成のスタンダード!

~ Elementorでサイトデザインを作ってみよう ~
WordPressでの制作はこれから大きく変化します!
テーマを選んで当てはめていく作り方から、
自分で自由にデザインし、テーマまで作れるオンライン講座です。

 はっちゃんセミナー公式SNS

 はっちゃんYouTubeチャンネル

無料セミナー・お役立ち情報を配信中!

公式メールマガジンもあります!

新着情報

  ピックアップ講座

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

  ピックアップ記事

  おすすめ画像編集ツール

Canvaバナー
おすすめ画像編集ソフトです。当サイトのアイキャッチ画像やバナー、Instagram用の画像や当サイトのチラシもこちらのCanvaで作っていますよ!無料版で十分です。

 

 カテゴリー
公式Facebook
公式LINEアカウント

友だち追加

こちらのURLからお友だち登録できます。
https://lin.ee/CbqqEEI

公式メールマガジン

こちらのURLからメルマガに登録できます。https://www.8seminar.com/mailmagazine-form

PAGE TOP