专注于外贸建站,分享WordPress建站和Elementor教程

如何用Elementor Pro设计WooCommerce产品分类和产品标签侧边栏的样式

更新日期:2021-04-13

WooCommerce产品分类和产品标签侧边栏的样式是跟随主题设计的,通常没有设计样式功能。如下图所示,它是我用Hello Elementor主题+ Elementor Pro制作的产品列表模板,在左侧的侧边栏里包含了产品分类和产品标签。接下来,我们就讲如何用Elementor Pro来将样式设置为下图所示的模样。

image 1 - 如何用Elementor Pro设计WooCommerce产品分类和产品标签侧边栏的样式

首先,我们用视频讲解如何设计产品分类的样式

然后,针对产品分类的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:

教程 分类

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关 教程

我自用的 建站资源

当你点击本站的链接购买它们,我会得到一些佣金,谢谢你们对我这位自由职业娃妈的支持,比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

siteground logo
SiteGround

购买外贸建站主机,它是80%读者的选择
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器,我的网站就是用它建的
了解详情→

Hi~当你点击本站中的主机、主题、插件的链接前往购买后,我将获取一些佣金,这是我撰写建站教程的主要收入~希望也能得到你的支持,比心( •̀ ω •́ )y

Copyright © LOYSEO.COM — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程

LOYSEO

反馈

如果你有喜欢的外贸网站、页面、功能或期望的教程,可以在下方提交给我,我会筛选制作并公开

微信扫一扫