WordPress 浮動按鈕教學

WordPress 浮動按鈕教學

本篇文章將解決您的網站需要使用浮動按鈕或訊息時的需求,在不同的頁面、螢幕高度尺寸時可以顯示不同的浮動內容。

首先請安裝Advanced Floating Content外掛

安裝且啟用完到後台,點選Add New新增一個項目。

以圖片的方式製作一個頁面連結的簡單內容作為範例,首先在新增媒體的部分加入圖片。
需要以文字建立浮動內容的人也可以插入文字,做法是一樣的。

Position Your Floating Content欄位:主要處理固定方式跟內容的選擇跟內容位置設定,可以根據要設定的內容文字或文字調整。
Fixed:固定
Absolute:頁面絕對位置
Scroll:滾動

Build Your Theme For Floating Content欄位:主要處理是否關閉按鈕相關設定,及背景、邊框設定。

特別提醒一下Padding的四個輸入框的順序是:上、右、下、左,有需要分別設定的使用者請特別注意。
padding:內容跟邊框的距離。
Border:框線。

Floating Content Controlling Options欄位:上半部主要控制浮動內容顯示的頁面、標籤、文章等等。

點選Only Selscted Posts之後可以選擇目前已經建置的頁面、標籤等位置,換言之就是可以在每一個不同的頁面給出不同的內容,具有相當高的靈活度,是這個外掛的優點之一。

這個區塊有用到Woocommerce購物車外掛的使用者,可以選擇如何顯示在Woocommerce Products Page或Categories,相當方便。
下面的區塊,偏向Mobile控制,可以控制多少高度才顯示,或多少高度就隱藏,在Windows或Mac OS 隱藏等項目。

也有提供css控制器可以控制外觀。

右側邊欄可以選擇進出場的動畫,Schedulevm可以設定開始結束的時間。

 

以下用google圖示做示範

cscs258951

我是WordPress小菜鳥,目前比較著重在前端外觀的部分,還是會用到一些如表單之類的小外掛,在逐步挖掘這個世界的同時,以新手的角色寫文章,我相信這樣的角度更能讓讀者了解一個全新的內容,不論是外掛或知識,歡迎大家留言交流謝謝。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Close Menu
×

Cart