—可視化編輯器-小工具|內容元素

行為號召 Call to Action


  • 簡介:幫助使用者連結到您想連結的頁面。
  • 編輯項目:
    1. 標題:此號召行為標題,將會顯示在網頁上為Icon命名。
    2. 圖標:選擇內建的圖標。
    3. 內容:輸入想要顯示在圖標旁的內容說明。
    4. 按鈕標題:輸入會在圖標下方顯示標題,若不輸入則以圖標本身示呈現。
    5. 連結:填入網址/圖片或影片網址,點擊項目後會連結至該頁面。
    6. 連結|目標:
      • 「預設|_self」:點選按鈕後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選按鈕後,會另跳一個視窗導向該連結。
      • 「燈箱(圖片或嵌入影片)」:點選按鈕後,在同一頁面會出現一個有關閉選項的互動視窗。
    7. 動畫:進入頁面時,內容號召顯示的動畫特效。
    8. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

行為號召 Call to Action

Donec pretium quam vel nisi euismod, eget viverra magna ullamcorper.

聯繫表單 Contact box


  • 簡介:用來設置您對外的聯絡方式。
  • 編輯項目:
    1. 標題:表單標題。
    2. 地址:聯繫地址。
    3. 電話:聯絡電話。
    4. 第二電話:附加電話。
    5. 傳真:傳真號碼。
    6. 電子郵件:能夠聯絡道您的電子郵件。
    7. 連結網址:連結到您的網頁。
    8. 背景圖片:為您的聯繫表單區塊加上背景圖片。
    9. 動畫:進入頁面時,聯繫表單顯示的動畫特效。
    10. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

分隔線 Fancy Divider


  • 簡介:可在畫面中設置分隔線。此項目只有在未使用 側邊欄的情況下設置。
  • 編輯項目:
    1. 風格:可選擇分隔線的風格,主要為雙色調。
    2. 頂部顏色:選擇分隔線的顏色。
    3. 底部顏色:選擇分隔線的顏色。
    4. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

Fancy Heading


  • 簡介:可以用來呈現顯眼標題的區塊,此區塊下方可以顯示您想呈現的內容。
  • 編輯項目:
    1. 標題:Fancy heading的標題
    2. 編題樣式:H1為粗體,H2為細體。
    3. 內容:填入文字內容。
    4. 風格:選擇想要呈現標題的方式,有線、箭頭與圖標的選擇。
    5. 圖標:用於風格選擇圖標的圖示選項。
    6. 標語:用於風格選擇線的時候,將顯示於標題上方。
    7. 動畫:進入頁面時,Fancy Heading顯示的動畫特效。
    8. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

Fancy Heading

Donec pretium quam vel nisi euismod, eget viverra magna ullamcorper.
Sed sit amet magna efficitur, euismod urna ut, varius sapien.

Fancy Heading

Donec pretium quam vel nisi euismod, eget viverra magna ullamcorper.

Fancy Heading

Donec pretium quam vel nisi euismod, eget viverra magna ullamcorper.

通能列表 Feature List


  • 簡介:可以依需求創建一個圖示介面的功能列表。
  • 編輯項目:
    1. 標題:方便管理的標題,只會在後台顯示,並不會出現在頁面當中。
    2. 內容:編輯功能列表上點選每個元素所執行的動作,使用 [item icon="icon-lamp" title="" link="" target="" animate=""]簡碼, 若欲放置多個功能表,則直接接續簡碼的編輯。
      • Title為標題名稱
      • Link為連結網址
      • Tatget為網址頁面呈現方式,於原頁面顯示輸入0,於新分頁顯示輸入_blank
      • Animate為顯示動畫,有以下方式可以輸入fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpLarge, fadeInDownLarge, fadeInLeftLarge, fadeInRightLarge, zoomIn, zoomInUp, zoomInDown, zoomInLeft, zoomInRight, zoomInUpLarge, zoomInDownLarge, zoomInLeftLarge, bounceIn, bounceInUp, bounceInDown, bounceInLeft, bounceInRight
    3. 列:一排欲放置幾個元素,建議2-4即可,太大的執會導致布局錯亂。
    4. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum

Hover特效顏色 Hover Color


  • 簡介:可以建立一個以文字內容為主體的特效區塊。
  • 編輯項目:
    1. 內容:在此輸入欲顯示文字內容,可使用HTML語法。
    2. 背景顏色:載入頁面最一開始顯示的顏色。
    3. 背景顏色hover特效:載入滑鼠游標移至時背景顯示變化的顏色。
    4. 邊框顏色:可選擇或不選邊框顏色。
    5. 邊框顏色hover特效:載入滑鼠游標移至時邊框顯示變化的顏色。
    6. 邊框寬度:邊框的寬度,單位為px。
    7. 內距:內容框區塊的範圍,單位為px。
    8. 連結:填入網址/圖片或影片網址,點擊項目後會連結至該頁面。
    9. 連結|目標:
      • 「預設|_self」:點選圖片後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選圖片後,會另跳一個視窗導向該連結。
      • Tatget為網址頁面呈現方式,於原頁面顯示輸入0,於新分頁顯示輸入_blank
      • 「燈箱(圖像或嵌入影片)」:點選圖片後,在同一頁面會出現一個有關閉選項的互動視窗。
    10. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
    11. 自定義|類別:可直接輸入CSS樣式,如color:色碼、 opacity:0.5。
