1. 페이지 빌더(Page Builder) 란 ?

섹션, 모듈 및 위젯으로 페이지를 만들 수있는 플러그인입니다. 사용 가능한 수백 가지가 있지만 비용이 많이 들거나 필요한 기능이 부족합니다.

백 엔드 및 프런트 엔드의 두 가지 유형의 페이지 빌더가 있습니다.

WordPress 편집기에서 백엔드 편집기를 사용하는 경우, 변경을 할 때마다 “미리보기”를 클릭하고 실제 페이지를 새로 고침하여 변경 사항이 어떻게 보이는지 확인해야합니다. 그것은 매우 성가신 일입니다.

그러나 프론트 엔드 편집자는 실제 페이지를 편집 할 수 있으므로 수행중인 작업을 볼 수 있습니다.

2. 페이지 빌더(Page Builder) 플러그인

워드프레스 페이지나 포스트의 레이아웃과 UI를 디자인하고 콘텐츠를 자유롭게 배치할 수 있도록 해주는 플러그인입니다.( 출처 :  페이지 빌더 플러그인 )

참고로, 페이지빌더 중  Visual Composer 는 많이 사용되고 있지만  VC는 사이트 속도를 크게 떨어뜨릴 뿐만 아니라 다양한 문제를 야기한다고 하니 VC( Visual Composer  )는 특히 사용하지 않는 것이 좋을 것 같습니다.

3.  Elementor Page Builder

         가. 개요

Elementor는 무료로 사용이 가능한 오픈 소스 라이브 페이지 빌더 플러그인이며 코딩 지식이 없이도 쉽게 원하는 웹 사이트를 만들 수 있습니다.  이 빌더를 사용하여 사용자들은 기존 워드프레스 테마나 외부 테마를 커스터마이징(사용자 정의)할 수 있습니다.( 출처 : 4. 무료 워드프레스 페이지 빌더 Elementor를 사용하여 랜딩 페이지 만들기 )

또한 Elementor는 기능이 포함된 간단하고 직관적인 프런트 엔드 편집기(페이지 빌더)입니다. 이 플러그인은 페이지의 모든 요소를 ​​자세히 제어합니다. 그리고 가장 좋은 부분은 무료입니다.

처음부터 페이지를 작성하는 것은 귀중한 시간을 낭비 할 수 있지만 Elementor는 준비 할 수 있는 많은 템플릿을 제공합니다. 또는 사용자 정의 레이아웃을 저장하여 다른 페이지에서 다시 사용할 수도 있습니다.

Elementor는 몇 가지 추가 기능이 포함 된 Pro 버전을 보유하고 있지만  무료 버전은 모든 기존 기능을 유지할 것이라고 밝혔습니다.  반응형 설정을 위한 몇 가지 훌륭한 옵션이 있으며 최근에 모바일 편집도 출시했습니다. WordPress 웹 사이트에서 멋지고 사용하기 쉬운 디자인을 만들려면 Elementor page builder 플러그인을 설치하십시오.

         나. 장점

무료 워드프레스 페이지 빌더 Elementor Page Builder 에 의하면, (모든 상황에 적용되는 것은 아니지만) Elementor Page Builder 는  Page Builder by SiteOrigin 와 달리 속도 저하되지 않는 장점이 있으며 Elementor Page Builder 를 설치하지 원본과의 속도차이가 거의 없는 것이 장점입니다.

( 이미지 출처 : 무료 워드프레스 페이지 빌더 Elementor Page Builder , 밀리초(ms) : 1/1,000초  )

또한 믿을 수있는 전문가인 닐 파텔(Neil Patel)이  9 Vital (And Free) WordPress Plugins Every Website Needs 를 통해 추천하였다는 점에서 국내에 알려지지 않았을뿐 신뢰가 가는 훌륭한 플러그인입니다.( 200,000+ 이상 download 됨)

         다. 설치 및 활성화

                   1) Settings & Tools(이하 아래의 번역본을 참조하여 다시 편집해주세요)

In your WordPress Dashboard, you can access the settings of Elementor.

You just have to go to “Elementor” in your WP Dashboard and to hover over the “Elementor” tab or to click on it to get in the settings of the plugin.

In the settings of Elementor, you have a few options that will help you solve issues linked to Elementor, and also information about your system.

Settings

• General

Post Types: Choose where Elementor can be used. Elementor can be used in Posts and in Pages only. You cannot use Elementor to edit footers or headers.

Exclude Roles: This option allows you to decide who will be able to edit pages or posts with Elementor. It is convenient if you do not want anyone or some specific persons to modify your changes in Elementor.

Disable Global Colors: Choose whether to use your theme’s color settings or let Elementor control it.

