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-accordion-title 아코디언 설명 .elementor-tab-content 아코디언 아이콘 열기 .elementor-accordion-icon 아코디언 아이콘 닫힘 .elementor-accordion-icon-closed
알리다 위젯 .요소 경고 경고 제목 .elementor-alert-title 경고 설명 .elementor-alert-description 닫기 아이콘 .elementor-alert-dismiss
애니메이션 헤드라인 위젯 .elementor-headline 정적 텍스트 .elementor-headline-plain-text 동적 텍스트 .elementor-headline-dynamic-wrapper
아카이브 설명 아카이브 텍스트 .elementor-heading-title
아카이브 게시물 위젯 .elementor-widget-container 게시물 항목 .elementor-grid-item 나타난 그림 .elementor-post__썸네일 카드 스킨에 배지 .elementor-post__배지 카드 스킨의 아바타 img.avatar 텍스트 콘텐츠 영역 .elementor-post__text 게시물 제목 .elementor-post__title 포스트 발췌 .elementor-post__excerpt 더 읽어보기 .elementor-post__read-more 포스트 메타 영역 .elementor-post__메타 데이터 게시일 .elementor-post-date 게시물 작성자 .elementor-post-author 게시 시간 .elementor-포스트 시간 댓글 달기 .elementor-post-avatar 쪽수 매기기 .elementor-페이지 매김 이전 레이블 .page-numbers.prev 다음 레이블 .페이지 번호.다음 페이지 매김 번호 .페이지 번호 활성 페이지 번호 .페이지 번호.현재 더 로드 버튼 .elementor 버튼 링크 더 로드 버튼 아이콘 .elementor-버튼-아이콘
저자 상자 위젯 .elementor-author-box 화신 .elementor-author-box__avatar 저자 이름 .elementor-author-box__name 저자 약력 .elementor-author-box__bio 아카이브 버튼 .elementor-author-box__버튼
기본 갤러리 위젯 .elementor 이미지 갤러리 갤러리 항목 .갤러리 항목 표제 .wp-캡션-텍스트
인용구 위젯 .elementor-blockquote 인용문 내용 .elementor-blockquote__content 인용구 작성자 .elementor-blockquote__author 트윗 아이콘 .elementor-blockquote__tweet-button 트윗 레이블 .elementor-blockquote__tweet-label
단추 위젯 .요소 버튼 버튼 텍스트 .elementor 버튼 텍스트 버튼 아이콘 .elementor-버튼-아이콘
행동을 요구하다 위젯 .elementor-cta 헤더 이미지 .elementor-cta__bg 리본 .elementor-리본 리본 텍스트 .elementor-ribbon-inner 콘텐츠 제목 .elementor-cta__title 내용 설명 .elementor-cta__description 콘텐츠 버튼 .elementor-cta__버튼
카운트다운 위젯 .elementor-countdown-wrapper 날 .elementor-countdown-일 시간 .elementor-countdown-hours 분 .elementor-countdown-분 초 .elementor-countdown-seconds 카운트다운 레이블 .elementor-countdown-label
카운터 위젯 .요소 카운터 숫자 접두사 .elementor-counter-number-접두사 숫자 .요소 카운터 번호 숫자 접미사 .elementor-counter-number-접미사 제목 .elementor-counter-title
분할기 위젯 .요소 분배기 분리 기호 .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__설명 콘텐츠 버튼 .elementor-flip-box__button
형태 위젯 .요소 형식 단계 컨테이너 .e-form__지표 단계 번호 .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 다음 버튼 전자 양식__버튼__래퍼__버튼-다음 이전 버튼 .e-form__buttons__wrapper__button-이전 제출 버튼 .요소 버튼
갤러리 갤러리 제목(여러 갤러리의 경우) .elementor-갤러리-제목 갤러리 항목 .elementor-gallery-item 설명(오버레이에서) .elementor-gallery-item__description
표제 위젯 .elementor-heading-title
상 아이콘 상자 위젯 .elementor-icon-box-wrapper 상 .elementor-아이콘 콘텐츠 컨테이너 .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-슬라이드-이미지 페이지 매김 컨테이너 .swiper-페이지 매김 페이지 매김 점 .swiper-페이지 매김-글머리 기호 이전 아이콘 .elementor-swiper-button-prev 다음 .elementor-swiper-button-next 이미지 캡션 .elementor-image-carousel-caption
미디어 캐러셀 미디어 항목 .elementor-carousel-image 미디어 항목 오버레이 .elementor-carousel-image-overlay 점 페이지 매김 .swiper-pagination-fraction 이전 버튼 .eicon-chevron-left 다음 버튼 .eicon-chevron-right 분수 페이지 매김 .swiper-pagination-fraction 진행률 표시줄 페이지 매김 .swiper-pagination-progressbar 진행률 표시줄 페이지 매김 채우기 .swiper-pagination-progressbar-fill
탐색 메뉴 모바일 메뉴 토글 .elementor-menu-toggle 모바일 메뉴 아이콘 .eicon 메뉴바 일반 메뉴 .elementor 탐색 메뉴 쓰러지 다 .elementor-nav-menu-dropdown 하위 메뉴가 있는 메뉴 항목 .elementor-item.has-submenu 하위 메뉴 항목 .elementor-하위 항목
페이팔 버튼 위젯 .elementor 지불 버튼 페이팔 버튼 아이콘 .elementor-버튼-아이콘 PayPal 버튼 텍스트 .elementor 버튼 텍스트
포트폴리오 포트폴리오 항목 .elementor-portfolio-item 오버레이의 포트폴리오 항목 .elementor-portfolio-item__overlay 오버레이 제목 .elementor-portfolio-item__title 포트폴리오 필터 .elementor-portfolio__filter
댓글 게시 답글 제목 .comment-reply-title 의견 양식 영역 .comment-form 의견 양식 .comment-form-comment 제출 버튼 .양식 제출
게시물 정보 위젯 .elementor-post-info 화신 이미지 아이콘 목록 .elementor-icon-list-icon 아이콘 텍스트 .elementor-icon-list-text
게시물 탐색 위젯 .elementor-post-네비게이션 이전 아이콘 .post-navigation__arrow-prev 이전 레이블 .post-navigation__prev–label 이전 게시물 제목 .post-navigation__prev–title 다음 아이콘 .post-navigation__arrow-next 다음 레이블 .post-navigation__next–레이블 다음 게시물 제목 .post-navigation__next–title
게시물 게시물 항목 .elementor-포스트 나타난 그림 .elementor-post__썸네일 카드 스킨에 배지 .elementor-post__배지 카드 스킨의 아바타 img.avatar 텍스트 콘텐츠 영역 .elementor-post__text 게시물 제목 .elementor-post__title 포스트 발췌 .elementor-post__excerpt 더 읽어보기 .elementor-post__read-more 포스트 메타 영역 .elementor-post__메타 데이터 게시일 .elementor-post-date 게시물 작성자 .elementor-post-author 게시 시간 .elementor-포스트 시간 댓글 달기 .elementor-post-avatar 쪽수 매기기 .elementor-페이지 매김 이전 레이블 .page-numbers.prev 다음 레이블 .페이지 번호.다음 페이지 매김 번호 .페이지 번호 활성 페이지 번호 .페이지 번호.현재 더 로드 버튼 .elementor 버튼 링크 더 로드 버튼 아이콘 .elementor-버튼-아이콘
게시물 제목 위젯 .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-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-스크롤링-트래커 진전 .현재 진행률
리뷰 위젯 .elementor-swiper 검토 항목 .스와이퍼 슬라이드 검토 헤더 .elementor-testimonial__header 리뷰어 이미지 .elementor-testimonial__image 검토자 이름 .elementor-testimonial__name 리뷰어 제목 .elementor-testimonial__title 추천 콘텐츠 .elementor-testimonial__content 평가 텍스트 .elementor-testimonial__text 점 페이지 매김 .swiper-페이지 매김-글머리 기호 분수 페이지 매김 .swiper-pagination-fraction 분수 페이지 매김 현재 .swiper-pagination-current 분수 페이지 매김 합계 .swiper-pagination-total 진행률 표시줄 페이지 매김 .swiper-pagination-progressbar 진행률 표시줄 페이지 매김 채우기 .swiper-pagination-progressbar-fill 이전 버튼 .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-페이지 매김-글머리 기호 이전 버튼 .eicon-chevron-left 다음 버튼 .eicon-chevron-right
소셜 아이콘 위젯 .elementor-social-icons-wrapper 아이콘 아이템 .elementor-소셜-아이콘
별점 매기기 위젯 .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 목차 목록 항목 .elementor-toc__list-item 목차 최상위 수준 .elementor-toc__list-item-text.elementor-toc__top-level
탭 위젯 .요소 탭 탭 제목 .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-페이지 매김-글머리 기호 분수 페이지 매김 .swiper-pagination-fraction 분수 페이지 매김 현재 .swiper-pagination-current 분수 페이지 매김 합계 .swiper-pagination-total 진행률 표시줄 페이지 매김 .swiper-pagination-progressbar 진행률 표시줄 페이지 매김 채우기 .swiper-pagination-progressbar-fill 이전 버튼 .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 위젯 선택기 목록을 만들었습니다.
