在內容密集的網站文章中,如何有效引導讀者目光、凸顯關鍵資訊,是所有創作者共同的挑戰。若缺乏適當的視覺化排版,重要的段落或提醒事項很容易在大量文字中被忽略,從而降低了內容的傳達效率。「阿腸 – 文具組」是一款專為WordPress設計的內容增強外掛,旨在解決這個痛點。它提供了一系列無需編寫程式碼的視覺化工具,讓使用者能快速為文章建立具備專業感和清晰層次的版面。
透過「智慧資訊框」與「文字特效」兩大核心功能,創作者可以輕易地將單調的文字轉化為結構清晰、重點分明的內容。這不僅能優化讀者的閱讀體驗,更能有效提升資訊的吸收效率。無論是使用最新的區塊編輯器,或是習慣傳統編輯器,此外掛皆能提供一致且直覺的操作流程,讓使用者專注於內容本身,將排版設計的工作化繁為簡。
有時候,一堆文字真的比不上一個整理好的區塊。當你想把店家資訊、規格表、或是文章重點整理出來時,這個「智慧資訊框」就是你的神隊友。它能幫你快速做出一個有圖示、有標題、有內容的專業區塊。內建四種風格,讓你隨便套都好看!內建了四種超實用的設計範本,你根本不用煩惱配色或排版,直接選就對了啦!
文章導覽
輕鬆建立專業級的「智慧資訊框」
當您需要在文章中強調一塊特定資訊,例如店家營業時間、產品優點、注意事項或重點整理時,「智慧資訊框」功能將是您的最佳幫手。它能讓您快速建立一個包含圖示、標題和內容的結構化區塊,使資訊呈現既清晰又有條理。
四種核心版面範本
為適應不同情境的需求,外掛內建了四種設計範本,使用者可根據內容屬性選擇最合適的樣式:
- 萬用框:標題區域具備獨立背景色,為最泛用的款式,適合一般資訊的呈現。
- 底色框:整個區塊皆有背景色,視覺強度最高,適用於發布重要公告或警告訊息。
- 線條框:以簡潔的框線搭配懸浮於線條上的標題,設計感突出,適合用於引言或段落標題。
- 提示框:在區塊左側呈現一條彩色的裝飾線,風格清新,適合用於補充說明或旁註。
這是一款最經典且泛用性最高的樣式。它的主要特徵是標題區域擁有獨立的背景色塊,與下方的內容區域在視覺上明確分開。整體設計簡潔、大方,適合用來呈現一般性的資訊、重點整理或店家基本資料,能夠自然地融入各種文章風格中。
- 建議描述文字:在這裡放入地址、聯絡電話、營業時間等基本資訊,讓讀者一目了然。
- 建議標題:店家資訊
此樣式最具視覺強調效果。整個區塊(包含標題與內容)都覆蓋著一層背景色,使其在頁面中非常突出,能立即吸引讀者的注意力。特別適合用於發布重要公告、優惠活動、警告訊息或任何您不希望讀者錯過的關鍵內容。
- 建議標題:重要提醒
- 建議描述文字:此為特殊注意事項,請詳細閱讀。內容可以是網站公告、活動規則或任何需要使用者特別留意的資訊。
這是一款極具設計感的樣式。它的標題會巧妙地「懸浮」在頂部框線之上,打破了傳統區塊的視覺框架,看起來既現代又優雅。適合用來作為文章段落的引言、金句名言的摘錄,或是需要用獨特風格來凸顯的標題內容。
- 建議標題:本章重點
- 建議描述文字:透過這個區塊,您可以為下文的段落預先破題,或是在此總結上文的精華,引導讀者閱讀。
這款樣式採用了不對稱的設計,其主要特徵是在區塊的左側有一條彩色的垂直邊線。相較於底色框,它的視覺干擾較低,風格清新,非常適合用於提供補充說明、相關資料、小提示 (Tips) 或次要的註解內容。
- 建議標題:貼心小提示
- 建議描述文字:您知道嗎?在這裡可以補充與主題相關的額外知識、操作技巧或有趣的冷知識,豐富文章的內容。
直覺化操作流程
- 區塊編輯器 (Gutenberg):使用者可在編輯器中新增「智慧資訊框」區塊,並於右側的設定面板中即時調整樣式、色彩與圖示,實現「所見即所得」的編輯體驗。
- 傳統編輯器 (Classic Editor):在工具列點擊對應按鈕後,於彈出視窗中完成設定,外掛將自動生成相應的短代碼 (Shortcode)
文字特效:強化關鍵字句
除了大區塊的資訊框,有時我們也需要針對文章內文的幾個關鍵字詞進行強調。「文字特效工具」讓您不用再屈就於單調的粗體或斜體,而是能用更活潑的方式吸引讀者注意。提供螢光效果、線條效果!
特色螢光筆
就像學生時期劃重點一樣,您可以為文字加上不同顏色的螢光筆效果。你可以選不同顏色,而且還有兩種風格:一個是傳統的螢光筆效果,另一個是比較細緻的線條效果,看你想高調還是低調。此外掛提供了兩種風格:
- 螢光效果:模擬真實螢光筆的覆蓋感,效果飽滿。
- 線條效果:在文字下方畫出彩色線條,效果更為細膩。
特色底線
傳統的底線只有一種樣式,但「阿腸 – 文具組」提供了更多選擇,讓底線本身也成為一種設計:
- 蠟筆底線:手繪感的筆觸,充滿溫度。
- 一般底線:經典的實心線。
- 波浪底線:活潑的波浪造型,適合用於非正式或需要趣味性的內容。
- 虛線底線:風格較為柔和的點狀或線段。
靈活的後台設定
在WordPress後台的「設定」>「阿腸文具組」中,您可以進行更個人化的設定。您可以管理資訊框的範本、自訂特效的預設顏色,甚至可以管理不同使用者角色(如管理員、編輯、作者)的使用權限,確保網站內容風格的一致性與安全性。
功能操作說明
以下為外掛簡易操作說明。
智慧資訊框 / 操作說明
以下為區塊編輯器操作介面: 左側 → 新增「智慧資訊框」,即可於區塊中,調整此區塊項目。
Step 1
請至左邊新增區塊區域,找到「智慧資訊框」。點選會加入到編輯器。
Step 2
預設為【萬用框】,可以於右側區塊進行調整與編輯。如果需要自訂,「我的範本」可以選擇「自訂」進行顏色調整。
以下傳統編輯器操作介面: 可以於編輯區上方按鈕找到,插入之後若要變更要改短代碼或者是重新再做一次。
Step 1
請於編輯器上找到「智慧資訊框」按鈕。
Step 2
跳出畫面可預覽,可以選擇框線樣式也可以選範本,但與區塊不同無法自訂。需要自訂請先去管理介面新增範本,再回來喔!
插入之後是「短代碼」。需要編輯可以改短代碼或再次重新生成。
文字特效 / 操作教學
以下為區塊編輯器操作介面: 選取文字後,可以點選「文字特效」即可套用。
Step 1
請於文字直接選取,點開後面按鈕會有「文字特效」。
Step 2
你可以同時套用「螢光筆」與「底線」功能,顏色可以快選,也可以點開自訂改色。
以下為傳統編輯器教學,選取文字後,可以點選「文字特效」即可套用。
Step 1
選取文字,再點 「特色螢光筆」或是「特色底線」。
Step 2
即可調整你的需求,上方也有基本預覽。
想要安裝嗎?
「阿腸 – 文具組」它將複雜的樣式設計簡化為幾個點擊動作,讓每位內容創作者都能成為自己文章的設計師。如果您希望讓您的網站內容更上一層樓,現在就找我們安裝「阿腸 – 文具組」,開始美化您的文章吧!
這個外掛支援哪些編輯器?
此外掛同時支援最新的區塊編輯器 (Gutenberg) 與傳統編輯器 (Classic Editor),無論您習慣哪種寫作環境都能無縫使用。
我可以自訂資訊框的顏色和圖示嗎?
絕對可以!在區塊編輯器中,您可以透過顏色選擇器即時更改顏色。圖示則支援使用 Font Awesome 的圖示庫,您可以在後台設定頁面找到相關說明與連結。
使用這個外掛需要懂程式碼嗎?
完全不需要!「阿腸 – 文具組」的核心設計理念就是讓不懂程式的使用者也能輕鬆美化文章,所有操作都可以在圖形化的介面中完成。