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-box-wrapper |
圖標 | .elementor-icon |
內容容器 | .elementor-icon-box-content |
內容標題 | .elementor-icon-box-title |
內容描述 | .elementor-icon-box-description |
圖標列表
列表圖標 | .elementor-icon-list-icon |
列表文本 | .elementor-icon-list-text |
圖片
圖像框
圖片 | .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-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 小部件選擇器列表,這樣您就不必自己檢查每個小部件。