Disable Global Fonts: Choose whether to use your theme’s typography settings or let Elementor control it.

Improve Elementor: By enabling this, you will help us learn about the way you are using Elementor and it will help us to improve Elementor and our support.

• Style

Default Generic Fonts: Choose a default fallback font.

Content Width: Set a default width to your content area.

Space Between Widgets: Set the space between widgets.

Stretched Section Fit to: Choose the parent element to which stretched elements will fit.

Page Title Selector: If you want to be able to hide your page title in Elementor, here you can set the selector.

• Integrations

reCAPTCHA: To use this service of Google, you need to create an account via the link provided there. This option protects you from spam and abuse. If you experience any problem with this feature you need to contact Google via your reCAPTCHA account.

• Advanced

CSS Print Method: Choose whether you CSS will be included in an independent stylesheet (recommended) or on each page.

Switched Editor Loader Method: In cases of server configuration conflicts, enable this option.

My library

In My Library, you will find the templates that you created. The Predesigned Templates can be found by clicking on the icon folder in your Elementor Panel.

You can also import and export files via My Library as explained in this  guide.

Templates files are saved as .json files.

Tools 

• General

  Regenerate CSS: It will clear your CSS files and will generate new files when you make changes on your pages or when you simply visit the pages from the front-end. It depends on what you will do first. Please note that the Regenerate CSS tool will not regenerate the files on the click on the button.

  Sync Library: When you experience some bugs with the library, you can sync it and check if it helps.

• Replace URL

  This option allows you to be able to use Elementor after that you transfer your domain (Also relevant for adding an SSL certificate to your site).

• Versions

  Rollback Version: Switch to a previous version of Elementor.

  Rollback Pro Version: Switch to a previous version of Elementor Pro.

  Become a Beta Tester: By enabling this, you will be notified whenever a new beta version is out.

• Maintenance Mode

  Choose Mode: Choose between Coming Soon & Maintenance Mode.

  Who Can Access: Choose who can see your content when one of these modes is active.

  Choose Template: Choose a template that will be displayed when one of these modes is active.

Systems info

This option is important given that we sometimes need this information to assist you when you experience a bug. The systems info includes information about your Server and your WordPress environment. The systems info can be copied and pasted in a mail or downloaded as a .txt file that can be attached to an email.

License

The license is provided to you once you purchase Elementor Pro. In “License”, you can see if your license is active or not.

It is written in this tab that  “you can get automatic updates for Elementor Pro”, that means that you do not have to update the new versions from your account in elementor.com.

Indeed, you just have to accept the updates in “Plugins” in your WordPress Dashboard.

You will need to verify from time to time if a new version has been released.

When you work with a local host, you have to download the new version of Elementor Pro from your account in elementor.com and to upload it to “Plugins” in your WP Dashboard.

For more details about the procedure, please consult this guide for instance.

설정 및 도구

WordPress 대시 보드에서 Elementor의 설정에 액세스 할 수 있습니다.

WP 대시 보드에서 “Elementor”로 이동하고 “Elementor”탭 위로 마우스를 올리거나 클릭하여 플러그인 설정을 가져와야합니다.

Elementor 설정에서 Elementor에 연결된 문제 및 시스템 정보를 해결하는 데 도움이되는 몇 가지 옵션이 있습니다.

설정

• 일반

Post Types : Elementor가 사용될 수있는 곳을 선택하십시오. 엘리멘터는 글 및 페이지에서만 사용할 수 있습니다. Elementor를 사용하여 바닥 글이나 머리글을 편집 할 수는 없습니다.

역할 제외 :이 옵션을 사용하면 Elementor로 페이지 또는 게시물을 편집 할 수있는 사용자를 결정할 수 있습니다. Elementor에서 누군가 또는 일부 특정 사용자가 변경 사항을 수정하지 못하게하는 것이 편리합니다.

Disable Global Colors : 테마의 색상 설정을 사용할지 또는 Elementor가 해당 색상을 제어하도록할지 선택합니다.

전역 글꼴 비활성화 : 테마의 활자체 설정을 사용할지 또는 Elementor가 글꼴을  제어하도록할지 선택하십시오.

Elementor 향상 : 이를 사용하면 Elementor를 사용하는 방식에 대해 배울 수 있으며 Elementor와 지원을 개선하는 데 도움이됩니다.

• 스타일

기본 일반 글꼴 : 기본 대체 글꼴을 선택하십시오.

Content Width : 콘텐츠 영역의 기본 너비를 설정합니다.

위젯 사이 의 공간 : 위젯 사이 의 공간을 설정하십시오.

Stretched Section Fit to : 펼쳐진 요소가 들어갈 부모 요소를 선택하십시오 .

