274

SharkEC|進階編輯器教學:「常見問題FAQ」樣式

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

由於愈來愈多夥伴需要撰寫產品服務常見問題,為了避免問題集過長影響用戶體驗,希望可以提供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:

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

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

延伸閱讀
sharktech的大頭照
sharktech

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

鯊客自經營品牌服務

poshme POSHME美甲、美睫沙龍POS系統
免安裝、免下載的網頁收銀POS系統。可以幫助小工作室也可以擁有專業的客戶管理、記帳報表、業積報表等功能,成為你的開店小幫手。
beshe BeShe一個專為女性著想的網站
一個專為女性著想的字媒體網站,分享女性愛美相關知識。
Phoebe|SEO優化私塾
Content creator x Website optimizer 由鯊客的社群經理Phoebe所經營,以可愛且專業的方式教導大家認識SEO。
missbanban MissBANBAN-日韓半半。代購。生活。美食
MissBANBAN主要經營日韓代購與日常生活、旅遊美食分享。 喜歡時尚單品/生活雜貨/辦公室療癒小物/日韓美妝快來逛逛
wow3c WOW3C-挖3C高品質專賣店
Anker是美國知名廠牌,主打充電器、行動電源、傳輸線等3C周邊產品,透過 Amazon和EBAY等跨境電商平台直接面對全世界消費者,並且雄踞在Amazon同類型商品搜尋排行第一位,評價更是高達4.8顆星到5顆星之間。 WOW3C-挖3C高品質專賣店邀請您,一起來體驗Anker高品質產品吧!
加入LINE@好友隨時掌握SEO最新趨勢

網站維運已暫停服務

親愛的客戶你好,你瀏覽的鯊客數媒整合行銷-SEO網站優化專業團隊網站已逾期繳費,目前已自動暫停此服務。
> 前往繳費
鯊客整合行銷SEO-讓你的品牌在Google搜尋第一頁曝光