Beaver Builder 대 Elementor Pro: 최고의 WordPress 페이지 빌더는 무엇입니까?
게시 됨: 2021-09-02시각적인 드래그 앤 드롭 빌더를 사용하여 맞춤형 WordPress 사이트를 구축하기 위한 도구로 Beaver Builder와 Elementor Pro 사이에서 결정하려고 하십니까?
이들은 최고의 WordPress 페이지 빌더 플러그인 중 두 가지입니다. 둘 다 단순한 페이지 빌더 이상입니다. 전체 테마 작성에도 사용할 수 있습니다.
그래서 – 당신은 그들 사이에서 어떻게 선택할 수 있습니까? 글쎄, 그것이이 게시물에 관한 것입니다.
이 두 플러그인 모두 훌륭한 도구라고 생각하므로 단일 승자를 선언하지 않겠습니다. 대신 귀하의 필요와 예산에 가장 적합한 플러그인을 선택하도록 도와드리겠습니다.
파헤쳐보자!
특징
Beaver Builder 대 Elementor Pro 비교를 시작하기 위해 두 도구가 모두 제공하는 기능을 개략적으로 살펴보겠습니다.
아래 비교 표에서 아이콘의 의미는 다음과 같습니다.
- ️ – 이 기능은 플러그인에서 사용할 수 있습니다.
- ️️ – 이 기능은 두 플러그인 모두에서 사용할 수 있지만 한 플러그인의 구현이 더 유연하고 강력합니다.
- – 플러그인에서 해당 기능을 사용할 수 없습니다 .
특징 | 비버 빌더 | 엘리멘터 프로 |
비주얼, 프론트엔드 에디터 | ️ | ️ |
끌어서 놓기 | ️ | ️ |
인라인 텍스트 편집 | ️ | ️ |
반응형 전용 편집 | ️ | ️ |
콘텐츠 위젯 | ️ | ️️ |
사전 제작된 템플릿 | ️ | ️️ |
재사용 가능한 템플릿(자신의 디자인) | ️ | ️ |
테마 빌더 | ️* | ️ |
동적 콘텐츠 삽입(사용자 정의 필드 포함) | ️* | ️ |
팝업 빌더 | ️ | |
양식 빌더 | ️ | ️️ |
우커머스 지원 | ️ | ️️ |
전용 테마 | ️ | ️ |
화이트 라벨링 | ️ | |
다중 사이트 지원 | ️ | ️** |
스타일 복사/붙여넣기 | ️ | ️ |
마우스 오른쪽 버튼 클릭 지원 | ️ | |
다크 모드(인터페이스) | ️ | ️ |
*공식(그러나 별도의) Beaver Themer 애드온이 필요합니다.
**Elementor Pro는 다중 사이트 네트워크의 각 네트워크 사이트에 대해 활성 라이센스 키가 필요합니다.
Beaver Builder 대 Elementor Pro 기능 결론
기능면에서 Elementor Pro는 분명한 이점이 있습니다. 당신은 ...
- 별도의 팝업/옵트인 플러그인의 필요성을 대체할 수 있는 정말 강력한 기능인 팝업 빌더.
- 지불 수락을 위한 PayPal 버튼과 같은 고유한 옵션을 포함하여 선택할 수 있는 더 많은 위젯.
- 더 많은 템플릿 중에서 선택할 수 있습니다.
- 더 강력한 폼 빌더.
- 더 많은 디자인 옵션( 표에서 다루지 않았지만 나중에 더 많은 것을 공유할 것입니다 ).
- 더 나은 WooCommerce 지원. Beaver Themer는 WooCommerce를 지원하지만 Elementor Pro는 WooCommerce 작업에 더 많은 유연성을 제공합니다.
그러나 위의 비교 표에서 파악하기 어려운 한 가지는 기능과 안정성 간의 균형입니다. 도구에 더 많은 기능을 추가하려면 더 빠른 개발 주기가 필요하므로 버그나 문제의 가능성이 높아집니다.
Beaver Builder는 개발 주기가 느리므로 기능이 많지 않습니다. 그러나 이 느린 개발 주기는 Beaver Builder가 정말 견고하다는 것을 의미하며 업데이트로 인해 문제가 발생하지 않을 것이라고 확신할 수 있습니다.
Elementor Pro가 불안정하다는 말은 절대 아닙니다. 가장 인기 있는 페이지 빌더 플러그인이며 수백만 개의 사이트에서 문제 없이 사용하고 있습니다.
나는 안정성이 Beaver Builder가 잘하고 인정받을 가치가 있는 것임을 강조하려고 합니다. 더 많은 기능을 얻는 것보다 안정성을 중시하는 유형의 사람이라면 이것이 중요할 수 있습니다.
반면에 가장 많은 기능을 원하고 정기적으로 새로운 기능에 액세스하고 싶다면 Elementor Pro가 확실히 유리합니다.
상호 작용
다음으로 인터페이스가 각 도구에서 어떻게 작동하는지 살펴보겠습니다.
인터페이스 품질은 주관적이므로 여기에서 "승자"를 선언하지 않겠습니다. 두 도구 모두 뛰어난 인터페이스를 제공하며 일반적으로 빠르고 결함이 없습니다.
Beaver Builder의 한 가지 장점은 기본 설정에 따라 인터페이스를 사용자 정의할 수 있는 반면 Elementor의 인터페이스는 거의 고정되어 있다는 것입니다.
반면에 Elementor는 오른쪽 클릭 지원 및 디자인 구성을 위한 탐색 도구와 같이 Beaver Builder가 제공하지 않는 몇 가지 유용한 도구를 제공한다는 점에서 몇 가지 장점이 있습니다.
비버 빌더
위에서 언급했듯이 Beaver Builder의 인터페이스는 매우 유연합니다. Beaver Builder를 처음 실행하면 상단에 도구 모음이 있는 디자인의 전체 화면 미리 보기가 표시됩니다.

