새로운 페이지 빌더가 방금 WordPress 공간에 착륙했으며 다른 사람들과는 같지 않습니다. 모자이크 빌더는 클래스 기반의 디자인 시스템 접근 방식을 사용하여 WordPress 사이트를 구축하며 Elementor 보다 Webflow 에 더 가깝습니다. 우리는 이것으로 시간을 보냈고 공식 시작 연습을 따라 갔으며 실제로 잘 작동하는 것을 확인하기 위해 처음부터 사이트를 구축했습니다.
그래서 여기에 우리의 전체 모자이크 빌더 검토: 그것은 무엇 이며, 편집자가 어떻게 느끼는지, 그리고 아직 실제 프로젝트와 함께 그것을 신뢰 해야 하는지 여부.
시작하기 전에 빠른 참고 사항: 빌드합니다 Elementor용 마스터 애드온, 그래서 우리는 매일 Elementor 생태계에 살고 있습니다. 그것은 우리에게 새로운 건축업자를 판단하는 데 유용한 렌즈를 제공하며, 우리의 관점이 평결을 색칠하는 곳이면 어디든 플래그를 지정할 것입니다.
모자이크 빌더란 무엇입니까?
모자이크 워드 프레스 페이지 빌더와 테마 빌더가 하나로 압연되어 있습니다. 그 피치는 간단합니다: “워드 프레스의 디자인 한계에 지쳤습니까? 모자이크를 만나십시오.”
위젯을 캔버스에 떨어뜨리고 각각을 개별적으로 스타일링하는 대신 모자이크는 디자인 시스템을 중심으로 구축됩니다. 당신은 얻는다:
- A 클래스 시스템 요소 클래스와 유틸리티 클래스를 사용하면 개발자가 CSS를 작성하는 방법과 유사합니다
- 스타일 가이드 이는 전체 사이트의 색상과 타이포그래피를 제어합니다
- 구성 요소한 번 편집하고 모든 곳에서 업데이트하는 재사용 가능한 요소입니다
- 마스터 및 템플릿 테마 수준 레이아웃(헤더, 바닥글, 아카이브, 단일 게시물)을 처리합니다
- 안 인터랙션 빌더 스크롤, 호버링, 애니메이션 클릭의 경우
- A 루프 빌더 블로그 아카이브 및 사용자 정의 게시물 유형과 같은 동적 콘텐츠용
세 가지 스타터 테마로 배송됩니다: 지브롤터 (대담하고 현대적), 모노리스 (깨끗하고 미니멀한), 그리고 제로부터 빌드하기 위한 블랭크. Webflow 나 Bricks Builder 를 사용했다면 이 모델이 친숙하게 느껴질 것입니다. Elementor 에서 바로 온다면 정신적인 변화를 기대하세요.
시작하기: 설정 마법사
모자이크의 온보딩은 우리가 테스트한 대부분의 플러그인보다 우수합니다. 활성화 후 4 단계 마법사가 설정,마스터, 템플릿 및 페이지를 안내합니다.
영리한 부분은 스키닝 시스템입니다. Monolith 와 같은 테마를 선택한 다음 컬러 스킨 (Cyan,Violet, Rose,Teal 외 6 개) 과 글꼴 스킨 (Neutral,Elegant, Timeless,Geometric, Modern,Futuristic) 을 선택하십시오. 전체 데모 사이트는 밝은 색상 또는 어두운 색상 모드 토글을 포함하여 즉시 스타일을 변경합니다.
테마에 있는 모든 것이 하드 코딩된 값 대신 스타일 변수를 참조하기 때문에 작동합니다. 브랜드 색상을 한 번 변경하고 버튼,링크, 아이콘이 이어집니다. Elementor 에는 비슷한 작업을 수행하는 글로벌 색상이 있지만,시작 테마가 첫날부터 변수 시스템에 전적으로 구축되므로 모자이크의 구현이 더 깊어집니다.
몇 분 안에 우리는 전체 데모 사이트를 설치 했다: 홈페이지, 블로그 아카이브, 블로그 게시물, 지도와 연락처 페이지, 404 페이지, 검색 결과, 모든 편집 가능.
편집자: 구조 우선 캔버스
모자이크에서 페이지를 열고 레이아웃을 인식할 수 있습니다: 왼쪽의 요소 트리,가운데의 라이브 캔버스,오른쪽의 스타일 컨트롤. 하지만 철학은 Elementor 의 것과 다릅니다.
모자이크의 네비게이터는 페이지를 중첩된 구조로 보여줍니다: 섹션,컨테이너, 행,그리고 나서 제목,문단, 버튼,아이콘 상자,div 와 같은 요소들. 캔버스로부터처럼 자주 트리에서 요소를 선택합니다. 오른쪽 패널은 실제 CSS 개념을 노출합니다: 최소/최대 값의 너비,z-index 를 사용한 위치,플렉스 컨트롤,변환 (번역,축척, 회전), 상자 그림자,오버플로우.
개발자에게는 이것이 신선합니다. 컨트롤은 손으로 작성한 CSS 와 일대일로 매핑되므로 숨기거나 이름이 변경된 느낌이 없습니다. 초보자에게는 더 가파른 언덕입니다. Elementor 는 플렉스 컨테이너가 무엇인지 알지 못한 채 헤딩 스타일을 지정할 수 있도록 합니다. 모자이크는 조용히 가정합니다.
우리가 감사 한 한 가지: 편집기는 전체 Monolith 데모가로드 된 경우에도 테스트 빌드 전반에 걸쳐 응답했습니다.
수업 시스템: 모자이크의 가장 큰 아이디어
이것은 모자이크가 대부분의 워드 프레스 페이지 빌더에서 자신을 분리하는 곳입니다. 모든 요소는 클래스를 수행 할 수 있으며,클래스는 두 가지 맛으로 제공됩니다:
- 요소 클래스 정의 무엇인가: 버튼, 카드, 네비게이션 링크
- 유틸리티 클래스 쌓을 수 있는 단일 속성 정의: 간격, 텍스트 색상, 크기
클래스도 중첩됩니다. Monolith 테마의 Button 클래스에는 기본 및 보조 변형이 있으며 각각 S,M 및 L 크기가 있습니다. 아무 버튼이나 선택하고 하위 클래스를 바꾸면 즉시 스타일이 변경됩니다. 기본 클래스 자체와 사이트의 모든 기본 버튼을 편집합니다.
모든 버튼이 손으로 스타일링된 Elementor 사이트를 물려받은 적이 있다면 약간 다르게 이 문제가 해결되는 문제를 이해하게 됩니다. 스타일을 일관되게 유지하기 위해 규율에 의존하는 것을 중단합니다; 구조가 대신합니다.
하지만 절충안은 현실입니다. 수업 시스템에는 계획이 필요합니다. 빌드하기 전에 이름 지정,계층 구조 및 재사용에 대해 생각해야 하는데,이는 정확히 프리랜서가 5 페이지 분량의 브로셔 사이트를 녹아웃시키는 오버헤드의 종류가 원하지 않을 수 있습니다.
구성 요소, 마스터 및 테마 빌딩
모자이크는 두 개의 연결된 아이디어를 통해 사이트 전체 레이아웃을 처리합니다:
마스터스 당신의 바깥 껍질은: 머리글,바닥글, 그리고 모든 페이지를 감싸는 모든 것. 마스터를 한 번 편집하면 변경 사항이 모든 곳에 나타납니다.
템플릿 마스터 및 제어 콘텐츠 영역 내부에 라이브. mosaic 의 데모에는 홈페이지,블로그 아카이브,단일 게시물,연락처, 아카이브,404 및 검색 결과에 대한 템플릿이 포함되어 있습니다.
새 페이지를 만들 때 대화 상자에서는 새 템플릿을 할당할지, 기존 템플릿을 할당할지, 모든 인스턴스에 변경 사항을 적용하는 자동 템플릿을 할당할지 묻습니다.
구성 요소 재사용 가능한 블록입니다: 가격 카드, 사용후기, CTA 섹션. 인스턴스를 아무데나 놓고, 구성 요소를 편집하고, 모든 인스턴스가 동기화됩니다.
이것은 실제 테마 건물이며 별도의 테마 없이 작동합니다. 비교를 위해 Elementor 사용자는 다음을 통해 동일한 적용 범위를 얻습니다 마스터 애드온 테마 빌더는,이는 사용자 정의 머리글,바닥글, 아카이브,단일 템플릿,그리고 Elementor 의 편집기의 상단에 404 페이지를 추가합니다. 최종 결과는 비슷합니다; 모자이크는 단지 추가 기능 레이어로 취급하지 않고 핵심 제품에 구워.
상호작용과 애니메이션
모자이크에는 두 가지 트리거 범주가 있는 상호 작용 빌더가 포함되어 있습니다:
- 간단한 트리거: 보기로 스크롤, 호버, 클릭, 페이지로드, 스크롤 방향 변경
- 연속 트리거: 마우스 이동 및 스크롤하는 동안
어떤 섹션이나 요소에 트리거를 연결한 다음,무엇이 애니메이션을 적용하는지 정의합니다. 현대식 랜딩 페이지 필수 요소를 다룹니다: 스크롤의 페이드 인,시차 스타일 이동,간단한 색상 스왑을 넘어서는 호버 상태.
혁명적이지는 않지만 유능한 시스템입니다. Elementor 사용자는 모션 효과와 애드온을 통해 수년 동안 비슷한 옵션을 사용했습니다. 마스터 애드온 혼자 커버 입구 애니메이션, 부동 효과 및 스크롤 기반 이동, 더하기 입자 배경과 같은 엑스트라. 모자이크가 제공하는 것은 더 긴밀한 통합입니다: 상호 작용은 탭에 흩어져있는 대신 다른 모든 것과 동일한 패널에 살고 있습니다.
루프 및 동적 콘텐츠
루프 빌더는 블로그 아카이브 테스트를 잘 처리했습니다. 하나의 항목 (이미지,카테고리, 제목,발췌, 작성자,날짜) 을 디자인하고 모자이크가 페이지 매김 컨트롤과 “결과 없음”상태로 완성 된 모든 게시물에 대해 반복합니다.
루프는 게시물,페이지 및 사용자 지정 게시물 유형에 연결하고 템플릿 조건과 쌍을 이루어 아카이브,범주 및 검색 결과가 각각 올바른 레이아웃을 얻습니다. 조건부 가시성 논리와 결합하여 컨텍스트를 기반으로 콘텐츠를 표시하거나 숨길 수 있습니다. 무엇과 비슷합니다 elementor에서는 표시 조건이 적용됩니다.
콘텐츠가 많은 사이트를 구축한다면,이곳은 모자이크의 가장 강력한 영역 중 하나입니다. 사용자 정의 블로그 레이아웃을 구축하는 것이 우리가 테스트 한 대부분의 빌더보다 여기에서 더 빨리 느껴졌습니다. Elementor 사용자는 일반적으로 Blog Element 와 같은 위젯에 도달합니다 블로그 페이지 구축, 이는 당신을 거기까지 데려다 주지만, 모자이크의 접근 방식은 각 루프 항목에 대한 더 미세한 구조적 제어를 제공합니다.
모자이크 빌더 가격
모자이크의 출시 가격은 공격적이며, 사용자 기반을 빠르게 구축하기 위해 명확하게 설계되었습니다:
| 계획 | 가격 | 사이트 | 라이센스 |
|---|---|---|---|
| 개인적인 | 첫해 무료, 그 다음 $ 39 / 년 | 1 사이트 | 연간 |
| 창조자 | 첫해 무료, 그 다음 $ 149 / 년 | 10 사이트 | 연간 |
| 대행사 | $199 평생 (초기 조류, 일반 $499) | 무제한 | 평생 |
알아둘 가치가 있는 몇 가지 세부 사항:
- X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 무료 첫해 on Personal and Creator 플랜은 2026년 말까지 진행되는 조기 제안입니다. 지금 아무것도 지불하지 않으며 구독은 2년차에 시작됩니다.
- 모든 플랜에는 모든 Pro 기능이 포함되어 있습니다. 계층은 사이트 수와 활성화 제한만 다릅니다 (Personal 에서는 연간 2 개,Creator 에서는 15 개,Agency 에서는 무제한).
- 영구 무료 버전은 없습니다.
무제한 Pro 기능을 갖춘 무료 연도는 진입 장벽이 낮아지는 정도입니다. $199 평생 에이전시 거래는 제품이 생존하고 성숙하면 강력한 가치가 있습니다.
평결: 시간이 필요한 유망한 건축업자
모자이크 빌더는 우리가 몇 년 만에 출시 한 것을 본 더 흥미로운 워드 프레스 빌더 중 하나입니다. 클래스 시스템은 잘 실행되고 온보딩은 우수하며 테마 건물은 볼트로 고정되지 않고 내장되어 있으며 무료 1 년 가격 책정은 시도하지 않을 변명을 제거합니다.
우리의 추천:
- 해봐 준비 또는 사이드 프로젝트에서 특히 CSS 를 알고 Webflow 모델을 좋아하는 경우 무료 연도는이 작업을 위험 제로 실험으로 만듭니다.
- Elementor로 스틱하세요 애드온 생태계에 의존하거나,무료 계층이 필요하거나,클라이언트 작업을 위한 가장 안전한 경로를 원한다면,잘 선택된 스택은 오늘날 모자이크가 약속하는 거의 모든 것을 커버하며,이것이 Elementor 가 여전히 우리의 최고 수준인 이유입니다 페이지 빌더 비교.
안정적인 릴리스가 출시되면 이 모자이크 빌더 리뷰를 업데이트하겠습니다. 클래스 시스템이 실제 클라이언트 사이트에서 유지된다면 Elementor 는 진지하게 받아들일 가치가 있는 라이벌을 갖게 될 것이며,그 압력은 모든 빌더를 더 좋게 만드는 경향이 있습니다.
자주 묻는 질문
모자이크 빌더 란 무엇입니까?
모자이크 빌더는 새로운 워드프레스 페이지 빌더이자 테마 빌더입니다. 재사용 가능한 컴포넌트,스타일 변수,인터랙션 빌더,동적 루프가 포함된 클래스 기반 디자인 시스템을 사용하여 기존의 워드프레스 빌더보다 Webflow 에 더 가까운 접근 방식을 취합니다.
모자이크 빌더는 무료인가요?
영구 무료 버전은 없지만 Personal 및 Creator 연간 플랜은 2026 년 말까지 조기 제안으로 첫 해 동안 무료입니다. 그 후 플랜은 한 사이트에 대해 연간 $39 에서 시작하며 평생 $199 의 대행사 거래가 있습니다.
초보자는 모자이크 빌더를 사용할 수 있습니까?
초보자는 사용할 수 있지만 Elementor 보다 학습 곡선이 가파르다. 모자이크는 클래스,컨테이너 및 flexbox 와 같은 개발자 개념을 중심으로 구축되었습니다. 포함 된 비디오 과정은 도움이되지만 기술적이지 않은 사용자는 실제 학습 시간을 예산해야합니다.
모자이크 빌더는 기존 워드 프레스 테마와 함께 작동합니까?
모자이크는 테마 레이어를 자체 마스터 및 템플릿 시스템으로 대체합니다. 지브롤터와 모노리스라는 두 가지 디자인 테마와 함께 처음부터 완전히 구축하기 위한 블랭크 스타터가 함께 제공됩니다.
관련 읽기: 옵션의 무게를 측정하고 있다면 우리의 검거를 참조하십시오 최고의 Elementor 테마 그리고 elementor를위한 최고의 경량 WordPress 테마또는 확인합니다 마스터 애드온 v3 의 새로운 기능.
