Elementorの画像ボックスウィジェットの使い方

Elementorの画像ボックスウィジェットでできること

Elementorの画像ボックスウィジェットでは、画像に見出しや文章をつけて表示することができます。

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツの画像ボックス設定

コンテンツの画像ボックス

ここからは、「コンテンツ」にある「ボタン」の設定をご紹介していきます。

画像の選択

ここで、画像をライブラリから選択しましょう。

画像サイズ

  1. Thumbnail – 150 × 150
  2. Medium – 300 × 300
  3. Medium Large – 760 × 0
  4. Large – 1024 × 1024
  5. フル
  6. カスタム

「画像サイズ」の項目では、上記の6つの選択肢があります。用途に合わせて、サイズを変更してみてください。ちなみに、使用しているテーマによっては、テーマオリジナルの大きさも用意されている場合があります。

タイトル・説明

ここでは、タイトルと説明文を入力します。

リンク

画像にリンクを追加したい場合は、「リンク」の欄にURLを入力します。

  • 新しいウィンドウで開く
  • Nofollowを追加

また、右側の歯車マークをクリックすると、

画像位置

Elementor 画像ボックス 画像の位置

デフォルトでは、画像はタイトルの上に表示されていますが、左や右に変更も可能ですので、ここで変えてみてください。

タイトルHTMLタグ

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • div
  • span
  • p

ここでは、上記のHTMLタグが用意されています。ページの位置などを考えて、適切なものを選択しましょう。

スタイルの画像設定

ここからは、スタイルの設定を確認していきます。まずは、「画像」の設定です。

スペース

ここでは、画像とタイトル、もしくは、画像とタイトル・説明のスペースを調節します。

ここは「幅」となっていますが、画像の大きさのことです。

ホバー時のアニメーション

「ホバー時のアニメーション」というのは、マウスカーソルを置いた時の動作です。ドロップダウンメニューから好きなアニメーションを選びましょう。

CSSフィルタ

画像ボックス CSSフィルタ

  • ぼかし
  • 明るさ
  • コントラスト
  • 彩度
  • Hue

この項目と「透明度」に関しては、「普通」と「ホバー」に共通する設定項目です。「CSSフィルタ」では、画像に効果をつけることができます。

透明度

画像を透明にしたいのであれば、ツマミを右に移動させていくと、どんどん画像が薄くなっていきます。

トランジション所要時間

ここの項目は、「普通」タブにしかありませんが、「ホバー時のアニメーション」で設定したアニメーションにかかる時間のことです。

スタイルのコンテンツ設定

配置

  • 中央
  • 均等割付

画像とタイトル、説明をセットで位置の変更ができます。

列の整列

Elementor 画像ボックス 列の整列

画像をタイトル・説明の左側、もしくは、右側に表示している場合に限りますが、タイトルと説明をセットで、上・中央・下に配置することができます。

タイトルのスペース

ツマミを右に持っていくと、タイトルと説明文のスペースを広げることができます。

タイトルの色

タイトルの色を設定します。

タイトルの書体

画像ボックス 書体

  • フォント
  • サイズ
  • 太さ
  • 変換
  • スタイル
  • 装飾
  • 行の高さ
  • 字間

ここでは、上記の8つの項目を設定することができます。デフォルトのテキストが気に入らなければ、設定してみてください。

説明の色

タイトルの設定と同じで、説明文の色を設定します。

説明の書体

ここもタイトルと同じく、説明文の書体を設定します。

3 Comments

  1. こんにちは。
    いつも勉強させてもらってます。
    ありがとうございます。

    画像ボックスで困っているのですが、
    タイトルのテキストの大きさなどを編集しても、リンクを入れると
    フォントなどがデフォルト?に戻ってしまいます。

    おそらく、リンクの方のcssが優先されてしまっているのですが、対策などありますでしょうか?

    トップの製品が並んでいるところの、一番上の列、一番左がそうです。
    ほかより、フォントが細くなってしまっていると思います。

    リンクをはずすと、他と同じ太い文字に戻ります。

    分かりましたら教えていただけると幸いです。

  2. 追伸ですが、その他のウィジェットの場合、リンク入れてから、フォントの大きさや太さなど変更すれば元に戻せるのですが、画像ウィジェットはそれがうまくできませんでした。
    特に太さが変えられないようです。。。

    1. 通常のテキストではなく、リンクテキストのスタイルが適用されているのだと思います。テーマのカスタマイズあるいはElementorのテーマスタイル等で変更ができると思います。

コメントを残す

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