모듈 또는 템플릿을 삽입하려면 "더하기" 아이콘을 클릭하여 패널을 열 수 있습니다.

마찬가지로 행, 열 또는 모듈에 대한 설정을 열려면 해당 설정 위로 마우스를 가져간 다음 렌치를 클릭하여 팝업을 열 수 있습니다(필요에 따라 크기를 조정하고 이동할 수 있음).

부동 옵션 대신 고정 패널을 사용하려는 경우 패널을 인터페이스의 양쪽으로 드래그할 수 있습니다. 이렇게 하면 새 모듈을 추가하고 기존 요소에 대한 설정을 구성할 수 있는 고정 사이드바가 생성됩니다.

텍스트를 편집하려면 페이지를 클릭하고 입력하거나 설정 영역에서 텍스트 편집기를 사용할 수 있습니다.
반응형 디자인의 경우 반응형 편집 모드를 열어 실시간 반응형 미리 보기를 보고 장치에 따라 디자인을 사용자 지정할 수 있습니다.

Beaver Builder에서 내가 좋아하는 기능 중 하나는 한 모듈을 다른 모듈 옆으로 드래그하여 다중 열 디자인을 생성하는 기능입니다.

대부분의 페이지 빌더는 요소를 추가하기 전에 열 구조를 설정해야 하므로 시간이 추가됩니다( 비버 빌더는 해당 방법을 선호하는 경우에도 그렇게 할 수 있음 ).
위에서 보여드린 것 외에도 Beaver Builder는 자체 Assistant 플러그인을 제공하여 디자인 사이를 빠르게 이동할 수 있도록 합니다( Beaver Builder는 필요하지 않음 ).
엘리멘터 프로
Elementor 및 Elementor Pro를 사용하면 인터페이스 왼쪽에 고정 사이드바가 표시되고 오른쪽에 디자인의 실시간 미리보기가 표시됩니다.

디자인의 전체 너비 미리보기를 보려면 사이드바를 축소하여 Elementor 인터페이스를 숨길 수 있습니다.

