Bạn có muốn tìm các công cụ chọn widget không Elementor ?
Một trong những tính năng có sẵn trên Elementor Pro
Để thêm kiểu tùy chỉnh qua CSS tùy chỉnh vào một tiện ích nhất định Elementor , bạn cần biết bộ chọn của tiện ích được liên kết. Chúng tôi đã thu thập danh sách các bộ chọn tiện ích Elementor để làm cho công việc của bạn dễ dàng hơn.
Mỗi tiện ích con Elementor - và các phần tử của nó - có một bộ chọn CSS mà bạn có thể sử dụng để nhắm mục tiêu tiện ích con được liên kết khi bạn muốn thêm CSS tùy chỉnh để đạt được một phong cách nhất định. Bạn có thể tìm thấy bộ chọn bằng cách kiểm tra tiện ích mà bạn muốn thêm CSS tùy chỉnh vào.
Vì việc kiểm tra một tiện ích chỉ có thể được thực hiện trên một trang đang hoạt động, nên sẽ mất nhiều thời gian để kiểm tra từng tiện ích. Đó là lý do khiến chúng tôi tạo ra danh sách này.
Cách sử dụng bộ chọn
Giả sử bạn muốn áp dụng kích thước khác nhau giữa biểu tượng và văn bản trên một nút. Vì tùy chọn cài đặt mặc định không cho phép bạn đặt kích thước khác giữa biểu tượng nút và văn bản nên bạn có thể đạt được điều này thông qua CSS tùy chỉnh. Bạn có thể nhắm mục tiêu biểu tượng hoặc văn bản để áp dụng CSS tùy chỉnh.
Đầu tiên, chọn bộ chọn của phần tử bạn muốn nhắm mục tiêu (ví dụ: biểu tượng nút). Trong bảng cài đặt phần tử, hãy chuyển đến tab tiên tiến và mở khối CSS tùy chỉnh .
Vào selector [selector name] {} trong trường CSS tùy chỉnh.
Đây là ví dụ.
Sau đó, thêm của bạn nội dung CSS (khai báo) bên trong dấu ngoặc nhọn.
Đây là ví dụ.
Remarque: Mọi widget Elementor đều có một phần tử mẹ (wrapper). đi vào selector {} (không có tên bộ chọn) có nghĩa là nhắm mục tiêu trình bao bọc.
Danh sách bộ chọn widget Elementor
Phong cầm
Tiện ích con .elementor-accordion Tiêu đề Accordion .elementor-accordion-title Mô tả Accordion .elementor-tab-nội dung Biểu tượng Accordion Mở .elementor-accordion-icon Biểu tượng Accordion đã đóng .elementor-accordion-icon-close
Cảnh báo
Tiện ích con .elementor-cảnh báo Tiêu đề cảnh báo .elementor-alert-title Mô tả cảnh báo .elementor-alert-mô tả Loại bỏ biểu tượng .elementor-cảnh báo-loại bỏ
Dòng tiêu đề động
Tiện ích con .elementor-tiêu đề Văn bản tĩnh .elementor-headline-pure-text Văn bản động .elementor-headline-dynamic-wrapper
Lưu trữ Mô tả
Lưu trữ Văn bản .elementor-header-title
Lưu trữ bài viết
Tiện ích con .elementor-widget-container Bài đăng .elementor-lưới-item Hình ảnh nổi bật .elementor-post__thumbnail Huy hiệu trên Da thẻ .elementor-post__badge Avatar trên Da Thẻ img.avatar Khu vực nội dung văn bản .elementor-post__text Tiêu đề bài viết .elementor-post__title bài Trích .elementor-post__excerpt Tìm hiểu thêm .elementor-post__đọc-thêm Đăng khu vực Meta .elementor-post__meta-data Ngay gưỉ .elementor-post-date Tác giả bài đăng .elementor-post-tác giả Thời gian đăng .elementor-post-time Gửi cảm nhận .elementor-post-avatar Sự đánh số trang .elementor-phân trang Nhãn trước .page-number.prev nhãn tiếp theo .page-numbers.next Số phân trang .Số trang Số phân trang đang hoạt động .page-number.current Nút tải thêm .elementor-nút-liên kết Biểu tượng nút tải thêm .elementor-nút-icon
Hộp tác giả
Tiện ích con .elementor-tác giả-box hình đại diện .elementor-tác giả-box__avatar tác giả Tên .elementor-tác giả-box__name Tác giả Bio .elementor-tác giả-box__bio Nút lưu trữ .elementor-tác giả-box__button
Thư viện cơ bản
Tiện ích con .elementor-hình ảnh-thư viện Mục Thư viện .gallery-item Chú thích .wp-caption-text
blockquote
Tiện ích con .elementor-blockquote Nội dung Blockquote .elementor-blockquote__content Tác giả Blockquote .elementor-blockquote__author Biểu tượng Tweet .elementor-blockquote__tweet-button Nhãn Tweet .elementor-blockquote__tweet-nhãn
Tiện ích con nút .elementor Nút Text .elementor-nút-văn bản Biểu tượng nút .elementor-nút-icon
Kêu gọi hành động
Tiện ích con .elementor-cta Hình ảnh tiêu đề .elementor-cta__bg dây băng .elementor-ruy băng Văn bản ruy-băng .elementor-ribbon-inside Tiêu đề nội dung .elementor-cta__title Mô tả nội dung .elementor-cta__description Nút nội dung .elementor-cta__button
Đếm ngược
Tiện ích con .elementor-countdown-wrapper Ngày .elementor-đếm ngược-ngày Giờ .elementor-đếm ngược-giờ Phút .elementor-đếm ngược-phút Giây .elementor-countdown-giây Nhãn đếm ngược .elementor-countdown-nhãn
Counter
Tiện ích con .elementor-bộ đếm Tiền tố số tiền tố .element-counter-number- Con số .elementor-counter-số Hậu tố số .element-counter-number-hậu tố Yêu sách .elementor-counter-title
divider
Tiện ích con .elementor-phân chia máy phân ly .elementor-divider-partition Phần tử Văn bản / Biểu tượng .elementor-divider__element
Hộp lật
Tiện ích con .elementor-flip-box Container phía trước .elementor-flip-box__front Hộp chứa sau .elementor-flip-box__back Vùng chứa nội dung .elementor-flip-box__layer__inner Tiêu đề nội dung .elementor-flip-box__layer__title Mô tả nội dung .elementor-flip-box__layer__description Nút nội dung .elementor-flip-box__button
Tiện ích con .elementor-dạng Bước container .e-form__indicators số bước .e-form__indicators__indicator nhãn trường .elementor-field-nhãn Trường văn bản .elementor-field-textual Nhãn trường văn bản .elementor-field-type-text Nhãn trường vùng văn bản .elementor-field-type-textarea Nhãn trường email .elementor-field-type-email Nhãn Trường URL .elementor-field-type-url Nhãn trường điện thoại .elementor-field-type-tel Nhãn trường vô tuyến .elementor-field-type-radio Chọn nhãn trường .elementor-field-type-select Nhãn trường hộp kiểm .elementor-field-type-hộp kiểm Chấp nhận nhãn trường .elementor-field-type-accept Nhãn trường ngày .elementor-field-type-date Nhãn trường thời gian .elementor-field-type-time Nhãn trường số .element-field-type-number Nhãn trường tải tệp lên .elementor-field-type-tải lên Nút tiếp theo e-form__buttons__wrapper__button-tiếp theo Nút trước .e-form__buttons__wrapper__button-previous Gửi nút nút .elementor
Góc ảnh
Tiêu đề thư viện (đối với nhiều thư viện) .elementor-gallery-title Mục Thư viện .elementor-gallery-item Mô tả (trên Lớp phủ) .elementor-gallery-item__description
Nhóm
Tiện ích con .elementor-header-title
Biểu tượng
Tiện ích con .elementor-icon
Biểu tượng Box
Tiện ích con .elementor-icon-box-wrapper Biểu tượng .elementor-icon Vùng chứa nội dung .elementor-icon-box-content Tiêu đề nội dung .elementor-icon-box-title Mô tả nội dung .elementor-icon-box-mô tả
Danh sách biểu tượng
Biểu tượng danh sách .elementor-icon-list-icon Danh sáchVăn bản .elementor-icon-list-text
Hình ảnh
Hình ảnh img Chú thích .wp-caption-text
Hộp hình ảnh
Hình ảnh .elementor-image-box-img Văn bảnContainer .elementor-hình ảnh-hộp-nội dung Tiêu đề nội dung .elementor-image-box-title Mô tả nội dung phần tử-hình ảnh-hộp-mô tả
Hình ảnh Carousel
ImageContainer .swiper-trượt PictureItem .swiper-slide-hình ảnh Vùng chứa phân trang .swiper-phân trang Phân trang bằng dấu chấm .swiper-phân trang-đạn Biểu tượng trước .elementor-swiper-button-prev Sau .elementor-swiper-button-next Hình ảnh Caption .elementor-image-carousel-caption
MediaItem .elementor-carousel-image Lớp phủ mục phương tiện .elementor-carousel-image-overlay Phân trang bằng dấu chấm .swiper-phân trang-phân số Nút trước .eicon-chevron-trái Nút tiếp theo .eicon-chevron-phải Phân trang phân số .swiper-phân trang-phân số Phân trang thanh tiến trình .swiper-pagination-Progressbar Điền phân trang thanh tiến trình .swiper-phân trang-thanh tiến trình-điền
Menu di động chuyển đổi .elementor-menu-toggle Biểu tượng menu di động .eicon-menu-bar Thực đơn thông thường .elementor-nav-menu Thả xuống .elementor-nav-menu – thả xuống Mục menu với Menu phụ .elementor-item.has-menu con Mục menu phụ .elementor-mục con
Tiện ích con .elementor-Payment-button Biểu tượng nút PayPal .elementor-nút-icon Văn bản nút PayPal .elementor-nút-văn bản
danh mục đầu tư
Danh mục đầu tư .elementor-portfolio-item Mục danh mục đầu tư trên Lớp phủ .elementor-portfolio-item__overlay Tiêu đề lớp phủ .elementor-portfolio-item__title Bộ lọc danh mục đầu tư .elementor-portfolio__filter
Tiêu đề trả lời .comment-trả lời-tiêu đề Diện tích hình thức như thế nào .dạng bình luận Dạng bình luận .comment-form-bình luận Gửi nút .form-gửi
Đăng thông tin
Tiện ích con .elementor-post-info hình đại diện .elementor-avatar Danh sách biểu tượng .elementor-icon-list-icon Văn bản Biểu tượng .elementor-icon-list-text
Điều hướng bài
Tiện ích con .elementor-post-navigation Biểu tượng trước .post-navigation__arrow-prev Nhãn trước .post-navigation__prev–nhãn Tiêu đề bài viết trước .post-navigation__prev – title Biểu tượng tiếp theo .post-navigation__arrow-next nhãn tiếp theo .post-navigation__next – label Tiêu đề bài tiếp theo .post-navigation__next – title
bài viết
Bài đăng .elementor-post Hình ảnh nổi bật .elementor-post__thumbnail Huy hiệu trên Da thẻ .elementor-post__badge Avatar trên Da Thẻ img.avatar Khu vực nội dung văn bản .elementor-post__text Tiêu đề bài viết .elementor-post__title bài Trích .elementor-post__excerpt Tìm hiểu thêm .elementor-post__đọc-thêm Đăng khu vực Meta .elementor-post__meta-data Ngay gưỉ .elementor-post-date Tác giả bài đăng .elementor-post-tác giả Thời gian đăng .elementor-post-time Gửi cảm nhận .elementor-post-avatar Sự đánh số trang .elementor-phân trang Nhãn trước .page-number.prev nhãn tiếp theo .page-numbers.next Số phân trang .Số trang Số phân trang đang hoạt động .page-number.current Nút tải thêm .elementor-nút-liên kết Biểu tượng nút tải thêm .elementor-nút-icon
Tiêu đề bài viết
Tiện ích con .elementor-header-title
Giá biểu
Tiện ích con .elementor-price-list Liệt kê Mục .elementor-price-list-item Liệt kê Hình ảnh Mục .elementor-price-list-image Liệt kê Văn bản Mục .elementor-price-list-text Danh sách Tiêu đề Mục .elementor-price-list-header Liệt kê Tiêu đề Mục .elementor-price-list-title Dấu phân tách mục danh sách .elementor-price-list-tách Giá mặt hàng niêm yết .elementor-price-list-price Liệt kê Mô tả mặt hàng .elementor-price-list-mô tả
Bảng giá
Tiện ích con .elementor-giá-bảng Tiêu đề bảng .elementor-price-table__header Tiêu đề đầu bảng .elementor-price-table__heading Tiêu đề bảng Mô tả .elementor-price-table__subheading Giá cả .elementor-price-table__price Tiền tệ .elementor-price-table__currency Số Sau Giá .elementor-price-table__after-price Khoảng thời gian định giá .elementor-giá-bảng__thời gian Khu vực danh sách tính năng .element-price-table__features-list Mục danh sách tính năng .elementor-price-table__feature-inner Bảng chân trang .elementor-price-table__footer Nút chân trang bảng .elementor-price-table__button Văn bản chân trang bảng .elementor-giá-bảng__bổ sung_thông tin dây băng .elementor-price-table__ribbon Ruy băng bên trong .elementor-price-table__ribbon-inner
Thanh tiến trình
Thanh tiến trình .elementor-process-bar Bối cảnh tiến độ .elementor-process-wrapper Tiêu đề Tiến trình .elementor-title Tiến trình Văn bản bên trong .elementor-process-text Phần trăm tiến độ .elementor-tiến độ-phần trăm
Trình theo dõi tiến trình
Tiện ích con .elementor-scrolling-tracker Tiến độ .current-tiến trình-phần trăm
Đánh giá
Tiện ích con .elementor-swiper Xem lại mục .swiper-trượt Đánh giá Tiêu đề .elementor-testimonial__header Người đánh giá hình ảnh .elementor-testimonial__image Tên người đánh giá .elementor-dashmonial__name Tiêu đề người đánh giá .elementor-testimonial__title Nội dung chứng thực .elementor-certificatemonial__content Văn bản chứng thực .elementor-retmonial__text Phân trang bằng dấu chấm .swiper-phân trang-đạn Phân trang phân số .swiper-phân trang-phân số Phân trang hiện tại .swiper-phân trang-hiện tại Tổng số phân trang .swiper-phân trang-tổng Phân trang thanh tiến trình .swiper-pagination-Progressbar Điền phân trang thanh tiến trình .swiper-phân trang-thanh tiến trình-điền Nút trước .eicon-chevron-trái Nút tiếp theo .eicon-chevron-phải
Mục nút .elementor-share-btn Biểu tượng nút .elementor-share-btn__icon Nút Text .elementor-share-btn__text
Slides
Tiện ích con .elementor-slide-wrapper Khu vực nội dung .swiper-slide-nội dung Tiêu đề nội dung .elementor-slide-title Mô tả nội dung .elementor-slide-mô tả Nút nội dung .elementor-nút trượt Phân trang bằng dấu chấm .swiper-phân trang-đạn Nút trước .eicon-chevron-trái Nút tiếp theo .eicon-chevron-phải
Biểu tượng xã hội
Tiện ích con .elementor-social-icon-wrapper Mục biểu tượng .elementor-xã hội-icon
Đánh giá sao
Tiện ích con .elementor-sao xếp hạng__wrapper Tiêu đề Xếp hạng .elementor-sao xếp hạng__title Khu vực biểu tượng ngôi sao .elementor-xếp hạng sao Biểu tượng ngôi sao đầy đủ .elementor-sao-đầy đủ Biểu tượng ngôi sao lấp đầy một nửa .elementor-star-5 Biểu tượng ngôi sao trống .elementor-sao-trống
Mục lục
Tiện ích con .elementor-widget-container Tiêu đề ToC .elementor-toc__header Tiêu đề tiêu đề ToC .elementor-toc__header-title Nút mở rộng .elementor-toc__toggle-button – expand Nút thu gọn .elementor-toc__toggle-button – expand Cơ thể ToC .elementor-toc__body Mục danh sách ToC .elementor-toc__list-item Cấp cao nhất của ToC .elementor-toc__list-item-text.elementor-toc__top-level
Các Nhãn (Tabs)
Tiện ích con .elementor-tab Tiêu đề tab .elementor-tab-title Nội dung tab .elementor-tab-nội dung
Cảm nhận của khách hàng
Tiện ích con .elementor-lời chứng thực-wrapper Nội dung chứng thực .elementor-lời chứng thực-nội dung Meta chứng thực .elementor-lời chứng thực-meta Chứng thực hình đại diện .elementor-lời chứng thực-hình ảnh Tên chứng thực và Chức vụ .elementor-lời chứng thực-chi tiết Tên chứng thực .elementor-lời chứng thực-tên Chứng thực Chức danh Công việc .elementor-lời chứng thực-việc làm
Băng chuyền chứng thực
Tiện ích con .elementor-widget-container Mục trình chiếu chứng thực .elementor-lời chứng thực Nội dung chứng thực .elementor-certificatemonial__content Meta chứng thực .elementor-certificatemonial__footer Chứng thực hình đại diện .elementor-testimonial__image Tên chứng thực và Chức vụ .elementor-testimonial__cite Tên chứng thực .elementor-dashmonial__name Chứng thực Chức danh Công việc .elementor-testimonial__title Phân trang bằng dấu chấm .swiper-phân trang-đạn Phân trang phân số .swiper-phân trang-phân số Phân trang hiện tại .swiper-phân trang-hiện tại Tổng số phân trang .swiper-phân trang-tổng Phân trang thanh tiến trình .swiper-pagination-Progressbar Điền phân trang thanh tiến trình .swiper-phân trang-thanh tiến trình-điền Nút trước .eicon-chevron-trái Nút tiếp theo .eicon-chevron-phải
Trình soạn thảo văn bản
Tiện ích con .elementor-text-editor
Chuyển đổi
Tiện ích con .elementor-toggle Chuyển đổi mục .elementor-toggle-item Chuyển đổi tiêu đề mục .elementor-tab-title Chuyển đổi nội dung mục .elementor-tab-nội dung Biểu tượng chuyển đổi .elementor-toggle-icon Biểu tượng chuyển đổi đã đóng .elementor-toggle-icon-close Chuyển đổi biểu tượng Mở .elementor-toggle-icon-opened
Mặc dù Elementor cung cấp nhiều tùy chọn tạo kiểu cho mỗi tiện ích, nhưng bạn có thể vượt xa điều đó với CSS tùy chỉnh. Để áp dụng kiểu tùy chỉnh cho tiện ích con (hoặc các phần tử của nó) thông qua CSS tùy chỉnh, bạn cần biết bộ chọn của tiện ích con được liên kết.
Các tài nguyên Elementor khác:
Bạn có thể chỉ cần kiểm tra một tiện ích trên trang trực tiếp để tìm bộ chọn của nó. Để tiết kiệm thời gian cho bạn, chúng tôi đã tạo danh sách bộ chọn tiện ích của Elementor để bạn không phải tự mình kiểm tra mọi tiện ích.
Kết luận
Vì thế! Chúng tôi vừa giới thiệu cho bạn danh sách các bộ chọn tiện ích Elementor. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi Tạo blog WordPress Divi: chủ đề WordPress tốt nhất mọi thời đại
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn
...
Tôi thích điều này : như Đang tải ...
các mặt hàng tương tự
