簡介
Elementor Pro的文章工具可以用來製作部落格文章清單,但若文章列表改成無「精選圖片」的純標題,感覺上視覺有點單調,所以可以加一段小語法讓文章標題列表前面有1234的順序,讓視覺上比較有順暢感。
運用範圍
只要是Elementor Pro內建的Post文章工具所產生的文章列表都可以使用,一般會用在「最新公告」或「最新文章」之類的。
範例
文章標題前面都會自動加上數字的順序。
原理與思路
這個是利用CSS的一個計數功能,父元素用counter-reset聲明一個計數器,然後子元素通過content屬性和counter方法來使用這個計數器。
可以不懂沒關係,只要複製貼上就會有效果了。
實作
在Elementor 的文章先設定成沒有圖片的純標題。
在Post文章工具的進階/自訂CSS樣式 或 左下角齒輪設定中,貼上下列CSS語法即可。
/* 文章標題前面可以自動加上數字順序 */
.counter{
counter-reset:num;
}
.counter a::before{
counter-increment:num;
content:counter(num) ;
border:1px solid;
padding:3px 5px;
background:#009ee2;
color:#ffffff;
}
你可以再自己修改CSS中的一些數值,例如背景色(background),或border-radius(弧度100%)改成圓形、font-size等等。
影片
總結
這是比較粗淺的小技巧,所以如果文章多篇有分頁,點擊分頁後的文章列表仍是從1開始數喔,這一點要特別注意。