구텐베르크 대 Elementor: 챔피언 간의 전투

왜 대부분의 사람들은 Tesla에 대해 광고하면서 Lamborghini를 구입합니까? 

글쎄요, 람보르기니의 프리미엄과 테슬라의 실제 SF 중에서 하나를 선택하기는 어렵죠?

정확히!

WordPress Gutenberg와 Elementor 또는 Elementor와 Gutenberg 페이지 빌더 플러그인을 비교하면 다음과 같은 느낌이 듭니다! 둘 다 자신의 분야에서 무패의 챔피언입니다.

WordPress는 WordPress 5에서 이전 TinyMCE 편집기를 삭제하고 Gutenberg를 도입했습니다. 그 인기는 두 가지 질문을 제기합니다. 구텐베르크는 과대광고할 가치가 있습니까?

Elementor를 대체할까요?

WordPress 페이지 빌더에 대해 걱정하지 마세요! 사용자는 Gutenberg와 Elementor가 어떻게 비교되는지 궁금해합니다. 최신 버전을 비교해보았습니다. 갑시다…

빠른 소개

WordPress 사용자라면 이미 Gutenberg와 Elementor에 익숙할 것입니다. 그래도 혼란을 해소하기 위해 Gutenberg와 Elementor에 대한 간단한 소개를 보여 드리겠습니다. 

구텐베르크란 무엇인가?

Gutenberg는 WordPress 웹사이트에 있는 새로운 블록 편집기(텍스트 기반)의 코드 이름입니다. WordPress 5에서 처음 소개되었습니다. 2017년 유럽 워드캠프 매트 멀렌웨그 지음. 아름다운 콘텐츠 레이아웃을 디자인할 수 있는 매우 강력한 블록 편집기입니다. 

음, 이전 TinyMCE 편집기를 사용하여 전체 웹페이지를 디자인할 수도 있습니다. 그러나 전체 웹페이지 콘텐츠는 거대한 HTML 파일 안에 있습니다.

모든 텍스트, 맞춤 게시물, 위젯, 단축 코드, 기타 내용이 하나의 파일에 포함되어 있습니다. 그것은 완전한 전문 용어를 생성할 뿐이며 쉽게 제거할 수 없습니다.

반대로 구텐베르크는 블록 에디터로 내용을 처리한다. 다양한 요소에 대해 다양한 블록을 사용할 수 있습니다.

일반적인 블록으로는 머리글 및 바닥글 작성기, 제목, 단락, 인용문, 목록, 단축 코드, 이미지, 갤러리, 버튼 등이 있습니다. 모든 블록에는 자체 레이아웃 설정이 포함되어 있습니다.

어떤 블록을 선택하든 요구 사항에 따라 레이아웃을 사용자 정의할 수 있습니다.

구텐베르크와 함께 일하는 것은 마치 레고 세트를 만드는 것과 같은 느낌입니다. 간단하고 표준화된 순서로 블록을 장식하고 웹페이지를 만드세요.

가장 중요한 점은 나중에 사용할 수 있도록 이러한 레이아웃 설정을 저장할 수 있다는 것입니다. 정말 멋지지 않나요?

실제로 다양한 Gutenberg 페이지 빌더를 사용하여 더 많은 사용자 정의 옵션을 얻을 수 있습니다.

엘리멘터란 무엇인가요?

엘레멘터 WordPress용 드래그 앤 드롭 페이지 빌더입니다. Elementor는 코딩 지식 없이도 고급 레이아웃이나 복잡한 스타일로 웹페이지를 디자인하는 데 주로 인기가 있습니다.

가장 중요한 것은 Elementor pro를 사용하여 완전한 WordPress 테마를 만들 수 있다는 것입니다. 

Elementor에는 다음과 같은 기능이 탑재되어 있습니다. 내장된 콘텐츠 레이아웃, 위젯 및 맞춤형 디자인. 따라서 Elementor를 사용하는 동안 처음부터 웹사이트를 구축할 필요가 없습니다.