페이지 제목 선택기 : Elementor에서 페이지 제목을 숨기려면 여기에서 선택기를 설정할 수 있습니다.

• 통합

reCAPTCHA : Google의이 서비스를 사용하려면 제공된 링크를 통해 계정을 만들어야합니다. 이 옵션은 스팸 및 악용으로부터 사용자를 보호합니다. 이 기능에 문제가 있으면 reCAPTCHA 계정을 통해 Google에 문의해야합니다.

• 많은

CSS 인쇄 방법 : CSS를 독립적 인 스타일 시트에 포함 시킬지 (권장) 또는 각 페이지에 포함 시킬지 선택하십시오.

Switched Editor Loader Method : 서버 구성이 충돌하는 경우이 옵션을 활성화하십시오.

내 라이브러리

내 라이브러리에서 작성한 템플릿을 찾을 수 있습니다. Predesigned Templates는 Elementor Panel의 아이콘 폴더를 클릭하면 찾을 수 있습니다.

이 가이드 에서 설명한대로 내 라이브러리를 통해 파일을 가져오고 내보낼 수도 있습니다  .

템플릿 파일은 .json 파일로 저장됩니다.

도구들 

• 일반 

  CSS 재생성 : CSS 파일을 삭제하고 페이지를 변경하거나 프런트 엔드에서 페이지를 방문 할 때 새 파일을 생성합니다. 그것은 당신이 먼저 무엇을 할 것인가에 달려 있습니다. 있습니다 재생성 CSS 도구는 버튼 클릭에있는 파일을 재생하지 않습니다 .

  Sync Library : 라이브러리에 버그가 발생하면 동기화하여 도움이되는지 확인할 수 있습니다.

• URL

  바꾸기이 옵션을 사용하면 도메인을 이전 한 후에 Elementor를 사용할 수 있습니다 (SSL 인증서를 사이트에 추가하는 것과 관련이 있습니다).

• 버전 

  롤백 버전 : Elementor의 이전 버전으로 전환하십시오.

  Rollback Pro Version :  Elementor Pro의 이전 버전으로 전환하십시오.

  베타 테스터되기 : 이 기능을 사용하면 새로운 베타 버전이 출시 될 때마다 알림을 받게됩니다.

• 유지 관리 모드 

  선택 모드 : 출시 예정 및 유지 관리 모드 중에서 선택하십시오 . 

  액세스 할 수있는 사용자 : 이 모드 중 하나가 활성화되어있을 때 콘텐츠를 볼 수있는 사용자를 선택하십시오 . 

  템플릿 선택 : 이 모드 중 하나가 활성화되었을 때 표시 될 템플릿을 선택하십시오 .

시스템 정보

이 옵션은 버그가 발생할 때 도움을주기 위해이 정보가 필요할 때가 있으므로 중요합니다. 시스템 정보에는 서버 및 WordPress 환경에 대한 정보가 포함됩니다. 시스템 정보는 메일에 복사하여 붙여 넣거나 전자 메일에 첨부 할 수있는 .txt 파일로 다운로드 할 수 있습니다.

특허

Elementor Pro를 구매하면 라이센스가 제공됩니다. “라이센스”에서 라이센스가 활성 상태인지 여부를 확인할 수 있습니다.

이 탭에 “Elementor Pro에 대한 자동 업데이트를 얻을 수 있습니다”라고 쓰여져 elementor.com에서 계정의 새 버전을 업데이트 할 필요가 없다는 의미입니다.

실제로 WordPress 대시 보드의 “플러그인”에서 업데이트를 수락하면됩니다.

새 버전이 출시되면 수시로 확인해야합니다.

로컬 호스트에서 작업 할 때 elementor.com의 계정에서 Elementor Pro의 새 버전을 다운로드하고 WP 대시 보드의 “플러그인”에 업로드해야합니다.

절차에 대한 자세한 내용은이 안내서 를 참조하십시오   .

         라. 사용법 개요

                    2) Elementor Page Builder 의 유튜브  채널( https://www.youtube.com/channel/UCt9kG_EDX8zwGSC1-ycJJVA )

                    3) 기술서( https://docs.elementor.com/ )

         마. 사용법 상세

                    1) Canvas 소개 : Native Blank Page Template

Canvas는 Elementor에 기본 빈 페이지 템플릿입니다. 캔버스는 모든 테마에서 작동하며 Elementor에서 전체 페이지를 디자인 할 수 있습니다. header(머리말), footer(바닥 글) 없고 Elementor 만 있습니다.

