최고의 WordPress WYSIWYG 편집기 – 7 페이지 빌더 비교

게시 됨: 2018-12-10

WordPress용 최고의 WYSIWYG 편집기를 찾고 계십니까?

이 기사는 드래그 앤 드롭 WP 편집기에서 다른 편집기로 이동하면서 지난 3년 동안의 경험을 기반으로 합니다.

나는 마침내 내가 좋아하는 사랑을 찾았고 어떤 것이 아래에 있는지 말할 것입니다.

Best WordPress WYSIWYG Editor

목차
최고의 WordPress WYSIWYG 편집기는 무엇입니까?
#1 - 비주얼 작곡가
#2 - 사이트 원본 페이지 빌더
#3 - 디비 빌더
#4 - Elementor 페이지 빌더
#5 - 건축가 번창
#6 - 비버 빌더
#7 - 구텐베르그 워드프레스 에디터
요약 - 최고의 WordPress WYSIWYG 편집기
관련 기사

그렇다면 WordPress용 WYSIWYG 편집기가 필요한 이유는 무엇입니까?

결국 WordPress에는 기술적으로 WYSIWYG 편집기인 TinyMCE라는 편집기가 이미 번들로 제공됩니다.

여기에서 WYSIWYG 편집기가 의미하는 바는 페이지나 게시물을 만들 때 무엇을 얻는지 정확히 볼 수 있는 편집기라는 점을 분명히 해야 합니다.

TinyMCE를 사용하면 '저장'을 누르고 미리보기 전까지 출력이 어떻게 보일지 정확히 알 수 없습니다.

여기에서 검토한 WYSIWYG 편집자는 모두 실시간 프론트 엔드 편집을 허용합니다(Site Origin의 Page Builder 제외 – 자세한 내용은 아래 참조). 즉 , 페이지 또는 게시물을 편집할 때 페이지 에 표시되는 것과 동일한 최종 출력을 볼 수 있습니다.

그렇기 때문에 적절한 WYSIWYG 편집기(드래그 앤 드롭 편집기 또는 비주얼 편집기라고도 함)는 기사나 블로그 게시물을 빠르게 업로드해야 하는 바쁜 블로거에게 필수품입니다.

최근에 Site Origin의 Page Builder Premium에서 Thrive Architect로 사용하는 비주얼 편집기를 변경했습니다. 이사를 하기 전에 나는 꽤 많은 조사를 했습니다. 이들은 제가 고려한 경쟁자들이었습니다.

공개: 이 게시물의 링크 중 일부는 "제휴 링크"입니다. 즉, 링크를 클릭하고 항목을 구매하면 내가 제휴 수수료를 받게 됩니다.

최고의 WordPress WYSIWYG 편집기는 무엇입니까?

#1 - 비주얼 작곡가

Visual Composer는 가장 많이 판매되는 WordPress용 드래그 앤 드롭 페이지 빌더 중 하나입니다. 그것은 확실히 최고의 WordPress WYSIWYG 편집기의 경쟁자입니다.

그것은 완벽하게 작동하는 백엔드 및 프론트 엔드 편집기를 가지고 있으며 모든 WordPress 테마와 함께 작동합니다.

Visual Composer는 다음을 포함한 45개 이상의 콘텐츠 모듈과 함께 제공됩니다.

  • 포스트 그리드
  • 미디어 지원
  • 차트
  • 슬라이드 쇼 배경
  • 회전 목마 슬라이드쇼
  • 유튜브
  • 비메오
  • 자체 호스팅 비디오

Visual Composer의 다른 기능 중 일부는 다음과 같습니다.

  • 섹션, 행 및 열에 적용하기 쉬운 시차 배경 효과
  • 알파 채널을 지원하는 CSS 그라디언트 배경
  • 게시물, 페이지 및 사용자 정의 게시물 지원
  • WordPress 단축 코드 지원
  • 템플릿 시스템을 사용하면 사용자 정의된 디자인 요소를 템플릿으로 저장할 수 있습니다.
  • SEO에 최적화되어 귀하의 콘텐츠가 키워드 순위 측면에서 좋은 출발을 보입니다.
  • 모바일 장치에서 완벽하게 반응
  • 전체 개정 기록을 사용하면 작업의 이전 버전으로 빠르게 되돌릴 수 있습니다.
  • 기본 WordPress 위젯 지원
  • 사이드바 편집기
  • 헤더 편집기
  • 바닥글 편집기
  • 몇 초 만에 사이트에서 사이트로 Visual Composer 템플릿 마이그레이션
  • Gutenberg와 호환 - 페이지 레이아웃의 아무 곳에나 Gutenberg 블록 추가

