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

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

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

Elementor Pro ポートフォリオウィジェット

Elementor Proの「Portfolio」は、公開した記事をギャラリーのように表示することができるウィジェットです。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのLayout設定

Elementor Pro ポートフォリオウィジェット コンテンツ レイアウト

まずは、「コンテンツ」にある「レイアウト」の設定を確認していきましょう。

カラム

ウィジェット内のカラム数を1~6の内で設定できます。

Posts count

ウィジェット内に表示する記事の数を決めることができます。

画像サイズ

画像サイズの設定ができます。

Masonary

「オン」にすると画像の大きさが不均等になり、「オフ」にすると全ての画像の大きさが均等になります。

Item ratio

画像の比率を設定できます。

Show title

「オン」にするとホバー時(画像にカーソルが置かれている時)に画像にタイトルが表示されます。「オフ」にすると非表示になります。

タイトル HTML タグ

ホバー時のタイトルのHTMLタグを設定できます。H1~6、spanタグ、divタグ、pタグから選べます。

コンテンツのQuery設定

Elementor Pro ポートフォリオウィジェット Query include設定

取得方法

どのタイプの記事を表示するか設定できます。「投稿」、「固定ページ」、「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」の逆になります。

Elementor Pro ポートフォリオウィジェット Query

除外する記事を選択できます。「Current Post」では現在編集している記事を非表示にできます。「Manual Selection」を選択すると「Search & Select」が表示されますので、そこで非表示にする記事を選択します。

Exclude By

ウィジェットに表示したくない記事を探して、選択します。

Avoid Duplicates

「はい」にすると重複記事を非表示にすることができます。

Offset

先頭から数えて、入力した数だけ表示される記事が飛ばされます。例えば、1と入力したら、先頭に表示されるはずだった記事が飛ばされて2つ目の記事から表示されます。

Query ID

サーバー側のフィルターをかけるには、クエリにユニークなIDを追加する必要があります。(詳細はこちら)

コンテンツのFilter Bar設定

Elementor Pro ポートフォリオウィジェット コンテンツ Filter Bar

表示

「オン」に切り替えると、ポートフォリオウィジェットにタブを表示することができます。また、下に「Taxonomy」の設定項目が表示されます。

Taxonomy

「カテゴリー」や「タグ」、「フォーマット」がありますが、タブにそれらを表示することができます。

スタイルのItems設定

Elementor Pro ポートフォリオウィジェット スタイル Items

カラムのすき間

記事の画像間(横)のスペース幅を設定できます。

Rows Gap

記事の画像間(縦)のスペース幅を設定できます。

ボーダー丸み

画像の角に丸みを帯させることができます。

スタイルのItem overlay設定

Elementor Pro ポートフォリオウィジェット スタイル Item Overlay

背景色

ホバー時(カーソルを置いた時)の背景色を設定できます。

ホバー時に表示される記事タイトルの色を設定できます。

書体

タイトルの書体を設定できます。

スタイルのFilter bar設定

Elementor Pro ポートフォリオウィジェット スタイル Filter Bar

通常時のフィルターバーのテキストの色を設定できます。

有効時の色

これは、タブを選択している時のフィルターバーのテキストの色です。

書体

フィルターバーの書体を設定できます。

スペースの間隔

フィルターバーのタブ同士のスペースを設定できます。

スペース

フィルターバーとポートフォリオのスペースを設定できます。

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

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

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

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

・テンプレートの使い方

 

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

0コメント

コメントを提出

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

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

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

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

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