圖庫與輪播功能完整教學 – 提升網站視覺效果

基本圖庫

下面是範例呈現 

  1. 上傳和管理照片:點擊“添加圖片”按鈕上傳圖片,並通過拖動圖片來調整它們的順序。
  2. 自定內容與樣式:在”內容”中設置欄多寡、是否開啟燈箱、排列是否隨機。在”樣式”中設置圖片的間距與圓角。與gallery不同的是基本圖庫沒有hover效果。
  3. 設置圖片屬性:點擊圖片的編輯器為每張圖片添加標題、描述和鏈接,以提供更多信息或導航。

Gallery

下面是範例呈現

  1. 上傳和管理照片:點擊“添加圖片”按鈕上傳圖片,並通過拖動圖片來調整它們的順序。
  2. 自定內容與樣式:在”內容”的type中可以選擇是否需要建置多個圖庫、是否開啟燈箱、欄位。在”樣式”中設置圖片的間距與圓角、塗層效果,並設置動畫效果。與基本圖庫不同的是gallery有hover動畫。
  3. 設置圖片屬性:點擊圖片的編輯器為每張圖片添加標題、描述和鏈接,以提供更多信息或導航。

Loop Carousel

下面是範例呈現 

  1. 新增小工具:在Elementor編輯器中,從元素庫中將「Loop Carousel」小工具拖放到頁面上。
  2. 設置內容查詢(Query)
    一般不需使用內容查詢,但如果在Template中放置Posts相關套件,可以在“內容”選項卡中,設置查詢條件來定義要顯示的內容。您可以依據分類、標籤或其他分類法來篩選文章或產品。最後調整顯示項目的數量、排序方式等設置。
  3. 自定義樣式:進入“樣式”選項卡,自訂 Carousel 中每個項目的外觀。這包括圖片、標題、摘要和按鈕等元素的設計。
  4. 詳細設定:在“進階”選項卡中,設置 Carousel 的行為參數,如每個幻燈片顯示的項目數量、自動播放、循環播放及導航按鈕等。

Media Carousel

下面是範例呈現

  1. 新增小工具: 在 Elementor 編輯器中,搜尋並拖放 “Media Carousel” 小工具到頁面。
  2. 添加多媒體內容: 點擊slide裡的item,,“添加圖片”或“添加影片”,從媒體庫中選擇或上傳文件。
  3. 配置與自訂: 設置顯示方式(skin)和樣式,包括導航控制、和外觀調整。

Slider

下面是範例呈現
Slide 1 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 2 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Previous slide
Next slide

  1. 新增小工具: 在 Elementor 編輯器中,搜尋並拖放 “Slider” 小工具到頁面。
  2. 添加幻燈片: 點擊“添加幻燈片”,設置圖片、標題、文字和按鈕內容。
  3. 配置與自訂: 設置自動播放、過渡效果和導航控制,自訂滑動速度和樣式。
Metabiz 是專注於 HTML 客製化與程式開發的專業團隊,致力於為客戶提供簡潔、高效、易於維護的網頁設計與程式解決方案。我們的目標是通過技術實現創新,協助客戶在數位時代中脫穎而出。若您有相關需求,歡迎隨時與我們聯繫,一起實現您的網頁和程式開發目標。