Elementorの高度な設定タブ

Elementor – 『高度な設定タブ』全部説明【初心者必見】

前回までの記事を読んで頂ければ、ウィジェットのコンテンツタブスタイルタブに関しては大体どういうものかわかったと思います。
今回は最後のタブ『高度な設定』を説明します。

高度な設定は全てのウィジェットで共通

Elementorの高度な設定タブ

テキストエディターウィジェットでも画像ウィジェットでも『高度な設定タブ』を見ると、同じ項目があります。
どのウィジェットでもここの設定は同じなので、一つのウィジェットでこれを学んでしまえば、他の全てのウィジェットで使うことが出来ます。

『詳細』でマージンやパディングなどの基本CSSの設定

紛らわしいですが、詳細タブの中の詳細というセクションです。
ここで設定できるのは以下です。

  • マージン
  • パディング
  • z-index
  • CSS ID
  • CSS クラス

マージンは外側の余白で、パディングは内側の余白

Elementorの詳細タブのマージンとパディングの設定
Elementorのマージンとパディングの説明

上の画像を見てもらえるとわかると思うのですが、パディングの場所には背景の色がついてますが、マージンは透明です。
簡単に言うと、マージンはこのウィジェットの設定が及ばない場所だと考えてください。

下のボーダーのセクションで説明しますが、ウィジェット自体にボーダーをつける場合は、パディングの分外側にボーダーがつきます。

『z-index』がどの要素が上にくるかを決める

この値が大きいほど、ウィジェットなどが重なった時に上にくると考えてください。
これは下で説明している『配置』のセクションで、位置を『絶対』または『固定』にした場合に効果を発揮します。

『CSS ID』と『CSS クラス』は主にCSSを書くのに使う

CSSはウェブページのスタイルする時に使われるもので、Elementorでページをスタイルするのも後ろ側ではCSSが書かれています
主にこのCSS IDとCSS クラスをその時に使われるのですが、この入門編では割愛します。


実際のサイトでElementorでマージンやz-indexを設定し、テキストや画像をシンプルかつお洒落に配置する方法を説明した動画もありますのでよかったらご覧ください!

こちらはコンテンツの幅やマージンを設定し、リスト表示を見やすくデザインする方法を実演した動画です。

『モーション効果』は要素表示時のアニメーション

モーション効果のエディター表示

『Motion Effects』を使うと、ページスクロール時にこのウィジェットが画面に表示された時のアニメーションを設定出来ます。

『開始アニメーション』でアニメーションのタイプを決定

Elementorのモーション効果のアニメーションの種類

本当色々な種類のアニメーションがあり、クリックするだけでそのアニメーションを実際に見ることが出来ます。

『アニメーション継続時間』は『ゆっくり』、『普通』、『高速』かから選択

これはアニメーションのスピードとも言えます。三つしか選択技がないので、全て試して見ましょう。

『アニメーションの遅延』でアニメーション開始前の遅延を設定

ElementorのMotion Effectsの遅延の設定

ここでアニメーションの開始をどれくらい遅くできるかを設定出来ます。

『1000ms』で1秒

ここで『アニメーションの遅延』の横に(ms)と書いてますよね。
msとはミリセカンドの意味で、1/1000秒を意味します。
つまり1000msえ1秒となります。

先ほどのアニメーションの上の画像だけ遅延を1000ms(1秒)で設定してみました。
下のアニメーションが先に発動して、少し遅れて上のアニメーションが始まってるのが確認できると思います。
色々と設定してみましょう。
半角の数字しか受け付けませんので、注意しましょう。

『背景』の設定

Elementorの背景の設置

このセクションで背景の設定が出来ます。
ホバーの設定については上級編で説明しますので、今は割愛します。

『クラシック』背景

Elementorの背景設定、クラシック

『クラシック』を選択するとこのような設定画面が出てきます。

背景色の設定

Elementorでカラーピッカーを出す

これをクリックします。

Elementorで背景色を設定

このようにカラーピッカーと呼ばれる、色を選択するツールが出てきますので、そこから好きな色を選びます。
実際にウィジェットの色も変わりますので、色々な色を試せます

元の透明に戻したい時は、下の『クリア』書いてるボタンを押します。

背景画像の設定

Elementorで背景画像を挿入

このボタンを押して、背景画像を選択します。

Elementorの背景画像の設定画面

そして背景画像がちゃんと表示されていない場合があります。
これは画像のサイズウィジェットのサイズと関係しています。
この例では、画像が非常に大きいので部分的にしか背景に写っていません。

でも大丈夫です。画像を挿入してから出てきた設定がありますよね。

  • 位置
  • 添付
  • 繰り返し
  • サイズ

これらを設定して、うまく背景画像をセットします。

