Elementor 小部件选择器列表

已发表: 2022-10-24

Elementor Pro 上可用的功能之一是能够添加自定义 CSS(阅读: Elementor Free vs Pro)。 该功能允许您超越,因为当您想要的样式在设置选项列表中不可用时,您可以应用任何样式。 要通过自定义 CSS 将自定义样式添加到某个 Elementor 小部件(或小部件的元素),您需要知道关联小部件的选择器。 我们收集了 Elementor 小部件选择器列表以简化您的工作。

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

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

如何使用选择器

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

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

在自定义 CSS 字段中输入selector [selector name] {} 。 这是示例。

接下来,在大括号内添加您的 CSS 内容(声明)。 这是示例。

Elementor 小部件选择器列表

  • 手风琴
  • 警报
  • 动画标题
  • 存档说明
  • 存档帖子
  • 作者框
  • 基本画廊
  • 块引用
  • 按钮
  • 呼吁采取行动
  • 倒数
  • 柜台
  • 分频器
  • 翻盖盒
  • 形式
  • 画廊
  • 标题
  • 图标
  • 图标框
  • 图片
  • 图像框
  • 图像轮播
  • 媒体轮播
  • 导航菜单
  • 贝宝按钮
  • 文件夹
  • 发表评论
  • 发布信息
  • 发布导航
  • 帖子
  • 帖子标题
  • 价位表
  • 价格表
  • 进度条
  • 进度跟踪器
  • 评论
  • 分享按钮
  • 幻灯片
  • 社会图标
  • 星级
  • 目录
  • 标签
  • 见证
  • 推荐旋转木马
  • 文本编辑器
  • 切换

手风琴

小部件.elementor-手风琴
手风琴标题.elementor-手风琴-标题
手风琴描述.elementor-tab-content
手风琴图标打开.elementor-手风琴图标
手风琴图标已关闭.elementor-accordion-icon-closed

警报

小部件.elementor-alert
警报标题.elementor-alert-title
警报说明.elementor-alert-description
关闭图标.elementor-alert-dismiss

动画标题

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

存档说明

存档文本.elementor-heading-title

存档帖子

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

作者框

小部件.elementor-作者框
阿凡达.elementor-author-box__avatar
作者姓名.elementor-author-box__name
作者简介.elementor-author-box__bio
存档按钮.elementor-author-box__button

基本画廊

小部件.elementor-image-gallery
图库项目.gallery-item
标题.wp 标题文本

块引用

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

按钮

小部件.elementor-button
按钮文本.elementor-button-text
按钮图标.elementor-button-icon

呼吁采取行动

小部件.elementor-cta
标题图片.elementor-cta__bg
丝带.elementor-ribbon
功能区文本.elementor-ribbon-inner
内容标题.elementor-cta__title
内容描述.elementor-cta__description
内容按钮.elementor-cta__button

倒数

小部件.elementor-countdown-wrapper
.elementor-countdown-days
小时.elementor-倒计时-小时
分钟.elementor-倒计时分钟
.elementor-倒计时-秒
倒计时标签.elementor-倒计时标签

柜台

小部件.elementor-counter
号码前缀.elementor-counter-number-prefix
数字.elementor-counter-number
数字后缀.elementor-counter-number-suffix
标题.elementor-counter-title

分频器

小部件.elementor-divider
分隔器.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-form
步骤容器.e-form__indicators
步数.e-form__indicators__indicator
字段标签.elementor-field-label
字段文本.elementor-field-textual
文本字段标签.elementor-field-type-text
文本区域字段标签.elementor-field-type-textarea
电子邮件字段标签.elementor-field-type-email
URL 字段标签.elementor-field-type-url
电话字段标签.elementor-field-type-tel
无线电字段标签.elementor-field-type-radio
选择字段标签.elementor-field-type-select
复选框字段标签.elementor-field-type-checkbox
验收字段标签.elementor-field-type-acceptance
日期字段标签.elementor-field-type-date
时间字段标签.elementor-field-type-time
数字字段标签.elementor-field-type-number
文件上传字段标签.elementor-field-type-upload
下一个按钮电子表格__buttons__wrapper__button-next
上一个按钮.e-form__buttons__wrapper__button-previous
提交按钮.elementor-button

画廊

画廊标题(用于多个画廊) .elementor-画廊-标题
图库项目.elementor-画廊-项目
说明(在叠加层上) .elementor-gallery-item__description

标题

小部件.elementor-heading-title

图标

小部件.elementor-icon

图标框

小部件.elementor-icon-box-wrapper
图标.elementor-icon
内容容器.elementor-icon-box-content
内容标题.elementor-icon-box-title
内容描述.elementor-icon-box-description

图标列表

列表图标.elementor-icon-list-icon
列表文本.elementor-icon-list-text

图片

图片图像
标题.wp 标题文本

图像框

图片.elementor-image-box-img
文本内容容器.elementor-image-box-content
内容标题.elementor-image-box-title
内容描述元素图像框描述

图像轮播

图像容器.swiper-slide
图片项目.swiper-slide-image
分页容器.swiper-分页
分页点.swiper-pagination-bullet
上一个图标.elementor-swiper-button-prev
下一个.elementor-swiper-button-next
图片说明.elementor-image-carousel-caption

媒体轮播

