Elementorの「セクション」を編集する5つの方法【背景画像】

Elementorのセクションにもたくさんの項目があるけど、どうやって編集すればいいの?背景に画像とか追加したい。。。

そんな方に向けて解説します。

どうも、こんにちは。
YUTAROU(@yutarou_sakai)です。

Elementorの基本である「セクション」の使い方・編集方法をマスターすることで、かなり自由にElementorでのサイト制作ができるようになります。

本記事では、Elementorの基本操作を知っている前提で解説しますので、まだ不安な方は以下の記事からはじめてみてください。

あわせて読みたい
【Elementorの基本操作】最初に覚えておくべき8つの必須知識 Elementorの基本操作を身につけるために、最初に覚えるべき8つの必須知識をスクショたくさんで解説します。

あ、あと、本記事の動画バージョンも用意してますので、お好きな方でご覧ください。

クリックできる目次

Elementorの「セクション」を編集する5つの方法

Elementorの「セクション」を編集する5つの方法を解説します。

5つのセクション編集方法
  • 背景に画像を追加する方法
  • 画像のサイズと位置の調整
  • 背景オーバーレイの方法
  • セクションの複製方法
  • シェイプ区切り

それではみていきましょう。

背景に画像を追加する方法

まずは、「背景に画像を追加する方法」です。

よくある、サイトのトップページなどで使えますね。

背景に画像を追加する方法:セクションとウィジェットを用意

まずは適当にセクションを1つ用意し、「テキストウィジェット」を追加してください。

背景に画像を追加する方法:カラムギャップを最小の高さに

次に「カラムギャップ」を「最小の高さ」に設定します。

これで指定した高さ”以下”にならず、最低限の高さを確保できます。

背景に画像を追加する方法:背景タイプをクラシックに

セクションの「スタイル」で「背景>通常>クラシック」を選択。

背景に画像を追加する方法:画像を選択から画像をアップロード

「画像を選択」から画像をアップロードしてみましょう。

背景に画像を追加する方法:セクションの背景に画像を挿入が完了

すると、セクションの背景に画像が挿入され、「画像の上にテキスト」が表示された状態になりました。

画像のサイズと位置の調整

次に、セクションに挿入した「背景画像のサイズと位置を調整する方法」です。

画像のサイズと位置の調整:位置の調整

セクションの編集メニューで「スタイル>背景>位置>中央/中央」を選択。

これで背景画像が縦横の中央に配置されます。

画像のサイズと位置の調整:「最小の高さ」を600pxに調整

これ別にしなくていんですけど、デザイン的に高さが低いと思ったので、「最小の高さ」を600pxに調整しました。

画像のサイズと位置の調整:サイズを調整

次に「サイズ>カバー」を選択すると、セクションの大きさに合わせて画像のサイズがいい感じになります。

これで、アップされすぎてた画像がちょうどいいサイズに調整できました。

背景オーバーレイの方法

今の状態だと、背景画像の色とテキストの色がかぶって見えづらいですよね。

テキストカラーの変更と、背景オーバーレイの適用で解決します。

背景オーバーレイの方法:文字色を変更

見出しウィジェットのメニュー(カーソルを合わせて表示されるペンボタンをクリック)を表示して「スタイル>文字色>カラーパレット」をクリック。

背景オーバーレイの方法:文字色を白にして目立つように

カラーパレットが開きますので、「白色」に変更してみましょう。

すこし文字が目立ちましたね。

背景オーバーレイの方法:セクションの背景オーバーレイを設定

次にセクションのメニューを開いて「スタイル>背景オーバーレイ>色>カラーパレット」をクリック。

背景オーバーレイの方法:背景画像を見せつつテキストをはっきり目立たせる

カラーパレットで「黒色」を選択し、透明度を少し下げてみましょう。

すると、うっすらと画像の上に黒色を乗せることができました。

このように背景オーバーレイを活かすことで、背景画像を見せつつテキストをはっきり目立たせることが可能になります。

セクションの複製方法

次にセクションの複製方法です。

一度作ったセクションのデザインは、他の場所でも使い回すことができます。

セクションの複製方法:簡易メニューを開いて複製を選択

セクションのメニュー部分で「右クリック」をすると、セクションの簡易メニューが開きます。

そこで「複製」を選択してみましょう。

セクションの複製方法:セクションを複製

すると、まったく同じセクションが複製されました。

このように複製を活かすことで、爆速でページ作成ができます。

簡単ですね\(^o^)/

シェイプ区切り

次にセクション間の区切り部分を編集してみましょう。

シェイプ区切り:異なった背景色のセクションを2つ用意

これまでの復習がてら、上スクショのようなセクションを2つ用意してみましょう。

だいたい似ていればOKです。

シェイプ区切り:山を選択

下のセクションのメニューから「スタイル>シェイプ区切り>上>タイプ>山」を選択。

シェイプ区切り:セクションの区切り部分にデザインが付いた

すると、セクションの区切り部分にデザインが付きました。

他にも様々なデザインを選択できます。

あまり入れすぎるとうるさいかもですが、アクセントで使うとグッとクオリティが上がりますね。

「セクション」はElementorを構成する基本

5つのセクション編集方法
  • 背景に画像を追加する方法
  • 画像のサイズと位置の調整
  • 背景オーバーレイの方法
  • セクションの複製方法
  • シェイプ区切り

お疲れさまでした。

これでセクションの編集方法は完璧ですね。

セクションの扱いになれると、素晴らしいサイト制作者へグッと近づきますので、繰り返し練習しましょう。

さいごまでご覧いただきありがとうございます!
定期的にブログの新着記事情報を受け取りませんか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

YUTAROUのアバター YUTAROU 副業Webマーケター

マーケティングとコードと筋トレが好きです。
都内のITベンチャー企業でデータ分析やABテストをしてバリバリのマーケターとして働きながら、副業でブログやWeb制作メンターをしている24歳です。このブログではビジネスマンのための、副業方法やビジネススキルを発信しています。

詳細なプロフィールはこちらの記事にまとめています
YUTAROUのプロフィール

クリックできる目次
閉じる