Lorem ipsum dolor sit amet.

如何運行 How it Works


  • 簡介:可建立一個簡易的圖示步驟教學。
  • 編輯項目:
    1. 背景圖片:載入您欲放置的教學圖片或圖示。
    2. 數字:用以顯示步驟數字或英文字母以示順序。
    3. 標題:輸入步驟標題。
    4. 內容:內容詳細敘述,可使用HTML語法。
    5. 線:選擇是否顯示數字兩旁的連接線段。
    6. 風格:您可以選擇圖片顯示方式。
    7. 連結:填入網址/圖片或影片網址,點擊項目後會連結至該頁面。
    8. 連結|目標:
      • 「預設|_self」:點選圖片後,會在同一個頁面直接導向該連結。
      • 「新選項卡或視窗|_blank」:點選圖片後,會另跳一個視窗導向該連結。
      • Tatget為網址頁面呈現方式,於原頁面顯示輸入0,於新分頁顯示輸入_blank
      • 「燈箱(圖像或嵌入影片)」:點選圖片後,在同一頁面會出現一個有關閉選項的互動視窗。
    9. 動畫:進入頁面時,如何運行顯示的動畫特效。
    10. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
    (若如何運行的步驟有四項,則須建立四個選項框)
step-051

Lorem

step-042

ipsum

step-033

dolor

step-024

amet

消息 Info Box

 

  • 簡介:可建立一個消息佈告欄,傳遞網站的新消息。
  • 編輯項目:
    1. 標題:此消息欄的標題。
    2. 內容:消息欄的內容,使用
      • 消息1
      • 消息2
      編輯文字內容。
    3. 背景圖片:為您的消息欄區塊加上背景圖片。
    4. 動畫:進入頁面時,消息顯示的動畫特效。
    5. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。

地圖 Map


  • 簡介:可建立一個清晰的地圖,並且可以建立聯繫表單在地圖上做補充。
  • 編輯項目:
    1. Google地圖緯度:填入所在位置緯度。
    2. Google地圖經度:填入所在位置經度。
    3. 縮放:地圖放大程度。(數值越小看到的範圍越大,數值越大看到的街區範圍較小,但較清楚。)
    4. 高度:地圖區塊在頁面上的範圍高度,單位為像素。
    5. 類型:您想要的地圖呈現類型,有地圖、衛星、地圖+衛星與地形四種。
    6. 控制器:您可以選擇想要讓使用者運用的控制器,一般建議使用縮放。
    7. 拖拉:選擇是否要讓地圖能夠有拖拉功能。
    8. 邊框:是否顯示地圖邊框。
    9. 標記圖標:地圖的預設圖標為紅色icon,您也可以設置自己的圖標圖片,注意使用.png檔與合適的大小。
    10. 地圖顏色:可以選擇地圖顏色。
    11. 風格:至snazzymaps.com/explore可選擇不同的風格樣式。
    12. 其他標記 | 緯度、經度、圖標網址:可為地圖做詳細的補充標記。
    13. 標題:聯繫表單標題。
    14. 地址:聯繫表單地址,可以使用HTML語法。
    15. 電話:聯絡電話。
    16. 電子郵件:聯繫的電子郵件。
    17. 連結網址:連結到您的網頁。
    18. 風格:聯繫表單要放置的位置,選擇"地圖上的聯繫方式(用於全寬列/包裝)”顯示則如下範例圖;選擇”頂部欄”則會與地圖獨立,顯示於地圖區塊上方。
    19. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
 

地圖 Map


  • 簡介:可建立一個清晰的地圖,並且可以建立聯繫表單在地圖上做補充。
  • 編輯項目:
    1. Google地圖緯度:填入所在位置緯度。
    2. Google地圖經度:填入所在位置經度。
    3. 縮放:地圖放大程度。(數值越小看到的範圍越大,數值越大看到的街區範圍較小,但較清楚。)
    4. 高度:地圖區塊在頁面上的範圍高度,單位為像素。
    5. 類型:您想要的地圖呈現類型,有地圖、衛星、地圖+衛星與地形四種。
    6. 控制器:您可以選擇想要讓使用者運用的控制器,一般建議使用縮放。
    7. 拖拉:選擇是否要讓地圖能夠有拖拉功能。
    8. 邊框:是否顯示地圖邊框。
    9. 標記圖標:地圖的預設圖標為紅色icon,您也可以設置自己的圖標圖片,注意使用.png檔與合適的大小。
    10. 地圖顏色:可以選擇地圖顏色。
    11. 風格:至snazzymaps.com/explore可選擇不同的風格樣式。
    12. 其他標記 | 緯度、經度、圖標網址:可為地圖做詳細的補充標記。
    13. 標題:聯繫表單標題。
    14. 地址:聯繫表單地址,可以使用HTML語法。
    15. 電話:聯絡電話。
    16. 電子郵件:聯繫的電子郵件。
    17. 連結網址:連結到您的網頁。
    18. 風格:聯繫表單要放置的位置,選擇"地圖上的聯繫方式(用於全寬列/包裝)”顯示則如下範例圖;選擇”頂部欄”則會與地圖獨立,顯示於地圖區塊上方。
    19. 自定義|類別Classes:輸入欲套用的CSS類別,多個類別應使用空格分隔。
 
Click to Hide Advanced Floating Content

勲偉

怡萱

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