간단히 말해서

기본 레이아웃에 적합합니다. 레이아웃과 UI는 그다지 직관적이지 않습니다. 다른 페이지 빌더에 비해 컨텐츠 요소가 많지 않습니다.

가격

  • 무료
  • 연간 $49부터 시작
비주얼 작곡가 받기

#2 - 사이트 원본 페이지 빌더

백만 건 이상의 활성 설치가 있는 Site Origin의 Page Builder는 가장 인기 있는 WordPress 페이지 빌더 중 하나입니다. 그 인기는 부분적으로 무료라는 사실 때문입니다(프리미엄 위젯 번들을 구입할 수 있지만).

다음은 몇 가지 기능입니다.

  • 모든 WordPress 테마와 함께 작동
  • 추가하는 각 열의 정확한 행 수를 선택하십시오.
  • 모든 기존 WordPress 위젯 사용
  • 반응형 디자인
  • 게시물, 페이지 및 사용자 정의 게시물 유형이 지원됩니다.
  • 업데이트 기록 도구를 사용하면 변경 사항을 취소할 수 있습니다.

Site Origin의 Page Builder는 무료이지만 다음과 같은 추가 기능이 포함된 Premium Widget Bundle($29)이 있습니다.

  • 아코디언
  • 블록 애니메이션
  • 문의 양식
  • 클릭 유도문안 위젯
  • 라이트박스
  • 시차 슬라이더
  • 사용후기

Site Origin Page Builder는 모든 WP 테마와 통합되므로 특정 테마를 사용하지 않습니다.

다른 WordPress 비주얼 편집기만큼 많은 스타일 옵션이 없습니다. 고급 스타일을 사용하려면 CSS에 익숙해야 합니다.

Site Origin에는 백엔드 및 프론트엔드 편집기가 있습니다. 그러나 프론트엔드 편집기는 여기에서 검토한 다른 wysiwyg 편집기만큼 발전되지 않았습니다.

best wordpress wysiwyg editor

사이트 원본 페이지 빌더 - 백엔드

프런트 엔드 편집기에서 변경한 사항은 즉시 표시되지 않습니다. 페이지가 다시 로드되는 동안 몇 초를 기다려야 합니다.

이것은 다른 편집자에 비해 투박한 느낌을 주고 새 블로그 게시물을 만드는 과정을 느리게 만듭니다.

best wordpress wysiwyg editor

사이트 원본 페이지 빌더 - 라이브 편집기

Site Origin Page Builder에서 발견한 또 다른 문제는 새 단락, 새 제목 또는 새 이미지와 같은 요소를 삽입하기에 적합한 위치를 찾기가 어렵다는 것입니다.

라이브 편집기에서는 왼쪽 패널에서만 요소(또는 모듈)를 추가할 수 있습니다. 그러나 왼쪽 패널에서 현재 위치를 아는 것은 매우 어렵습니다.

그들이 다음과 같은 기능을 추가했다면 좋을 것입니다. 오른쪽 패널의 요소 위로 마우스를 가져가면 자동으로 왼쪽 패널 아래로 스크롤하고 왼쪽 패널에서 관련 블록을 강조 표시합니다. 이렇게 하면 새 요소나 모듈을 삽입할 위치를 알 수 있습니다.

나는 1년 조금 전에 이에 대해 Site Origin Page Builder에 편지를 썼습니다. 그러나 그들은 분명히 그것을 기내에 가져 가지 않았습니다.

마지막 고려 사항:

