전문적으로 보이는 웹 사이트를 디자인하는 것이 모든 사람을위한 것은 아니 었습니다. 특히 우리 모두가 코딩 및 웹 디자인 전문가가 절대적으로 필요하다고 생각했기 때문입니다. 오늘날 우리는 웹 사이트 디자인에 대한보다 쉬운 솔루션을 제공하기 위해 워드 프레스 생태계를위한 새로운 도구가 등장하고 있으며 이는 대부분의 초보자가 사용할 수있는 범위 내에서 가능합니다.

WordPress 레이아웃 디자인과 관련하여 이미 플러그인을 제출해야했습니다. 비주얼 컴포저, 레이아웃 디자인과 관련하여 확실히 최고의 도구 중 하나입니다. 그러나 이 솔루션이 모든 사람에게 적합하지 않다는 점에 유의해야 합니다. 이것이 이 튜토리얼에서 더 많은 것을 소개하는 이유입니다. 워드 프레스 플러그인 엘레멘터는 워드 프레스 플러그인 freemium(무료이지만 구독에 따라 확장 가능).

WordPress 용 Elementor를 구할 수있는 곳

우리는 당신이 플러그인의 잠재력을 보게하는 것을 진지하게 고려하고 있으며 무료 솔루션은 1 페니를 지불하지 않고 시작하는 데 도움이 될 것입니다. 이 무료 솔루션은 WordPress.org. 되는 워드 프레스 플러그인, 후자는 다른 것과 마찬가지로 설치됩니다 대시 보드에서 플러그인. 

플러그인이 귀하를 완전히 만족시키는 경우 사이트의 모든 기능을 갖춘 완전한 라이센스를 얻을 수 있습니다 공식 원소.

Elementor의 주요 기능

플러그인 개요로 튜토리얼을 시작하기 전에 먼저 플러그인의 주요 기능 (무료 버전 및 정식 버전)을 소개합니다.

버전 무료 정식 버전
여러 열 내비게이션 메뉴, 기사
모듈 텍스트, 제목 모듈 WooCommerce (제품, 카테고리)
비디오 모듈, 이미지, 캐 러셀, 갤러리, 사운드 클라우드 페이스 북 통합 (페이지, 버튼, 코멘트)
공유 모듈 표 가격
HTML 모듈 포트폴리오, 양식
WordPress 위젯 용 모듈 연구 모듈

 

이것은 플러그인이 제공하는 다양한 기능의 전체 목록입니다. 자세한 내용은 그들의 웹 사이트 탐험하기.

Elementor 시작하기

여기서는 전체 설치 프로세스를 다루지 않을 것입니다. 이것은 WordPress 플러그인이므로 설치 절차는 이미 이전 튜토리얼. 그러나 설치 후 플러그인의 홈 페이지로 이동합니다.

delementor.png 프리젠 테이션 페이지

화면에 이 페이지가 있으면 올바르게 설치한 것입니다. Elementor 플러그인. 현재 이 튜토리얼에서는 정식 버전을 사용하고 있지만 인터페이스는 무료 버전과 크게 다르지 않아야 합니다.

편집 인터페이스로 이동하기 전에 라이선스를 등록하도록 초대합니다. 이것은 정식 버전을 선택한 사람들에게만 유효합니다. 무료 버전이있는 경우 다음 섹션으로 이동할 수 있습니다. 라이선스를 등록하려면 WordPress에 라이선스를 등록하라는 알림이 표시됩니다.

알림 플러그인 elementor.png

등록 페이지로 이동하기 위해 클릭하기 만하면됩니다. 활성화.

라이선스 요소 등록 또는 .png

귀하의 라이센스가 유효한 경우 일반적으로 확인 페이지가 필요합니다.

활성 라이센스 요소 또는 .png

이 페이지에 도착하지 않은 경우 플러그인 개발자에게 문의하여 더 많은 정보를 얻으시기 바랍니다. 문제에 대한 지원.

Elementor 사용 방법

Elementor는 WordPress의 페이지 및 게시물에서 작동합니다. 클래식 인터페이스를 사용하든 새로운 Gutenberg 인터페이스를 사용하든 Elementor 빌더를 사용하라는 버튼이 표시됩니다.

생성자 elementor.png

