(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月10日 | Elementorの使い方 | コメント0件

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つの項目を設定することができます。デフォルトのテキストが気に入らなければ、設定してみてください。

説明の色

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

説明の書体

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

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

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

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?

Elementorの使い方を"無料"で学びませんか?