Elementorの推薦文ウィジェットの使い方

Elementor一般『推薦文』ウィジェットの使い方

Elementorでウェブページを作っていて、誰かのコメントを載せたいと思ったことや、レビューなど掲載したい時ってありませんか?

そんな時は、無料で使える一般『推薦文』ウィジェットが便利です。
このウィジェットはコメント者の写真や名前、簡単なステータスなど載せられます。

そこで今回は『推薦文』ウィジェットの使い方を説明します。

この記事は『Elementorの使い方無料コース』を元に作っています。
動画でみたい方は是非この無料コースをチェックしてみてください。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

コンテンツの編集

推薦文ウィジェット挿入直後

『推薦文』ウィジェットを挿入した直後の画面です。
画像を先に入れるとイメージしやすくなると思うので、少し説明の順番が前後します。

画像の選択をする

画像の選択

画像を選択するときは、カーソルを持っていくと四角のように選択ボタンが出てくるのでクリックします。

メディアの選択画面

するとメディアライブラリが開きます。
好きな画像を選択するかアップロードしましょう。

丸のようにチェックが入っているものが、今選択している画像になります。
確認できたら右下のボタンをクリックし挿入してください。

画像が挿入された画面

上のように選択した画像が、右側にも反映されます。

コンテンツにテキストを入力

コンテンツにテキストを入力

コンテンツの四角部分にテキストを入力します。
同時に右側の画面にも反映されます。
画像の人物のコメントやレビューなどを入れるのがオススメです。

画像サイズはなんでもOK

画像サイズの選択肢

画像のサイズは上の画面で見るとたくさん選択肢がありますが、どれを選んでもあまり変わりがありません。
どうしてもこのサイズがいい!というものがあれば選んでください。

名前を直接入力

名前を入力した画面

名前を四角の欄に直接入力します。
画像の内容によって人物の名前や、建物であれば会社名など工夫してみてください。

タイトルを直接入力

タイトルを入力した画面

タイトルも四角の欄に直接入力します。
簡単なステータスと入れると良いでしょう。

例えば、サプリメントのサイトを作っているとします。
そこでコメントの人物がドクターだとすると『ドクターが認めたサプリメント』というイメージを持たせることができますよね。

リンクを設定する

リンク入力欄

リンクさせたいページがあれば、そのページのURLを入力します。

画像の位置を決める

画像の位置、アサイド

画像の位置は2種類で、上の画像は『アサイド』の状態です。
こちらは画像と名前とタイトルのテキストが横に並ぶパターンです。

画像の位置、上

一方『上』を選ぶと画像が上にきて、名前とタイトルのテキストが下になります。

配置を選ぶ

配置選択の画面

配置はよくある、左寄せ・中央・右寄せの3パターンです。
好きな配置を選びましょう。

配置設定時の注意点

配置の注意点

配置について一つだけ注意点があります。
画像のように右寄せにすると、画像や名前、タイトルだけでなく、コンテンツの部分も右寄せになります。

これは左寄せでも中央でも同じで、『ウィジェット全体の配置』と覚えておくと良いでしょう。

スタイルの編集

コンテンツタブの説明

スタイルタブは

  • コンテンツ
  • 画像
  • 名前
  • タイトル

と大きく4つに分けて編集できます。

『コンテンツ・名前・タイトル』の編集項目は同じ

文字色と書体

スタイルタブの『コンテンツ・名前・タイトル』の編集項目は文字色と書体のみです。

文字色と書体についてはテキストエディターウィジェットの記事で説明しているので割愛します。

今回は以下のように編集してみました。

コンテンツ・名前・タイトルの文字色と書体を編集した画面

『画像』の編集項目

画像の編集項目の説明

『画像』の編集項目はこのようになっています。
ボーダータイプを選択すると、幅と色が追加で出てきます。

画像サイズ

画像サイズの説明

画像のサイズを変更してみましょう。
名前やタイトルとのバランスをみて決めてください。

ボーダータイプ

ボーダータイプの選択肢

ボーダータイプは

  • なし
  • 直線
  • 2本線
  • 点線
  • 破線

から好きなタイプを選びましょう。今回は直線を選びました。

枠線の太さ

ボーダータイプをなし以外にすると、幅が選べるようになります。
四角部分に数字を入力するか、『▲▼』ボタンで調整してください。

数字が大きくなると、枠線も太くなっていきます。

枠線の色

色を選びます。
こちらもボーダータイプをなし以外にすると出てくる項目です。

枠線の丸み

枠線の丸み0で四角になる

枠線の丸みはデフォルト状態だと丸の形です。
矢印のように『0』と入れてみましょう。
すると画像は画面右側のように、四角で表示されます。

枠線の角の丸みを出す

数字を0から大きくしていくと、だんだん角が丸くなっていきます。
一定の数字を超えると完全に丸になり、それ以上数字を大きくしても丸のまま変わりません。
お好みの形に設定しましょう。

以上がElementor一般『推薦文』ウィジェットの使い方となります。
ぜひ使ってみてください。

なお高度な設定については全て共通しています。
詳しくはElementor – 『高度な設定タブ』全部説明【初心者必見】をご覧ください。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

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

目次

コメントする

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

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

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

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

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