如何使用Elementor創建信息圖網頁

只需單擊幾下故事和信息，人們越來越多地依靠統計數據和數值數據，而不是抽象的敘述來做出明智的決定。這是信息圖網頁閃耀的地方。它們不僅吸引了遊客，而且還吸引了人們並引起人們的關注，這使得複雜的信息既可以訪問又引人入勝。

此外，信息圖網頁可以以引人入勝且易於閱讀的方式呈現複雜的數據。當信息圖表伴隨任何案例研究或假設的故事/想法時，它們可以為市場受眾創造強大的價值觀。但是，創建信息圖網頁並不難。

使用Elementor和HappyAddons，您可以在WordPress上創建任何類型的信息圖網頁設計。在本教程帖子中，我們將展示有關如何與Elementor創建信息圖網頁的分步指南。讓我們開始吧！

什麼是信息圖網頁？

信息圖網頁旨在使用圖形表示來展示信息來說明概念。它結合了各種視覺元素，例如圖像，圖表，統計數據，圖標等，以簡化綜合數據。

信息圖表網頁優先考慮視覺內容以提高可讀性，以便人們可以輕鬆地了解整個概念。這種類型的頁面通常是為講故事，數據可視化和教育目的而創建的。毫無疑問，信息圖網頁的保留率和參與率更高。

為什麼以及何時需要信息圖表網頁

現在，讓我們快速了解為什麼以及何時需要在網站上的信息圖表設計，然後才能進入教程部分。讓我們探索。

• 簡化複雜的信息

視覺元素可幫助用戶理解複雜的數據主題，而不會因打破關鍵見解而淹沒。

• 使訪問者在您的網站上更長

有效的信息圖表可以通過降低跳出率並提高轉換潛力來激發訪問者在網站上保持更長的時間。

• 加強品牌權威

通過視覺顯示結構化數據和寶貴的見解，您可以將網站建立為受信任的信息提供商。

• 用於營銷和促銷內容

信息圖表是展示產品比​​較以及廣告系列亮點的有效方法。您還可以顯示客戶推薦，以吸引客戶的注意。

• 在社交媒體上分享帖子

信息圖表很容易在社交媒體平台上共享。此外，最近，人們更喜歡看圖表和統計信息，而不是文本故事。

如何使用Elementor創建信息圖網頁

如果您使用WordPress至少幾個星期，您可能已經聽說過Elementor 。這是一個功能強大的拖放頁面構建器插件，您可以在不編碼的情況下設計網頁。您要做的就是選擇設計小部件，將其拖放到頁面上，然後自定義。

HappyAddons是Elementor插件的眾所周知的附件。它帶有許多其他設計小部件和功能。如果您覺得Elementor還不夠，可以嘗試使用HappyAddons。將兩個插件一起使用，您可以在Web設計領域中進行魔術。

通過單擊下面的鏈接獲取插件。

• Elementor
• Happyaddons
• Happyaddons Pro

您只能使用Elementor和HappyAddons的免費版本創建信息圖表。但是高級版本帶有更多令人興奮的資源。因此，我們將在本教程中使用HappyAddons的高級版本。

在網站上安裝插件並激活插件後，開始遵循以下教程的教程。

步驟01：使用Elementor打開帖子或頁面

使用Elementor打開帖子或頁面。左側是Elementor面板，您將在其中找到所有設計小部件和功能。右邊是Elementor Canvas ，您必須在其中拖放小部件才能設計信息圖網頁。

步驟02：創建用於放置小部件的列

放置任何小部件之前，必須創建列。為此，請單擊（+）加圖標。然後，選擇Flexbox容器選項。之後，選擇一個設計列結構。

檢查如何使用Elementor在WordPress中添加Lightbox。

步驟03：開始向列添加合適的小部件

根據您的設計偏好，將小部件放在您創建的列中。讓我們看看我們如何設計本節。

＃添加圖像小部件

在搜索框中鍵入“圖像”。一旦圖像小部件出現在下面，將其拖放到列結構區域上的合適部分。

從下圖中標記的部分上傳圖像或將圖像從媒體庫中添加到小部件區域。

＃添加標題小部件

找到標題小部件並將其放在右列中。

為信息圖表寫一個標題。由於我將為糖尿病創建此頁面，因此我為頁面標題寫了它。

來到“樣式”選項卡。您將獲得更改對齊，版式，文本顏色等的選項。

＃添加文本編輯器小部件

之後，在標題下方添加文本編輯器小部件。它將允許您在畫布中添加純文本和段落。

