核心與結構類
| fn-sel | fn元素功能標註 | 大部分的.fn-***均需要加入 .才會起作用, 除了 fn-edit或少部分附屬的fn- class另有不同的作用 |
| fn-component | 組件主容器。定義一個完整的編輯區塊。 | 令其物件可選擇插入編輯元件, 通常會與, 共同使用, 搭配 . 使其可插入/移除 .topic-cont (標題物件)。若在上層/父物件設置 .sectnav-content，則該<section.>物件可設置屬性"sectnm"，搭配bootstrap的滾動監控 (Scrollspy)使用。 點擊時會判定是否顯示「編輯標題」、「容器寬度(Container/Fluid)」選項，以及組件的複製/刪除功能。 |
| fn-section | 區塊層級。通常包在 component 外層。 | 用於 aceSection (原始碼編輯) 的定位，可編輯整個 Section 的 HTML。 |
| fn-clone | 複製功能。標記該元素可被複製。 | 配合 .elemClone 按鈕，執行 _ifr.objClone 進行元素複製。通常會與.fn-order共用 |
| fn-undel | 禁止刪除。 | 若元素包含此 class，系統會阻止刪除操作並彈出警告「此物件不可刪除」。 |
| fn-source | 源碼編輯。 | 點擊後會開啟 Ace Editor 或類似視窗，允許編輯該區域的 HTML 原始碼。 |
| fn-col | 欄位設定。對應 Bootstrap Grid System。 | 用於.row > .col 物件, 提供flex-box網格設置,例如 <div class="row"><div class="fn-sel fn-col col-xxl-6"></div></div> 允許設定 Flex 排版 (Align-self)、Card 樣式嵌入、以及響應式欄位寬度調整。 |
| 用以調整flex col物件的 order規則, 例如 <div class="row"><div class="fn-sel fn-colorder col-xl-6"></div><div class="fn-sel fn-colorder col-xl-6"></div></div> | ||
| fn-cell | 儲存格。 | 用於.cell-row > .cell-xl-6 物件, 提供float網格設置,例如 <div class="cell-row"><div class="fn-sel fn-cell cell-xl-6"></div></div> |
| fn-sectopic | 區塊標題。 | 控制是否顯示該組件的標題編輯欄位 (.sectEditTopic)。 |
| fn-sectnm | 區塊錨點名稱。 | 允許編輯 Section 的 ID 名稱 (錨點用)。 |
媒體與視覺類
| fn-imgset | 圖片設定 | 使該圖片可以換置後台上傳的圖片, 例如 <img src="/files/home/index01.jpg" class="fn-sel fn-imgset">, 只能使用在<img>標籤上 |
| fn-bgset | 背景設定 | 使該標籤可以換置後台上傳的圖片及背景顏色, 例如 <div class="fn-sel fn-bgset" style="background-image:url(/files/home/index01.jpg);"></div>, 通常會跟fn-bgpos搭配使用 設定 background-image、background-color。支援 PhotoSwipe (燈箱) 整合設定、視差滾動的前置設定。 |
| fn-bgpos | 背景定位 | 使該標籤的背景圖片可以調整background-size為 contain、cover、或百分比, 例如 <div class="fn-sel fn-bgset fn-pos" style="background-image:url(/files/home/index01.jpg);"></div> 註:無法使用在 parallax的背景設置 |
| fn-icon | 圖示設定 | 用於等inline或inline-block之標籤, 供選擇/換置font icon的樣式, 例如 <span class="fn-sel fn-icon fa fa-times"></span> 支援 FontAwesome (fa), Material Icons (ma), Bootstrap Icons (bi) 的切換與預覽。 |
| fn-youtube | YouTube 影片 | 貼上 YouTube 網址 (支援 watch, shorts, live, youtu.be) 自動轉換為 embed 格式並更新 iframe。 使該物件可設置子物件iframe的影片連結，完整語法為 <div class="embed-responsive embed-responsive-16by9 fn-sel fn-youtube"> <iframe allowfullscreen="1" frameborder="0"></iframe> </div> |
| fn-svgmask | SVG 遮罩 | 用於設定 SVG 的 masking (遮罩形狀) 與 masked (被遮罩的圖片) 內容。 |
| fn-parallax | 視差滾動 | 使rd-parallax物件可以換置後台上傳的圖片, 例如 <div class="fn-sel fn-parallax rd-parallax"> ... </div> 設定視差滾動的背景圖層 (rd-parallax-layer) 與相關參數。 |
| fn-shape | 形狀裝飾 | 切換元素的形狀 class (如 shp-xl-p, shp-xl-s)，通常用於背景裝飾圖塊。 |
樣式與排版微調類
| fn-fontsize | 字體大小 | 設定 font-size (支援 rem/vw 單位換算)。 |
| fn-color | 文字顏色 | 調整物件的文字顏色! |
| fn-border | 邊框設定 | 設定 border-color 及邊框樣式 (sbdr- 開頭的 class)。 |
| fn-textalign | 文字對齊 | 設定 text-align (置左、置中、置右)。 |
| fn-indent | 縮排設定 | 設定 text-indent 與margin-left。 |
| fn-pt、fn-pb、fn-ps、fn-pe | 設定內距(rem) | 用以開啟單位為rem 的 padding class 設定, 與bootstrap 5 的 padding class相同, 但只能設定上下左右, 無法設定水平/垂直, 例如 <div class="fn-sel fn-pt fn-pb fn-ps fn-pe"></div> |
| fn-pdt、fn-pdb、fn-pds、fn-pde | 設定內距(%) | 用以開啟單位為% 的 padding class 設定, 與bootstrap 5 的 padding class類似, 但只能設定上下左右, 無法設定水平/垂直, 例如 <div class="fn-sel fn-pdt fn-pdb fn-pds fn-pde"></div> |
| fn-mt、fn-mb、fn-ms、fn-me | 設定邊距(rem) | 用以開啟單位為rem 的 margin class 設定, 與bootstrap 5 的 margin class相同, 但只能設定上下左右, 無法設定水平/垂直, 例如 <div class="fn-sel fn-mt fn-mb fn-ms fn-me"></div> |
| fn-mgt、fn-mgb、fn-mgs、fn-mge | 設定邊距(%) | 用以開啟單位為% 的 margin class 設定, 與bootstrap 5 的 margin class類似, 但只能設定上下左右, 無法設定水平/垂直, 例如 <div class="fn-sel "></div> |
| fn-zidx | 用以調整物件的 z-index 規則 |
複合功能與互動類
| fn-slickset | 輪播內容設定 | 管理 Slick Slider 的個別 Slide。包含新增、刪除 Slide，設定 Slide 背景圖，以及同步雙輪播 (slider-syn)。 |
| fn-slickctrl | 輪播參數控制 | 設定 Slick 的全域參數 (如 slidesToShow,autoplay,dots,arrows)，支援響應式斷點設定。 |
| fn-slidersyn | 雙向輪播同步 | 用於標記兩個輪播 (nav 和 for) 互相連動的容器。 |
| fn-childset | 子元素列表 | 管理重複的子元素 (.)。支援排序 (Sortable)、釘選 (Pin)、複製與刪除子項目。 |
| fn-child | 子元素 | 內的單一項目，可被編輯名稱 (data-fn_note)。 |
| fn-link | 超連結 | 設定 href URL 與target (開啟方式)。 |
| fn-modalink | 燈箱連結 | 透過 AJAX (modalink-sel.php) 載入資料庫中的選項，用於觸發內建的 Modal 視窗。 |
| fn-card | 卡片組件 | 設定 Bootstrap Card 的 Header/Footer 顯示與否。 |
| fn-edit | 文字編輯欄 | 將該元素設置屬性 contenteditable設定為true |
| fn-ckedit | 文字編輯器 | 觸發 CKEditor 啟用，進行富文本編輯。必須與.fn-edit共用, 並且該元素必須設定unique id 才能正確作用 |