그 대신 전문가가 귀하의 사이트에 맞게 구축한 사전 제작된 디자인과 요소를 통합할 수 있습니다. 

게다가 Elementor의 드래그 앤 드롭 기능을 사용하면 웹 사이트 구축 프로세스를 이전보다 더 쉽게 관리할 수 있습니다. 요소를 선택하고 페이지에 끌어서 놓으면 웹사이트에 실시간 변경 사항이 표시됩니다.

구텐베르크 대 Elementor 페이지 빌더: 주요 기능

Elementor와 Gutenberg 비교를 시작하기 전에 이 두 가지에 대한 명시적인 지식이 있어야 합니다. 나는 당신이 이미 그것을 가지고 있다는 것을 알고 있습니다. 하지만 그걸 다듬어 보겠습니다!

구텐베르크의 주요 특징

Gutenberg의 궁극적인 목표는 다양한 블록으로 완전한 웹페이지를 만드는 것입니다. 이를 위해 Gutenberg 플러그인 개발자는 웹페이지 디자인에 필요한 거의 모든 것을 통합합니다.

구텐베르크의 몇 가지 멋진 기능을 살펴보겠습니다.

• 구텐베르크는 모바일 장치에서 원활하게 작동합니다.
• 코드 없이 전체 사이트 편집이 가능합니다.
• 기본 머리글 및 바닥글 작성기
• 다중 열 레이아웃을 생성할 수 있습니다.
• 드래그 앤 드롭 편집기를 사용하여 게시물, 페이지 또는 사용자 정의 콘텐츠 만들기
• 다양한 섹션에 텍스트, 이미지, 표, 버튼, 블록을 사용할 수 있습니다.
• 블록은 사용자의 편의를 위해 고도로 맞춤화 가능
• Facebook 및 Twitter 게시물, YouTube 비디오, Instagram 사진 등에 대한 콘텐츠 삽입 기능
• 다른 편집기보다 비교적 빠르게 작동합니다.

그러나 Matt Mullenweg는 다음을 설명하면서 몇 가지 추가 기능을 추가했다고 말했습니다. 구텐베르크 로드맵 WordCamp Europe 2020에서. 한 번 보세요!

사람들은 왜 구텐베르크를 좋아합니까?

이제 사람들이 구텐베르크에 열광하는 핵심 이유를 공유하겠습니다.

1. 편안 – 편안함을 위해 페이지 빌더로서 구텐베르크를 능가하는 것은 없습니다. 블로거에게 세련된 인터페이스와 보다 원활한 글쓰기 경험을 제공합니다. TinyMCE와 달리 Gutenberg는 더 직관적입니다. 사용자는 특정 블록을 끌어서 놓는 것만으로 모든 작업을 수행할 수 있습니다.

2. 잘 짜여진 – 구텐베르그 블록은 웹 페이지 요소를 잘 관리하고 체계적으로 유지합니다. 마치 처음부터 건물을 짓는 듯한 느낌이 듭니다. 블록을 암석, 모래, 점토와 같은 핵심 성분으로 생각하세요. 이를 사용하여 웹페이지를 구축하세요. 

3. 서식 지정 – Gutenberg는 원하는 대로 제품이나 페이지 섹션의 형식을 지정할 수 있는 기능을 제공합니다. 몇 가지 핵심 서식 기능으로는 텍스트 설정, 블록 정렬, 배경색, 텍스트 색상, 여백, 패딩 등이 있습니다.

4. 간단한 레이아웃 – Gutenberg에는 콘텐츠 편집기 중에서 가장 간단한 레이아웃 디자인 중 하나가 포함되어 있습니다. 구텐베르크 개발자들은 불필요한 기능이나 요소를 많이 넣지 않았습니다. 그건 그렇고, 필요한 모든 블록을 사용할 수 있습니다. 눈길을 끄는 웹사이트를 디자인하는 데 그 이상이 필요하지 않습니다.

5. 추적 – 오른쪽 사이드바 패널을 통해 일일 작업을 추적할 수 있습니다. 해당 패널에서 필요한 모든 정보를 얻을 수 있습니다.

