如何在WordPress中添加帶有圖標的功能框


您是否要在WordPress網站的首頁上添加帶有漂亮圖標的功能框? 這些功能框顯示了產品和服務的重要賣點。 在向新客戶展示功能時,它被證明是一種非常引人入勝的技術。 在本文中,我們將向您展示如何在WordPress網站中輕鬆添加帶有圖標的功能框。

在帶圖標的WordPress中添加功能框

什麼是帶有圖標的功能框?

大多數人在訪問網站時實際上並未閱讀它們。 作為人類,我們正在成為專業的掃描儀。

這意味著作為企業所有者,您需要以易於掃描且高度吸引人的格式呈現重要信息。

這就是為什麼大多數流行的商業網站通常在頂部都帶有大圖像或帶有帶有號召性用語按鈕的滑塊。

在其正下方,您可以使用功能框,讓您展示產品或服務的重要功能。 每個功能框都有自己的號召性用語,可以使用戶了解更多。

這是來自OptinMonster網站的示例:

WordPress驅動的網站首頁上的功能框示例

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

在WordPress主頁上添加帶有圖標的功能框

您需要做的第一件事是安裝並激活Advanced WP Columns插件。 激活後,您需要訪問 設置»高級WP列 配置插件。

只需向下滾動到選項“列類”並輸入 菌柱 在它的旁邊。 不要忘記單擊“保存更改”按鈕來存儲您的設置。

為您的列添加CSS類

接下來,您將需要一個插件來將漂亮的SVG圖標插入功能框。 安裝並激活WP SVG Icons插件。

現在您可以創建功能框了。

首先編輯要在其中添加功能框的頁面。

您會在帖子編輯器屏幕上註意到兩個新按鈕。 第一個是位於編輯器上方的“添加圖標”按鈕。 第二個按鈕位於可視化編輯器菜單中的最後一項。

如果可視化編輯器僅顯示一行按鈕,則需要單擊切換工具欄按鈕以將其展開。

帖子編輯器中的高級列和svg圖標按鈕

首先,您需要單擊“高級WP列”按鈕。 這將彈出一個彈出窗口,您需要單擊 空的 然後選擇要添加的列數。

創建功能框列

之後,您需要單擊每列以添加一些文本。 如果您現在不添加一些文本,那麼將很難在帖子編輯器中看到這些列。 完成後,單擊底部的“添加列”按鈕。

您現在將在帖子編輯器中看到這些列。 下一步是在文本上方添加圖標。

將鼠標移到第一欄中文本區域的開頭,然後單擊Enter按鈕。 這將向下移動文本並留出空間來插入圖標。

現在,您需要單擊“添加”圖標按鈕,這將彈出一個漂亮的彈出窗口,如下所示:

在WordPress的功能框中添加圖標

從那裡,您可以通過單擊選擇要使用的圖標。 接下來,您需要單擊跨度按鈕,因此您的圖標將包裹在其中 元件。

最後,單擊插入按鈕。 現在,您將在帖子編輯器中看到SVG圖標的簡碼。 根據您選擇的圖標的名稱,它看起來像這樣:

[wp-svg-icons icon="rocket" wrap="span"]

重複此過程以在其他功能框中添加圖標。

完成後,只需單擊“更新”按鈕即可保存頁面。

您已經快完成了,但是如果預覽頁面,則會發現圖標太小,功能框幾乎看不到。

帶有小圖標且沒有樣式的功能框

您將需要添加一些CSS來解決此問題。 只需將此CSS代碼段添加到主題或子主題的樣式表中即可。

span.wp-svg-rocket.rocket { 
font-size:100px; 
} 

span.wp-svg-cloud.cloud { 
font-size:100px; 
} 
span.wp-svg-headphones.headphones { 
font-size:100px; 
} 
.mycolumns { 
border:1px solid #eee;
min-height:250px; 
padding-top:20px !important;
}

不要忘記調整CSS使其與您使用的圖標名稱匹配。

具有正確樣式和大圖標的功能框

我們希望本文能幫助您在首頁上添加漂亮的功能框部分。 您可能還想查看有關5種最佳拖放WordPress頁面構建器的指南,因為其中很多頁面構建器都內置了此功能框功能。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。