—可視化編輯器-小工具|框和信息圖表

文章框 Article box


  • 簡介:這個項目可以在頁面上增加需求數量的文章框。
  • 編輯項目:
    1. 圖片:上傳圖片。
    2. 標語:文章框的標語。
    3. 標題:文章框項目的標題。
    4. 連結:填入網址/圖片或影片網址,點擊項目後會連結至該頁面。
    5. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    6. 動畫:進入頁面時,文章框顯示動畫。
    7. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
Family in the kitchen

Quisque eget diam varius, viverra erat nec, accumsan metus.

Cras a est in magna dignissim faucibus.

Vegetables on the kitchen table

Quisque eget diam varius, viverra erat nec, accumsan metus.

Cras a est in magna dignissim faucibus.

前後 Before After


  • 簡介:這個項目可以將兩張圖進行左右轉換。
  • 編輯項目:
    1. 圖像 | 之前:上傳圖片。
    2. 圖像 | 之後:上傳圖片。
    3. 自定義 | 類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
Sexy Beauty Girl with Red Lips and blue NailsSexy Beauty Girl with Red Lips and blue Nails

圖表 Chart


  • 簡介:這個項目可以創建圖表區塊。
  • 編輯項目:
    1. 標題:圖表的標題。
    2. 百分比:填入0-100內的數字,欲呈現的百分比。
    3. 標籤:輸入欲顯示在圖表中的內容,可空白以圖標代替。
    4. 圖標:選擇內建的圖標。
    5. 圖片:上傳圖片。
    6. 線寬:以像素為單位,輸入圖表外圈像素大小。
    7. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
30

Curabitur ipsum

80

Aliquam eratur

Tincidunt mauris

180806logo-orange

Tincidunt mauris

倒數計時器 Countdown


  • 簡介:即為倒數計時器。
  • 編輯項目:
    1. 啟動日期:以「日/月/年 時:分:秒」的格式輸入您的目標日期。
    2. UTC 時區:選擇您所處地區的時區。(台灣的時區為UTC+8)
00


00


00


00


計數器 Counter


  • 簡介:用來顯示數值的區塊。
  • 編輯項目:
    1. 標題:計數器標題。
    2. 圖標:選擇內建的圖標。
    3. 圖標顏色:選擇圖示色彩。
    4. 圖片:上傳圖片,若使用圖片將不會顯示圖標。
    5. 前綴:可以在此輸入計數器敘述,將顯示在上方或左方的小字。
    6. 後綴:可以在此輸入計數器敘述,將顯示在下方或右方的小字。
    7. 數字:計數器所顯示的數字。
    8. 風格:可選擇垂直或平行。
    9. 動畫:進入頁面時,計數器顯示動畫效果。。
    10. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

功能框 Feature Box


  • 簡介:此項目可以協助您建立一個圖片連結的區塊。
  • 編輯項目:
    1. 圖片:上傳圖片。
    2. 標題:將會顯示在圖片右邊的粗體文字標題。
    3. 內容:將會顯示在圖片右邊的較小文字內容。
    4. 背景顏色:此區塊的背景色。
    5. 後綴:可以在此輸入計數器敘述,將顯示在下方或右方的小字。
    6. 填入網址/圖片或影片網址,點擊功能框後會連結至該頁面。
    7. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    8. 動畫:進入頁面時,功能框顯示動畫。
    9. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
Picnic provision

Lorem ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Elderly man is using mobile phone

Lorem ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

扁平框 Flat Box


  • 簡介:滑鼠游標移至圖片時有滑動的效果。
  • 編輯項目:
    1. 圖片:上傳圖片。
    2. 標題:此為圖片標題文字。
    3. 內容:此為圖片內容文字。
    4. 圖標:選擇內建的圖標。
    5. 圖標|圖片:若內鍵圖標皆無您所需之圖樣,則可上傳個人電腦中的圖片作為圖標。
    6. 背景:選擇背景顏色。
    7. 填入網址/圖片或影片網址,點擊功能框後會連結至該頁面。
    8. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    9. 動畫:進入頁面時,扁平框顯示動畫。
    10. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
Picnic provision

Lorem Ipsum

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Elderly man is using mobile phone

Lorem Ipsum

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Hover 特效框 Hover box


  • 簡介:可設置一個圖片特效框,讓滑鼠懸浮時有滑動特效,該區塊能看到不同的圖片變化,也可以在圖片上 加入連結。
  • 編輯項目:
    1. 圖片:載入頁面最一開始顯示的圖片。
    2. 圖片hover特效:載入滑鼠滑鼠懸浮時顯示變化的圖片,需與第一張圖片相同大小。
    3. 連結:填入網址/圖片或影片網址,點擊Hover特效框後會連結至該頁面。
    4. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    5. 動畫:進入頁面時,特效框顯示動畫。
    6. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

圖標框 Icon Box


  • 簡介:設置圖標與標題內容連結至其他頁面。
  • 編輯項目:
    1. 標題:顯示在圖標下的標題。
    2. 標題標籤:標題字體大小。
    3. 內容:此圖標內容敘述。
    4. 圖標:選擇內建的圖標。
    5. 圖片:上傳圖片,若使用圖片將不會顯示圖標。
    6. 圖標位置:選擇圖標您想擺放的位置,有上面與左邊兩種。
    7. 邊框:選擇是否顯示右側邊框。
    8. 連結:填入網址/圖片或影片網址,點擊Hover特效框後會連結至該頁面。
    9. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    10. 動畫:進入頁面時,特效框顯示動畫。
    11. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