『位置』は画像のどの部分を背景画像に設定するのか

Elementorの背景画像の位置

位置にはこれらのオプションがあります。
『Custom』以外は書いてある通りで、『中央の中』だったら、画像の真ん中を背景画像に設定するということです。
3x3のグリッドで考えると分かりやすいと思います。

Elementorの背景画像を真ん中で設定

先ほどの背景を『中央の中』で設定すると、このようにメガネの間、つまり画像の中央が背景になってますね。

『Custom』で背景を自由にずらす

Elementorの背景のカスタムポジション

Customに設定すると自由に背景のXとYポジションをずらすことが可能です。
ですがこれを使うのは結構特殊な場合だと思います。

『添付』で背景画像を固定する

Elementorで背景を固定する

デフォルトはスクロールです。
これを『固定』にすると背景画像がその場所に固定され、スクロール時についてこなくなります。

『繰り返し』

これは小さい画像で試して見れば分かりますが、背景画像を繰り返して何枚も表示するのか、そしてその方向を決める設定です。

『デフォルト(繰り返し)』

Elementorの背景設定デフォルト

『繰り返しなし』

Elementorの背景繰り返さない

『横方向繰り返し』

Elementorの背景横に繰り返し

『縦方向繰り返し』

Elementorの背景を縦に繰り返し

『サイズ』で背景画像の大きさやどう表示されるかを決める

このセクションで背景画像の大きさから、もし画像が表示したいモジュールより大きい場合の設定をします。

『自動(デフォルト)』

これは背景画像が元のサイズでそのまま表示されます。
なので先に紹介したメガネの画像とても大きい画像なので部分的にしか表示されてないんです。

Elementorの背景画像を真ん中で設定

でも上の丸の画像は小さいので全部表示されてますね。

『カバー』

カバーは画像の横幅に合わせて、画面を全てカバーします。

猫の背景画像

縦長の画像を使うと分かりやすいです。

Elementorの背景画像をカバーにする

背景の横幅を画像が埋めました。
これが『カバー』です。

Elementorの画像の背景の例2

メガネの画像もこうなります。

『含める』

『含める』は画像の大きさに関係なく画像全体を表示します。

Elementorの背景画像を『含む』に設定

このように先ほどの縦長の画像も全体が表示されます。
上の画像で注意して欲しいのは、『繰り返し』の設定がされてるところです。
繰り返さないと画像は一度しか表示されないので、背景画像がない部分が発生してしまいます。

『Custom』

ここで自由に画像の幅を設定できます。

『グラデーション』

Elementorの背景グラデーションの設定

画像のボタンを押すと、このようにグラデーションのメニューが表示されます。
グラデーションとはその名の通り、一つの色が滑らかに別な色に変わるエフェクトです。

背景は二つの色から選べ、場所が開始と終了位置を決定

Elementorの背景グラデーションの例

このように色を二つ選んで見ましょう。
そして二つ目の色の『場所』を100にします。
上の画像のように、ウィジェットの上が0%で下が100%という風に考えます。
では一つ目の画像の『場所』を50%にしてみます。

Elementorのグラデーションの開始位置を変える

これでグラデーションの開始位置が50%のところにきたのがわかりますね。

タイプはまず線状を説明しますので、飛ばします。

『角度』でグラデーションの方向を決める

わかりやすいように、色は黒と薄い水色にしました。
このように角度を変えると、グラデーションの方向が変わります。

放射状『タイプ』

今見てきたのは、線状です。
そしてそれがスタンダードなので、今は放射状の詳しい説明は省きます。

Elementorの背景の放射状のグラデーション

このように放射状にグラデーションを作ることが可能です。
『位置』でこの円のスタート地点を決めます。
『中央の中』に設定すると、綺麗な円状ですが、他のオプションを選択すると楕円になったりもします。
是非試してみてください。


『背景タイプ』をフル活用したオシャレなサイトをこちらの動画で紹介しています。

どのように作成したかも説明をしていますのでぜひサイト構築の参考にしてください!

『ボーダー』

Elementorのボーダーの例

ボーダーの基本的な使い方は前回の記事で説明してますので、そこを見てください。
>>ボーダーの使い方

画像ウィジェットの画像のボーダーとの違い

「あれ、でも画像ウィジェットもボーダーあったよね?」
ありました。
でもこれはウィジェットのボーダーであって、画像のボーダーではないんです。

Elementorのレスポンシブ設定画面

画像ウィジェットのスタイルタブ画像に緑の点線のボーダーを入れました。
そして詳細タブでパディングを少し入れ、そしてウィジェット自体にボーダーを入れました。
この二つのボーダーは全く違うものをさします。

配置』でウィジェットの位置をコントロール