사이드바는 새 모듈을 추가하고 요소의 설정을 구성할 수 있는 곳입니다.


텍스트를 편집하려면 페이지를 클릭하고 입력하거나 사이드바에서 텍스트 편집기를 사용할 수 있습니다.
Elementor에는 보다 효율적으로 작업하는 데 도움이 되는 몇 가지 유용한 옵션도 있습니다. 예를 들어 Elementor는 오른쪽 클릭을 지원하여 복사/붙여넣기(요소 또는 스타일), 요소 복제 등과 같은 주요 옵션에 액세스할 수 있습니다.
또한 페이지 레이아웃을 볼 수 있는 네비게이터 도구가 제공됩니다. 페이지의 섹션 및 요소 이름을 변경하여 기억하고 올바른 요소를 빠르게 선택할 수도 있습니다.

Elementor Pro에는 반응형 미리보기를 표시하고 특정 장치에 맞게 디자인을 사용자 지정할 수 있는 반응형 편집 모드도 포함되어 있습니다.

Beaver Builder에서 허용하는 것처럼 Elementor 인터페이스를 더 많이 제어하려면 Flexible Elementor Panel과 같은 타사 플러그인을 사용할 수 있습니다.
디자인 옵션
비주얼 빌더에 관심이 있다면 사용자 정의 CSS 없이도 디자인을 설정하는 데 도움이 되는 도구가 필요할 것입니다. 그렇게 하려면 다양한 기본 제공 설계 옵션이 필요합니다.
두 도구 모두 기본 사항과 관련하여 매우 유연합니다. 다음을 쉽게 제어할 수 있습니다.
- 그림 물감
- 타이포그래피
- 여백/패딩을 통한 간격
- 배경
- 반응형 디자인
- 등.
그러나 Elementor Pro는 또한 기본보다 더 나아가 설계 유연성에 관해서는 꽤 분명한 승자라고 생각합니다.
기본적으로 디자인과 관련하여 Elementor는 Beaver Builder가 수행하는 거의 모든 작업과 함께 "더 많은" 작업을 수행할 수 있습니다. 예를 들어 다음은 Elementor Pro의 고유한 디자인 기능 중 일부입니다.
- 모션 효과 – 스크롤 효과, 3D 기울기, 마우스 추적 등과 같은 멋진 효과를 추가합니다. 여기에서 자세히 알아보고 예제를 참조하세요.
- 사용자 지정 위치 지정 – 절대 및 상대 위치 지정을 사용하여 디자인에 위젯을 완벽하게 배치합니다.
- 요소에 직접 CSS 추가 – 위젯/열/섹션에 CSS를 직접 추가할 수 있는 반면 Beaver Builder에서는 CSS 클래스 또는 ID만 추가할 수 있습니다.
물론 플러그인 간에는 다른 작은 옵션과 차이점이 많이 있습니다. Elementor Pro에는 확실히 더 많은 디자인 옵션이 있다는 점 을 강조하려고 합니다.
내장 디자인 옵션 측면에서 Elementor Pro와 경쟁할 수 있는 유일한 빌더는 Divi Builder 플러그인입니다(Divi 리뷰에서 자세히 알아보기).
성능
페이지 빌더를 사용할 때 성능과 관련하여 항상 약간의 절충을 해야 합니다. 어떤 페이지 빌더를 선택하든 기본 WordPress 편집기만큼 가벼운 디자인을 만들 수 없습니다.
즉, 일부 플러그인은 다른 플러그인보다 낫습니다.
Beaver Builder는 항상 ( 페이지 빌더 의 경우) 더 가벼운 옵션 중 하나였으며 Elementor 팀은 최근 DOM을 단순화하고 필요한 경우에만 스크립트를 로드하도록 자산 로드를 최적화하는 등의 개선을 통해 성능 개선에 큰 중점을 두고 있습니다.
이 두 도구의 성능을 평가하기 위해 각각 동일한 디자인을 만들었습니다. 디자인은 매우 간단합니다. 각 도구의 기본 "무게"에 대한 아이디어를 얻으려고 합니다. 여기에는 텍스트 위젯, 버튼 위젯 및 문의 양식( 페이지 빌더에서 제공)만 포함됩니다. 두 도구 모두에서 기본 설정을 사용하고 있습니다.
페이지 크기 | HTTP 요청 | |
비버 빌더 | 71KB | 11 |
엘리멘터 | 315KB | 32 |
*이 숫자에는 내 테마인 GeneratePress가 포함됩니다.
전반적으로 Beaver Builder는 적어도 이 테스트에서 조금 더 가볍습니다. Elementor Pro는 더 많은 기능과 디자인 효과를 제공하므로 이를 달성하기 위해 더 많은 자산을 로드해야 하는 것은 당연합니다. 예를 들어 Elementor는 Beaver Builder에 없는 기능인 Motion Effects에 대한 스크립트를 로드하고 있습니다.
Elementor의 새로운 개선 된 자산 로드 기능(아직 알파 테스트 중임 )을 활성화하면 Elementor가 필요한 특정 자산만 로드하는 데 더 능숙해지기 때문에 차이가 더 작아집니다.
페이지 크기 | HTTP 요청 | |
비버 빌더 | 71KB | 11 |
엘리멘터 | 239KB | 30 |
그리고 이것은 성능 최적화 플러그인 없이 모두 가능합니다. WP Rocket과 같은 것을 사용하면 그 수치를 더 낮출 수 있습니다.
다음과 같이 성능을 요약할 것 같습니다.
- Beaver Builder는 Elementor Pro보다 약간 더 가볍습니다. 로드할 기능과 효과가 더 적기 때문에 의미가 있습니다.
- 내가 이 글을 쓰고 있을 때 아직 테스트 중인 새로운 성능 기능을 활성화하면 Elementor가 더 좋아집니다.
- 가장 중요한 것은 최적의 방식으로 디자인을 만들고 WordPress 성능 모범 사례를 구현하는 한 두 도구를 모두 사용하여 빠르게 로드되는 사이트를 만들 수 있다는 것입니다.
가격
가격 측면에서 두 도구 모두 몇 가지 장점이 있습니다. Elementor Pro는 단일 사이트 또는 소수의 사이트용 도구만 필요한 경우 더 저렴하고 Beaver Builder는 많은 웹 사이트(25개 이상의 사이트)용 도구가 필요한 경우 더 저렴합니다.
그러나 가격을 비교하기 전에 귀하의 요구 사항이 무엇인지 생각해야 합니다.
Elementor Pro는 단일 플러그인에 모든 기능을 포함합니다. 따라서 Elementor Pro를 구입하면 테마 빌더, 팝업 빌더 등을 포함한 모든 것에 액세스할 수 있습니다.
반면에 Beaver Builder는 페이지 빌더와 테마 작성 기능을 분리합니다.
- Core Beaver Builder Pro 플러그인 – 페이지 작성만 지원합니다.
- 공식 Beaver Themer 애드온 – 전체 테마 구축에 대한 지원을 추가합니다( 그리고 프리미엄 페이지 빌더 플러그인이 작동해야 함).
따라서 Beaver Builder를 사용하면 페이지 작성만 원할 경우 하나의 가격을 지불하고 테마 작성을 추가하려는 경우 다른 가격을 지불하게 됩니다.
또 다른 중요한 차이점은 Beaver Builder는 모든 계획에서 무제한 사이트를 지원하는 반면 Elementor Pro의 모든 계획에는 사이트 제한이 있다는 것입니다.
각각의 가격을 살펴본 다음 비교하고 각 도구가 더 저렴한 경우를 보여드리겠습니다.
Elementor Pro 가격
Elementor Pro의 가격은 다음과 같습니다. 이 모든 가격은 1년 라이선스 기준입니다.