6. 메타데이터 – Gutenberg를 사용하여 페이지 속성, 카테고리, 기능 이미지, 발췌 또는 기타 토론을 확인할 수 있습니다. 개정판과 콘텐츠 상태도 추적할 수 있습니다!

7. 무료입니다 – 다른 편집자들과 달리 구텐베르그 편집기를 사용하기 위해 힘들게 번 돈을 지불할 필요가 없습니다. 프리미엄도 프리미엄도 아니며 완전히 무료로 이용할 수 있습니다!

8. 페이지 빌더 옵션 – 네, 잘 들으셨습니다. 이제 기본 편집기와 함께 Gutenberg 페이지 빌더를 사용할 수 있습니다. 다양한 브랜드에서 흥미로운 기능을 갖춘 새로운 플러그인을 선보이고 있습니다.

결국 이는 블로거의 블로깅 경험을 향상시킨 괜찮은 블록 편집기입니다. 

엘리멘터의 주요 특징

이제 Elementor가 웹 페이지 디자인에 가장 인기 있는 플랫폼이 된 이유를 확인할 시간입니다.

• 코드 한 줄도 작성하지 않고도 시각적으로 멋진 웹페이지를 디자인할 수 있습니다.
• 드래그 앤 드롭만으로 고기능 웹사이트 개발이 용이
• 기성 템플릿의 풍부한 라이브러리
• 여러 열과 복잡한 레이아웃 사용 가능
• 30개 이상의 기성 요소에 접근 가능(요소는 구텐베르크 블록과 유사)
• 여백, 패딩, 간격 등을 쉽게 제어할 수 있습니다.
• 섹션 및 위젯에 대한 추가 스타일
• 홈페이지의 머리글, 바닥글, 본문을 고유하게 디자인할 수 있습니다.
• 이미지 캐러셀, 지도, 아코디언 탭, 슬라이드, 가격 목록, 포럼 등과 같은 고급 요소
• WooCommerce, WP ERP 또는 기타 다중 공급업체 마켓플레이스 솔루션과 같은 전자상거래 플러그인과 통합 가능 

간단히 말해서 Elementor는 콘텐츠에 고급 스타일, 프리미엄 디자인 또는 맞춤형 레이아웃을 갖춘 웹사이트를 디자인하는 완벽한 솔루션입니다. 

Elementor 페이지 빌더를 선택해야 하는 이유는 무엇입니까?

Elementor 페이지 빌더의 주요 기능에 대한 아이디어를 얻었을 것입니다. 그러나 Elementor를 사용하여 웹 페이지를 디자인하는 주요 이유는 무엇입니까? 음, 이유는 다음과 같습니다.

1. 사용자 커뮤니티 – Elementor는 거대한 팬 기반뿐만 아니라 거대한 지원 그룹도 보유하고 있습니다. 가장 중요한 것은 Elementor 사용자가 꽤 전문적으로 서로를 돕는다는 것입니다. 지원 그룹에 질문을 올리기만 하면 문제가 상당히 빨리 해결될 것입니다. 
   공식 회원 수는 약 10만 명이 넘습니다. 엘리멘터 페이스북 커뮤니티. 때로는 Facebook 커뮤니티에서 문제를 해결하는 데 30분도 채 걸리지 않습니다. 

2. 비디오 튜토리얼 – 연구에 따르면 72%의 사람들 비디오 튜토리얼을 통해 제품이나 서비스에 대해 배우는 것을 선호합니다. 그리고 나는 Elementor가 이것을 매우 진지하게 받아들였다고 생각합니다. Elementor를 Gutenberg와 비교하면 Elementor에는 더 많은 비디오 리소스가 있습니다.
   그들은 공식 YouTube 채널에 많은 비디오 튜토리얼을 업로드합니다. 모든 일반적인 문제에 대해 해당 채널에서 비디오 튜토리얼을 얻을 가능성이 큽니다.
   그러므로 다른 사람에게 도움을 구할 필요가 없습니다. Elementor 비디오 제작자는 이미 문제를 해결하기 위해 비디오를 촬영하고 자신의 채널에 게시했을 수도 있기 때문입니다. 그냥 확인해 보세요!

