Elementor 作為最受歡迎的頁面構(gòu)建器，通過其 Loop Grid 小部件，為用戶提供了一個靈活且功能強大的方式來展示各種內(nèi)容。無論是文章、產(chǎn)品還是自定義內(nèi)容，Loop Grid 都能以動態(tài)和視覺上引人注目的方式展示這些內(nèi)容，提升用戶互動和網(wǎng)站的整體效果。本文將深入探討 Elementor 的 Loop Grid，為你們揭示它為何是內(nèi)容展示的強大工具。

什么是 Elementor 的 Loop Grid？

Elementor 的 Loop Grid 是一個小部件，可以在網(wǎng)站中動態(tài)展示一組相同類型的內(nèi)容。通過 Loop Grid，可以將文章、產(chǎn)品、分類等內(nèi)容按網(wǎng)格形式展示，并且每一項內(nèi)容都遵循相同的設計模板。這個小部件提供了極大的自定義空間，能讓你控制每一項內(nèi)容的布局、顯示方式及樣式，讓網(wǎng)站的內(nèi)容展示更加靈活和富有創(chuàng)意。

與傳統(tǒng)小部件的對比

在 Elementor 中，展示內(nèi)容的方式并不限于 Loop Grid。也可以使用如“文章”或“產(chǎn)品”小部件來展示單一內(nèi)容。這些傳統(tǒng)的小部件通常存在以下限制：

1. 布局限制：傳統(tǒng)小部件大多限制了內(nèi)容的排列方式，像標題、圖片、描述等元素的位置往往是固定的，無法輕松調(diào)整。
2. 自定義性差：這些小部件雖然提供了樣式修改選項，但無法為每個內(nèi)容項應用完全獨立的自定義樣式，也無法自由控制內(nèi)容的排列和顯示方式。
3. 功能受限：傳統(tǒng)小部件僅能展示特定的內(nèi)容類型，例如“文章”小部件僅能展示文章，并且無法輕松與其他內(nèi)容類型（如產(chǎn)品或分類）結(jié)合使用。

與此相比，Loop Grid 能夠突破這些限制，實現(xiàn)更高程度的自定義。

Loop Grid 的核心優(yōu)勢

1. 自定義布局

Loop Grid 最大的優(yōu)勢之一就是其布局的高度可自定義?？梢酝ㄟ^ Elementor 的 Flexbox 容器，輕松控制內(nèi)容的排列方式。無論是橫向排列、縱向排列，還是網(wǎng)格布局，Loop Grid 都能提供極大的自由度。

2. 動態(tài)內(nèi)容顯示

Loop Grid 可以使用動態(tài)標簽來展示從 WordPress 數(shù)據(jù)庫中提取的內(nèi)容。這意味著可以將文章標題、圖片、分類、日期、標簽等動態(tài)內(nèi)容直接嵌入到模板中，無需手動輸入每一項內(nèi)容。

3. 靈活的模板設計

使用 Loop Grid 時，需要創(chuàng)建一個模板，而這個模板會被應用到每一項內(nèi)容中。模板設計可以非常簡單，包含標題、圖片、分類、摘要等，也可以非常復雜，加入更多自定義元素，如圖標、按鈕等。還可以為不同的內(nèi)容類型（文章、產(chǎn)品、分類等）創(chuàng)建不同的模板，并根據(jù)需要切換和應用這些模板。每當內(nèi)容更新時，模板中的樣式和結(jié)構(gòu)會自動適配新內(nèi)容。

4. 增強的查詢和篩選功能

Loop Grid 通過查詢設置來精確控制展示的內(nèi)容。可以選擇只展示特定分類的文章或產(chǎn)品，或者按日期、評分、價格等條件篩選內(nèi)容。查詢設置不僅能夠幫助你篩選出最相關(guān)的內(nèi)容，還能避免展示重復或不相關(guān)的項目，從而優(yōu)化頁面加載和提高用戶體驗。

5. 支持不同的內(nèi)容類型

一個顯著的特點是，Loop Grid 不僅適用于文章，還可以用于展示 WooCommerce 產(chǎn)品、分類、頁面等內(nèi)容。無論你是希望展示博客文章，還是產(chǎn)品目錄，Loop Grid 都能為你提供一致的展示方式。

Loop Grid 選項詳解

內(nèi)容選項卡

1. 布局部分

布局部分決定了 Loop Grid 中項目的外觀。實際出現(xiàn)在 Loop Grid 中的項目由 查詢部分確定。每個 Loop Grid 都必須包含一個模板。使用 選擇模板類型 下拉菜單從以下布局類型中選擇：

• 文章（Posts）：一個顯示常規(guī)文章、頁面或產(chǎn)品的 Loop Grid。
• 文章分類（Post Taxonomy）：一個顯示文章不同分類的 Loop Grid。
• 產(chǎn)品（Products）：一個顯示 WooCommerce 產(chǎn)品的 Loop Grid。
• 產(chǎn)品分類（Product Taxonomy）：一個顯示產(chǎn)品不同分類的 Loop Grid。

2. Query部分

Query部分用于確定在 Loop 中顯示哪些項目，主要選項有Source、Hide Empty和Ignore Sticky Posts等。

• Source：選項有文章、頁面、著陸頁、手動選擇的頁面、當前查詢（用于構(gòu)建一個模板，該模板將應用于多個分類和/或標簽）。這樣，就不需要為每個分類或標簽編寫新的查詢、相關(guān)項目。
• Hide Empty：將開關(guān)切換為“是”，以隱藏不包含文章或產(chǎn)品的分類、標簽和類型。僅在顯示分類和類型的 Loop Grid 中出現(xiàn)。
• Ignore Sticky Posts：置頂文章是指那些被指定始終顯示在博客首頁最前面的文章，即使發(fā)布了更新的文章。當切換為“是”時，查詢在排列 Loop 時不會考慮文章是否為置頂文章。

3. Pagination部分

Pagination：如果 Loop 包含多個屏幕大小的項目，它將被分成多個頁面。這些頁面可以列出如下：

• Numbers（數(shù)字分頁）
• Previous/Next（上一頁/下一頁）
• Numbers + Previous/Next（數(shù)字分頁 + 上一頁/下一頁）
• Load on Click（點擊加載）
• Infinite Scroll（無限滾動）

Page Limit：使用文本框輸入希望 Loop 包含的最大頁面數(shù)。

Shorten：如果使用頁面編號，可以通過限制屏幕上顯示的頁面號碼來減少頁面雜亂。

4. Nothing Found Message

在某些情況下，網(wǎng)站訪客可能會篩選 Loop，但沒有找到結(jié)果。例如，在一個服裝項目的 Loop 中，訪客可能會篩選“藍色”和“褲子”類別。如果 Loop 中沒有藍色褲子，則會顯示沒有結(jié)果。將開關(guān)切換為“開啟”在 Loop 沒有結(jié)果時顯示消息。如果選擇顯示消息，可以進行以下設置：

• 文本框：填寫希望顯示給訪客的文本。
• 對齊方式：將文本顯示在 Loop 的右側(cè)、居中或左側(cè)。
• HTML 標簽：將消息的 HTML 標簽設置為 H1-H6、Div 或 Span。這有助于搜索引擎找到并理解這些消息。

樣式選項卡

1. Pagination

Typography：設置用于分頁的字體大小、類型和顏色。

Color選項：確定用于分頁的數(shù)字或文本的顏色。

• 常規(guī)（Normal）：數(shù)字或文本的默認顏色。
• 懸停（Hover）：當訪客將鼠標懸停在數(shù)字或文本上時的顏色。
• 活動（Active）：當訪客正在查看的頁面對應的數(shù)字或文本的顏色。
• 顏色（Color）：要選擇顏色，可以使用顏色選擇器或全局顏色。
• 頁碼間距（Space Between）：使用滑塊控制頁面數(shù)字或文本之間的間距。
• 邊緣間距（Spacing）：使用滑塊控制頁面數(shù)字或文本與 Loop 邊緣之間的距離。

2. Nothing Found Message

控制未找到消息的外觀：

• 距離頂部的間距（Space from top）：使用滑塊確定消息距離 Loop 頂部的距離。
• 距離底部的間距（Space from bottom）：使用滑塊確定消息距離 Loop 底部的距離。
• 排版（Typography）：控制消息中使用的字體顏色、大小和類型。有關(guān)更多詳情，請參閱排版。
• 顏色（Color）：為消息選擇顏色。有關(guān)更多詳情，請參閱選擇顏色或使用全局字體和顏色。
• 文字陰影（Text Shadow）：點擊鉛筆圖標為文字添加陰影。
• 文字描邊（Text Stroke）：點擊鉛筆圖標為文字添加描邊顏色。了解更多關(guān)于文字描邊的信息。

總結(jié)

Elementor 的 Loop Grid 是一個非常靈活的小部件，可以幫助用戶在網(wǎng)站上以動態(tài)和創(chuàng)意的方式展示各種內(nèi)容，包括文章、產(chǎn)品、分類等。它與傳統(tǒng)的文章或產(chǎn)品小部件相比，提供了更多自定義選項和設計自由度，能夠有效提升用戶體驗和網(wǎng)站的整體效果。

如果想了解更多WordPress相關(guān)的教程和資訊，請關(guān)注光子波動網(wǎng)，擁有最全的WordPress教程和最活躍的WordPress交流社區(qū)。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息