비버 빌더 가격
핵심 플러그인에 대한 Beaver Builder의 가격은 다음과 같습니다. 다중 사이트 지원이나 화이트 라벨링이 필요하지 않다면 가장 저렴한 99달러 Standard 플랜을 사용하는 것이 좋습니다.

Beaver Themer를 추가하려면 $147(총 $246)를 추가로 지불해야 합니다.
Beaver Builder와 Beaver Themer를 사용하면 라이선스를 갱신하여 첫 해 이후에도 지원 및 업데이트를 계속 받을 경우 40% 할인을 받을 수 있습니다.
Elementor Pro와 Beaver Builder를 비교하는 것이 언제 더 저렴합니까?
위의 모든 정보를 요약하기 위해 각 도구가 더 저렴한 다양한 상황을 살펴보겠습니다.
- 단일 웹사이트 용 도구($49)만 원하는 경우 Elementor Pro가 훨씬 저렴합니다.
- 페이지 빌더만 필요한 경우 손익분기점은 세 개의 웹사이트 입니다. 3개의 웹사이트용 도구만 필요한 경우 도구 가격은 동일합니다($99). 그러나 세 개 이상의 웹 사이트가 필요한 경우 Beaver Builder가 더 저렴합니다.
- 페이지 구축 및 테마 구축이 필요한 경우 손익분기점은 25개의 웹사이트 입니다. 사이트가 25개 미만인 경우 Elementor Pro가 더 저렴합니다. 그러나 25개 이상의 웹 사이트가 있는 경우 Beaver Builder가 더 저렴합니다.
모두 첫해 가격입니다. 첫해 후에 갱신하는 경우 Beaver Builder는 40% 갱신 할인을 제공하는 반면 Elementor Pro는 제공하지 않기 때문에 Beaver Builder는 더 저렴해집니다.
Beaver Builder 또는 Elementor Pro를 사용해야 합니까?
나는 Beaver Builder와 Elementor Pro가 최고의 WordPress 페이지 빌더 중 두 가지라고 생각하므로 Beaver Builder와 Elementor Pro에 관해서 "잘못된" 결정을 내리지 않을 것이라고 생각합니다.
대신 상황에 가장 적합한 도구를 선택하는 것이 중요하다고 생각합니다.
- 대부분의 기능과 디자인 옵션을 원하신다면 Elementor Pro가 귀하의 요구에 가장 적합한 선택일 것입니다. 팝업 빌더와 같은 고유한 기능, 모션 효과 및 사용자 지정 위치 지정과 같은 고유한 디자인 옵션 등을 얻을 수 있습니다. 간단히 말해서 Elementor Pro는 가장 기능이 풍부한 WordPress 디자인 도구 중 하나이므로 가장 인기 있는 빌더 플러그인입니다.
- 조금 더 가볍고 모든 핵심 페이지 구축 및 테마 구축 옵션이 있는 견고한 빌더를 원한다면 Beaver Builder도 훌륭한 선택입니다.
어느 쪽이든 멋진 디자인을 만드는 데 도움이 되는 훌륭한 도구를 갖게 될 것입니다.
물론 결정에 중요한 역할을 할 수 있는 또 다른 차이점이 있습니다. 바로 가격 입니다. 기억하다:
- Elementor Pro는 단일 사이트에 대해 더 저렴하고 3개 사이트에 대해 가격이 동일합니다.
- Beaver Builder는 페이지 빌더 만 필요한 경우 3개 이상의 사이트 또는 페이지 작성 및 테마 작성이 필요한 경우 25개 이상의 사이트에 대해 더 저렴합니다. 그렇지 않으면 Elementor Pro가 여전히 저렴합니다.
- Beaver Builder는 40% 갱신 할인을 제공하지만 Elementor Pro는 제공하지 않습니다.
두 플러그인에 대해 자세히 알아보려면 전체 리뷰를 읽어보세요.
- 엘리멘터 리뷰
- 비버 빌더 검토
Beaver Builder 대 Elementor Pro에 대해 여전히 질문이 있습니까? 댓글로 알려주세요!