fbpx
Wordpress電商網站|個人品牌加速器|個人講師

WordPress Elementor|自訂文章列表樣式-Elementor Custom Skin

“ 用 Elementor Custom Skin 來客製你的文章列表樣式吧! ”

使用 Elementor Pro 製作Posts 文章列表時,
在 Layout 中的「 皮膚(Skin) 」裡面,可以挑選的樣式其實不多⋯😧
如果有能夠自訂文章列表樣式的功能,是不是就可以做出更多變化了呢?🤔

尋尋覓覓了很久,發現了「Elementor Custom Skin」這個外掛,
可以讓 Elementor 多一個 Loop 模板,這樣就能夠輕易設計出自己想要的欄位囉~
今天就來教大家該如何使用吧~💁🏻‍♂️

✨ 在這之前,你需要有 Elementor Pro,才能夠使用這個插件唷~

個人品牌孵化器|WP電商網站課程|個人講師

新增一個頁面並使用Elementor編輯,在頁面中建立一個Post區塊

Wordpress電商網站|Wordpress網路行銷|WP電商網站課程

這邊可以看到,原先預設的皮膚 (Skin) 中,只有「Classic」、「Cards」這兩個可以選,安裝了這個外掛以後,就會多出自訂「Custom

接下來就要告訴大家,如何使用這個 Custom 皮膚~🤩

回到後台,找到Template -> Theme Bulider -> Loop,並新增一個Loop版型

Wordpress電商網站|個人品牌孵化器|個人品牌經營
Wordpress電商網站|Wordpress網路行銷|WP電商網站課程

接下來,就可以從左側工具列拉入自己想要的元素,並針對內容進行樣式調整囉!

Wordpress 一對一課程|Wordpress網路行銷|個人講師
Wordpress電商網站|WP網站課程|個人講師
Wordpress電商網站|WP網站課程|個人講師

製作完畢後,回到頁面中的 Post 區塊,將皮膚 (Skin) 設為自訂 (Custom),
並且選擇剛剛所製作的Loop模板。

WP網站課程|Wordpress電商網站|個人講師

如此一來,剛剛所製作的文章列表樣式,就可以在頁面上呈現出來囉!

Wordpress電商網站|Wordpress網路行銷|WP電商網站課程

以上就是Elementor Custom Skin的教學
這部分若是搭配 ACF 自訂欄位,就可以有更多有趣的變化喔!🤣
未來會再多分享更進階的應用☺️,記得持續關注我們呦~

以上是哈瑞先生為大家寫的教學,如果還有不清楚的地方,
歡迎留言提問唷!
我們會盡快解決大家的需求~🥰

如果你喜歡我的教學,歡迎幫
哈瑞先生玩行銷按讚,
並在下面留言回饋,也可以分享給妳身邊需要的朋友唷!