Site Origin Page Builder를 제거하면 깨끗한 HTML과 단축 코드가 혼합되어 남습니다. 즉, Site Origin으로 만든 페이지는 다른 페이지 빌더에서 편집할 수 없습니다.

간단히 말해서

Site Origin의 Page Builder는 Elementor 및 Thrive Architect와 같은 리그에 있지 않습니다. 제 생각에는 '최고의 워드프레스 WYSIWYG 편집기'를 위해 달리고 있지 않습니다.

우선 '라이브 편집기'는 진정한 프론트엔드 편집기가 아닙니다. 편집할 때 변경 사항이 즉시 표시되지 않습니다. 편집할 때마다 페이지가 다시 로드되므로 시간 지연이 있습니다. 정말 느려집니다.

가격

  • Site Origin Page Builder는 무료로 다운로드할 수 있습니다.
  • Site Origin Premium은 연간 $29부터 시작합니다.
사이트 오리진 빌더 가져오기

#3 - 디비 빌더

Divi Builder는 원래 Elegant Themes의 Divi 테마의 일부였습니다. 그러나 이제는 모든 WordPress 테마와 함께 작동하는 독립 실행형 페이지 빌더입니다.

일부 기능은 다음과 같습니다.

  • 프런트 엔드 및 백 엔드 편집 모두
  • 완전 반응형 디자인
  • 게시물, 페이지 및 사용자 지정 게시물 지원
  • 46개의 페이지 빌더 모듈과 함께 제공
  • 빠르고 사용하기 쉬운
  • 다양한 레이아웃을 A/B 테스트할 수 있습니다.
  • 맞춤형 CSS 지원

간단히 말해서

500,000명 이상의 고객을 보유한 Divi Builder는 가장 인기 있는 WordPress 편집기 중 하나입니다. 다양한 종류의 웹사이트를 위한 20가지 이상의 다양한 레이아웃과 템플릿이 제공됩니다.

그러나 Divi Builder는 단축 코드에 크게 의존합니다. 즉, 다른 페이지 빌더로 전환할 수 없습니다. 실제로 Divi Builder를 사용하는 데 잠겨 있습니다. 이것은 심각한 단점이며 제 생각에는 최고의 WordPress WYSIWYG 편집기 경쟁에서 제거합니다.

가격

  • Divi Builder를 다운로드하려면 연간 $89인 우아한 테마의 회원이 되어야 합니다.
  • 또한 이를 통해 우아한 테마로 만든 모든 테마와 플러그인에 액세스할 수 있습니다. 나쁘지 않습니다!
Divi 빌더 받기

#4 - Elementor 페이지 빌더

Elementor Page Builder는 비교적 새로운 WordPress 비주얼 편집기(2016년 출시)이지만 이미 1,000,000개가 넘는 활성 설치가 있습니다.

그것은 스스로를 '세계 최고의 WordPress 페이지 빌더'라고 설명합니다.

내가 아는 한, 그것은 유일한 오픈 소스 WordPress 페이지 빌더입니다. 수천 명의 개발자가 테마, 추가 기능 및 기타 제품을 빌드하여 Elementor의 핵심 기능을 확장했습니다.

다음은 몇 가지 기능입니다.

  • 템플릿 시스템을 사용하면 레이아웃을 저장하고 웹사이트의 다른 곳에서 재사용할 수 있습니다.
  • 다른 WordPress 플러그인으로 만든 위젯을 추가할 수 있습니다.
  • 모든 산업 및 요구 사항에 맞게 설계된 300개 이상의 템플릿 제공
  • 진정한 프론트엔드 편집 - 편집할 때 페이지를 실시간으로 확인
  • 깨끗한 코드를 남깁니다(Elementor를 비활성화하는 경우)
  • Elementor의 Canvas로 전체 랜딩 페이지 디자인
  • 고급 아코디언, 슬라이더, 평가, 아이콘, 소셜 미디어, 탭 등에 대한 기본 이미지 및 텍스트 위젯을 포함한 80개 이상의 디자인 요소
  • 모든 WordPress 테마 및 플러그인과 함께 작동
  • 수정 기록을 사용하면 간단한 키 입력으로 실수를 빠르게 취소할 수 있습니다.
  • 페이지에 Facebook 게시물 및 동영상 포함
  • 반응형 모바일 친화적 디자인 지원
