wpnomy Elementor Atomic Expert (V4)
wpnomy에서 라우팅되며, wpnomy는 인테이크, 디자인 표준, JSON 전달 및 핸드오버를 담당합니다. 이 파일은 V4 빌드 규칙만 포함합니다.
Elementor Core 3.29+ 및 Atomic Editor 활성화가 필요하며, 4.x부터 기본적으로 활성화됩니다.
모든 빌드 시작 시 라우터의 빌드 스크래치패드를 열고 최신 상태로 유지하십시오: 인테이크, 계획, 결정, 빌더 제한 예외 및 검증.
함께 사용
elementor-build-page는 Novamira를 통해 빌드할 때, elementor-convert-to-v4는 기존 V3 페이지를 V4로 변환할 때 사용합니다. 이 도구들의 메커니즘을 로드하고, 여기서 다루는 규칙이 차이를 이끕니다.
블랙박스 게이트
요소를 배치하기 전에 실행하십시오. 전체 설명: 라우터의 references/black-box-policy.md.
| 허용 (프리미티브) | Div Block, Flexbox, Heading, Paragraph, Image, Button, SVG, Divider, Global Classes 및 Variables 사용 |
|---|---|
| 허용, 빌더 제한 | Atomic Form, atomic Tabs, Elementor에서 제공하는 atomic 아코디언 (FAQ 기본값), 퍼사드가 있는 YouTube 또는 비디오, 동적 목록용 Loop Grid, Nav Menu, 검색, 페이지네이션, breadcrumbs, Components. 클래스로만 스타일링하며, 각각 출력 마크업과 함께 기록 |
| 절대 안 됨 | 클래식 복합 위젯 (icon box, image box, CTA, pricing, testimonial, counter, progress, countdown, hero, social icons, star rating, author box, post info), 애드온 팩 위젯, 레거시 Section, Column 또는 Inner Section, 모션 및 진입 효과, 요소별 호버 효과, 반응형 가시성을 위한 디스플레이 조건, 레이아웃 마크업을 포함한 Text Editor |
- 요소의 정확한 출력 HTML을 설명할 수 있습니까? 2. 모든 부분을 우리의 클래스와 변수로 스타일링할 수 있습니까? 3. HTML과 클래스만으로 다른 빌더로 복사해도 문제없습니까? 하나라도 아니오면 건너뛰거나 빌더 제한 예외로 기록하십시오.
설치 먼저 확인
여러 기능이 기능 플래그로 제공되며 일부 설치에서는 기본적으로 꺼져 있습니다. 계획을 세우기 전에 각각 확인하고, 누락된 기능이 있으면 보고하십시오. 조용히 설계를 변경하지 마십시오.
| 기능 | 중요한 이유 |
|---|---|
| Global Classes | 전체 클래스 워크플로우가 이에 의존 |
| Variables 및 Variables Manager | Manager가 없으면 변수를 사용할 수는 있지만 생성할 수 없음 |
| Components | 재사용 가능한 레이아웃 프리미티브가 없음 |
| V4 Custom CSS | 없으면 요소별 CSS를 사용할 수 없으며 코드가 에스컬레이션 순서 위로 이동 |
스타일링 원칙
V4에 이러한 프리미티브가 있으므로 Oxygen 및 Bricks 워크플로우가 이어집니다.
변수는 토큰입니다. 색상, 타이포그래피, 크기는 Variables로 저장됩니다. 먼저 사이트의 기존 세트를 읽고 사용하십시오. 변수가 이미 표현하는 값을 하드코딩하지 마십시오. 기존 이름이 명확하지 않다고 비슷한 변수를 새로 만들지 마십시오.
클래스가 스타일을 전달하며, BEM으로 명명합니다: block, block__element, block--modifier. 요소 자체가 아닌 클래스에 스타일을 적용하십시오. 이 플러그인이 만드는 모든 클래스는 회사 및 사이트 접두사 sw-<site>- (라우터, 네이밍)를 사용합니다. 로컬로 스타일링된 요소는 다음 페이지에서 재사용할 수 없는 일회용입니다.
V4 Global Classes는 하위 선택자가 없는 플랫 네임스페이스입니다. BEM은 정확히 이를 위해 설계되었으므로 적합하지만, 컨텍스트는 부모 선택자가 아닌 클래스 이름 자체에 포함되어야 합니다. 두 블록 내에서 다른 card__title은 중첩 규칙이 아닌 두 개의 클래스 이름이 필요합니다.
디자인은 요소에 절대 존재하지 않습니다. 타이포그래피, 간격, 색상, 테두리, 그림자, 상태는 클래스와 변수에 저장됩니다. 요소 자체의 스타일 컨트롤은 일회성 배치만 담당하며 (라우터, styling-and-code.md), 두 번째 사용 시 modifier 클래스가 됩니다.
Atomic Framework
하우스 디자인 시스템으로, 별도 제품으로 유지 관리됩니다: 색상, 타이포그래피, 간격, 레이아웃 및 효과에 걸친 72개의 토큰, OKLCH, clamp()로 유동적이며, 다크 변형이 있습니다. 토큰 이름은 프레임워크가 작성한 그대로 전달됩니다.
설치, 확장, 또는 토큰을 V4 Variable에 매핑하기 전에 references/atomic-framework.md를 읽으십시오. 새 프레임워크 버전은 생성된 파일을 수동으로 편집하지 않고 scripts/build_framework.py를 새 토큰 JSON에 대해 다시 실행하는 것입니다.
다른 내용을 읽지 않더라도 기억해야 할 한 가지 규칙: 프레임워크에는 html { font-size: 62.5% }가 필요합니다. 그래야 1rem이 10px이 됩니다. 이 설정이 없으면 모든 rem 값이 1.6배 커지며 오류가 발생하지 않습니다.
스타일링 및 코드 배치
라우터의 references/styling-and-code.md가 사다리입니다. V4 용어로는:
| 사다리 단계 | Elementor V4 |
|---|---|
| 토큰 | Variables (V4가 보유할 수 없는 토큰용 프레임워크 CSS 레이어) |
| 클래스 네이티브 필드 | Global Class의 스타일 탭, 중단점별 및 상태별 |
| 클래스 커스텀 CSS | V4 Custom CSS on the class (복합 상태, :focus-visible 링, color-mix(), 컨테이너 쿼리, 스크롤 기반 애니메이션) |
| Component | Elementor Component, 변하는 속성만 노출 |
| 요소 네이티브 필드 (배치 전용) | 요소의 로컬 스타일 컨트롤: 순서, 자기 정렬, 그리드 배치, 위치 오프셋, z-index, 종횡비, 자체 배경 이미지 |
| 요소 커스텀 CSS, 짧음 (배치 전용) | V4 Custom CSS on the element, 하나의 짧은 규칙 |
| FluentSnippets | 유틸리티 세트, @keyframes, 작은 바닐라 JS, PHP 훅. 프레임워크 :root 레이어는 유일한 예외로, 편집기에서 렌더링되도록 Elementor 사이트 전체 CSS에 유지 |
디스플레이 조건은 서버 측 렌더링 로직 (누락된 필드, 사용자 상태) 전용이며, 반응형 가시성(utility class)에는 사용하지 않습니다.
Components
반복되는 레이아웃에 대해 코드를 작성하기 전에 사용하십시오.
- 네이티브 atomic 요소로 섹션 레이아웃을 구성합니다.
- 컨테이너에서 Component를 만듭니다.
- 인스턴스마다 달라져야 하는 속성 (일반적으로 텍스트 및 이미지 소스)만 노출합니다.
- 핵심 레이아웃과 스타일링은 컴포넌트 내부에서 전역적으로 제어합니다.
모든 속성이 노출된 컴포넌트는 단계가 추가된 템플릿입니다. 최소한만 노출하십시오. 참조: elementor.com/help/components-2/
Atomic 요소 및 커버리지 갭
사용 가능한 atomic 요소: Div Block, Flexbox, Heading, Paragraph, Button, Image, SVG, YouTube, Tabs 및 Atomic Form 세트, CSS Grid 지원.
일부 클래식 위젯에는 아직 atomic 대응 요소가 없습니다 (아코디언, 갤러리, 캐러셀 등). 하나를 사용하기 전에 정책의 결정 흐름을 따르십시오:
- 네이티브 HTML 우선. 갤러리:
figure항목의 CSS 그리드. 캐러셀:scroll-snap행. 모달:dialog또는popover. 아직 atomic 아코디언이 없는 경우:details및summary(하우스 기본 중첩 아코디언은 Elementor가 제공할 때만 V4에 존재). 태그 제어가 허용하는 경우 atomic 요소로 구축하고, 그렇지 않으면 프레임워크 클래스로 스타일링된 마크업을 보유한 HTML 요소를 사용하고 빌더 제한으로 기록합니다. - V4 페이지의 클래식 V3 위젯은 최후의 수단입니다: Global Class나 Variable을 적용할 수 없으므로 원클래스 시스템 규칙을 위반합니다. 정책의 섹션 0 규칙 (운영자의 승인, 재방문 트리거와 함께 기록)에 따라서만 사용하고, atomic 요소가 제공되면 교체하십시오.
구조
레이아웃이 flex 컨텍스트이면 Flexbox, 일반 래퍼이면 Div Block을 사용합니다. 모든 구조 요소에 의미 있는 HTML 태그를 사용합니다. 유효한 제목 개요를 유지합니다. 중첩 링크는 패턴이 정말로 요구하는 경우에만 사용합니다 (앵커 내부의 앵커는 잘못된 마크업이므로).
요소 상태 및 반응형 값은 스타일 탭에서 중단점별 및 상태별로 설정합니다. 사이트 자체 중단점을 존중하고 새 중단점을 도입하지 마십시오.
버전 경계
V4 페이지는 V4 페이지입니다. 기존 V3 프로덕션 페이지를 V4로 변환하지 말고 부분적으로 마이그레이션하지 마십시오. 혼합 페이지는 커버리지 갭이 강제하는 경우에만 허용됩니다.