“ 用 Elementor Custom Skin 來客製你的文章列表樣式吧! ”
使用 Elementor Pro 製作Posts 文章列表時,
在 Layout 中的「 皮膚(Skin) 」裡面,可以挑選的樣式其實不多⋯😧
如果有能夠自訂文章列表樣式的功能,是不是就可以做出更多變化了呢?🤔
尋尋覓覓了很久,發現了「Elementor Custom Skin」這個外掛,
可以讓 Elementor 多一個 Loop 模板,這樣就能夠輕易設計出自己想要的欄位囉~
今天就來教大家該如何使用吧~💁🏻♂️
✨ 在這之前,你需要有 Elementor Pro,才能夠使用這個插件唷~
- Step1:點找到 Elementor Custom Skin,安裝並啟用
- Step2:建立 Post 區塊
新增一個頁面並使用Elementor編輯,在頁面中建立一個Post區塊
- Step3:自訂 (Custom) 皮膚
這邊可以看到,原先預設的皮膚 (Skin) 中,只有「Classic」、「Cards」這兩個可以選,安裝了這個外掛以後,就會多出自訂「Custom」
接下來就要告訴大家,如何使用這個 Custom 皮膚~🤩
- Step4:新增 Loop 版型
回到後台,找到Template -> Theme Bulider -> Loop,並新增一個Loop版型
- Step5:開始自訂 (Custom) 文章樣式
接下來,就可以從左側工具列拉入自己想要的元素,並針對內容進行樣式調整囉!
- Step6:選擇自訂 Loop 模板
製作完畢後,回到頁面中的 Post 區塊,將皮膚 (Skin) 設為自訂 (Custom),
並且選擇剛剛所製作的Loop模板。
- 大功告成
如此一來,剛剛所製作的文章列表樣式,就可以在頁面上呈現出來囉!
以上就是Elementor Custom Skin的教學
這部分若是搭配 ACF 自訂欄位,就可以有更多有趣的變化喔!🤣
未來會再多分享更進階的應用,記得持續關注我們呦~
以上是哈瑞先生為大家寫的教學,如果還有不清楚的地方,
歡迎留言提問唷!我們會盡快解決大家的需求~🥰
如果你喜歡我的教學,歡迎幫「哈瑞先生玩行銷」按讚,
並在下面留言回饋,也可以分享給妳身邊需要的朋友唷!