相框 Photo Box


  • 簡介:可建立一個圖片框,讓您展示圖片。
  • 編輯項目:
    1. 標題:圖片標題。
    2. 圖片:上傳圖片。
    3. 內容:圖片文字內容。
    4. 文字對齊:選擇您想要的文字排列方式,有左、中、右三種方式。
    5. 連結:填入網址/圖片或影片網址,點擊Hover特效框後會連結至該頁面。
    6. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    7. Greyscale Images:圖像是否要以灰階呈現,滑鼠游標指到時會變回原來色彩,此項目只有在 圖片有連結的時候會作用。
    8. 動畫:進入頁面時,特效框顯示動畫。
    9. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

進度條 Progress Bars


  • 簡介:可建立一個以百分比顯示向量圖的進度條,可以設置多個。
  • 編輯項目:
    1. 標題:文字標題。
    2. 內容:使用[bar title="標題" value="50" size="20"]簡碼編輯進度條內容,設 置多個進度條之間接續編輯即可。
      (value為百分比的數值,size為進度條的高度)
    3. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
  • Bar150%
  • Bar260%
  • Bar280%

促銷框 Promo Box


  • 簡介:可以協助您製作一個結合促銷資訊與購買連結按鈕的促銷框。
  • 編輯項目:
    1. 標題:此促銷框標題。
    2. 按鈕 | 文字:設置按鈕文字。
    3. 按鈕 | 連結:填填入網址/圖片或影片網址,點擊項目後會連結至該頁面。
    4. 按鈕 | 目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    5. 圖像位置:圖片在此促銷框要擺放的位置,至左或右。
    6. 邊框:是否顯示右側邊框。
    7. 動畫:進入頁面時,特效框顯示動畫。
    8. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
wpml

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu lorem volutpat, tincidunt nisi quis, fringilla nulla. Suspendisse ornare condimentum arcu eget finibus
Lorem ipsum
qa-prices

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu lorem volutpat, tincidunt nisi quis, fringilla nulla. Suspendisse ornare condimentum arcu eget finibus
Lorem ipsum

速查 Quick Fact


  • 簡介:可以幫助使用者一目瞭然清楚您所想傳達的訊息與數字。
  • 編輯項目:
    1. 標題:第一個標題會以小字顯示在數字上。
    2. 標題:第二個標題會以小字顯示在數字下。
    3. 內容:顯示在第二個標題下方的小灰字,用來敘述此數字呈現的內容,可以使用HTML語法。
    4. 數字:填入欲呈現的數字。
    5. 前綴:顯示在數字左方的小字。
    6. 後綴:顯示在數字右方的小字。
    7. 對齊:選擇此區塊內容的排列方式,有左、中與右。
    8. 動畫:進入頁面時,特效框顯示動畫。
    9. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

Goods

picese24

Maecenas ipsum sapien, euismod eget diam at, elementum pulvinar magna.


Goods

picese24

Maecenas ipsum sapien, euismod eget diam at, elementum pulvinar magna.


Goods

100boxes

Maecenas ipsum sapien, euismod eget diam at, elementum pulvinar magna.


Goods

43pairs

Maecenas ipsum sapien, euismod eget diam at, elementum pulvinar magna.


滑動框 Sliding Box


  • 簡介:滑動框讓你建立一個有滑動效果的相片框。
  • 編輯項目:
    1. 圖片:上傳圖片
    2. 標題:此為滑動框標題
    3. 連結:填入網址/圖片或影片網址,點擊滑動框後會連結至該頁面。
    4. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    5. 動畫:進入頁面時,特效框顯示動畫。
    6. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

故事框 Story Box


  • 簡介:可建立一個圖片與文字相符的故事框,協助使用者瀏覽並引導至連結頁面。
  • 編輯項目:
    1. 圖片:上傳圖片。
    2. 風格:圖片與文字的排列呈現,可以選擇水平圖像與垂直圖像。
    3. 標題:與圖片一同排列的文字標題,以粗體呈現。
    4. 顯示在標題下的文字內容,以較小字體呈現。
    5. 連結:填入網址/圖片或影片網址,點擊滑動框後會連結至該頁面。
    6. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    7. 動畫:進入頁面時,特效框顯示動畫。
    8. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
Couple trekking together

Lorem ipsum


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu lorem volutpat, tincidunt nisi quis, fringilla nulla. Suspendisse ornare condimentum arcu eget finibus.
Family in the kitchen

Lorem ipsum


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu lorem volutpat, tincidunt nisi quis, fringilla nulla. Suspendisse ornare condimentum arcu eget finibus.

預告框 Trailer Box


  • 簡介:特色是有一句標語、一張照片以及滑鼠懸浮時有特效。
  • 編輯項目:
    1. 圖片:上傳圖片。
    2. 標語:此為預告框標語。
    3. 標題:此為預告框標題。
    4. 連結:填入網址/圖片或影片網址,點擊滑動框後會連結至該頁面。
    5. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    6. 動畫:進入頁面時,特效框顯示動畫。
    7. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

縮放框 Zoom Box


  • 簡介:可建立一個圖片顯示區塊,當滑鼠游標移到時會改為色塊及小張圖片。
  • 編輯項目:
    1. 圖片:上傳圖片。
    2. 覆蓋背景:滑鼠游標移到縮放框時所顯示的覆蓋色塊。
    3. 內容圖片:滑鼠游標移到縮放框時所呈現的較小張圖片。
    4. 內容:與內容圖片一起出現的文字。
    5. 內容圖片:滑鼠游標移到縮放框時所呈現的較小張圖片。
    6. 內容圖片:滑鼠游標移到縮放框時所呈現的較小張圖片。
    7. 連結:填入網址/圖片或影片網址,點擊滑動框後會連結至該頁面。
    8. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    9. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
coffee latte art make by barista
Coffee Beans on Wood
Bakers hands kneading dough on counter
397536-PCJ1RQ-855
Click to Hide Advanced Floating Content

勲偉

怡萱

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