실제로 Elementor를 사용하여 항상 게시물을 편집 할 필요는 없습니다. 따라서 페이지에서만 플러그인을 사용하도록 초대합니다. 버튼을 클릭하면 데자뷰 (WordPress Customizer를 사용하는 사용자를위한)를 제공하는 Elementor 디자인 인터페이스에 액세스 할 수 있습니다.

presentation interface element.png

따라서 왼쪽에는 플러그인에서 제공하는 다양한 컨트롤이 있고 오른쪽에는 변경 사항에 대한 실시간 미리보기가 있습니다. 이 튜토리얼에서는 Twenty Sixteen WordPress 테마를 사용합니다.

Elementor 섹션

Elementor의 섹션은 Elementor가 제공하는 기능 블록 그룹입니다. 섹션 수는 정식 버전을 사용 중인지 여부와 사용 중인지 여부에 따라 다릅니다. WooCommerce, Yoast SEO 또는 기타 호환되는 플러그인. 이러한 조건에 따라 인터페이스에 더 많거나 적은 섹션이 있게 됩니다. 우리는 플러그인과 함께 정식 버전을 사용하고 있기 때문에 WooCommerce 활성화되면 인터페이스는 다음과 같습니다.

섹션 요소 .png

Elementor 블록을 배치하는 방법

섹션을 확장하면 Elementor Blocks를 찾을 수 있습니다. 다양한 Elementor 블록은 점선으로 강조 표시된 영역에 "Drag & Drop"으로 배치됩니다.

블록 추가 elementors.png

Elementor에서 레이아웃을 선택하는 방법

Elementor에 블록을 추가하기 전에 강조 표시된 섹션에서 "+"버튼을 클릭하여 레이아웃을 선택해야합니다.

layout 요소를 선택하십시오 .png

필요에 따라 가장 적합한 레이아웃을 선택합니다. 레이아웃을 선택하면 동일한 영역에 해당 섹션이 강조 표시됩니다. 이 섹션에는 선택한 항목에 해당하는 동일한 수의 열이 표시됩니다. 제 경우에는 3 개의 열이있는 열을 선택했습니다.

zone.png가있는 elementor 섹션

내부에 "+"기호가있는 다른 블록은 Elementor 블록을 수용 할 수있는 영역입니다. 레이아웃을 먼저 선택하지 않고 Elementor 블록을 추가하면 기본적으로 단일 열 레이아웃이 선택됩니다.

Elementor 섹션은 동일한 "드래그 앤 드롭"원칙에 따라 서로 다시 정렬 할 수 있습니다. 더 이상 사용하지 않으려는 경우 섹션을 삭제할 수도 있습니다.

섹션 elementor.png 이동

다음은 제목 블록과 텍스트 블록이라는 2 개의 블록을 포함하는 섹션의 예입니다.

2을 가진 섹션 요소 blocs.png

다른 디자인 도구를 사용하는 방법

디자인을 마친 후하고 싶은 작업 중 하나는 작업을 저장하는 것입니다. 이 옵션은 다른 Elementor 섹션을 표시하는 섹션 맨 아래에 있습니다.

elementor.png 백업

직접 저장 (게시)과 초안 또는 템플릿으로 저장 중에서 선택할 수 있습니다. 우리는 나중에 이러한 다른 점을 더 탐구 할 것입니다.

디자인하는 동안 Elementor의 추가 인터페이스없이 변경 사항을 미리 볼 수도 있습니다. 눈 아이콘을 클릭하기 만하면됩니다.

변경 사항 미리보기 elementor.png

디자인 중에 오류가 발생합니다 (무의식적 인 작업). 이 경우 Elementor는 모든 작업을 탐색 할 수있는 기록을 제공합니다.

액션 요소 .png

이렇게하면 쉽게 돌아갈 수 있습니다.

히스토리 버튼 바로 앞에있는 "브라우저"옵션을 사용하면 방문자가 사용하는 브라우저와 관련하여 다른 섹션을 추가로 수정할 수 있습니다. 이 옵션을 사용하면 섹션 구조 (열 너비)의 고급 수정에 액세스 할 수 있습니다. 여기서 매우 신중하게 변경해야합니다.

브라우저 옵션 요소 .png

"설정"버튼을 사용하면 제목, 추천 이미지 또는 상태와 같은 페이지에 특정한 특정 옵션을 수정할 수 있습니다.

elementor.png 설정

이것으로 다음 튜토리얼에서 Elementor를 더 살펴볼 것입니다. 주저하지 말고 공식 사이트 훨씬 더 성공적인 예제를 제공합니다.