【懶人包】五分鐘了解 2023 年 SEO 優化操作邏輯入門!-立即報名-

進階編輯器教學|如何自己產生「常見問題FAQ」樣式

瀏覽數: 1598 | 更新日期: 2022-11-11 17:39:55

總覺得網頁既定的編輯器總是排不出華麗的樣式嗎?

由於愈來愈多夥伴需要撰寫產品服務常見問題,為了避免問題集過長影響用戶體驗,希望可以提供FAQ及手動縮放樣式。

這篇將帶領大家學習:如何設定鯊客合作夥伴限定的「常見問題FAQ」樣板格式!

想要擁有專業又美觀的樣式嗎?跟著我們一步步操作吧!

PS:此篇教學需要了解基本HTML原理


以和光工業-新產品常見問題為例(點擊查看):

和光工業常見問題說明格式


一、格式說明

每一個問題可以搭配問與答的格式,在後台顯示如下:

SharkEC編輯器-常見問題

每一個問題會搭配一個標題二:如『保護及維護問題』,

接著每一個問題會有一個問題說明,並搭配一個問題答案。

如果html語法正確,系統會自動顯示黃色框線提供!


二、原始碼編輯模式-問題集格式說明


每一個問題集結構語OL清單符號組成,並搭配系統支援的樣式名稱Class Name。

語法如下:


<ol class="questions">
    <li>       
  <h3 class="question-q"> 問題1</h3>
        <div class="question-a">
            問題1解答
  </div>
    </li>
</ol>

複製語法後,請用純文字貼上至編輯器的原始碼模式 ,如下圖

切換原始碼編輯按鈕



每個問題集內要新增一個新的問題,請使用li語法包覆,

問題會被h3語法包覆,且套用樣式名稱question-q,

解答使用div語法包覆,且套用樣式名稱question-a,

語法如下:(複製語法後,請用純文字貼上)

 <li>        
  <h3 class="question-q"> 問題2</h3>
        <div class="question-a">
            問題2解答
  </div>
 </li>


三、如何在問題解答裡換行?

如果解答內想要換行的話,請同時點擊Shift鍵+Enter鍵。

PS:如果只按Enter鍵,則編輯器會產生新的段格語法,則會讓格式異常。


四、解答區塊是否可以支援其他字型樣式?

解答區塊的用法,就跟平常使用編輯器的其他樣式效果就可以了。

要注意換行要使用點擊Shift鍵+Enter鍵即可。




# 總結 Conclusion:

看完這篇教學,有需要的夥伴們趁現在開始動手編輯吧!

如果有任何不清楚的地方,歡迎隨時詢問我們哦:)

2024-seo方案優惠開跑中
你可能也會喜歡
sharktech
sharktech

鯊客科技的代表人物,帶您深入了解鯊客的成功案例、最新消息、服務項目,您可以透過鯊客先生的分享獲得網路行銷及軟體技術的第一手資訊,減少與網站或廣告服務商的資訊落差。

鯊客自經營品牌服務

poshme POSHME美甲、美睫沙龍POS系統
免安裝、免下載的網頁收銀POS系統。可以幫助小工作室也可以擁有專業的客戶管理、記帳報表、業積報表等功能,成為你的開店小幫手。
beshe BeShe一個專為女性著想的網站
一個專為女性著想的字媒體網站,分享女性愛美相關知識。