Elementorのセクションにもたくさんの項目があるけど、どうやって編集すればいいの？背景に画像とか追加したい。。。
そんな方に向けて解説します。
どうも、こんにちは。
YUTAROU(@yutarou_sakai)です。
Elementorの基本である「セクション」の使い方・編集方法をマスターすることで、かなり自由にElementorでのサイト制作ができるようになります。
本記事では、Elementorの基本操作を知っている前提で解説しますので、まだ不安な方は以下の記事からはじめてみてください。
あ、あと、本記事の動画バージョンも用意してますので、お好きな方でご覧ください。
Elementorの「セクション」を編集する５つの方法
Elementorの「セクション」を編集する５つの方法を解説します。
- 背景に画像を追加する方法
- 画像のサイズと位置の調整
- 背景オーバーレイの方法
- セクションの複製方法
- シェイプ区切り
それではみていきましょう。
背景に画像を追加する方法
まずは、「背景に画像を追加する方法」です。
よくある、サイトのトップページなどで使えますね。
まずは適当にセクションを１つ用意し、「テキストウィジェット」を追加してください。
次に「カラムギャップ」を「最小の高さ」に設定します。
これで指定した高さ”以下”にならず、最低限の高さを確保できます。
セクションの「スタイル」で「背景＞通常＞クラシック」を選択。
「画像を選択」から画像をアップロードしてみましょう。
すると、セクションの背景に画像が挿入され、「画像の上にテキスト」が表示された状態になりました。
画像のサイズと位置の調整
次に、セクションに挿入した「背景画像のサイズと位置を調整する方法」です。
セクションの編集メニューで「スタイル＞背景＞位置＞中央/中央」を選択。
これで背景画像が縦横の中央に配置されます。
これ別にしなくていんですけど、デザイン的に高さが低いと思ったので、「最小の高さ」を600pxに調整しました。
次に「サイズ＞カバー」を選択すると、セクションの大きさに合わせて画像のサイズがいい感じになります。
これで、アップされすぎてた画像がちょうどいいサイズに調整できました。
背景オーバーレイの方法
今の状態だと、背景画像の色とテキストの色がかぶって見えづらいですよね。
テキストカラーの変更と、背景オーバーレイの適用で解決します。
見出しウィジェットのメニュー（カーソルを合わせて表示されるペンボタンをクリック）を表示して「スタイル＞文字色＞カラーパレット」をクリック。
カラーパレットが開きますので、「白色」に変更してみましょう。
すこし文字が目立ちましたね。
次にセクションのメニューを開いて「スタイル＞背景オーバーレイ＞色＞カラーパレット」をクリック。
カラーパレットで「黒色」を選択し、透明度を少し下げてみましょう。
すると、うっすらと画像の上に黒色を乗せることができました。
このように背景オーバーレイを活かすことで、背景画像を見せつつテキストをはっきり目立たせることが可能になります。
セクションの複製方法
次にセクションの複製方法です。
一度作ったセクションのデザインは、他の場所でも使い回すことができます。
セクションのメニュー部分で「右クリック」をすると、セクションの簡易メニューが開きます。
そこで「複製」を選択してみましょう。
すると、まったく同じセクションが複製されました。
このように複製を活かすことで、爆速でページ作成ができます。
簡単ですね＼(^o^)／
シェイプ区切り
次にセクション間の区切り部分を編集してみましょう。
これまでの復習がてら、上スクショのようなセクションを２つ用意してみましょう。
だいたい似ていればOKです。
下のセクションのメニューから「スタイル＞シェイプ区切り＞上＞タイプ＞山」を選択。
すると、セクションの区切り部分にデザインが付きました。
他にも様々なデザインを選択できます。
あまり入れすぎるとうるさいかもですが、アクセントで使うとグッとクオリティが上がりますね。
「セクション」はElementorを構成する基本
- 背景に画像を追加する方法
- 画像のサイズと位置の調整
- 背景オーバーレイの方法
- セクションの複製方法
- シェイプ区切り
お疲れさまでした。
これでセクションの編集方法は完璧ですね。
セクションの扱いになれると、素晴らしいサイト制作者へグッと近づきますので、繰り返し練習しましょう。
