簡介

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開始數喔,這一點要特別注意。