現在，以同樣的方式，將所需的文本添加到文本編輯器小部件中。然後，增加字體，更改字體家族，並在上面顯示的顏色選擇顏色。

如果要減少兩個小部件之間的差距，則可以自定義保證金設置。

以同樣的方式，使用各自的小部件向畫布添加其他文本和圖像。

通過使用保證金選項，您可以移動並將任何小部件放在另一個位置，例如下圖上的地圖。希望你理解。

了解如何在WordPress中創建事件日曆。

步驟04：創建一個新部分以添加統計圖表

網站頁面是幾個部分的組合。因此，要創建一個新的部分，您必須在頁面中添加一個新的列結構區域。

使用文本編輯器窗口小部件，如下所做的那樣，將副本添加到新的信息圖表部分。

＃向畫布添加圖表小部件

HappyAddons配備了六個圖表小部件，這些小部件確實有助於設計信息圖網頁。只需探索圖表小部件，然後選擇您喜歡信息圖表網頁設計的小部件即可。

我們將使用技能欄小部件顯示某些統計數據。

預設帶有預設計的模板。您可以為技能欄窗口小部件選擇任何預設，也可以與默認的預設保持在一起。

從“技能”部分中，您可以通過單擊各自的選項卡來添加信息。您可以看到我們已重命名為它們，並為每個人設置百分比。

轉到“樣式”選項卡，以保持技能欄的選擇。您可以更改小部件的文本顏色，版式和其他各種設置。

使用文本編輯器塊，您可以向左側添加更多信息以利用空白。

步驟05：創建一個新的列結構以獲取更多信息

要添加另一個部分，請再次創建一個新的列結構。然後，添加圖像和文本描述，就像我們在下面的圖像中所做的那樣。

然後，在右側，在空白處填充合適的信息。我們使用文本編輯器小部件添加了兩個文本。在它們之間，我們使用Flexbox容器保留了一個部分。

您可以使用此Flexbox容器創建這些子段。

現在，將圖標小部件添加到容器部分。

圖標小部件包含圖書館中全面的圖標集合。您可以在所有部分中一一更改圖標。像我們一樣做。

要更改圖標顏色，請轉到“樣式”選項卡>主顏色。

要更改其位置，請轉到佈局選項卡>邊距。希望你能自己做其餘的。

步驟06：創建信息圖網頁設計的最後一部分

像上面一樣，使用Flexbox容器創建一個新的部分和列結構。還為該部分添加標題。

＃添加餅圖

如上所述，Happyaddons附帶了許多有用的圖表小部件。我們將在本節中使用餅圖。將其拖放到各個部分。

從小部件的“餅圖”部分中，使用所有選項卡一一指定餅圖的信息。

擴展設置部分。從這裡，您可以自定義許多內容。但是，您能做的最突出的是寫一個標題並更改傳奇的位置。

轉到“樣式”選項卡。您可以為小部件自定義字體，字體尺寸和各種顏色效果。

＃添加條形圖

以同樣的方式，將條形圖小部件添加到畫布中。

像技能欄和條形圖小部件一樣，根據需要自定義條形圖小部件，設置信息和風格化。希望你能自己做。做到。

這是有關如何在WordPress中顯示360度旋轉產品攝影的指南。

步驟07：為信息圖網頁設計設置背景顏色

在整個頁面上設置背景顏色可能會使信息圖網頁設計更加令人震驚。為此，請單擊左上角的三行圖標。

您將被帶到新面板。單擊網站設置選項。

您將再次被帶到新面板。點擊背景選項。

從顏色選項中，選擇顏色。您會看到顏色通過頁面的背景應用。

因此，您可以創建和設計信息圖網頁設計。

步驟08：預覽信息圖網頁設計

轉到預覽頁面，然後檢查一切都很好。您的目的正常。

關閉！

確實，Elementor與HappyAddons配對，使您能夠創建令人驚嘆的信息圖網頁，以簡化複雜的信息。但是，為了獲得最佳結果，必須仔細考慮某些關鍵點。

通過避免過多的文本和視覺效果，保持設計清潔和整潔。使用與您的品牌標識保持一致的調色板，並確保移動響應能力以保持所有設備的一致外觀。如果可能的話，添加動畫和懸停效果，因為它們可以使您的內容互動。

努力在文本內容和設計元素之間保持和諧平衡。優先考慮圖形和圖表的使用，因為它們與信息圖表的目的完全吻合。最後，優化您的頁面以確保其快速加載而不會損害性能。

因此，通過遵循所有這些最佳實踐，您可以創建出色的信息圖網頁，以增加價值並帶來轉化。