Elementor Proのポートフォリオウィジェットの使い方
Elementor Proの「Portfolio」は、公開した記事をギャラリーのように表示することができるウィジェットです。
コンテンツのLayout設定
まずは、「コンテンツ」にある「レイアウト」の設定を確認していきましょう。
カラム
ウィジェット内のカラム数を1~6の内で設定できます。
Posts count
ウィジェット内に表示する記事の数を決めることができます。
画像サイズ
画像サイズの設定ができます。
Masonary
「オン」にすると画像の大きさが不均等になり、「オフ」にすると全ての画像の大きさが均等になります。
Item ratio
画像の比率を設定できます。
Show title
「オン」にするとホバー時(画像にカーソルが置かれている時)に画像にタイトルが表示されます。「オフ」にすると非表示になります。
タイトル HTML タグ
ホバー時のタイトルのHTMLタグを設定できます。H1~6、spanタグ、divタグ、pタグから選べます。
コンテンツのQuery設定
取得方法
どのタイプの記事を表示するか設定できます。「投稿」、「固定ページ」、「Manual Select」、「Current Query」の4つから選べます。「投稿」にすると、通常の投稿記事が表示されます。「固定ページ」だと、固定ページの記事が表示されます。「Manual Select」では、手動で表示させたい記事を選択できます。「Current Query」は、編集している記事が表示されます。
Include By
ここでフィルターのタイプを選択します。「Term」か「Author」があります。カテゴリーやタグでフィルターをかけたいなら「Term」を、記事の執筆者でフィルターをかけたいなら「Author」を選択します。そして、その下の欄にキーワードを入力して、適切なカテゴリーや著者名などを選びます。
Order By
記事を表示する基準を決めます。その基準は「Date-日付」、「Title-タイトル」、「Menu Order-IDの順序」、「Current Query-現在のクエリ」です。
Order
「ASC」は「Ascending-上がる」を意味し、記事を「Order By」で設定した基準で上るように表示してくれます。例えば、「date」を選んだら、記事が古いのから新しいものへと順番に表示されるようになります。「DESC」は、「Descending-降りる」を意味し、「ASC」の逆になります。
除外する記事を選択できます。「Current Post」では現在編集している記事を非表示にできます。「Manual Selection」を選択すると「Search & Select」が表示されますので、そこで非表示にする記事を選択します。
Exclude By
ウィジェットに表示したくない記事を探して、選択します。
Avoid Duplicates
「はい」にすると重複記事を非表示にすることができます。
Offset
先頭から数えて、入力した数だけ表示される記事が飛ばされます。例えば、1と入力したら、先頭に表示されるはずだった記事が飛ばされて2つ目の記事から表示されます。
Query ID
サーバー側のフィルターをかけるには、クエリにユニークなIDを追加する必要があります。(詳細はこちら)
コンテンツのFilter Bar設定
表示
「オン」に切り替えると、ポートフォリオウィジェットにタブを表示することができます。また、下に「Taxonomy」の設定項目が表示されます。
Taxonomy
「カテゴリー」や「タグ」、「フォーマット」がありますが、タブにそれらを表示することができます。
スタイルのItems設定
カラムのすき間
記事の画像間(横)のスペース幅を設定できます。
Rows Gap
記事の画像間(縦)のスペース幅を設定できます。
ボーダー丸み
画像の角に丸みを帯させることができます。
スタイルのItem overlay設定
背景色
ホバー時（カーソルを置いた時）の背景色を設定できます。
色
ホバー時に表示される記事タイトルの色を設定できます。
書体
タイトルの書体を設定できます。
スタイルのFilter bar設定
色
通常時のフィルターバーのテキストの色を設定できます。
有効時の色
これは、タブを選択している時のフィルターバーのテキストの色です。
書体
フィルターバーの書体を設定できます。
スペースの間隔
フィルターバーのタブ同士のスペースを設定できます。
スペース
フィルターバーとポートフォリオのスペースを設定できます。