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