best wordpress wysiwyg editor

Elementor 프론트엔드 편집

간단히 말해서

이것은 가장 진보된 페이지 빌더 중 하나입니다. 최고의 WordPress 비주얼 편집기에 대한 약속으로 지속적인 개선을 확신할 수 있습니다.

큰 장점은 무료 버전이 유료 버전의 약 90%에 대한 액세스를 제공한다는 것입니다. 그러나 Elementor는 전환에 대한 초점이 부족하므로 마케터에게 최상의 선택이 아닙니다.

어떤 사람들은 의심할 여지 없이 Elementor를 최고의 WordPress WYSIWYG 편집기로 생각합니다. 그러나 초점이 웹 사이트에서 전환을 최대화하는 것이라면 제목은 Thrive Architect에 속한다고 생각합니다.

가격

  • 무료
  • $49의 일회성 수수료
엘리멘터 받기

#5 - 건축가 번창

이것은 내가 (Site Origin Page Builder에서) Thrive Architect로 이사했고 그것에 깊은 인상을 받았기 때문에 약간의 객관성을 잃을 수 있습니다!

Thrive Architect는 Thrive의 이전 페이지 빌더인 Thrive Content Builder를 기반으로 합니다.

Thrive Architect가 다른 시각 편집기와 차별화되는 점은 변환에 대한 초점입니다. 이것이 블로거와 마케터가 가장 좋아하는 이유입니다.

Thrive Architect는 모든 주요 이메일 마케팅 도구와 통합되는 사용자 정의 가능한 버튼, 평가, 카운트다운 타이머 및 리드 생성 양식과 함께 제공됩니다.

Thrive Leads를 이미 사용하고 있다면 버튼 클릭으로 옵트인 양식을 추가할 수 있습니다.

내가 절대적으로 좋아하는 Thrive Architect의 한 측면은 슬라이더로 이미지 크기를 조정할 수 있는 기능입니다(이전 페이지 빌더에서는 5 또는 6개의 고정 치수가 있었습니다).

Thrive Architect의 또 다른 멋진 옵션은 이미지 위에 착색된 레이어를 배치하는 기능입니다.

사람들의 관심을 끌고 싶다면 애니메이션 제목을 추가할 수 있습니다(아래 gif에서 두 가지 기술을 모두 사용했습니다).

best wordpress wysiwyg editor

Thrive Architect의 유형 집중 자동화

프론트 엔드 편집은 절대적인 기쁨입니다. 아마도 모든 비주얼 편집기 중 최고의 프론트 엔드 편집 경험일 것입니다.

best wp editor

내가 Thrive Architect에 대해 좋아하는 또 다른 점은 고급 그림자 컨트롤입니다.

저는 스크린샷 주위에 그림자를 배치하여 텍스트에서 눈에 띄도록 하는 것을 좋아합니다. 이전 편집기에서는 이 작업을 수행할 방법이 없었기 때문에 그래픽 응용 프로그램에 그림자를 추가했는데 시간이 많이 걸렸습니다.

Thrive Architect를 사용하면 클릭 한 번이면 됩니다!

best wordpress wysiwyg editor

Thrive Architect의 Drop Shadow 컨트롤

내가 Thrive Architect가 변환을 전문으로 한다고 말한 것을 기억하십니까?

Thrive Architect에 강력한 랜딩 페이지 빌더가 포함되어 있다는 것은 놀라운 일이 아닙니다.

다음은 방문 페이지에 추가할 수 있는 기성품(그러나 사용자 정의 가능) 섹션입니다.

  • 사회 증명/평가 섹션
  • 영웅 이미지 섹션
  • CTA 섹션
  • 기능 섹션
  • 작동 방식 섹션
  • 보너스 섹션
  • 보증 섹션
  • 판매 유입경로

