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

Elementor主题样式设置详解

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

正版分销:

90元/1个站点/2年

最先进的WordPress页面编辑器,能够快速创建高端的、完美的网站。适合任何主题,任何页面,任何设计。
加入读者学习群
我用的页面编辑器
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我

Elementor的theme style主题样式可设置各种元素的默认样式,例如背景,标题,按钮,图像和表单字段。这些设置将覆盖主题自带的样式设置,从而使您可以使用Elementor为非Elementor构建的元素设置样式。

默认情况下,这里的样式只会应用于非Elementor元素, 例如WooCommerce结帐字段,Contact Form 7标签等等。你也可以强制将主题样式设置应用于Elementor内置的元素,只需要禁用Elementor的默认颜色和字体(下文将介绍方法)。

譬如我用的主题是免费的Hello elementor(没错,是Elementor插件的官方主题),这样我就能省下主题的钱了,然而这个主题没有提供主题样式设置功能,但直接用本文中讲解的Elementor插件的主题样式功能就可以了。

下图就展示了主题样式功能的实际效果,该一处,处处改,很是方便;同时,如果你对元素的样式做了自定义,而不是默认的default,那就不会取用全局的主题样式。

elementor-theme-style

如何禁用默认字体和默认颜色

  1. 进入 Elementor > 设置 >  一般 页面中 
  2. 勾选两个禁用默认字体,点击保存即可
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 35
elementor style setting

功能入口:在用Elementor编辑页面时,点击左上角的elementor style setting 2按钮即可进入下图中的全局样式与设置面板,再点击下图中的“主题样式”,它提供了背景、排版、按钮、表单、图像和自定义CSS的设置,注意,设置任一样式时,当?为蓝色时,说明当前有自定义的样式,若想恢复默认,点击旁白你的刷新?按钮。接下来将逐一讲解

背景

elementor theme style tutorial
  • 背景类型,为页面设置背景提供了两种背景类型
    • 颜色+图像
    • 渐变色

排版

elementor theme style tutorial

排版是服务于文字内容的,用于设置网站中各类文本内容的颜色、字体、字号、行距等等,具体如下:

  • Body:
    • 文本颜色:用于设置所有文本的默认颜色
    • 排版:用于设置所有文本的默认字体、样式等等,详见这篇文章
    • 段落间距:用于设置段与段之间的距离
  • 链接:
    • 标准和悬停:标准是指默认用户会看到的样子;而悬停是鼠标悬停于链接上时的样子
    • 颜色和排版的功能同上
  • H1-H6:你可以将它理解为内容的标题、子标题,一个页面只要有一个H1,作为最大的标题,而H2-H6都是字标题,用来体现内容的逻辑层级
    • 颜色和排版的功能同上

按钮

elementor theme style tutorial
  • 排版:用于设置按钮上的文字的排版
  • 文本阴影:用于设置按钮上的文字的阴影效果
  • 标准和悬停,标准是指默认用户会看到的样子;而悬停是鼠标悬停于链接上时的样子;针对标题和悬停都可以设置如下选项
  • 文本颜色
  • 背景颜色:指按钮的颜色
  • 盒子影子:指按钮的影子
  • 边框类型:用于设置按钮的边框,譬如实现、虚线等等
  • 宽度:用于设置按钮边框的粗细,并且可以实现不同设备上不同粗细,点击宽度旁边的电脑图标就可以切换设备进行设置
  • 颜色:用于设置边框的颜色
  • 边框半径:用于设置按钮的四个角,调整半径数值,可以设置为圆角的、圆弧等等各种自定义效果
  • 内距:用来设置文本和按钮边框之间的距离,一般用它来调整按钮的大小

表单字段

elementor theme style tutorial

用于设计联系表单等填表类元素的样式

  • 标签:是指表格中每个输入项上方或左方的文本,譬如Name、Email等等
  • 字段:是指每个输入项,譬如输入框
    • 标准和focus:标准就是什么都不干时看到的样子;focus就是焦点的意思,是指鼠标点选输入框时的样子,对这两种状态都可以设置文本颜色、背景颜色、盒子影子、边框类型、边框宽度、边框颜色、边框半径、内距,跟上方按钮的设置功能一样,此处不做赘述。

图像

elementor theme style tutorial

用于设置图像的默认效果,譬如本站就在图片周围加了宽度为4px,颜色是灰色的边框,这样在长文里看起来就有了区隔和一致性,对图像同样有标准和悬停的设置,也同样是边框类型、边框宽度等设置,跟上方按钮的设置功能也一样,此处不赘述。

不同的是,有个CSS过滤器功能,可以给图片设置模糊度,亮度,对比度和饱和度,不过通常我们也用不上它。

custom css自定义css

用于给页面添加自定义CSS,需要CSS知识,大部分情况我们都不需要用到它。

本教程到此结束,下面是与样式有关的其他文章,也许你也正好需要哦~

点赞

0 / 5 5

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邮箱,注册易通过
遇到问题,联系我