Elementorでサイトの背景色を変更する方法

表題の通り、ElementorでWebサイトの背景色を設定/変更する方法について紹介します。

背景色の設定はサイトのイメージに関わるので重要ですが、Elementorを使う場合は少しコツが必要かもしれないです。

以下にて簡単に説明していますので、参考にしてみて下さい。

背景色の設定・変更方法

実はElementorで背景色を設定・変更する方法は幾つかあって、大きくは下記4つです。

1.グローバルセッティングから設定する

2.個別ページの設定画面から設定する

3.Elementor上のカスタムCSSで設定する

4.WordPressテーマのカスタマイズページで設定する

※細かいことを言えばもっとありますが

このように背景色の設定方法が複数存在するので、一定のルールに基づいて使い分けをしておかないと後々混乱してしまいます。

例えば、Elementorのグローバルセッティングから背景色を変更しようとした時に、追加CSSでも背景色を設定していると、互いに干渉し合ってしまい（背景色を2重で設定している状態）、うまく設定できないといったことが起こってしまいます。

私は、1.グローバルセッティングからページ全体を設定して、2.個別のページで背景色を変えたい場合は個別ページの設定画面から設定する方法に統一しています。

グローバルセッティングから設定する方法

下記にてグローバルセッティングで背景色を設定する方法について紹介します。

こちらでは、サイト全体（固定ページ、投稿ページ）の背景色を一括設定することが可能です。

1.左上のアイコンを選択

Elementorを起動し、左上のハンバーガーマークを選択します。

2.Theme Styleをクリック

Global Style>Theme Styleを選択します。

3.背景を変更

Theme Styleが開けたら、背景タブを開き、背景タイプから背景色を変更することが出来ます。

単色の背景に加えて、グラデーションや画像を背景色として使うことも可能です。

個別ページの設定画面から設定する方法

続いて、個別ページでの設定方法について紹介します。

特定のページ（Topページや、コンタクトページ等）でグローバルセッティングで設定した背景色とは別の色を使いたい場合は、こちらの方法で個別のページ毎に色を設定することが可能です。

1.歯車マークをクリック

背景色を設定したいページでElementorを起動し、左下にある歯車マーク（設定）をクリックします。

2.本文のスタイルから背景を変更

ページ設定>スタイル>本文のスタイルを開き設定します。

背景タイプで、背景を単色にするかグラデーションにするかを設定できますので、選択後色を選んでいきます。

以上です。

トラ蔵

IT企業でWebマーケティングを担当しています。
趣味でElementorの使い方を紹介しています。