您想找到小部件选择器吗 Elementor ?

可用的功能之一 Elementor临 是添加自定义 CSS 的能力。 此功能允许您超越,因为当您想要的样式在设置选项列表中不可用时,您可以应用任何样式。

通过自定义 CSS 将自定义样式添加到某个小部件 Elementor,您需要知道关联小部件的选择器。 我们收集了小部件选择器的列表 Elementor 让您的工作更轻松。

每个 Elementor 小部件及其元素都有一个 CSS 选择器,当您想要添加自定义 CSS 以实现特定样式时,您可以使用它来定位关联的小部件。 您可以通过检查要添加自定义 CSS 的小部件来找到选择器。

由于检查小部件只能在实时页面上完成,因此检查每个小部件需要很长时间。 这就是导致我们创建此列表的原因。

如何使用选择器

假设您想在按钮上的图标和文本之间应用不同的大小。 由于默认设置选项不允许您在按钮图标和文本之间设置不同的大小,因此您可以通过自定义 CSS 来实现。 您可以定位图标或文本以应用自定义 CSS。

首先,选择您要定位的元素的选择器(例如,按钮图标)。 在元素设置面板中,转到选项卡 先进 并打开块 自定义CSS.

Elementor 小部件选择器

进入 selector [selector name] {} 在自定义 CSS 字段中。

这是示例。

Elementor 小部件选择器

然后添加你的 内容 CSS(声明)位于大括号内。

这是示例。

Elementor 小部件选择器

雷马克: 每个 Elementor 小部件都有一个父元素( wrapper )。 进入 selector {} (没有选择器名称)表示以包装器为目标。

Elementor 小部件选择器列表

手风琴

小部件.elementor-手风琴
手风琴标题.elementor-手风琴-标题
手风琴描述.elementor-tab-内容
手风琴图标打开.elementor-手风琴图标
手风琴图标已关闭.elementor-手风琴-图标-关闭

警惕

小部件.elementor-警报
警报标题.elementor-警报标题
警报说明.elementor-警报-描述
关闭图标.elementor-警报-解除

动画标题

小部件.elementor-标题
静态文本.elementor-headline-纯文本
动态文字.elementor-headline-dynamic-wrapper

存档描述

存档文本.elementor-标题标题

存档帖子

小部件.elementor-widget-容器
发布项目.elementor-网格项目
特色图片.elementor-post__thumbnail
卡片皮肤上的徽章.elementor-post__badge
卡片皮肤上的头像头像头像
文本内容区.elementor-post__text
主题.elementor-post__title
帖子摘录.elementor-post__摘录
了解更多.elementor-post__阅读更多
发布元区域.elementor-post__元数据
发布日期.elementor-后日期
作者.elementor-post-author
发布时间.elementor-post-time
发表评论.elementor-后头像
分页.elementor-分页
上一个标签.页码.prev
下一个标签.页码.next
页码.页码
活动分页数.page-numbers.current
加载更多按钮.elementor-button-链接
加载更多按钮图标.elementor 按钮图标

作者箱

小部件.elementor-作者框
头像.elementor-author-box__avatar
作者名称.elementor-author-box__name
作者介绍.elementor-author-box__bio
存档按钮.elementor-author-box__button
小部件.elementor-图片库
画廊项目.图库项目
标题.wp-标题文本

大段引用

小部件.elementor-blockquote
块引用内容.elementor-blockquote__content
块引用作者.elementor-blockquote__author
推文图标.elementor-blockquote__tweet-按钮
推文标签.elementor-blockquote__tweet-标签

按键

小部件.elementor-按钮
按钮文本.elementor-按钮-文本
按钮图示.elementor 按钮图标

立即登入

小部件.elementor-cta
标题图像.elementor-cta__bg
彩色带.elementor 色带
功能区文本.elementor-ribbon-inner
内容标题.elementor-cta__title
内容说明.elementor-cta__描述
内容按钮.elementor-cta__button

Countdown

小部件.elementor-倒计时包装
一年中的.elementor-倒计时天
营业时间(阿姆斯特丹时区).elementor-倒计时-小时
分钟.elementor-倒计时分钟
.elementor-倒计时-秒
倒计时标签.elementor-倒计时标签

Counter

小部件.elementor计数器
号码前缀.element-counter-number-prefix
联系电话.element-counter-number
数字后缀.element-counter-number-suffix
标题.elementor-反标题

分频器

小部件.elementor-divider
分隔器.elementor-divider-separator .elementor-divider-separator
文本/图标元素.elementor-divider__element

翻转框

小部件.elementor-翻转框
前集装箱.elementor-flip-box__front
后台容器.elementor-flip-box__back
内容容器.elementor-flip-box__layer__inner
内容标题.elementor-flip-box__layer__title
内容说明.elementor-flip-box__layer__description
内容按钮.elementor-flip-box__button

表单

