ストアですべての商品を簡単に紹介したり、コース モジュールにすべてのレッスンをリストしたり、最新のブログ投稿を特集したりする方法を考えたことはありますか?そこで、コレクション要素の出番です。これらの強力なコンテナ要素は、製品、ブログ、レッスンなどのグループ化されたコンテンツをグリッドに動的に表示し、コレクションから直接データを取得します。ClickFunnels ストアにストアフロントを設定する場合でも、コース モジュールでレッスンを整理する場合でも、サイトのホームページにすべてのブログ投稿を表示する場合でも、コレクション要素を使用すると、動的で魅力的なページを簡単に作成できます。この記事では、コレクション要素を使用してページを強化する方法を学び、この機能を効果的に活用するための実践的な例を検討します。.png "image(543).png")
必要条件
アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ
コレクション要素を理解する
Imagine you’re organizing a photo album. The album is the Collection Element, which is a container that holds and displays individual photos. Each photo in the album represents an item in the collection, such as a product, blog post, or lesson.
Now, think about how the album is arranged:
Photos are displayed in rows and columns on each page (just like the grid layout in a Collections element). For example, you might have 3 photos per row and 4 rows on a page.
If the album has more photos than can fit on one page, you add page numbers to flip through the additional pages, similar to how pagination works for larger collections in ClickFunnels.
A Collection element in ClickFunnels is a container designed to display collections of content dynamically. A collection consists of grouped items such as products, blog posts, course modules, lessons, and more. Adding a Collection element to your page lets you showcase these items in an organized and visually engaging way. Each container allows you to insert dynamic content elements, such as product names, descriptions, images, prices, or links, to represent the associated data within the collection.
Behind the scenes, a Collection element uses the CSS grid layout (via the display: grid property) to organize its contents. This layout divides the container into rows and columns, ensuring all items are evenly spaced and aligned. The grid layout's structure makes it highly adaptable, automatically adjusting the arrangement of items based on the number of elements, the number of columns specified, and the available screen size.
For example:
When visitors browse your store, you can use the Products collection element to display all your products with key details like name, price, and description.
The Blog Posts collection element allows you to showcase recent or featured blog posts from your blog.
The Lessons collection element is ideal for displaying all lessons within a module template page, while the Modules collection element can list all course modules on the Course home page.
ページエディタでのコレクション要素の追加
ページエディタ内で、要素を配置するセクションを追加します。
そのセクション内に 行 を追加します。
または、セクションと行の代わりに Flex コンテナーを挿入します。
行内のオレンジ色 の + プラスまたは [新しい要素 を追加] ボタンをクリックして、新しい要素を挿入します。
コレクション カテゴリから 、適切なコレクション要素 (製品、ブログ投稿、レッスンなど) を選択します。
Collection 要素が挿入されたら、行ごとに表示される項目の数を設定します。デフォルトでは、要素には行ごとに 3 つの項目が表示されます。この設定を変更して、レイアウトを調整できます。たとえば、「行あたりの項目数」を 4 つ、「ページあたりの項目数」を 8 つ選択すると、それぞれが 4 つの列に分割された 2 列の行が作成されます。
.png "image(551).png")
Collection 要素の各グリッド内に、関連するコンテンツ要素を挿入します。たとえば、「Products」コレクション要素の場合、「Products」コレクション要素にデータを動的に入力するように特別に設計された Name、Description、Price、Image、および Link 要素を挿入できます。
.png "image(554).png")
手記：
関連するコレクション要素を追加すると、ClickFunnels は対象となる要素を赤い境界線で強調表示し、互換性のあるアイテムのみを追加するようにします。
関連付けられた要素が追加されると、すべてのグリッド列に複製されます。これらの要素内の liquid 構文はコレクションからデータを動的に取得し、各アイテムが一意であることを保証します。たとえば、「Products」コレクション要素には、コレクション内で利用可能なすべての製品が表示され、各グリッド列には製品の名前、価格、画像が表示されます。
コレクション要素はどこで使用できますか
コレクション要素には、コレクションの種類とデザインするページに応じて特定の用途があります。たとえば、ストアフロントで販売可能なすべての製品を表示できます。.png "image(548).png")
各タイプのコレクション要素をどこでどのように使用できるかの内訳は次のとおりです。
プロダクツ
使用事例: ストア、サイト、カスタマーセンター、コースページですべての商品を紹介します。
動的コンテンツ: 名前、画像、説明、価格、リンクなどの製品の詳細を表示します。
「商品」コレクション要素の詳細については、記事 (Collections) Products: Showcase Products on Your Pageをご覧ください。
製品コレクション
使用事例: 季節限定のオファーや厳選された商品バンドルなど、複数の関連商品をグループ化した商品コレクションを強調表示します。製品コレクション要素と同様に、「製品コレクション」コレクション要素は、ストア、サイト、カスタマーセンター、コースページで使用できます。
動的コンテンツ: コレクション名、説明、コレクション画像、およびリンクを表示します。
「商品コレクション」コレクション要素の詳細については、 (Collections) Product Collections: Showcase Product Collections on Your Page 記事をご覧ください。
ブログ記事
ユースケース: サイト、ランディングページ、ファネル、カスタマーセンター、ストア、コースページのすべてのブログ投稿を紹介します。
動的コンテンツ: ブログのタイトル、要約、アイキャッチ画像、公開日、カテゴリ、著者名を一覧表示します。
「ブログ投稿」コレクション要素の詳細については、記事 (Collections) Blog Posts: Display and organize your blog postsを参照してください。
ブログカテゴリ
ユースケース: すべてのブログカテゴリを一覧表示して、ユーザーがカテゴリページ上のコンテンツをナビゲートできるようにします。
動的コンテンツ: カテゴリ名とリンクを表示します。
「ブログ投稿」コレクション要素の詳細については、記事 (Collections) Blog Posts: Display and organize your blog postsをご覧ください。
付与された資産
ユースケース： コースページとカスタマーセンターで、連絡先に付与されたすべてのアセットを表示します。
動的コンテンツ: アセット名、説明、および関連するダウンロードまたはアクセスリンクを一覧表示します。
「付与された資産」コレクション要素の詳細については、記事 (Collections) Granted Assets: Show Assets Granted to Usersを参照してください。
コース
ユースケース： カスタマーセンター、サイト、ストア、ランディングページ、ファネルページで利用可能なすべてのコースを紹介します。
動的コンテンツ: コースタイトル、公開日、ポッドキャストリンク、進行状況ステータス、説明、画像、およびリンクをコレクション要素内に表示します。
「コース」コレクション要素の詳細については、記事 (Collections) Courses: Arrange and Display Available Coursesを参照してください。
モジュール
ユースケース： コースページ上のすべてのコースモジュールを強調表示します。
動的コンテンツ: コレクション要素内のモジュール名、説明、リンク、画像、ポッドキャストリンク、および公開日を一覧表示します。
記事の詳細については、 (Collections) Modules: Arrange and Display Course Modulesをご覧ください。
レッスン
ユースケース： すべてのレッスンをコースモジュールテンプレートページに表示して、学生がコースコンテンツに簡単にアクセスできるようにします。
動的コンテンツ: コレクション要素内のレッスン名、説明、リンク、画像、オーディオ、ビデオ、公開日、およびレッスンステータスを一覧表示します。
記事の詳細については、 (Collections) Lessons: Arrange and Display Course Lessonsをご覧ください。