다음은 Thrive Architect의 다른 기능 중 일부입니다.

  • 모바일 친화적인 반응형 디자인
  • 내장 템플릿 시스템을 사용하면
  • 레이아웃 저장 및 로드
  • 개정 내역 및 실행 취소 및
  • 다시 실행 버튼으로 수정
  • 바람을 바꾸다
  • 스타일 글머리 기호
  • 목록(이와 같은 것)
  • 기능 그리드(이미지 또는 아이콘 포함)
  • 동적 카운트다운 타이머
  • 옵트인 양식
  • 페이지 이벤트 - 특정 트리거를 기반으로 라이트박스 팝업 표시

Thrive Themes 팀은 지속적으로 Thrive Architect에 새로운 기능을 추가하고 있습니다. 그리고 이것은 이 WordPress 편집기가 계속해서 최고의 WordPress용 WYSIWYG 편집기임을 보장합니다.

간단히 말해서

Thrive Architect는 마케팅 담당자 또는 방문자를 구독자 또는 고객으로 전환하려는 모든 사람에게 이상적인 페이지 빌더입니다. Thrive Architect는 변환을 전문으로 하며 내가 알고 있는 다른 페이지 빌더보다 더 많은 변환 도구를 가지고 있습니다. Thrive Architect는 모양과 느낌 측면에서 종종 Elementor와 비교됩니다. 그러나 나는 Elementor의 UI보다 Thrive Architect의 UI를 선호합니다. 제 생각에는 Thrive Architect가 최고의 WordPress WYSIWYG 편집기입니다.

가격

Thrive Architect는 분기당 $90인 Thrive Suite의 일부입니다.

건축가를 번창하세요

#6 - 비버 빌더

500,000개 이상의 활성 설치가 있는 Beaver Builder는 가장 인기 있는 WordPress 페이지 빌더 중 하나입니다. 또한 사용하기 가장 쉬운 방법 중 하나이므로 초보 블로거에게 탁월한 선택입니다.

다음은 Beaver Builder가 제공하는 몇 가지 기능입니다.

  • 모든 WordPress 테마와 함께 작동
  • 실시간 프런트 엔드 편집 – 변경 사항을 확인합니다.
  • WordPress 위젯 및 단축 코드 지원
  • 사용자 정의 CSS 클래스 및 ID 지원
  • Beaver Builder를 제거하면 콘텐츠가 기본 WP 편집기로 전송됩니다.
  • 모바일 기기에 최적화
  • 수십 개의 미리 만들어진 페이지 템플릿과 함께 제공
  • 슬라이더, 캐러셀, 배경, 콘텐츠 블록, 버튼 등을 위한 모듈 제공

나는 말해야 한다; Beaver Builder의 사용자 인터페이스는 Elementor 또는 Thrive Architect에 비해 약간 기본적으로 보입니다.

간단히 말해서

Beaver Builder는 익숙해지는 데 필요한 학습 곡선이 없기 때문에 초보자에게 훌륭한 옵션입니다. 다른 페이지 빌더만큼 많은 모듈을 제공하지 않습니다. 플러스 측면에서, WordPress 편집기로 되돌리고 싶다면 Beaver Builder는 100% 깨끗한 코드를 남깁니다. 따라서 WordPress 편집기 및 대부분의 다른 페이지 빌더에서 이전 게시물을 편집할 수 있습니다.

가격

  • 첫해 $99 이후 40% 할인된 가격으로 갱신
비버 빌더 받기

#7 - 구텐베르그 워드프레스 에디터

WordPress는 항상 자체 사전 설치된 편집기와 함께 제공됩니다. 그러나 WordPress는 최근 Gutenberg라는 완전히 새로운 완전 무료 드래그 앤 드롭 편집기를 출시했습니다.

Gutenberg는 매우 깨끗하고 직관적인 사용자 인터페이스를 제공합니다.

best wordpress wysiwyg editor

구텐베르크 에디터 UI

Gutenberg를 설치하면 기본 편집기가 됩니다. 선택하지 않아도 됩니다.

구텐베르크 편집기는 '더하기' 기호를 클릭하여 페이지 또는 게시물에 삽입하는 블록을 기반으로 작동합니다.

best wordpress wysiwyg editor

구텐베르크 에디터 UI

