Elementor Pro『ポートフォリオ』ウィジェットに使い方

『ポートフォリオ』ウィジェトは一見画像のみが作品集のように陳列されているだけように見えますが、ポートフォリオという言葉の通り、アイキャッチ画像とマウスオーバー時に表示されるタイトルを主体に、ページなどの情報を簡潔に集約したウィジェットです。

各画像をクリックすると画像ごとのページへリンクされる仕組みになっています。
これだけなら画像ウィジェット、ギャラリーウィジェット等でも同じことはできますが、ポートフォリオウィジェットの凄いところはQueryの取得情報などの設定により、カテゴリーやタグに従い自動で更新し表示されることにあります。

この記事では、ポートフォリオウィジェットの使い方を詳しく説明していきます。

ポートフォリオウィジェットの挿入

ポートフォリオウィジェットの挿入

『ポートフォリオ』ウィジェットをドラッグ&ドロップで挿入します。

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

こちらはポートフォリオウィジェット挿入後の表示画面です。
このように、デフォルトで縦2列、横3列で画像が格子状に配置されます。

マウスオーバー時の表示画面

そして各画像にマウスオーバーすると上記画像の様にオーバーレイがかかり、タイトルが現れます。
この画像とタイトルの関連性は、ポートフォリオのデフォルトで投稿のアイキャッチ画像とタイトルが表示されているからです。

コンテンツタブ・レイアウト

コンテンツタブ・レイアウト

コンテンツタブ・レイアウトの説明は【Elementor Pro『ポストウィジェット』の使い方】の記事の同セクション部分で全く同じことを説明していますのでそちらを参考にしてください。

コンテンツタブ・Query

コンテンツタブ・Query

コンテンツタブ・Queryについて、【Elementor Pro 『Query』の使い方】という記事でQueryの機能だけを詳しく説明していますのでそちらを参考にしてください。

コンテンツタブ・Filter Bar

コンテンツタブ・Filter Bar

『Filter Bar』とは、カテゴリーやタグなどの表示のことで、こちらでの設定はそのフィルターの『表示』をオンにするかオフにするかの選択になります。
※デフォルトは『オフ』に設定されています。

Taxonomyの説明

『表示』を『オン』にすると編集タブには新たに『Taxonomy』という編集項目が追加されます。
※Taxonomyの操作をしない限り、この段階では特にサイト画面上に変化はつきません。

Taxonomy

Taxonomyの種類

『Taxonomy』のテキストバーをクリックすると上記画面の様に

  • カテゴリー
  • タグ
  • フォーマット

と出てきます。

カテゴリー

Taxonomy・カテゴリー

『カテゴリー』を選択すると投稿の持つすべてのカテゴリーがウィジェット上部に表示されます。

タグ

Tazonomy・タグ

『タグ』を選択すると投稿の持つすべてのタグがウィジェット上部に表示されます。

フォーマット

Taxonomy・フォーマット

『フォーマット』を選択するとこちらのサンプルサイトの画面上は特に変化が起きません。
なぜならこのサンプルサイトの投稿にフォーマットを設定したものが無いためです。
そのフォーマットとはどこの設定に当たる部分なのかを以下で説明します。

投稿フォーマットの説明

上記はWordPressの投稿の編集画面です。
画面右側の『投稿』編集タブ内にある『投稿フォーマット』にて『標準』以外を選択しているものがある場合はTaxonomyで『フォーマット』を選択した時に画面上に反映されます。

スタイルタブ・Items

スタイルタブ・Items

カラムのすき間

カラムのすき間の説明

『カラムのすき間』は画像の縦列の間隔をカーソルを右にスライドさせることにより拡張することができます。
上記はカラムのすき間の値を『100』(最大値)に設定した時の表示画面です。
※デフォルトの値は『0』に設定しています。

Rows Gap

Rows Gapの説明

『Rows Gap』は画像の横列の間隔をカーソルを右にスライドさせることにより拡張することができます。
上記は Rows Gapの値を『100』(最大値)に設定した時の表示画面です。
※デフォルトの値は『0』に設定しています。

ボーダーの丸み

ボーダーの丸みの説明

『ボーダーの丸み』のボーダーとは枠線のことを言いますが、ここでは画像の外郭と捉えてください。
ボーダーの丸みの値を上げるにつれて画像の角に丸みをつけることができます。
上記はボーダーの丸みの値を『115』にした時の表示画面です。
デフォルトの画像サイズでは、これがつけれられるボーダーの丸みの最大値です。
※画像のサイズによりボーダーの丸みの最大値は変化します。

スタイルタブ・Item Overlay

スタイルタブ・Item Overlay

背景色

背景色の変更

『背景色』ではマウスオーバー時のオーバーレイの色味をカラーピッカーより自由に変更することができます。
デフォルトでは不透明色に設定されていますが、カラーピッカーの下部で透明度を調整することも可能です。

色 / 書体

タイトルの文字色・書体の変更

『色』『書体』ではマウスオーバーでオーバーレイと共に出てくるタイトルの色味と書体の変更をすることができます。
書体のタイポグラフィの編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・Filter Bar

スタイルタブ・Filter Bar

Filter Bar・色の変更

『色』ではFilter Barの通常時の色をカラーピッカーより自由に変更することができます。

有効時の色

Filter Bar・有効時の色の変更

『有効時の色』はFilter Barがクリックされアクティブな状態になっている時の色をカラーピッカーより自由に変更することができます。

書体

書体のタイポグラフィの編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。

スペースの間隔

Filter Bar・スペースの間隔の説明

『スペースの間隔』では、Filter Barの文字と文字の間の間隔をカーソルを左右にスライドさせることにより縮小、拡張することができます。
上記はスペースの間隔を『100』に設定した時の表示画面です。
※デフォルトの値は『10』に設定されています。

スペース

Filter Bar・スペース

『スペース』ではFilter Barと画像の間のスペースをカーソルを左右にスライドさせることにより縮小、拡張することができます。
上記はスペースの値を『100』に設定した時の表示画面です。
※デフォルトの値は『10』に設定されています。


『ポートフォリオ』ウィジェットはポストウィジェットと構成は同じですが、ポストウィジェットと違い外見が画像のみの構成なのでよりシンプルです。
また、画像ウィジェットやギャラリーウィジェットでは画像にリンクを貼る場合、手動で更新しなくてはならなくなりますがポートフォリオウィジェッの利点は、Queryの機能がついているので一度設定をしてしまえば自動で更新されるところにあります。

尚、ポストウィジェットの使い方は【Elementor Proポストウィジェットの使い方】の記事にて、Queryの設定方法については【Elementor Pro 『Query』の使い方】の記事で詳しく紹介をしていますので合わせてお読みください。
ぜひ、シンプルで機能的なサイト作りにポートフォリオウィジェットを使用してみてはいかがでしょうか?

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

目次

コメントを残す

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

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

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