조만간 모든 Elementor 빌드가 패널 컨트롤이 올라갈 수 없는 벽에 부딪힙니다: 스타일 탭이 제공하지 않는 호버 효과 또는 튜토리얼에서 찾은 키프레임 애니메이션 Elementor 는 Pro 라이선스 뒤에 요소별 사용자 정의 CSS 를 유지합니다. The 사용자 정의 CSS 확장 Elementor용 마스터 애드온 해당 벽을 제거합니다: 무료 편집기의 모든 섹션, 컨테이너, 열 및 위젯에 CSS 편집기가 있습니다.
여기 편집기에 있습니다. CSS 는 상자에 착륙하고,평가 카드는 캔버스를 가로 질러 같은 초를 미끄러지기 시작합니다:
사용자 지정 CSS 확장자가 수행하는 작업 #
활성화되면 Elementor 편집기의 모든 요소는 다음을 얻습니다 사용자 정의 CSS 그 아래의 섹션 고급 탭. 안쪽에는 구문 강조와 줄 번호가 있는 코드 편집기가 있습니다. 거기에 쓰는 내용은 해당 요소에만 적용되며 캔버스는 이를 실시간으로 미리 보기 때문에 입력할 때 규칙이 적용되는 것을 볼 수 있습니다.
편집기는 다음을 지원합니다 선택자 요소 자체의 래퍼를 뜻하는 키워드. 쓰기 selector { } 그리고 규칙은 정확히 이 섹션이나 위젯을 대상으로 하며 Elementor의 생성된 클래스 이름을 검색하지 않습니다. 하위 선택기도 작동합니다: selector .some-class 요소 내부에 도달합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치 및 활성. 무료 버전은 충분하다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- 사용자 정의 CSS는 무료 확장 프로그램이므로 Pro 라이센스가 필요하지 않습니다.
- 일부 CSS. 복사 붙여넣기된 스니펫도 작동합니다. 선택기 키워드가 하드 부분을 제거하기 때문입니다.
사용자 지정 CSS 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 사용자 정의 CSS 는에 앉아 유틸리티 위젯 사용자 정의 JS 옆에 인기 배지가 있는 그룹입니다 게시물/페이지 복제기. 보라색으로 변하도록 토글을 클릭한 다음 누르세요 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
요소에서 사용자 지정 CSS 편집기를 엽니다 #
Elementor 편집기에서 요소를 선택하고 데모에서 전체 컨테이너를 선택한 다음 엽니다 고급 탭. 로 스크롤합니다 사용자 정의 CSS 보라색 MA 배지가 있는 섹션과 확장합니다. 빈 코드 편집기가 나타나고 그 아래에 힌트가 있습니다: “selector” 키워드를 사용하여 래퍼 요소를 타겟팅합니다.
CSS를 쓰거나 붙여넣습니다 #
데모는 하나의 키프레임 애니메이션으로 정적 줄의 평가 카드를 움직이는 천막으로 바꿉니다:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}붙여넣으면 캔버스가 즉시 복종합니다: 카드는 오른쪽에서 왼쪽으로 미끄러지기 시작하고,끝에서 반대로 돌아가고,이 페이지 상단의 GIF 가 보여주는 것과 똑같이 반복됩니다. 먼저 저장하거나 새로 고칠 것이 없습니다. The selector 키워드는 애니메이션을 이 하나의 컨테이너에 고정하므로 페이지의 다른 항목은 건드리지 않습니다.
페이지의 결과 #
히트 출판하다 그리고 프런트 엔드는 동일한 애니메이션을 실행: 평가 행은 뷰 포트를 가로 질러 드리프트, 각 끝에서 방향을 일시 중지, 그리고 자체적으로 사이클링을 유지.
유지할 가치가 있는 습관 하나: CSS 는 전역 스타일시트가 아닌 요소에 살고 있습니다. 섹션을 다른 페이지에 복제하면 애니메이션이 함께 이동합니다.
요소별 사용자 정의 CSS가 도움이 되는 곳 #
- 키프레임 애니메이션. 천막, 맥동 단추, 뜨 기장, 패널 통제가 표현할 수 없는 무엇이든.
- 호버 상태.
selector:hover카드의 리프트, 그림자 및 색상 이동에 대한 규칙입니다. - 스니펫 수정. 레이아웃 버그를 해결하는 하나의 스택 오버플로 답변은 버그가 있는 위치에 정확하게 적용됩니다.
- 반응형 조정. 사이트 전체 스타일시트 편집 대신 한 섹션에 대한 미디어 쿼리입니다.
- 디자인 실험. 규칙을 테마의 CSS로 홍보하기 전에 캔버스에서 라이브로 테스트하십시오.
비디오 자습서 #
확장 기능 활성화부터 게시된 페이지에서 실행되는 애니메이션 카드까지 전체 흐름을 시청하세요.
자주 묻는 질문 #
Pro 없이 Elementor 에서 사용자 지정 CSS 를 추가하려면 어떻게 해야 합니까?
마스터 애드온 확장 탭에서 사용자 지정 CSS 확장을 활성화하고 편집기에서 아무 요소나 선택한 다음 고급 탭에서 사용자 지정 CSS 를 엽니다. 코드 편집기에서 CSS 를 쓰거나 붙여넣으면 Pro 라이센스가 필요 없는 라이브 미리보기로 해당 요소에 적용됩니다.
선택자 키워드는 무엇을 하는가?
편집하는 요소의 래퍼를 의미합니다. selector {color: red; } 와 같은 규칙은 Elementor 의 생성된 클래스 이름을 알지 못한 채 정확히 이 섹션이나 위젯을 대상으로 하며 selector .child 는 그 안에 있는 요소에 도달합니다.
CSS는 전체 사이트에 적용됩니까, 아니면 하나의 요소에만 적용됩니까?
요소만 운반합니다. 각 섹션,열 또는 위젯에는 자체 사용자 정의 CSS 상자가 있으므로 규칙은 범위 지정 상태로 유지됩니다. 요소를 복제하면 CSS 가 함께 복사되므로 페이지 간에 효과를 이식할 수 있습니다.
이 확장자를 사용하여 CSS 애니메이션을 실행할 수 있습니까?
예. 편집기는 @keyframe,미디어 쿼리 및 호버와 같은 의사 클래스를 포함한 전체 CSS 를 허용합니다. 이 페이지의 데모는 게시하기 전에 편집기에서 실시간으로 미리 볼 수있는 평가 행에서 키프레임 천막 애니메이션을 실행합니다.
사용자 정의 CSS 확장은 무료입니까?
예. 사용자 정의 CSS 는 확장 탭의 유틸리티 위젯 그룹에서 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. 가격 페이지에서는 Pro 플랜이 추가하는 내용을 다룹니다.
감싸는 #
사용자 정의 CSS 확장은 무료 Elementor 모든 실제 프로젝트가 결국 필요로 하는 탈출 해치를 제공 합니다: 라이브 미리 보기와 함께 모든 요소에 범위 CSS 편집기 및 클래스 이름 고고학을 살려주는 선택기 키워드와 쌍을 이룹니다 애니메이션 그라데이션 배경 확장 (Pro) 키프레임을 전혀 쓰지 않고 모션을 수행하고 전체 세트를 탐색합니다 마스터 애드온 위젯 및 확장 나머지 도구 상자용.
