專注於架設企業網站,分享WordPress教學和Elementor教學

如何用Elementor Pro設計WooCommerce產品分類和產品標籤側邊欄的樣式

更新日期:2024-06-15
本系列教學

正版分銷:

90元/1個網站/2年

最先進的WordPress頁面編輯器,能夠快速創建高端的、完美的網站。 適合任何主題,任何頁面,任何設計。
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我

WooCommerce產品分類和產品標籤側邊欄的樣式是跟隨主題設計的,通常沒有設計樣式功能。 如下圖所示,它是我用Hello Elementor主題+ Elementor Pro製作的產品列表範本,在左側的側邊欄里包含了產品分類和產品標籤。 接下來,我們就講如何用Elementor Pro來將樣式設置為下圖所示的模樣。

image 1

首先,我們用視頻講解如何設計產品分類的樣式

然後,針對產品分類的custom css如下:

下面的代碼中,#cateside是css id,要保持其唯一性,其他地方如果也用到css id,要與其不同名; 此外,如果你不需要定義字型大小或者字體,可以將下方代碼里的對應行刪除。 譬如font-family,我就建議不要用,採用主題預設的字體設置,即保持跟主題的字體一致即可。

#cateside li{
    line-height: 20px;/*文字的行高*/
    font-size: 18px;/*字体大小*/
    font-family: Comic Sans MS;/*字体*/
}
#cateside h5{
    font-size: 24px;/*标题字体大小*/
    font-family: Comic Sans MS;/*标题字体*/
    font-weight: 900;/*标题粗细*/
    color:#333;/*字体颜色*/
}

而產品標籤的custom css如下,其他諸如背景、邊框投影、內邊距的設計方法與產品分類的操作是一樣的,我就不再提供視頻了。

.tagcloud a{
    font-size: 15px!important;/*字体大小*/
    border: 1px solid #ddd;/*边框粗细、线型、颜色*/
    padding:7px 10px;/*文字与边框的上下、左右间距*/
    margin: 0 5px 10px 0;/*标签的上、右、下、左侧的外边距*/
    display: inline-block;/*标签设为了行内的块元素*/
}

.tagcloud a:hover{
    background-color: #000;/*鼠标悬浮于标签时的背景色*/
    color:#fff;/*鼠标悬浮于标签时的文字颜色*/
}

推薦查看Elementor架設企業網站教學

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我