기존의 Elementor는 확실히 방문 페이지를 만드는 가장 빠른 도구 중 하나임에도 불구하고 방문 페이지를 만들 때 일관된 문제가 있었습니다. header(머리말), footer(바닥 글)의 제거가 그것이었습니다 .

Elementor의 Canvas를 이용하면, 머리말이나 꼬리말을 제거하기 위해 더 이상 고민 할 필요가 없으며 플러그인을 제거하기 위해 더 이상 고민 할 필요가 없습니다.

Elementor Canvas를 만나십시오. 캔버스를 사용하면 Elementor에서 전체 빈 슬레이트 템플릿을 완전히 편집 할 수 있습니다. 머리글이나 바닥 글이 없어 가장 멋진 방문 페이지를 만들 수 없습니다. 이것은 방문 페이지, 곧 나올 페이지 및 Elementor로 전체 페이지 내용을 디자인하려는 다른 페이지에 적합합니다.

가) Canvas 템플릿을 구현하는 2가지 방법

(1) Canvas 템플릿을 구현하려면 WordPress 페이지 대시 보드로 이동하고 템플릿 아래의 페이지 속성 상자에서 Elementor Canvas 템플릿을 선택합니다. 이제 Elementor로 페이지를 편집하면 편집기 안에 전체 페이지가 나타납니다.( 참고 : 이 방법도 보통의 경우, 잘 구현되는 것으로 알고 있는데, 저희 사이트의 경우, 테마와 충돌하는지, 이 방식으로 하면 우측 사이드바가 그대로 남아 있는 문제가 발생하여 두번째 방법을 통해 해결하였습니다. )

(2) 캔버스 템플릿을 설정하는 또 다른 방법은 새로 추가 된 페이지 설정 패널을 사용하는 것입니다. 이렇게하면 추가 할 두 번째 기능, 즉 Page Settings(페이지 설정) 이 자연스럽게 전환됩니다

여기에 주피터 같은 테마를 깔면 드디어 자유롭게 조작할 수 있는 사이트가 만들어 질 듯 함. 수고하셨습니다.

                    2) 단축키

https://www.thewordcracker.com/basic/elementor-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B9%8C%EB%8D%94%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9-%EA%B0%80%EB%8A%A5%ED%95%9C-%EB%8B%A8%EC%B6%95%ED%82%A4/

                    3) Trouble Shooting

가)  템플릿을 로드하는 동안 “정의되지 않은”오류가 발생했습니다.(“Undefined” error while loading templates )

해결책은 아래와 같습니다.

– PHP 버전을 PHP7로 업그레이드하십시오 (이전에 웹 사이트를 백업하십시오)( Upgrade your PHP version to PHP7 (backup your website before) )

– 호스팅 회사에 서버의 시간 초과 값을 늘리라고 요청하십시오.( Ask your hosting company to increase the timeout value of your server )

– Elementor 및 Elementor Pro 이외의 모든 플러그인을 비활성화하여 플러그인 충돌로 인한 것이 아닌지 확인하십시오. 문제가 해결되면 범인을 찾기 위해 하나씩 다시 활성화하십시오.

– 저의 경우에는 위와 같은 문제가 아니고  Elementor Page Builder 로 편집하는 과정에서 Elementor Page Builder 로 만들어 놓은 기존의 페이지를 삭제하여 발생하였습니다. 어처구니 없는 실수이죠^^.

         바. Pro( https://elementor.com/pro/#pricing )

$199에 사이트에 제한없이 사용할 수 있다. 매력적입니다.

라이센스를 구매하면 Elementor Pro를  기간에 제한없이 사용할 수 있습니다. 그러나 지원 및 업데이트를 계속 받으려면 1 년 후에 모든 라이센스를 갱신해야합니다.( Buying a license allows you to use Elementor Pro for an unlimited period of time. To continue receiving support and updates, all licenses must be renewed after one year.  )

4. 다른 페이지 빌더(Page Builder) 플러그인들

http://www.bbsetheme.co.kr/page-builder-by-siteorigin/

자료 출처 : 1.   페이지 빌더 플러그인

2.  무료 워드프레스 페이지 빌더 Elementor Page Builder

3.  Page Builder by SiteOrigin – 페이지 레이아웃을 자유자재로 바꿔주는 무료플러그인

4. 무료 워드프레스 페이지 빌더 Elementor를 사용하여 랜딩 페이지 만들기

https://www.thewordcracker.com/basic/%EB%AC%B4%EB%A3%8C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B9%8C%EB%8D%94-elementor%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EB%9E%9C%EB%94%A9-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0/

5.  9 Vital (And Free) WordPress Plugins Every Website Needs

https://neilpatel.com/blog/free-wordpress-plugins/

6.  Elementor 페이지 빌더에서 사용 가능한 단축키