媒体项目.elementor-carousel-image
媒体项目叠加.elementor-carousel-image-overlay
点分页.swiper 分页分数
上一个按钮.eicon-chevron-left
下一个按钮.eicon-chevron-right
分数分页.swiper 分页分数
进度条分页.swiper-分页-进度条
进度条分页填充.swiper-分页-进度条-填充

导航菜单

移动菜单切换.elementor-menu-toggle
移动菜单图标.eicon-菜单栏
常规菜单.elementor-导航菜单
落下.elementor-nav-menu-下拉菜单
带有子菜单的菜单项.elementor-item.has-子菜单
子菜单项.elementor-子项

贝宝按钮

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

文件夹

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

发表评论

回复标题.comment-reply-title
评论表格区.comment-form
意见表.comment-form-comment
提交按钮.form-提交

发布信息

小部件.elementor-post-info
阿凡达图像
图标列表.elementor-icon-list-icon
图标文本.elementor-icon-list-text

发布导航

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

帖子

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

帖子标题

小部件.elementor-heading-title

价位表

小部件.elementor-价格表
项目清单.elementor-price-list-item
列表项图像.elementor-price-list-image
列表项文本.elementor-price-list-text
列表项标题.elementor-price-list-header
列表项标题.elementor-price-list-title
列表项分隔符.elementor-price-list-separator
清单项目价格.elementor-price-list-price
列表项 描述.elementor-price-list-description

价格表

小部件.elementor-价格表
表头.elementor-price-table__header
表头标题.elementor-price-table__heading
表头说明.elementor-price-table__subheading
价格.elementor-price-table__price
货币.elementor-price-table__currency
价格后数字.elementor-price-table__after-price
定价期.elementor-price-table__period
功能列表区.elementor-price-table__features-list
功能列表项.elementor-price-table__feature-inner
表格页脚.elementor-price-table__footer
表格页脚按钮.elementor-price-table__button
表尾文本.elementor-price-table__additional_info
丝带.elementor-price-table__ribbon
内丝带.elementor-price-table__ribbon-inner

进度条

进度条.elementor-进度条
进展背景.elementor-progress-wrapper
进度标题.elementor-title
进度内部文本.elementor-progress-text
进度百分比.elementor-progress-percentage

进度跟踪器

小部件.elementor-scrolling-tracker
进步.current-progress-percentage

评论

小部件.elementor-swiper
审查项目.swiper-slide
审查标题.elementor-testimonial__header
审稿人图片.elementor-testimonial__image
审稿人姓名.elementor-testimonial__name
审稿人头衔.elementor-testimonial__title
推荐内容.elementor-testimonial__content
见证文字.elementor-testimonial__text
点分页.swiper-pagination-bullet
分数分页.swiper 分页分数
分数分页电流.swiper-分页-当前
分数分页总计.swiper-pagination-total
进度条分页.swiper-分页-进度条
进度条分页填充.swiper-分页-进度条-填充
上一个按钮.eicon-chevron-left
下一个按钮.eicon-chevron-right

分享按钮

按钮项目.elementor-share-btn
按钮图标.elementor-share-btn__icon
按钮文本.elementor-share-btn__text

幻灯片

小部件.elementor-slides-wrapper
内容区.swiper-幻灯片内容
内容标题.elementor-slide-heading
内容描述.elementor-slide-description
内容按钮.elementor-滑动按钮
点分页.swiper-pagination-bullet
上一个按钮.eicon-chevron-left
下一个按钮.eicon-chevron-right

社会图标

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

星级

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

目录

小部件.elementor-widget-container
目录标题.elementor-toc__header
目录标题.elementor-toc__header-title
展开按钮.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-title
标签内容.elementor-tab-content

见证

小部件.elementor-testimonial-wrapper
推荐内容.elementor-testimonial-content
见证元.elementor-testimonial-meta
推荐头像.elementor-testimonial-image
推荐人姓名和职位.elementor-testimonial-details
推荐名称.elementor-testimonial-name
推荐职位.elementor-testimonial-job

推荐旋转木马

小部件.elementor-widget-container
推荐幻灯片项目.elementor-testimonial
推荐内容.elementor-testimonial__content
见证元.elementor-testimonial__footer
推荐头像.elementor-testimonial__image
推荐人姓名和职位.elementor-testimonial__cite
推荐名称.elementor-testimonial__name
推荐职位.elementor-testimonial__title
点分页.swiper-pagination-bullet
分数分页.swiper 分页分数
分数分页电流.swiper-分页-当前
分数分页总计.swiper-pagination-total
进度条分页.swiper-分页-进度条
进度条分页填充.swiper-分页-进度条-填充
上一个按钮.eicon-chevron-left
下一个按钮.eicon-chevron-right

文本编辑器

小部件.elementor-文本编辑器

切换

小部件.elementor-toggle
切换项目.elementor-toggle-item
切换项目标题.elementor-tab-title
切换项目内容.elementor-tab-content
切换图标.elementor-toggle-icon
切换图标已关闭.elementor-toggle-icon-closed
切换图标打开.elementor-toggle-icon-opened

底线

虽然 Elementor 为每个小部件提供了大量样式选项,但您可以使用自定义 CSS 超越。 要通过自定义 CSS 将自定义样式应用于小部件(或其元素),您需要知道关联小部件的选择器。 您可以简单地检查实时页面上的小部件以找出其选择器。 为了节省您的时间,我们创建了 Elementor 小部件选择器列表,这样您就不必自己检查每个小部件。

下载 Elementor Pro