小部件.elementor-形式
步骤容器.e-form__指标
步数.e-form__indicators__indicator
栏位标签.elementor字段标签
字段文本.elementor-字段-文本
文本字段标签.elementor-字段-类型-文本
文本区域字段标签.elementor-field-type-textarea
电子邮件字段标签.elementor-字段类型-电子邮件
URL 字段标签.elementor-字段-类型-url
电话字段标签.elementor-字段-类型-电话
无线电字段标签.elementor-field-type-radio
选择字段标签.elementor-字段类型-选择
复选框字段标签.elementor-字段-类型-复选框
现场标签验收.elementor-字段-类型-接受
日期字段标签.elementor-字段-类型-日期
时间字段标签.elementor-字段-类型-时间
数字字段标签.element-field-type-number
文件上传字段标签.elementor-字段-类型-上传
下一个按钮电子表格__buttons__wrapper__button-next
上一个按钮.e-form__buttons__wrapper__button-previous
提交按钮.elementor-按钮
画廊标题(用于多个画廊).elementor-画廊-标题
画廊项目.elementor画廊项目
说明(在叠加层上).elementor-gallery-item__description

标题

小部件.elementor-标题标题

图标

小部件.elementor-图标

图标框

小部件.elementor-icon-box-wrapper
图标.elementor-图标
内容容器.elementor-图标-框-内容
内容标题.elementor-图标-框-标题
内容说明.elementor-图标-框-描述

图标列表

列表图标.elementor-图标-列表-图标
列表文本.elementor-图标-列表-文本

图片

图片IMG
标题.wp-标题文本

图像框

图片.elementor-image-box-img
文本容器.elementor-image-box-内容
内容标题.elementor-image-box-标题
内容说明元素图像框描述
图像容器.swiper-幻灯片
图片项.swiper-幻灯片图像
分页容器.swiper-分页
点分页.swiper-分页-项目符号
上一个图标.elementor-swiper-button-prev
下一页.elementor-swiper-button-next
图片说明.elementor-图像-轮播-标题
媒体项.elementor-轮播图片
媒体项目叠加.elementor-carousel-图像覆盖
点分页.swiper 分页分数
上一个按钮.eicon-人字形左
下一个按钮.eicon-人字形右
分数分页.swiper 分页分数
进度条分页.swiper-分页-进度条
进度条分页填充.swiper-分页-进度条-填充
移动菜单切换.elementor-菜单切换
手机菜单图标.eicon-菜单栏
常规菜单.elementor-导航菜单
落下.elementor-nav-menu-下拉菜单
带有子菜单的菜单项.elementor-item.has-子菜单
子菜单项.elementor-子项

贝宝按钮

小部件.elementor-支付按钮
贝宝按钮图标.elementor 按钮图标
贝宝按钮文本.elementor-按钮-文本

文件夹

组合产品.elementor投资组合项目
叠加上的投资组合项目.elementor-portfolio-item__overlay
覆盖标题.elementor-投资组合-item__title
投资组合过滤器.elementor-portfolio__filter

发表评论

回复标题.评论-回复-标题
如何形成区域.评论表格
评论表格.评论-表单-评论
提交按钮.form提交

发布信息

小部件.elementor-post-info
头像.elementor头像
图标列表.elementor-图标-列表-图标
图标文本.elementor-图标-列表-文本

后导航

小部件.elementor-后导航
上一个图标.post-navigation__arrow-prev
上一个标签.post-navigation__prev–标签
上一篇文章标题.post-navigation__prev–标题
下一个图标.post-navigation__arrow-next
下一个标签.post-navigation__next–标签
下一篇文章标题.post-navigation__next–标题

帖子

发布项目.elementor-post
特色图片.elementor-post__thumbnail
卡片皮肤上的徽章.elementor-post__badge
卡片皮肤上的头像头像头像
文本内容区.elementor-post__text
主题.elementor-post__title
帖子摘录.elementor-post__摘录
了解更多.elementor-post__阅读更多
发布元区域.elementor-post__元数据
发布日期.elementor-后日期
作者.elementor-post-author
发布时间.elementor-post-time
发表评论.elementor-后头像
分页.elementor-分页
上一个标签.页码.prev
下一个标签.页码.next
页码.页码
活动分页数.page-numbers.current
加载更多按钮.elementor-button-链接
加载更多按钮图标.elementor 按钮图标

主题

小部件.elementor-标题标题

价格表

小部件.elementor-价格表
项目清单.elementor-价格列表项目
列表项图像.elementor-价格表-图片
列表项文本.elementor-价格列表文本
列表项标题.elementor-价格列表标题
列表项标题.elementor-价格表-标题
列表项分隔符.elementor-价格列表分隔符
清单项目价格.elementor-价格列表价格
列表项 描述.elementor-价格表-描述

价格表

