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を追加

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

画像位置

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

タイトルHTMLタグ

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

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

スタイルの画像設定

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

スペース

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

幅

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

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

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

CSSフィルタ

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

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

透明度

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

トランジション所要時間

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

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

配置

• 左
• 中央
• 右
• 均等割付

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

列の整列

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

タイトルのスペース

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

タイトルの色

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

タイトルの書体

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

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

説明の色

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

説明の書体

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