3. 모든 WordPress 테마에 적합 – Elementor는 타사 플러그인이므로 테마와의 호환성을 고려할 수 있습니다. 다행히도 Elementor WordPress 페이지 빌더를 사용하는 동안 그것에 대해 생각할 필요가 없습니다.
   Elementor는 거의 모든 WordPress 테마와 잘 어울립니다. 그 외에도 테마에 더 많은 기능을 추가합니다! 다음은 일부입니다. Elementor를 위한 최고의 테마 시도해 볼 수 있습니다.

4. 엘리멘터 애드온 – Elementor는 그 자체로 완전한 웹페이지를 디자인하는 데 필요한 많은 기능을 제공합니다. 그러나 Elementor에 대한 더 많은 기회를 잠금 해제하기 위해 다른 많은 애드온을 추가할 수도 있습니다. 가장 인기 있는 애드온은 다음과 같습니다. ElementsKit, ShopEngine, MetForm, 필수 애드온, 악어 블록, 등. 
   ElementsKit은 기능이 가득한 Elementor 애드온입니다. 머리글 바닥글 작성기, 메가 메뉴 작성기, 로티 애니메이션, 시차 효과 등과 같은 몇 가지 강력한 기능이 포함되어 있습니다. ElementsKit을 사용하면 미리 디자인된 수많은 요소를 얻을 수 있습니다.

있다 500개 이상의 준비된 섹션, 30개 이상의 준비된 페이지, 70개 이상의 요소, 45개 이상의 내장 헤더 바닥글 '설치' 버튼을 클릭해야만 마음에 드는 디자인을 웹페이지로 가져올 수 있습니다. 몇 초 이상이 필요하지 않습니다. 

러브 엘리멘터와 구텐베르그 비교? ElementsKit으로 Elementor의 더 많은 기능을 잠금해제하세요.

5. 개정판 추적 – 작은 실수로 인해 전체 웹사이트가 망가질 수 있습니다! 따라서 대부분의 웹마스터는 웹사이트 변경을 주저합니다. 하지만 개정 내역 섹션을 사용하면 이러한 두려움을 극복할 수 있습니다.
   개정 내역은 실수를 취소하는 데 도움이 됩니다. 실수를 했다면 이전 세션으로 돌아가면 됩니다. 이는 잘못된 방향을 바꾸는 데 도움이 될 것입니다.

6. 정품 WYSIWYG – Elementor는 전면 패널에서 작동합니다. 그래서 '보이는 대로 얻는다'는 진정한 느낌을 즐길 수 있습니다.
   웹페이지에 많은 변경 사항을 적용하고 전면 패널에서 이를 추적할 수 있습니다. 단일 조정을 수행한 후 변경 사항을 미리 보는 번거로움을 제거합니다.

전반적으로 WordPress 페이지 빌더인 Elementor에는 수많은 레이아웃과 기타 옵션이 포함되어 있습니다. 이것은 Elementor의 주요 기능입니다.

구텐베르크 대 엘리멘터: 주요 차이점

지금까지 당신은 이미 Gutenberg와 Elementor에 대한 명확한 지식을 갖고 있습니다. Gutenberg와 Elementor는 동일한 목적으로 사용되지만 여전히 많은 차이점이 있습니다.

이 섹션에서는 WordPress 편집기와 Elementor 편집기의 주요 기능을 살펴보겠습니다. 의 시작하자. 

1. 드래그 앤 드롭 기능

Elementor는 드래그 앤 드롭 기반 페이지 빌더입니다. 콘텐츠에 드래그하여 모든 블록이나 위젯을 사용할 수 있습니다. 다른 블록 내에 여러 열을 만들 수도 있습니다. 가장 중요한 점은 Elementor를 통해 시각적으로 높이와 너비를 조정할 수도 있다는 것입니다. 