小部件.elementor-价格表
表头.elementor-价格表__header
表头标题.elementor-价格表__heading
表头说明.elementor-价格表__subheading
价格.elementor-价格表__price
货币.elementor-price-table__currency
价格后数字.elementor-价格表__after-price
定价期.elementor-价格表__period
功能列表区.element-price-table__features-list
功能列表项.elementor-价格表__feature-inner
表页脚.elementor-价格表__footer
表格页脚按钮.elementor-价格表__button
表尾文本.elementor-价格表__additional_info
彩色带.elementor-价格表__ribbon
内丝带.elementor-价格表__ribbon-inner

Progress Bar

Progress Bar.elementor-进度条
进展背景.elementor-进度-包装器
进度标题.elementor-标题
进度内部文本.elementor-progress-文本
进度百分比.elementor-进度百分比

进度追踪器

小部件.elementor-滚动跟踪器
进展.current-progress-百分比

评论

小部件.elementor-swiper
审查项目.swiper-幻灯片
评论标题.elementor-testimonial__header
图像审阅者.elementor-testimonial__image
审稿人姓名.elementor-testimonial__name
审稿人头衔.elementor-testimonial__title
推荐内容.elementor-testimonial__content
见证文字.elementor-testimonial__text
点分页.swiper-分页-项目符号
分数分页.swiper 分页分数
分数分页电流.swiper-分页-当前
分数分页总计.swiper-分页-总计
进度条分页.swiper-分页-进度条
进度条分页填充.swiper-分页-进度条-填充
上一个按钮.eicon-人字形左
下一个按钮.eicon-人字形右

分享按钮

按钮项目.elementor-共享-btn
按钮图示.elementor-share-btn__icon
按钮文本.elementor-share-btn__text

幻灯片

小部件.elementor-幻灯片包装
内容区.swiper-幻灯片内容
内容标题.elementor-幻灯片标题
内容说明.elementor-幻灯片说明
内容按钮.elementor-滑动按钮
点分页.swiper-分页-项目符号
上一个按钮.eicon-人字形左
下一个按钮.eicon-人字形右

社会图标

小部件.elementor-social-icons-wrapper
图标项目.elementor-社交图标

星级

小部件.elementor-star- rating__wrapper
评分标题.elementor-星级-评级__title
星形图标区域.elementor-星级评级
完整的星形图标.elementor-star-full
半满星形图标.elementor-star-5
空星图标.elementor-星-空

目录

小部件.elementor-widget-容器
目录标题.elementor-toc__header
目录标题.elementor-toc__header-标题
展开按钮.elementor-toc__toggle-button–展开
折叠按钮.elementor-toc__toggle-button–展开
目录正文.elementor-toc__body
ToC 列表项.elementor-toc__list-item
目录顶层.elementor-toc__list-item-text.elementor-toc__top-level

标签

小部件.elementor-tabs
标签标题.elementor-tab-标题
标签内容.elementor-tab-内容

评价

小部件.elementor-推荐包装
推荐内容.elementor-推荐内容
见证元.elementor-推荐元
头像推荐.elementor-推荐图像
推荐人姓名和职位.elementor-推荐细节
推荐名称.elementor-推荐名
推荐职位.elementor-推荐工作
小部件.elementor-widget-容器
推荐幻灯片项目.elementor-推荐
推荐内容.elementor-testimonial__content
见证元.elementor-推荐__footer
头像推荐.elementor-testimonial__image
推荐人姓名和职位.elementor-感言__cite
推荐名称.elementor-testimonial__name
推荐职位.elementor-testimonial__title
点分页.swiper-分页-项目符号
分数分页.swiper 分页分数
分数分页电流.swiper-分页-当前
分数分页总计.swiper-分页-总计
进度条分页.swiper-分页-进度条
进度条分页填充.swiper-分页-进度条-填充
上一个按钮.eicon-人字形左
下一个按钮.eicon-人字形右

文本编辑器

小部件.elementor-文本编辑器

切换

小部件.elementor-切换
切换项目.elementor-切换-项目
切换项目标题.elementor-tab-标题
切换项目内容.elementor-tab-内容
切换图标.elementor-切换-图标
切换图标已关闭.elementor-切换-图标-关闭
切换图标打开.elementor-切换-图标-打开

立即获取 Elementor Pro !!!

尽管 Elementor 为每个小部件提供了大量样式选项,但您可以使用自定义 CSS 超越这些样式。 要通过自定义 CSS 将自定义样式应用于小部件(或其元素),您需要知道相关小部件的选择器。

其他 Elementor 资源:

您可以简单地检查实时页面上的小部件以找到其选择器。 为了节省您的时间,我们创建了 Elementor 的小部件选择器列表,因此您不必自己检查每个小部件。

结论

所以! 我们刚刚向您介绍了 Elementor 小部件选择器列表。 如果您对如何到达那里有任何疑虑,请告知我们 评论.

但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

但与此同时, 在您不同的社交网络上分享此文章.

...