—可視化編輯器-小工具|內容區塊

可編輯面板 Accordion/Toggle


  • 簡介:可根據想放的內容分段增加面板的選項卡。
  • 編輯項目:
    1. 標題:可折疊面板標題。
    2. 面板:需增加的折疊面板標籤,可以拖曳來改變順序或刪除。
    3. 打開第一個:可選擇第一個選項卡內容是否顯示。
    4. 打開所有:可選擇是否顯示所有選項卡內容。
    5. 風格:此區塊的顯示樣式,選擇使用切換或可折疊面板。

可編輯面板 Accordion/Toggle

Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet mauris nec vehicula lacinia. Vestibulum sed semper leo, a maximus diam. Donec vel urna at urna efficitur eleifend. Vestibulum luctus dapibus nisl at imperdiet.
Nam nisl augue
Nam nisl augue, dignissim in enim ac, mattis viverra quam. In tempor risus eros, at mattis purus pellentesque quis. Etiam id dolor tincidunt, sollicitudin dolor quis, egestas diam.
Nullam ullamcorper
Nullam ullamcorper, arcu nec vulputate cursus, ipsum eros sagittis erat, in egestas elit massa a mi. Integer id ex non orci elementum sagittis. Etiam suscipit tempor massa, in suscipit enim faucibus ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dolor felis, gravida vel velit consequat, faucibus sagittis velit. Etiam placerat ante mi.

可編輯面板 Accordion/Toggle

Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet mauris nec vehicula lacinia. Vestibulum sed semper leo, a maximus diam. Donec vel urna at urna efficitur eleifend. Vestibulum luctus dapibus nisl at imperdiet.
Nam nisl augue
Nam nisl augue, dignissim in enim ac, mattis viverra quam. In tempor risus eros, at mattis purus pellentesque quis. Etiam id dolor tincidunt, sollicitudin dolor quis, egestas diam.
Nullam ullamcorper
Nullam ullamcorper, arcu nec vulputate cursus, ipsum eros sagittis erat, in egestas elit massa a mi. Integer id ex non orci elementum sagittis. Etiam suscipit tempor massa, in suscipit enim faucibus ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dolor felis, gravida vel velit consequat, faucibus sagittis velit. Etiam placerat ante mi.

常見問題 FAQ


  • 簡介:可建立一個常見問題的可折疊面板清單。
  • 編輯項目:
    1. 標題:此清單的標題。
    2. 點選「添加選項卡」後會出現下方內容:
    3. 標題:輸入常見問題事件名稱。
    4. 打內容:您可在此輸入事件解答概述。
    5. 打開第一個:可選擇第一個選項卡內容是否顯示。
    6. 打開所有:可選擇是否顯示所有選項卡內容。
    7. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

常見問題 FAQ

1Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet mauris nec vehicula lacinia. Vestibulum sed semper leo, a maximus diam. Donec vel urna at urna efficitur eleifend. Vestibulum luctus dapibus nisl at imperdiet.
2Nam nisl augue
Nam nisl augue, dignissim in enim ac, mattis viverra quam. In tempor risus eros, at mattis purus pellentesque quis. Etiam id dolor tincidunt, sollicitudin dolor quis, egestas diam.
3Nullam ullamcorper
Nullam ullamcorper, arcu nec vulputate cursus, ipsum eros sagittis erat, in egestas elit massa a mi. Integer id ex non orci elementum sagittis. Etiam suscipit tempor massa, in suscipit enim faucibus ac.

幫助 Helper


  • 簡介:建立一個幫助框,包含兩個標題與內容的文字,分別是兩個按鈕,能夠打開標籤或是其他連結。
  • 編輯項目:
    1. 標題:此區塊的主標題。
    2. 標題|大小:標題字體大小。
    3. 標題:顯示在按鈕的標題。
    4. 內容:文字內容。
    5. 連結:填入網址/圖片或影片網址,點擊該項目後會連結至該頁面。此功能與內容無法同時並用。
    6. 連結|在新視窗打開:選擇連結是否要在新視窗中打開。
    7. 連結|類別:當連結內容為同一頁面的某區塊/段落/圖片,輸入”scroll”會有捲動的動畫效果
  • (項目2依此類推)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet mauris nec vehicula lacinia. Vestibulum sed semper leo, a maximus diam. Donec vel urna at urna efficitur eleifend.
Nam nisl augue, dignissim in enim ac, mattis viverra quam. In tempor risus eros, at mattis purus pellentesque quis. Etiam id dolor tincidunt, sollicitudin dolor quis, egestas diam.

列表 Listr


  • 簡介:可建立一個清晰的圖文對照列表。
  • 編輯項目:
    1. 圖標:選擇內建的圖標。
    2. 圖片:上傳圖片,若使用圖片將不會顯示圖標。
    3. 標題:顯示在圖片旁的文字標題。
    4. 內容:標題下方的敘述文字。
    5. 連結:填入網址/圖片或影片網址,點擊項目後會連結至該頁面。
    6. 在新視窗中打開:選擇是否彈出新分頁或是在原本頁面打開。
    7. 風格:選擇列表呈現的樣式。
    8. 動畫:進入頁面時,列表顯示的動畫特效。
    9. 自定義|類別:Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

Suspendisse varius

Suspendisse varius lectus varius, luctus sem et, pretium.

Suspendisse varius

Suspendisse varius lectus varius, luctus sem et, pretium.

Suspendisse varius

Suspendisse varius lectus varius, luctus sem et, pretium.

Suspendisse varius

Suspendisse varius lectus varius, luctus sem et, pretium.

Suspendisse varius

Suspendisse varius

價格項目 Pricing Item


  • 簡介:可用來展示商品說明價格等資訊,並引導使用者做相關操作。
  • 編輯項目:
    1. 圖片:上傳圖片。
    2. 標題:此價格項目標題。
    3. 價格:商品價格。
    4. 貨幣:商品幣值。
    5. 貨幣位置:可選擇置左或置右。
    6. 商品單位:可輸入商品的單位,如組、件、套或使用時間,顯示在價格右上角。
    7. 子標題:商品圖片的子標題。
    8. 內容:敘述商品內容,可使用HTML語法。
    9. 按鈕標題:在此命名,才會顯示按鈕。
    10. 按鈕|連結:填入網址/圖片或影片網址,點擊該項目後會連結至該頁面。
    11. 按鈕|目標:選擇彈出新分頁或是在燈箱打開。
    12. 精選:選擇此項商品是否為精選,選擇是,底色會與一般項目不同。
    13. 風格:選擇項目顯示的方式。
    14. 動畫:進入頁面時,價格項目顯示的動畫特效。
    15. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
Top view of Salad veggie is breakfast for healthy,tomatoes,bell

Phasellus

$30

Cras viverra nibh sed mollis vestibulum.
450889-PEZLTK-704

Phasellus

$30

Cras viverra nibh sed mollis vestibulum.
Several chicken wrap sandwiches on mat

Phasellus

$30

Cras viverra nibh sed mollis vestibulum.
Fresh lime drinks macro shot

Phasellus

$30

Cras viverra nibh sed mollis vestibulum.

幻燈片 Slider


  • 簡介:如果您不喜歡內建的revolution slide,這個項目將會是一個很好的替代選擇。您可以輕易地呈現照片。
  • 編輯項目:
    1. 分類:選擇幻燈片的呈現類別。
    2. 排序方式:也就是排序依據,選擇標題、目錄順序或是日期。
    3. 排序:選擇遞增或遞減排列。
    4. 風格:幻燈片呈現的不同樣式,有四種方式。
    5. 選單導航:選擇輪播幻燈片時的樣式,分別為箭頭跟圓點,若選擇預設則兩個樣式皆同時出現。
    6. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
    7. 子標題:商品圖片的子標題。
    8. 內容:敘述商品內容,可使用HTML語法。
    9. 按鈕標題:在此命名,才會顯示按鈕。
    10. 按鈕|連結:填入網址/圖片或影片網址,點擊該項目後會連結至該頁面。
    11. 按鈕|目標:選擇彈出新分頁或是在燈箱打開。
    12. 精選:選擇此項商品是否為精選,選擇是,底色會與一般項目不同。
    13. 風格:選擇項目顯示的方式。
    14. 動畫:進入頁面時,價格項目顯示的動畫特效。
    15. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
  • demo9 (1)
  • demo8
  • demo7
  • demo6
  • demo5
  • demo4
  • demo3
  • demo1
  • demo2

頁籤 Tabs


  • 簡介:此功能就像是網站內部的頁籤,是一種頁面呈現的方法之一。
    一般來說頁面區塊會由上而下逐一排列,不過當區塊過多時就會有頁面過長的疑慮。這時就可以使用 頁籤,讓整個頁面的長度縮減。
  • 編輯項目:
    1. 標題:籤頁主標題。
    2. 添加選項卡:可添加數個選項卡,並輸入標題與內容。
    3. 風格:有四種不同的樣式,分別為:水平、水平且有大Icon、垂直、-垂直且有大Icon。
    4. 內容內邊距:顯示內容與外框的距離。
    5. 唯一 ID:如果你想從其他地方的連結打開此頁籤的特定選項卡,請使用此選項。
      (在此設置任何文字作為你的唯一ID,例如:offer,並且你想打開第2個選項卡,在其他地方連結 輸入請使用:your-url/#offer-2)
Suspendisse vitae ante nec ipsum hendrerit lobortis eget ac purus.
Proin iaculis purus eget enim pharetra, sit amet tempor augue pharetra.
Donec pretium quam vel nisi euismod, eget viverra magna ullamcorper.
Suspendisse vitae ante nec ipsum hendrerit lobortis eget ac purus.
Proin iaculis purus eget enim pharetra, sit amet tempor augue pharetra.
Donec pretium quam vel nisi euismod, eget viverra magna ullamcorper.
Click to Hide Advanced Floating Content

勲偉

怡萱

一鍵打造完美品牌網站
讓專業顧問了解您的需求
速速諮詢去!