반면에 Gutenberg는 드래그 앤 드롭 기능을 지원하지 않습니다. 블록을 사용하여 많은 사용자 정의를 수행할 수 있습니다. 하지만 해당 블록을 수동으로 입력해야 합니다. 그러나 블록의 높이와 너비는 변경할 수 없습니다.

또 다른 주요 문제는 행과 열로 구성된 복잡한 레이아웃을 사용자 정의할 수 없다는 것입니다. (구텐베르크 개발자들은 그것에 대해 진지하게 생각해야 합니다!)

2. 실시간 편집

글쎄, 당신은 구텐베르크도 WYSIWYG 편집자라고 말할 수 있습니다. 논쟁의 여지가 있으니 고개를 끄덕이겠습니다. 그러나 구텐베르그는 WYSIWYG의 정통적인 느낌을 제공할 수 없습니다. 웹페이지에 무엇을 추가하든 '미리보기' 버튼을 클릭하여 변경사항을 추적해야 합니다. 

미리보기는 실제로 그렇게 나쁘지는 않습니다! 이미지 픽셀을 완벽하게 만들기 위해 버튼을 약 50번 클릭해야 한다고 상상해 보세요. 마치 귀하의 웹사이트를 방문한 것 같은 느낌이 듭니다!

반대로 Elementor는 그와 정반대입니다. 사이트에서 변경한 내용이 즉시 표시됩니다. 프런트 엔드에서 모든 변경 작업을 수행할 수 있습니다. 시간을 절약할 뿐만 아니라 에너지도 절약할 수 있습니다.

3. 백엔드와 프런트엔드 편집

Gutenberg는 주로 백엔드 편집기입니다. Gutenberg에서 게시물을 편집하는 동안에는 디자인의 실시간 미리보기를 볼 수 없습니다. 디자인을 확인하시려면 '미리보기' 버튼을 클릭하셔야 합니다. 그렇지 않으면 편집기에 적용한 변경 사항에 대해 아무것도 알지 못한 채 모든 작업을 수행해야 합니다.

그러나 전문가는 편집기에서 작업하는 동안 스스로 변경 사항을 추적할 수 있습니다. 그러나 대중은 변화를 쉽게 추적할 수 없습니다. 이것이 바로 우리와 같은 웹마스터에게 필수적인 기능인 이유입니다.

반대로 Elementor는 이 섹션에서 꽤 잘 수행됩니다. Elementor는 웹페이지의 모든 변경 사항에 대한 실시간 미리보기를 제공합니다. Elementor 사용자는 전면 패널에서 변경 사항을 작성하므로 상대적으로 디자인을 확인하기가 더 쉽습니다.

4. 고급 서식

Gutenberg와 Elementor는 모두 사용자에게 고급 서식 설정을 제공합니다. 그러나 서식 스타일은 둘 다 동일하지 않습니다. 

Gutenberg 편집기를 사용하면 사용자는 텍스트, 이미지, 목록 등을 사용자 정의하는 것과 같은 일부 고급 조정을 수행할 수 있습니다. 중요한 사용자 정의를 원하는 경우 선택한 블록에 사용자 정의 CSS를 추가해야 합니다. 

그러나 Elementor의 서식 지정은 Gutenberg보다 상대적으로 쉽습니다. 전면 패널에는 모든 단일 서식 스타일이 있습니다. 따라서 블록의 형식을 지정하고 슬라이딩을 통해 높이나 너비를 변경할 수 있습니다. 텍스트 색상, 배경색, 이미지, 스타일, 글꼴 아이콘 등을 변경하는 것과 같은 몇 가지 고급 형식을 제공합니다.

5. 페이지 속도

속도는 구텐베르크가 완전히 흔들리는 구간입니다! 

Elementor는 수많은 사용자 정의 기능을 제공하므로 더 많은 데이터를 포함합니다. 그러나 더 많은 기능이 항상 좋은 것은 아닙니다. 단일 웹페이지에서 모든 데이터를 사용하지는 않습니다. 그러나 여전히 해당 데이터는 웹페이지와 함께 로드되어 페이지 속도를 느리게 만듭니다. 

하지만 페이지 로딩 속도는 가장 중요한 것 중 하나입니다. Google의 순위 요소 2018년부터. 그래서 속도가 느려질수록 요소 페이지 속도 검색엔진에서 상위에 오르는 것이 부담이 될 것입니다.

가능한 한 빨리 웹페이지를 로드해야 합니다. 그리고 Gutenberg를 기본 편집자로 사용하여 이 목표를 달성할 수 있습니다. 아시다시피 Gutenberg는 Elementor보다 비교적 빠르게 로드됩니다.

6. 민감도

그 이상이라는 사실을 알면 놀랄 수도 있습니다. 52% 명 모바일 장치를 사용하여 인터넷을 탐색합니다. 그리고 원하는 정보를 찾을 수 없으면 즉시 귀하의 사이트를 떠날 것입니다. 따라서 잠재 고객을 잃게 됩니다. 

그렇기 때문에 테마를 현명하게 선택해야 합니다. 안타깝게도 블록 편집기는 특정 화면에 맞게 콘텐츠를 조정할 수 없습니다. WordPress 테마에 따라 다르지만 편집기도 테마에 큰 영향을 미칩니다. 

반면 Elementor를 사용하면 콘텐츠가 다른 장치에 표시되는 방식을 제어할 수 있습니다. 반응성을 유지하여 다양한 요소에 추가 스타일을 추가할 수도 있습니다. 여백, 패딩, 정렬, 콘텐츠 크기, 콘텐츠 순서 등을 선택하는 사용자 정의 옵션은 거의 없습니다.

엘리멘터 대 구텐베르크: 어느 것을 사용해야 합니까?

글쎄, 우리는 Gutenberg와 Elementor의 기능과 차이점을 설명했습니다. 하지만 진짜 질문은 어떤 것을 일일 운전자로 사용해야 하느냐는 것입니다.

글쎄, 그것은 당신의 취향에 달려 있습니다!

희생하고 싶다면 귀하의 페이지 속도 더 많은 기능을 사용하려면 Elementor를 선택해야 합니다. 그렇지 않으면 Gutenberg는 모든 웹사이트에서 꽤 잘 작동합니다.

그러나 보다 간단한 레이아웃 디자인을 선호한다면 Gutenberg가 기본 선택이 될 것입니다. 하지만 기본 기능만 사용해야 합니다. 구텐베르크 페이지 빌더를 구입하는 데 비용이 너무 많이 듭니다. 기능이 가득한 인터페이스를 얻으려면 Elementor를 선택하십시오. 

선택은 당신의 것입니다! 

아직도 혼란스러워요? 좋은 소식이 있어요!

우리 모두 알고 있듯이 WP에는 기본 WordPress 편집기가 없습니다. 따라서 Gutenberg와 Elementor 중 하나를 선택할 수 없다면 둘 다 사용하세요!

예! 

Gutenberg와 Elementor WordPress 페이지 빌더는 모두 웹 사이트에서 동시에 작동합니다. Elementor를 Gutenburg와 함께 사용하여 기능성과 단순성을 함께 즐겨보세요!

엘리멘터 대 구텐베르크: 최종 평결

자, 여기 있습니다! 

방금 Gutenberg와 Elementor 페이지 빌더의 비교를 완료했습니다. 그렇다면 Elementor와 Gutenberg 사이의 의견은 무엇입니까? 이 두 가지를 비교하는 것이 배트맨과 슈퍼맨을 비교하는 것과 같다는 것을 이미 알고 계실 것입니다.

둘 다 나름의 중요한 장점과 약간의 단점이 있습니다. 이 기사에서는 그 모든 것을 적절하게 분석했습니다. 원하는 것을 선택하는데 도움이 되었으면 좋겠습니다. 

하지만 여전히 이러한 편집자에 대해 혼동이 있는 경우 댓글 상자를 통해 공유해 주세요. 기꺼이 도와드리겠습니다. 

귀하의 웹사이트에 행운이 있기를 바랍니다!