Gutenberg는 WordPress와 함께 사전 설치된 오픈 소스 TinyMCE 편집기에서 크게 발전했지만 유료 페이지 빌더에서 얻을 수 있는 고급 기능 중 일부는 여전히 부족합니다.

다음은 Gutenberg와 함께 제공되는 블록 샘플입니다.

  • 콘텐츠 요약 블록
  • 고급 목록 블록
  • 버튼 블록
  • 이미지 블록
  • 고급 비디오 블록
  • 목차 블록
  • Google 지도 차단
  • 고급 테이블 블록
  • 아코디언 블록
  • 평가 블록
  • 소셜 링크 차단

깨끗하고 깔끔한 인터페이스가 마음에 들긴 했지만 몇 가지 버그를 발견했습니다(사용 중인 버전에서).

  • 구텐베르크 내에서 퍼머링크를 수정하기 어려웠습니다.
  • 글머리 기호 목록은 자체 블록 내에 있어야 합니다. 그렇지 않으면 블록 내의 전체 텍스트가 글머리 기호로 바뀝니다.

나는 여기서 Gutenberg가 잘 검토되지 않았다는 것을 언급해야 합니다. 공식 WordPress 사이트에서 Gutenberg 편집기는 1791개의 리뷰를 받았으며 평균 별점은 5점 만점에 2.2점입니다.

간단히 말해서

Gutenberg는 우아하고 깔끔한 드래그 앤 드롭 페이지 빌더입니다. 그러나 위에서 검토한 페이지 빌더와 경쟁하기 전에 더 많은 작업이 필요합니다. 물론 무료지만 Site Origin, Elementor 및 Visual Composer는 모두 완벽하게 작동하는 무료 버전을 제공합니다.

가격

  • 무료(WordPress에 포함)

요약 - 최고의 WordPress WYSIWYG 편집기

새로운 WordPress 페이지 빌더를 검색할 때 내가 찾던 주요 기능은 다음과 같습니다.

  • 사용하기 쉬운 인터페이스
  • 진정한 프런트 엔드 편집(즉, 페이지를 편집할 때 변경 사항을 즉시 확인)
  • 모바일 장치에서 완벽하게 반응
  • 모든 WordPress 테마와 함께 작동
  • 모든 기본 WordPress 위젯 지원
  • 사용자 정의된 요소 및 레이아웃을 저장하고 재사용할 수 있는 템플릿 시스템
  • 이전 버전으로 빠르게 되돌릴 수 있는 업데이트 기록
  • 목차 모듈
  • 맞춤형 CSS 지원
  • 깨끗한 코드를 남깁니다.

Elementor와 Thrive Architect는 가장 발전된 두 WordPress 페이지 빌더인 것 같았고 둘 다 내 최소 요구 사항 목록을 충족했습니다.

나는 두 가지 이유로 Thrive Architect를 선택하게 되었습니다.

이유 #1

Thrive Architect에서 페이지를 편집할 때 모듈은 화면의 한 쪽에 있고 각 모듈에 대한 컨트롤은 화면의 다른 쪽에 있습니다.

그러나 Elementor에서는 모듈과 컨트롤이 화면의 같은 쪽에 있습니다.

이것은 Thrive Architect에서보다 Elementor에서 더 많은 클릭을 수행한다는 것을 의미합니다. Elementor에서 단락, 제목 또는 이미지의 스타일 지정이 끝나면 뒤로를 클릭하여 모듈 메뉴로 이동해야 합니다.

Thrive Architect에서 모듈은 여전히 ​​화면 반대편에 있습니다.

이유 #2

대부분의 블로거와 마찬가지로 저는 방문자를 구독자로(그리고 궁극적으로 고객으로) 전환하려고 합니다.

전환에 대한 Thrive Architect의 초점은 저에게 결정적인 요소였습니다. Thrive Architect에는 다른 WordPress 페이지 빌더보다 더 많은 변환 관련 모듈이 있습니다.

관련 기사

  • 최고의 블로그 게시물 형식 – 온라인 콘텐츠 형식 지정을 위한 19가지 팁
  • 블로그 게시물을 구성하는 방법 - 13가지 핵심 요소
  • 첫 블로그 게시물 작성 방법