按鈕或超連結控制區塊顯示的功能,在網頁設計時常被應用。內容過多時,可依使用者的屬性或需求,顯示對他有幫助的資訊就好,不需要全部展示,除了畫面精簡一些,更重要的是優化使用者體驗。
或許你會問這看起來很簡單,Elementor 怎麼可能沒有?我是用免費版,還真的沒有 😮,所以就自己 DIY,來看一下怎麼做吧!
按鈕元件(Button) 在免費版就有了,先拖兩個按鈕進來頁面,並同時為按鈕指定 CSS ID
本篇的範例,我將分別為 [顯示貓咪] 的按鈕設定 ID 為 showCat, [顯示狗狗] ID 設 showDog
這部分是指,當訪客按下 [顯示貓咪] 或 [顯示狗狗] 時,網頁要顯示什麼對應的內容?
內容完成後,點一下區塊,左側會顯示設定框,請設定 設定 CSS ID, [顯示貓咪] 設 hideCat ,[顯示狗狗] 設 hideDog
利用外掛 Simple Custom CSS and JS 分別把程式碼加進 WP。
當然您功力更好的話,可以透過佈景主題編輯器,不一定要下載這個。最後,如果你有用 Astra Pro, 用隨附的 Custom Layout 也是沒問題的喔。
#hideCat,#hideDog {
display:none ;
}
<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>
程式碼都加入後,檢視網頁,效果應該就會像開頭的示範影片囉 🎉
參考資料: