Elementor Pro 『Author Box』ウィジェットの使い方

Elementor Proのテーマビルダー内の『SINGLE』ウィジェットの中のひとつ、『Author Box』ウィジェットはウィジェットを挿入するだけで『プロフィール写真』『ブログ上の表示名』『プロフィール情報』などを一瞬で表示することができます。
この記事では『Author Box』ウィジェットの使い方、編集の仕方を詳しく説明していきます。

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

Author Boxウィジェットの挿入

Author Boxウィジェットの挿入

『Author Box』ウィジェットをドラッグ&ドロップで挿入します。

Author Boxウィジェット挿入後の表示画面

するとこの様に画面上には

  • 画像
  • 名前
  • プロフィール情報

が表示されます。

これは、『Preview Settings』で編集画面上にプレビューする記事の設定が『NEOMI』と言う人物が書いた記事のものなのでこちらのプロフィールがでました。
仮にサイトに複数名の著者がいて、別の著者の記事がPreview Settingsで設定をされていたら、その別の著者のプロフィールが画面上に登場します。
また、こちらはあくまでテーマビルダーのテンプレートの編集画面でプレビューとして表示しているだけですので、このテーマビルダーの編集画面上で他人のプロフィールが表示されたとしても、サイト上に表示されるプロフィールも全てこれに変わるわけではありません。

このプロフィール情報はどこから来るのか

ダッシュボードの『ユーザー』内『プロフィール』の表示画面

Author Boxウィジェットを挿入すると表示されるプロフィール情報は、ダッシュボード画面の『ユーザー』の中の『プロフィール』内で登録した情報が出てきます。
尚、プロフィール写真はこちらの欄で事前に登録をしておけば、Elementorの編集画面にも反映します。

コンテンツタブの編集

コンテンツタブ・Author Info

取得方法

取得方法の説明

『取得情報』には以下の2つのオプションがあります。

  • Current Author
  • カスタム

Current Author

Current Authorは『今の著者』と言う意味です。
ですので、現在Preview Settingsの設定記事を『NEOMI』の物にしているのでそのプロフィールが表示されていると言うわけです。

カスタム

取得方向・カスタム時の表示画面

『カスタム』を選択すると、画面・編集タブ共に表示が変わります。
つまり、自分で画像や名前、プロフィール情報などをカスタマイズすることが可能です。
以下はカスタム後のサンプル画像です。

カスタムでAuthor Box編集後のサンプル表示

Profile Picture

Profile Picture『表示』

『Profile Picture』はプロフィール写真を表示させるかさせないかの選択になります。
デフォルトでは『表示』に設定されています。

Profile Picture『非表示』

『Profile Picture』を『非表示』に設定すると、画面上からプロフィール写真が無くなります。

Display Name

Display Name『表示』

『Display Name』は『名前』を表示させるかさせないかの選択になります。
デフォルトでは『表示』に設定されています。

Display Name『非表示』

『Disolay Name』を『非表示』に設定すると、『名前』が画面上に表示されなくなります。

HTMLタグ

HTMLタグの説明

『MTMLタグ』は、この Author Boxの『名前』のHTMLタグの選択を以下からすることができます。

  • H1〜H6
  • div
  • span

尚、デフォルトでは『H4』に設定されています。

リンク

リンクの説明

『リンク』は『名前』の部分をクリックしたら飛ぶリンクの設定になります。

Website

リンク・『Website』

『リンク』を『Website』に設定すると、Author Boxの『名前』の部分をクリックした時に、ダッシュボードの『ユーザー』の中の『プロフィール』で設定したサイトにリンクが飛ぶようになります。

『Website』で設定したリンクはどこから反映されているのか

Posts Archives

リンク・『Posts Archive』

『リンク』を『Posts Archive』に設定をすると、『名前』の部分をクリックした時にその名前の人物のアーカイブページにリンクが飛ぶようになります。

Biography

Biography『表示』

『Biography』では自分のプロフィール文を表示するかしないかの設定になります。
デフォルトでは『表示』に設定されています。

Biography『非表示』

『Biography』を非表示に設定すると上記画面のように、プロフィール文が画面から表示されなくなります。

Archive Button

 Archive Button『表示』

『Archive Button』では、アーカイブページにリンクするボタンを表示するかしないかの選択になります。
上記画面のように『表示』に設定すると、画面上にボタンが表示されます。
尚、デフォルトでは『非表示』に設定されています。

Archive Text

Archive Textのデフォルト『All Posts』

『Archive Text』は、Archive Buttonに表示される文字の変更ができます。
デフォルトでは『All Posts』と設定されています。

Archive Text変更後

『Archive Text』の右側のテキストバーで上記画面のように文字の変更が行えます。

レイアウト

レイアウトの説明

『レイアウト』ではAuthor Boxの画像のレイアウトを変更することができます。
選択オプションは以下の3つです。

  • Above(上)

レイアウト:左

画像は左の配置になります。
尚、デフォルトではこちらの『左』に設定されています。

Above

レイアウト・Above(上)

画像が上に配置されます。

レイアウト・右

画像が右に配置されます。

配置

『配置』では、Author Boxの『名前』『プロフィール文』『Archive Button』の配置を

  • 中央

変更することができます。

配置・左

こちらは配置を『左』に設定した時の表示画面です。

中央

配置・中央

こちらは配置を『中央』に設定した時の表示画面です。

配置・右

こちらは配置を『右』に設定した時の表示画面です。

スタイルタブ・画像

スタイルタブ・画像

Vertical Align

Vertical Alignの説明・上

『Vertical Align』の左側のアイコン『上』を選択すると、画像の上部がカラムの上部のラインに並ぶように配置されます。
尚、こちらはデフォルトの設定になります。

Vertical Align・中央

また、右側のアイコン『中央』を選択すると、画像の中心がカラムの中心に並ぶように配置されます。

画像サイズ

画像サイズの説明

『画像サイズ』では文字通り、カーソルよ左右にスライドすることにより画像を大きくしたり小さくしたりすることができます。

画像サイズの値を50にした時のサンプル画像

こちらは画像の値を『50』にした時のサンプル画像です。
デフォルトの画像は『100』の値ら辺で設定されています。

すき間

すき間の説明

『すき間』では、『画像』と『名前・プロフィール文・(ボタン)』の間のスペースを広げたり、狭めたりすることができます。

すき間の値を80にした時のサンプル画像

こちらは『すき間』の値を『80』にした時のサンプル画像です。
尚、デフォルトは『20』の値辺りに設定されています。

ボーダー

ボーダーの説明

『ボーダー』では、画像に枠線を付けるか付けないかの設定になります。
デフォルトでは『いいえ』に設定されています。

ボーダーを『はい』にした時

『ボーダー』を『はい』にすると、上記画面の様に画像に枠線がつきます。

また、『ボーダー色』と『ボーダー幅』の編集オプションが編集タブに追加されます。

ボーダー色

ボーダー色の説明

『ボーダー色』ではこの様にカラーピッカーから好きな色を選択することができます。

ボーダー幅

ボーダー幅の説明

『ボーダー幅』では枠線の太さをカーソルをスライドづることにより細くしたり太くしたりすることができます。
上記は、ボーダーの幅の値を『12』にした時の表示画面です。
尚、デフォルトの値は『3』辺りに設定されています。

ボーダーの丸み

ボーダーの丸みの説明

『ボーダーの丸み』では、枠線の角の丸みを変更することができます。

ボーダーの丸みの値を20にした時のサンプル画像

カーソルの横の横スライドで枠線の角の丸みを調整します。
上記は値を20にした時のサンプル画像です。
尚、デフォルトではボーダーの丸みの値は100に設定されています。
値を0にすると画像は正方形になります。

ボックスシャドウ

ボックスシャドウの説明

『ボックスシャドウ』では、枠線の外側に影を付けることができます。
編集するには右側のペンマークをクリックします。

ペンマークをクリック・ボックスシャドウのエディター

すると上記画面の様にボックスシャドウの編集ボックスが表示されるので

  • 水平
  • 垂直
  • ぼかし
  • スプレッド
  • 位置

で自由に編集することができます。

スタイルタブ・テキスト

スタイルタブ・テキストの編集

名前

『Author Box』の名前部分の編集ができます。

名前・色の変更

こちらではカラーピッカーより名前の色を自由に変更することができます。

書体

名前・書体変更後のサンプル画像

『書体』ではペンマークをクリックするとタイポグラフィのボックスが開き、名前のフォントやサイズ、太さなどの各種ビジュアルの編集をすることができます。

すき間

名前・すき間の値の変更

『すき間』では、名前とプロフィール文の間のすき間を広げたり狭めたりすることができます。
上記画面はすき間の値を『80』に設定した時の表示画面です。
尚、デフォルトの値は『5』辺りに設定されています。

Biography

Biographyの編集

『Biography』はプロフィール文の色・書体・すき間を編集することができます。

尚、色・書体の編集につきましては一つ前のセクションの『名前』の色・書体の変更の仕方と全く同じですのでそちらを参考にしてください。

すき間

Biography・すき間の値の変更

『すき間』ではプロフィール文とボタンの間のスペースを狭めたり広げたりすることができます。
上記サンプルはすき間の値を『75』にした時の表示画面です。
尚、デフォルトの値は『10』前後に設定されています。

スタイルタブ・Button

スタイルタブ・Buttonの説明

『Button』では文字通り『ボタン』の編集をすることができます。
文字色・書体の編集の仕方についてはこの記事の『名前』のセクションで説明しているやり方と同じですのでそちらを参考にしてください。

背景色

背景色の変更

『背景色』では、ボタン内の背景色の変更が可能です。

ホバー

ホバー時の設定・色/背景色/アニメーション

『ホバー』では、ボタンにマウスオーバーした時の色・背景色の変更、またアニメーションを付けることもできます。

こちらの動画はホバー時の色・背景色を変更し、『Pulse Grow』のアニメーションをつけた時のサンプル動画です。

ボーダー幅

ボーダー幅の説明

『ボーダー幅』では、ボタンを囲む枠線の幅の変更が行えます。

ボーダー幅変更後の表示画面

こちらはボーダーの幅の値を『10』にした時の表示画面です。
尚、デフォルトは『2』辺りに設定されています。

ボーダーの丸み

ボーダーの丸みの説明

『ボーダーの丸み』では枠線の角に丸みを付けることができます。

ボーダーの丸み変更後の表示画面

上記はボーダーの丸みの値を『60』にした時の表示画面です。

パディング

パディングの説明・ぱでキングの値変更後の表示画面

『パディング』では枠線とボタンの中の文字の間のスペースを変更することができます。
上記画面は、パディングの値(上・右・下・左)全てを『60』に設定した時の表示画面です。


例えば複数名で記事を編集している時など、この様に一度テーマビルダーで『Author Box』のテンプレートを作ってしまえば、サイト間で著者によるデザインのばらつきなどはなくなり、見た目・機能共に全て統一することができます。
ぜひ、Author Boxを活用してみてはいかがでしょうか。

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

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

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。