2021-03-06

如何用 Elementor 免費版做出按鈕控制區塊顯示的功能

按鈕或超連結控制區塊顯示的功能,在網頁設計時常被應用。內容過多時,可依使用者的屬性或需求,顯示對他有幫助的資訊就好,不需要全部展示,除了畫面精簡一些,更重要的是優化使用者體驗

或許你會問這看起來很簡單,Elementor 怎麼可能沒有?我是用免費版,還真的沒有 😮,所以就自己 DIY,來看一下怎麼做吧!

用 Elementor 製作按鈕

按鈕元件(Button) 在免費版就有了,先拖兩個按鈕進來頁面,並同時為按鈕指定 CSS ID

本篇的範例,我將分別為 [顯示貓咪] 的按鈕設定 ID 為 showCat, [顯示狗狗] ID 設 showDog

用 Elementor 製作要顯示的內容

這部分是指,當訪客按下 [顯示貓咪] 或 [顯示狗狗] 時,網頁要顯示什麼對應的內容?

內容完成後,點一下區塊,左側會顯示設定框,請設定 設定 CSS ID, [顯示貓咪] 設 hideCat ,[顯示狗狗] 設 hideDog

撰寫客製 CSS and JS

利用外掛 Simple Custom CSS and JS 分別把程式碼加進 WP。

當然您功力更好的話,可以透過佈景主題編輯器,不一定要下載這個。最後,如果你有用 Astra Pro, 用隨附的 Custom Layout 也是沒問題的喔。

利用 CSS 在網頁載入時,先隱藏所有內容區塊
#hideCat,#hideDog {
    display:none ;
}
利用 jQuery 賦予按鈕控制顯區塊內容的能力
<script type="text/javascript">
jQuery(document).ready(function($){
  $('#showCat').click(function(e) {
        $('#hideCat').toggle("slow");
	$('#hideDog').hide();
  e.preventDefault();
    });
	$('#showDog').click(function(e) {
        $('#hideDog').toggle("slow");
	$('#hideCat').hide();
  e.preventDefault();
    });
});
</script>

確認頁面有套用到程式碼

程式碼都加入後,檢視網頁,效果應該就會像開頭的示範影片囉 🎉


參考資料:

How To Hide And Show Widgets On Click

請我喝杯咖啡吧 ^^

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

PeiYing Tsai
author
愛藝術,喜歡以科技解決問題的數位產品設計師。 堅持信念,任何困難事,必有搞定的一天,Just try it! 隨手紀錄日常學習到的知識心得,希望對妳/你有幫助。
coffee-cup linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram