WordPress에서 Elementor Page Builder를 사용하는 방법

WordPress 페이지 빌더에 대해 이야기할 때 가장 인기 있고 활성 설치 수가 가장 많고 커뮤니티가 가장 큰 페이지 빌더는 단연 Elementor입니다. 지금까지 Elementor로 구축된 약 8백만 개 이상의 사이트가 있습니다. WordPress 사이트를 구축할 때 사용 용이성, 속도 및 엄청난 가능성을 위해 많은 전문가가 권장합니다.

Elementor의 Pro 버전을 테스트하고 랜딩 페이지를 구축했습니다. 끌어서 놓기 기능이 제공되며 모든 테마와 함께 작동하며 모든 무료, Pro 및 WordPress 위젯을 동시에 사용할 수 있습니다. 이 기사를 읽고 WordPress를 사용한 Elementor 설치 및 구성에 대해 자세히 알아보겠습니다.

Elementor Page Builder를 선택하는 이유는 무엇입니까?

Elementor는 현재 시장에 출시된 최초이자 가장 진보된 WordPress 페이지 빌더 중 하나입니다. 또한 주변에 거대한 생태계가 있으며 많은 소규모 작성자가 최종 결과에 필요한 시간을 줄이는 데 사용할 수 있는 유용한 추가 기능과 템플릿을 구축하고 있습니다.

Elementor의 경우 최종 결과는 필요하거나 필요할 수 있는 모든 기능으로 잘 설계된 정말 멋진 사이트가 될 수 있습니다. Elementor를 사용하여 구축할 수 없는 WordPress 사이트 유형은 찾을 수 없습니다. 추가 기능이 필요한 경우 단축 코드로 쉽게 구현할 수 있습니다.

Elementor Page Builder의 기능

Elementor의 무료 버전에는 제한된 수의 요소가 포함되어 있지만 Pro 버전을 사용하면 QI, Ultimate Add Ons 등과 같은 추가 기능을 얻을 수 있습니다. 게다가 사이트를 쉽게 구축할 수 있는 유용한 요소와 템플릿이 많이 있습니다. .

기본 Elementor의 기능을 확장하므로 대부분의 Elementor 사용자가 가장 좋아하는 도구 중 하나인 Gutenberg 및 Elementor용 Crocoblock 애드온을 제외하는 것은 공정하지 않습니다.

Elementor는 기능을 4가지 범주로 나눴습니다.

1. 기본 위젯

기본 위젯은 무료 버전과 함께 제공되며 목차, 포트폴리오 또는 양식과 같은 고급 옵션이 필요하지 않은 멋진 웹 사이트를 구축하기에 충분합니다. 또한 무료 버전에서는 헤더/내비게이션 메뉴를 만들 수 없으며 원하는 탐색 메뉴가 있는 멋진 WordPress 테마를 찾아야 할 수도 있습니다.

2. 프로 위젯

Elementor Pro가 포함된 Pro 위젯은 거의 모든 측면과 모든 종류의 웹사이트를 구축하는 데 필요한 모든 위젯을 다루고 있습니다. 다양한 카테고리, 게시물 유형에서 게시물을 추가 및 선택하거나 최신 게시물, 가격표, 갤러리, 플립 박스, Easy Social Media Networks 내장, 다양한 미디어 캐러셀, Lottie Widget 및 HotSpot을 나열합니다(이 항목에 대해서는 나중에 설명하겠습니다).

3. 테마 요소

Theme Elements는 Elementor Pro와 함께 제공되며 물론 모든 템플릿 페이지와 단일 게시물 템플릿을 구축하는 데 중요합니다. 아시다시피 카테고리, 태그, 작성자 등과 같은 콘텐츠로 동적으로 채워지는 페이지가 있습니다.

해당 페이지의 경우 테마 요소를 사용하여 템플릿을 만들어야 합니다. Single Post의 경우에도 마찬가지입니다. 여기에서 매번 만들 필요 없이 모든 게시물에서 사용할 멋진 템플릿을 디자인할 수 있습니다. 익숙한 대로 콘텐츠를 추가하기만 하면 됩니다.

4. WooCommerce 위젯

마지막으로 WooCommerce 위젯입니다. 이 위젯을 사용하면 WooCommerce 요소를 사용하여 쉽게 테마 빌더, 템플릿 페이지 및 단일 제품 템플릿과 유사한 다시 만들 수 있습니다.

Elementor Page Builder의 가격 및 계획

Elementor Pro에는 5가지 다른 계획이 있으며, 모두 동일한 Elementor Pro 페이지 빌더와 다음과 같은 기능을 포함합니다.

• 드래그 앤 드롭 라이브 편집기
• 반응형 디자인
• 90개 이상의 기본 및 전문 위젯
• 300개 이상의 기본 및 전문가 템플릿
• 테마 빌더

가장 낮은 요금제는 $49의 가격으로 1개 사이트에 필수입니다. 이 플랜을 사용하면 프리미엄 지원을 받을 수 있습니다. 즉, 24시간 내에 응답을 기대할 수 있습니다. 다음 계획은 고급이며 동일한 유형의 지원으로 $99의 가격으로 3개 사이트에 대한 라이센스를 포함합니다.

아마도 가장 인기 있는 것은 25개 사이트에 대해 $199의 Expert입니다. 또한 Elementor에서 완료된 프로젝트를 게시하고 새로운 고객을 확보할 수 있는 Elementor 전문가 프로필을 받게 됩니다.

맨 위에 있는 것은 $499의 가격으로 100개 사이트를 위한 Studio이고 거기에는 VIP 지원의 추가 혜택이 있습니다. 즉, 우선순위가 있고 티켓이 30분 내에 답변될 것입니다. $1000의 가격으로 1000개 사이트에 대해 가장 비싼 플랜 대행사도 마찬가지입니다.

모든 계획은 연간이며 구독이 만료되면 사이트는 어떻게 되는지 궁금하면 대답은 사이트가 이전과 동일하게 보이지만 Elementro Pro의 요소와 템플릿을 편집하거나 사용할 수 없다는 것입니다.

Elementor의 시스템/호스팅 요구 사항

Elementor의 시스템 요구 사항 페이지에 따르면 128MB의 PHP, MySQL 5.6 이상 또는 MariaDB 10.0 이상에서도 작동해야 합니다. 또한 모든 PHP 7 이상에서 작동해야 합니다. 테스트 목적으로 2GB PHP 메모리와 함께 VultrHF를 사용했습니다.

물론 최신 WordPress 버전과 다른 모든 플러그인이 최신 상태여야 합니다.

Elementor Page Builder 설치 및 구성

Elementor의 무료 버전을 설치하는 것은 WordPress 플러그인 저장소의 다른 플러그인과 동일합니다. WordPress 대시보드 → 플러그인 → 새로 추가로 이동하여 Elementor를 찾아 플러그인을 설치 및 활성화합니다.

Pro 버전의 경우 Elementor에서 자동으로 계정을 생성하는 플랜을 구매해야 합니다. 거기에 로그인하면 최신 Pro 버전을 다운로드할 수 있는 다운로드 버튼이 표시됩니다.

Elementor 대시보드에 로그인한 상태에서 WordPress 대시보드 → 플러그인 → 새로 추가에 로그인하고 업로드를 선택하고 컴퓨터에서 다운로드한 Elementor Pro 파일을 찾아 설치 및 활성화합니다.

WordPress 대시보드의 왼쪽 사이드바에서 작업을 완료하면 Elementor로 이동한 다음 → 라이선스를 클릭하고 → 연결 및 활성화 버튼을 클릭합니다.

클릭하면 활성화를 위해 Elementor의 대시보드로 자동 리디렉션됩니다. 녹색 활성화 버튼을 클릭하면 완료됩니다. Elementor Pro가 연결되고 활성화되었습니다.

활성화 후 Elementor가 활성화되었다는 확인 메시지가 표시됩니다. 그러나 스테이징 도메인에 사이트를 구축했고 라이브용으로 다른 라이선스를 구매하지 않으려는 경우 스테이징에서 계정 연결을 쉽게 끊고 라이브 도메인에서 활성화할 수 있습니다.

Elementor 사용을 시작하고 웹사이트를 구축할 때입니다. 제 제안은 Elementor용으로 특별히 제작된 Elementor의 Hello 테마를 사용하는 것입니다.

그렇게 하려면 먼저 "홈페이지" 페이지를 만들고 Elementor로 편집해 보겠습니다. 페이지 → 새로 추가로 이동하여 이름을 홈페이지로 지정하고 게시한 다음 Elementor로 편집 버튼을 클릭합니다.

편집 페이지에서 레이아웃이 기본값으로 설정되어 있기 때문에 편집할 수 없는 요소를 볼 수 있습니다. 빈 캔버스에서 Elementor를 사용하려면 왼쪽 하단 모서리에 있는 톱니바퀴 아이콘을 클릭하여 Elementor Full Width 또는 Elementor Canvas를 선택합니다.

사이트 구축을 시작하기 전에 왼쪽 상단 모서리에 있는 버거 아이콘을 클릭하고 나머지 작업에 필요한 모든 전역 설정을 지정해야 합니다.

사이트 설정은 테마 설정과 매우 유사합니다. 여기에서 전체 색상, 사용할 글꼴 및 각 HTML 태그에 대한 전체 사이트 타이포그래피를 선택할 수 있습니다.

그 외에도 전역 버튼 스타일, 머리글, 바닥글, 필요한 경우 사용자 정의 CSS를 설정할 수 있으며 설정에 필요한 모든 것을 설정하고 일관성을 유지하기 위해 전체 사이트에서 이와 같이 유지할 수 있습니다.

두 번째 옵션은 동적으로 생성된 특정 페이지, 게시물 또는 제품에서 자동으로 사용되는 템플릿 페이지 및 단일 게시물/제품 템플릿을 만들 수 있는 테마 작성기입니다. 모든 WordPress 테마에는 위의 모든 항목을 표시하기 위해 템플릿 파일이 있어야 하는 것처럼 Elementor를 사용하면 코드 한 줄도 작성하지 않고도 이를 수행할 수 있습니다.

마지막 옵션은 Elementor에서 작업 환경을 설정할 수 있는 사용자 기본 설정입니다. 사이트 자체에는 영향을 주지 않지만 관리자로서의 UI에는 영향을 미치지 않습니다.

사이트를 시작하기 위해 사용 가능한 모든 위젯이 왼쪽 사이드바에 배치되고 모든 항목을 드래그 앤 드롭으로 시각적으로 편집할 수 있습니다. 더 쉬운 방법을 원하면 폴더 아이콘을 클릭하여 미리 만들어진 블록 또는 템플릿 중 하나를 사용하여 시작할 수 있습니다.

폴더 아이콘은 미리 만들어진 블록과 템플릿은 물론 이전에 저장한 것을 볼 수 있는 팝업을 엽니다. 생성한 블록 또는 전체 템플릿을 저장하고 다른 내부 페이지에서 재사용할 수도 있습니다. 모든 페이지가 아닌 일부 페이지에 표시되어야 하는 특정 클릭 유도문안, 평가를 위해 저장된 블록을 사용하는 것은 매우 일반적입니다.

이전 경험 없이 웹사이트 구축을 시작할 때 알아야 할 한 가지가 더 있습니다. 사용하기 쉽고 매우 직관적이며 며칠 만에 이전 경험이 없어도 멋진 웹사이트를 구축할 수 있을 것입니다. , 나는 심지어 직업적으로 보이는 사람이라고 말할 수 있습니다.

그러나 사이트는 모든 장치 크기에서 보기 좋게 표시되어야 하며 데스크톱 버전을 편집한 것과 동일한 방법으로 다른 모든 크기를 편집할 수 있습니다. 요소와 위젯은 데스크톱 버전에만 추가할 수 있으며 작은 크기에서는 모양을 속일 수 있습니다.

또한 다른 장치에서 위젯 또는 섹션 가시성을 쉽게 설정할 수 있으므로 한 섹션을 데스크톱에서는 표시되지만 태블릿 및 모바일에서는 숨겨져 유사한 섹션에서 다른 콘텐츠를 가질 수 있습니다. 마찬가지로 데스크탑에서는 숨겨져 있지만 태블릿과 모바일에서는 볼 수 있는 또 다른 것입니다.

모바일 및 태블릿 버전을 수정하려면 왼쪽 사이드바 하단에 있는 아이콘 반응 모드를 클릭하면 모바일에서 사이트가 표시됩니다. 그리고 상단에서 다양한 화면 크기 간에 전환할 수 있습니다.

더 명확하게 하기 위해 하나는 모바일 및 태블릿에서 숨겨지고 다른 섹션은 데스크톱에서 숨겨지는 두 개의 섹션을 추가했습니다. 아래 예를 참조하십시오.

최종 결과는 모바일에 있습니다.

그리고 데스크탑의 최종 결과에는 섹션이 하나만 있지만 다른 섹션이 있습니다.

Cloudways의 Elementor 페이지 빌더 성능

Elementor는 매우 훌륭하게 작동하며 GTMetrix에서 100점을 받았으며 다른 테스트 도구는 정말 훌륭한 성능을 보여줍니다. 우리가 수행한 모든 테스트에 대해 정확히 동일한 페이지 크기와 이미지를 갖도록 이미지를 최적화하지 않았습니다.

– GTMetrix의 Elementor 결과

– Pingdom 도구에 대한 Elementor의 결과

– WebPageTest의 Elementor 결과

요약

직관적이고 사용하기 쉬운 페이지 빌더가 필요한 경우 Elementor는 멋진 웹 사이트를 구축하는 데 필요한 모든 측면을 다룰 수 있습니다. CSS에 대한 지식이 있다면 디자인에서 완벽한 픽셀 사이트를 구축하는 것은 그리 어렵지 않습니다.

거대한 커뮤니티와 기본 Elementor 기능을 확장하는 수백 개의 애드온 및 외부 플러그인으로 인해 Elementor를 사용하여 구축할 수 없는 웹 사이트 유형은 볼 수 없습니다.

우리는 종종 Elementor가 부풀려지고, 불필요한 코드가 많이 로드되고, 최적화하기가 어렵지만 테스트에서 볼 수 있듯이 Elementor가 Cloudways에서 꽤 잘 수행되는 것을 봅니다. 나는 랜딩 페이지를 내부에 25개의 이미지와 7개의 섹션 + 머리글과 바닥글로 테스트했는데, 이는 홈페이지 평균 이상입니다.

Elementor의 또 다른 좋은 점은 학습 곡선이 가파르지 않지만 매우 가벼우며 미리 만들어진 템플릿이나 블록을 사용하여 몇 분 만에 정말 멋지게 디자인된 현대적인 웹 사이트를 만들 수 있다는 것입니다.