Elementorのウィジェットの位置設定

ここでウィジェットの幅と位置を設定できます。

『ウィジェットの幅』

  • デフォルト
  • 全幅(100%)
  • インライン(auto)
  • カスタム

オプションはこれらです。
一つ一つ説明していきますが、位置がデフォルトの状態では、全幅とデフォルトの違いがないので全幅は位置と一緒にあとで説明します。

『デフォルト』

Elementorの配置の設定をデフォルトに
丸の画像のはいったウィジェットの背景は水色に設定されています

『デフォルト』だとカラムの幅の100%をウィジェットが埋めます。

『インライン』

Elementorの配置の設定をインラインに

インラインにすると、『画像の横幅 + パディング + マージン』がウィジェットの大きさになります。

大きい画像を使うと、インラインでも100%になる

Elementorの配置のインライン画像が大きい場合

画像が大きいと、デフォルトのようにウィジェットがカラム全体の大きさになります。
『Vertical Align』というメニューが出てきますが、これは次のセクションで説明します。

『カスタム』で自由に横幅を設定

Elementorの配置でカスタムの幅を設定

『カスタム』に設定すると、『Custom Width』という設定が出てきます
これで自由にウィジェットの幅を変えることが可能です。

『Vertical Align』

『インライン』や『カスタム』を選択するとこのメニューが出てきます。
Vertical Alignの機能は次の条件を満たした時のみに意味をなします。

  1. 二つ以上のウィジェットが一つのカラムに挿入されている
  2. それらの配置の設定がインラインかカスタム
  3. 連続する二つのウィジェットの幅の合計がカラムの幅を超えない(同じカラムに二つ以上のウィジェットが並列して入る場合)

この時のウィジェットの縦の位置を決定します。

Elementorの『垂直方向に整列』の説明

この画像では、二つのウィジェットが一つのカラムに入っています。

  1. テキストウィジェットでカスタム幅に設定
  2. 画像ウィジェットでインラインに設定

画像がかなり小さいので、このように二つの合計がカラムの幅を超えていません
そのため、Vertical Alignで設定した位置に画像を持ってくることが可能です。

『位置』の設定

位置の設定は次の三つです。

  • デフォルト
  • 絶対
  • 固定

絶対と固定について説明します。

『絶対』

『Absolute』にすると、このウィジェットの入ってるカラムやセクションを無視して、自由にウィジェットの位置を移動することが可能です。
現在ウィジェットが入ってるカラムの一番左上の座標が(0, 0)となり、『オフセット』のスライダーを動かすことでウィジェットを移動できます。

水平方向 / 垂直方向は無視しても大丈夫

Elementorの位置の絶対と固定設定で使わない設定

これは『固定』でも同じなのですが、この上の画像の設定は使う必要はありません。
簡単に説明すると、0がどこなのかを表しています。
ここはちょっと複雑なので、下の説明は無視しても大丈夫です。

水平方向で左に設定すれば、X座標の0が左側になり、数が大きくなると右にいきます。
ここを右側に設定すれば、その逆です。
垂直方向はその上下バージョンで、Y座標がどこから始まるかです。
特にこだわりがなければ変える必要はありません。

『固定』はウィジェットを画面に固定する

『固定』と『絶対』の一つの違いは固定に設定すると、スクロールしてもそのウィジェットが画面に固定され動かないと言うことです。

『固定』の座標はカラムではなく、画面の一番左上が(0,0)となる

Elementorの配置を固定に設定すると画面の左上が座標0,0になる

実際のCSSでは絶対でも画面の左上を(0,0)とすることも可能ですが、割愛します。

『レスポンシブ』で画面の幅に分けてウィジェットの表示非表示を設定

Elementorのレスポンシブ設定画面

設定してるウィジェットで隠したいデバイスのところにチェックを入れるだけで、画面がその幅になった時にウィジェットを隠すことができます。

『Attributes』と『カスタム CSS』はPro版のみ

残念ながらこの二つは機能はプロ版のみです。
プロ版に興味がある方は、このページで色々なElementor Proの機能を紹介していますので、是非見てみてください。


次回は、セクションとカラムの使い方を説明します。

カラムの使い方についてはこちら!
>>Elementor – カラムの使い方【初心者必見】

セクションの使い方についてはこちらから!
>>Elementor – セクションの使い方 – レイアウトタブ編【初心者必見】
>>Elementor – セクションの使い方 – スタイルタブ編【初心者必見】

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

「Elementor – 『高度な設定タブ』全部説明【初心者必見】」への2件のフィードバック

  1. 解説有難う御座います。
    画像開始アニメーションでフェードインを使うのにスピードや秒数を決める欄が出てこないんですが何故だか分かりますか?
    教えて下さい!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通