Elementorの画像ボックスウィジェットの使い方
この記事の内容はこちら
Elementorの画像ボックスウィジェットでできること
Elementorの画像ボックスウィジェットでは、画像に見出しや文章をつけて表示することができます。
コンテンツの画像ボックス設定
ここからは、「コンテンツ」にある「ボタン」の設定をご紹介していきます。
画像の選択
ここで、画像をライブラリから選択しましょう。
画像サイズ
- Thumbnail – 150 × 150
- Medium – 300 × 300
- Medium Large – 760 × 0
- Large – 1024 × 1024
- フル
- カスタム
「画像サイズ」の項目では、上記の6つの選択肢があります。用途に合わせて、サイズを変更してみてください。ちなみに、使用しているテーマによっては、テーマオリジナルの大きさも用意されている場合があります。
タイトル・説明
ここでは、タイトルと説明文を入力します。
リンク
画像にリンクを追加したい場合は、「リンク」の欄にURLを入力します。
- 新しいウィンドウで開く
- Nofollowを追加
また、右側の歯車マークをクリックすると、
画像位置
デフォルトでは、画像はタイトルの上に表示されていますが、左や右に変更も可能ですので、ここで変えてみてください。
タイトルHTMLタグ
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
ここでは、上記のHTMLタグが用意されています。ページの位置などを考えて、適切なものを選択しましょう。
スタイルの画像設定
ここからは、スタイルの設定を確認していきます。まずは、「画像」の設定です。
スペース
ここでは、画像とタイトル、もしくは、画像とタイトル・説明のスペースを調節します。
幅
ここは「幅」となっていますが、画像の大きさのことです。
ホバー時のアニメーション
「ホバー時のアニメーション」というのは、マウスカーソルを置いた時の動作です。ドロップダウンメニューから好きなアニメーションを選びましょう。
CSSフィルタ
- ぼかし
- 明るさ
- コントラスト
- 彩度
- Hue
この項目と「透明度」に関しては、「普通」と「ホバー」に共通する設定項目です。「CSSフィルタ」では、画像に効果をつけることができます。
透明度
画像を透明にしたいのであれば、ツマミを右に移動させていくと、どんどん画像が薄くなっていきます。
トランジション所要時間
ここの項目は、「普通」タブにしかありませんが、「ホバー時のアニメーション」で設定したアニメーションにかかる時間のことです。
スタイルのコンテンツ設定
配置
- 左
- 中央
- 右
- 均等割付
画像とタイトル、説明をセットで位置の変更ができます。
列の整列
画像をタイトル・説明の左側、もしくは、右側に表示している場合に限りますが、タイトルと説明をセットで、上・中央・下に配置することができます。
タイトルのスペース
ツマミを右に持っていくと、タイトルと説明文のスペースを広げることができます。
タイトルの色
タイトルの色を設定します。
タイトルの書体
- フォント
- サイズ
- 太さ
- 変換
- スタイル
- 装飾
- 行の高さ
- 字間
ここでは、上記の8つの項目を設定することができます。デフォルトのテキストが気に入らなければ、設定してみてください。
説明の色
タイトルの設定と同じで、説明文の色を設定します。
説明の書体
ここもタイトルと同じく、説明文の書体を設定します。
