Page Builder Sandwich: 레이아웃 및 디자인 시스템

주요 기능

• Flexbox 및 CSS Grid 컨테이너 — 시각적 grid 편집기를 포함하여 완벽한 flex 및 grid 제어 기능을 갖춘 섹션 및 컨테이너: 드래그하여 열과 행을 설정할 수 있습니다.
• 3개의 내장 중단점 — 데스크톱, 태블릿, 모바일을 위한 별도의 설정이 제공되며, 실시간으로 미리 볼 수 있습니다.
• 테마와 공유되는 전역 색상 및 글꼴 — 테마 설정(theme.json)을 읽고 쓰는 사이트 전체 색상 및 타이포그래피로, 빌더와 테마가 항상 일치합니다.
• 요소 및 사이트 간 스타일 복사 및 붙여넣기 — 요소의 스타일이나 전체 섹션을 복사하여 다른 페이지나 다른 웹사이트에 붙여넣을 수 있습니다.
• 팔레트 색상의 음영 및 불투명도(OKLCH) — 색상 선택기에서 바로 모든 팔레트 색상을 더 밝게, 더 어둡게 또는 반투명하게 만들 수 있습니다. OKLCH로 혼합되어 색조가 그대로 유지되고 팔레트 색상과 연결된 상태로 유지되며, 구형 브라우저를 위한 일반 색상 대체(fallback)가 제공됩니다.
• 스타일 빌더의 조건(media, container 및 supports at-규칙) — 인쇄 시, 어두운 색상 구성표, 동작 줄이기 적용 시 또는 마우스 장치에서만 요소의 스타일을 지정할 수 있습니다. 개발자는 pbsw_style_at_rules PHP 필터를 사용하여 자체 media, container 및 supports 사전 설정을 추가할 수 있습니다.
• 사용자 정의 중단점 (Pro) — 고유한 화면 크기(대형 데스크톱, 소형 휴대폰, 가로 모드 태블릿)를 추가할 수 있습니다.
• 전역 클래스 및 CSS 변수 (Pro) — 프로 빌더 수준의 클래스 관리자: 한 번 스타일을 지정하고 모든 곳에서 재사용하며 한 곳에서 변경할 수 있습니다.
• 디자인 토큰: 간격, 반경 및 그림자 스케일 (Pro) — 사이트 전체에 걸쳐 일관된 간격 및 스타일 사전 설정을 제공합니다.
• 요소별 및 페이지별 사용자 정의 CSS (Pro) — 구문 강조 기능과 함께 직접 CSS를 작성하려는 사용자를 위해 제공됩니다.
• 웹사이트를 위한 다크 모드 (Pro) — 사이트 색상의 라이트 및 다크 버전을 구축할 수 있으며, 방문자가 직접 전환하거나 기기 설정을 따르도록 할 수 있습니다.
• 브랜드 키트 (Pro) — 로고, 색상, 글꼴, 브랜드 보이스 톤을 한 번만 저장하면 AI와 템플릿이 이를 자동으로 사용합니다.
• 전역 클래스 및 디자인 토큰 카테고리 (Pro) — 클래스, 스케일 단계 및 변수를 고유한 카테고리로 그룹화하고, 이를 기준으로 목록을 필터링하며, 편집기에서 카테고리별로 클래스와 사전 설정을 선택할 수 있습니다.
• 디자인 시스템 가져오기 및 내보내기 (Pro) — 카테고리, 전역 클래스, 변수, 스케일 및 사용자 정의 색상을 하나의 JSON 파일로 다운로드하여 다른 사이트로 가져올 수 있습니다. 유효성 검사 및 버전 관리가 적용되며, 병합하거나 교체할 수 있고, 변경 사항이 적용되기 전에 미리보기를 제공합니다.

무료 또는 Pro

(Pro) 표시가 있는 기능은 Pro 라이선스가 필요하며, (Agency 플랜) 표시가 있는 기능은 Agency 플랜이 필요합니다. 그 외의 모든 기능은 무료 에디션에 포함되어 있습니다.