Elementor 인터페이스가 어떤 모습인지 발견하고 이해하고 싶으십니까? 이 가이드는 당신을 위한 것입니다.

전문적인 느낌으로 웹사이트를 디자인하는 것은 모든 사람을 위한 것이 아니었습니다. 특히 우리 모두는 코딩과 웹 디자인 분야에서 반드시 전문가가 되어야 한다는 인상을 받았습니다.

요즘에는 가장 초보자도 쉽게 웹사이트를 디자인할 수 있는 더욱 간단한 솔루션을 제공하기 위해 WordPress 생태계에 새로운 도구가 등장하고 있습니다.

WordPress 레이아웃 디자인과 관련하여 이미 플러그인을 제출해야했습니다. 비주얼 컴포저, 레이아웃 디자인과 관련하여 확실히 최고의 도구 중 하나입니다.

그러나 이 솔루션이 모든 사람에게 적합한 것은 아닙니다. 이것이 바로 이 튜토리얼에서 프리미엄 WordPress 플러그인(무료이지만 구독 시 확장 가능)인 Elementor WordPress 플러그인을 소개하는 이유입니다.

Elementor 인터페이스 프레젠테이션

목차


WordPress 용 Elementor를 구할 수있는 곳

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

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

엘리멘터의 주요 기능

Elementor는 WordPress에서 가장 인기 있는 페이지 빌더 중 하나이며 그럴 만한 이유가 있습니다. 강력한 기능과 직관적인 인터페이스를 통해 코딩 기술 없이도 전문적인 웹사이트를 만들 수 있는 강력한 솔루션을 제공합니다. 다음은 모든 WordPress 사용자에게 필수적인 Elementor의 주요 기능에 대한 개요입니다.

드래그 앤 드롭 비주얼 편집기 : Elementor는 요소를 드래그 앤 드롭하여 페이지를 디자인할 수 있는 직관적인 시각적 편집기를 제공합니다. 실시간으로 변경 사항을 확인할 수 있으므로 웹 사이트를 훨씬 쉽게 개인화할 수 있습니다.

리치 위젯 : Elementor를 사용하면 다양한 위젯을 사용할 수 있어 버튼, 갤러리, 캐러셀, 양식 등과 같은 다양한 요소를 페이지에 추가할 수 있습니다. Pro 버전은 연락처 양식, 슬라이더 및 포트폴리오와 같은 고급 위젯을 통해 이 기능을 확장합니다.

사전 정의된 템플릿 : Elementor는 페이지의 시작점으로 사용할 수 있는 미리 만들어진 템플릿 라이브러리를 제공합니다. 이러한 템플릿은 다양한 스타일과 요구 사항을 다루므로 미적으로 보기 좋고 기능적인 페이지를 쉽게 만들 수 있습니다.

테마 편집기 : Elementor Pro를 사용하면 내장된 테마 편집기 덕분에 페이지 콘텐츠뿐만 아니라 머리글, 바닥글 및 기타 사이트 전체 부분을 사용자 정의할 수 있습니다. 이를 통해 전체 사이트에 걸쳐 시각적 일관성을 만들 수 있습니다.

게시물 템플릿 만들기 : 게시물 템플릿 작성 기능을 사용하면 블로그 게시물이나 WooCommerce 제품과 같은 특정 게시물 유형에 대한 레이아웃을 디자인할 수 있습니다. 이 옵션은 다양한 유형의 콘텐츠에 대해 일관된 디자인을 만드는 데 특히 유용합니다.

팝업 빌더 : Elementor Pro에는 광고, 가입 양식 또는 기타 방문자 상호 작용을 위한 사용자 정의 팝업을 생성할 수 있는 팝업 빌더가 포함되어 있습니다. 표시 조건을 정의하여 청중을 정확하게 타겟팅할 수 있습니다.

고급 레이아웃 제어 : Elementor는 타이포그래피, 여백, 간격 및 반응형 레이아웃에 대한 고급 제어 기능을 제공합니다. 다양한 기기 유형에 맞게 사이트 레이아웃을 조정하여 모바일, 태블릿, 데스크톱에서 최적의 사용자 경험을 보장할 수 있습니다.

지원 및 문서 : Elementor는 자세한 문서, 온라인 튜토리얼 및 활발한 커뮤니티를 통해 포괄적인 지원을 제공합니다. Pro 사용자는 직접적인 프리미엄 지원을 통해 문제 해결에 있어 빠르고 효율적인 도움을 받을 수 있습니다.

확장 및 통합 : Elementor는 다양한 플러그인 및 통합과 호환되므로 사이트에 추가 기능을 추가하는 것이 가능합니다. 마케팅 도구, SEO 플러그인 또는 전자상거래 솔루션을 통합하려는 경우 Elementor를 사용하면 사이트 기능을 쉽게 확장할 수 있습니다.

Elementor의 기능을 요약한 표입니다.

특징Elementor 무료Elementor 프로
드래그 앤 드롭 페이지 편집기
사전 정의된 템플릿
기본 위젯
위젯 프로
머리글 및 바닥글 편집기
게시물 템플릿 만들기
WooCommerce 템플릿 만들기
팝업 빌더
타사 위젯 지원
기술 지원
마케팅 기능(양식
프리미엄 템플릿 라이브러리에 액세스
고급 효과 및 애니메이션
검토 및 백업 도구
양식 생성
고급 타이포그래피 제어
반응형 레이아웃 제어
정기 업데이트에 대한 접근성
엘리멘터의 특징.

 

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


Elementor 시작하기

WordPress 사이트 구축이 처음이더라도 Elementor를 빠르고 쉽게 시작할 수 있습니다. Elementor를 설정하고 전문가처럼 페이지 디자인을 시작하려면 다음 단계를 따르세요.

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

엘리멘터 설치

  1. WordPress 대시보드에 액세스하세요. WordPress 관리자 패널에 로그인합니다.
  2. 확장 프로그램으로 이동: "확장"으로 이동한 다음 "추가"를 클릭합니다.
  3. Elementor 검색: 검색창에 "Elementor"를 입력하세요. Elementor(무료 버전)를 찾을 수 있습니다. 시작하려면 무료 버전을 설치하고 활성화하세요.
  4. 엘리멘터 설치: 설치가 완료되면 "지금 설치"를 클릭한 다음 "활성화"를 클릭하세요.

그러나 설치 후에는 플러그인 홈페이지로 이동하게 됩니다.

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

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

편집 인터페이스로 이동하기 전에 라이센스 등록을 요청하겠습니다. 이는 Pro 버전을 선택한 사용자에게만 유효합니다.

무료 버전이 있는 경우 다음 섹션에 액세스할 수 있습니다. 라이센스를 등록하려면 WordPress에 라이센스를 등록하라는 알림이 표시됩니다.

알림 플러그인 elementor.png

그러니 그냥 클릭하세요 지금 업그레이드 등록 페이지에 접속하여 다음을 클릭하세요. 활성화.

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

라이센스가 다음과 같은 경우 일반적으로 확인 페이지가 표시됩니다. 최근활동.

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

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

요소 인터페이스

Elementor의 인터페이스는 원활하고 직관적인 사용자 경험을 제공하도록 설계되어 WordPress 페이지를 쉽게 만들고 사용자 지정할 수 있습니다. 다음은 각 요소를 더 잘 이해하는 데 도움이 되는 시각적 예시와 함께 Elementor 인터페이스의 주요 섹션에 대한 자세한 개요입니다.

작업 영역(컨텐츠 영역)

La 작업 영역또는 콘텐츠 영역은 페이지를 작성하고 보는 중앙 공간입니다. 여기에서 위젯과 섹션을 추가하고 편집할 수 있습니다. 레이아웃이 실시간으로 표시되므로 변경 사항이 발생하는 즉시 확인할 수 있습니다.

작업 영역

위젯 패널

Le 위젯 패널 인터페이스 왼쪽에 있습니다. 여기에는 작업 영역으로 끌어다 놓을 수 있는 다양한 요소가 포함되어 있습니다. 위젯은 "일반", "기본", "레이아웃" 등과 같은 카테고리로 구성되어 있어 페이지에 요소를 더 쉽게 찾고 추가할 수 있습니다.

Elementor 위젯 그룹

Elementor 위젯 그룹은 Elementor가 제공하는 기능 블록 그룹입니다. 섹션 수는 정식 버전 사용 여부와 사용 여부에 따라 다릅니다. WooCommerce, Yoast SEO 또는 기타 호환되는 플러그인.

이러한 조건에 따라 인터페이스에 더 많거나 적은 섹션이 있게 됩니다. WooCommerce 플러그인이 활성화된 정식 버전을 사용하고 있으므로 인터페이스는 다음과 같습니다.

요소 위젯 그룹

상단 도구 모음

La 상단 도구 모음 다음과 같은 필수 옵션이 포함되어 있습니다.

  • 로고 : 테마 작성기, 기록, 계정 기본 설정, 키보드 단축키 등과 같은 메뉴 기능에 표시됩니다.
  • 요소 추가 버튼: 페이지에 삽입할 위젯 패널을 표시할 수 있습니다.
  • 사이트 설정 버튼: 다양한 전역 사이트 옵션 설정을 표시합니다.
사이트 설정
  • 구조 버튼: 페이지의 전체 구조를 확인하고 걱정 없이 탐색할 수 있습니다. 페이지에 여러 개의 중첩된 섹션이 있는 경우 이 기능은 큰 도움이 될 것입니다.
  • 페이지 제목/기사: 페이지나 기사의 제목과 상태(초안, 게시 등)를 표시합니다.
  • 모바일 내비게이션 메뉴 : 데스크톱, 태블릿, 모바일 보기 간에 전환할 수 있습니다. 이는 디자인이 모든 장치 유형에 반응하고 잘 조정되도록 하는 데 필수적입니다.
  • 페이지 설정 : 레이아웃 옵션 및 스타일 설정을 포함한 페이지 설정에 액세스합니다.
  • 게시/업데이트 : 페이지에 대한 변경 사항을 저장하고 게시합니다.
  • 사전 시각화 : 눈으로 상징되며 실제 상황에서 페이지가 어떻게 작동하는지 확인할 수 있습니다.

따라서 왼쪽에는 플러그인이 제공하는 다양한 위젯이 있고 오른쪽에는 수정 사항에 대한 실시간 미리보기가 있습니다. 이 튜토리얼에서는 Elementor의 무료 Hello 테마를 사용합니다.


Elementor 사용 방법

첫 번째 페이지 만들기

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

  • 새 페이지를 만듭니다. "페이지"로 이동하여 "추가"를 클릭합니다.
  • 페이지 이름을 지정하세요. 페이지 제목을 지정하고 게시하세요.
  • Elementor로 편집: Elementor의 비주얼 편집기를 시작하려면 "Elementor로 편집"버튼을 클릭하십시오.
elementor.png 생성자를 사용하여 페이지 편집

실제로 Elementor를 사용하여 항상 게시물을 편집할 필요는 없습니다. 따라서 페이지에서만 플러그인을 사용하시기 바랍니다.

버튼을 클릭하면 데자뷰를 느낄 수 있는 Elementor 디자인 인터페이스에 액세스할 수 있습니다(WordPress Customizer를 사용하는 사용자용).

Elementor Editor에 위젯을 추가하는 방법

제목, 이미지, 버튼 등과 같은 위젯을 왼쪽 패널에서 콘텐츠 영역으로 드래그하세요. 각 위젯을 클릭하여 설정을 조정할 수 있습니다.

위젯 추가

위젯 사용자 정의: 위젯을 클릭하여 사용자 정의 옵션을 엽니다. 텍스트, 이미지, 색상, 크기 등을 조정할 수 있습니다.

위젯 사용자 정의

템플릿 사용: 프로세스 속도를 높이려면 사전 정의된 템플릿을 사용하십시오. 폴더 아이콘을 클릭하면 템플릿 라이브러리에 액세스할 수 있으며, 여기에서 클릭 한 번으로 템플릿을 선택하고 가져올 수 있습니다.


실제 사례

Elementor 블록을 배치하는 방법

섹션을 확장하면 Elementor 위젯을 찾을 수 있습니다. 다양한 Elementor 위젯은 점선으로 강조 표시된 영역에 "드래그 앤 드롭" 방식으로 배치됩니다.

Elementor 블록을 배치하는 방법

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

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

Elementor에서 섹션 레이아웃 선택

귀하의 필요에 따라 가장 적합한 레이아웃을 선택하게 됩니다.

레이아웃을 선택하면 강조 표시된 동일한 영역에 해당 섹션이 표시됩니다. 이 섹션에는 선택한 항목에 해당하는 동일한 수의 열이 표시됩니다. 내 경우에는 2개의 열이 있는 열을 선택했습니다.

요소 열 번호

내부에 "+" 기호가 있는 다른 열은 Elementor 위젯을 수용할 수 있는 영역입니다.

레이아웃을 먼저 선택하지 않고 Elementor 블록을 추가하면 기본적으로 단일 열 레이아웃이 선택됩니다.

Elementor 섹션은 다음과 같은 원칙에 따라 서로 재정렬될 수 있습니다. 드래그 앤 드롭".

더 이상 사용하지 않으려면 섹션을 삭제할 수도 있습니다.

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

2개의 블록이 있는 요소 섹션.png

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

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

elementor.png 백업

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

디자인할 때 Elementor의 추가 인터페이스 없이 변경 사항을 미리 보고 싶을 수도 있습니다. Elementor 편집기 상단 표시줄에 있는 눈 아이콘을 클릭하기만 하면 됩니다.

변경 사항 미리보기 elementor.png

설계 중에 오류(비자발적 동작)가 발생하는 경우가 있습니다.

이 경우 Elementor는 모든 작업을 탐색할 수 있는 기록을 제공합니다.

목록에서 실행 취소하려는 작업을 삭제하세요.

액션 요소 .png

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

“ 설정 » 제목, 추천 이미지, 상태 등 페이지와 관련된 특정 옵션을 수정할 수 있습니다.

elementor.png 설정

자주 하는 질문

엘리멘터란?

Elementor는 WordPress용 드래그 앤 드롭 페이지 빌더로, 사용자는 코딩 없이 시각적으로 웹사이트를 디자인할 수 있습니다. 페이지에 요소를 추가하고 사용자 정의하기 위한 드래그 앤 드롭 도구가 포함된 직관적인 인터페이스를 제공합니다.

Elementor는 무료인가요?

Elementor는 간단한 웹 페이지를 만들기에 충분한 기본 기능을 갖춘 무료 버전을 제공합니다. 구독을 통해 제공되는 Pro 버전은 추가 위젯, 프리미엄 템플릿 및 광범위한 사용자 정의 옵션과 같은 고급 기능을 제공합니다.

Elementor Pro 버전의 장점은 무엇입니까?

Elementor Pro 버전은 고급 위젯, 전문적인 템플릿, 심층적인 디자인 옵션, 사용자 정의 머리글, 바닥글 및 아카이브를 생성하는 기능을 제공합니다. 또한 타사 도구 및 마케팅 기능과의 향상된 통합도 가능합니다.

WordPress 사이트에 Elementor를 어떻게 설치하나요?

Elementor를 설치하려면 WordPress 대시보드로 이동하여 “플러그인”을 클릭한 다음 “추가”를 클릭하세요. 검색창에 "Elementor"를 검색한 후 "지금 설치"를 클릭하고 마지막으로 "활성화"를 클릭하세요. Elementor 웹사이트에서 ZIP 파일을 다운로드하고 "확장" > "추가" > "확장 프로그램 업로드"를 통해 가져와 Elementor Pro를 설치할 수도 있습니다.

Elementor를 사용하여 페이지를 만드는 방법은 무엇입니까?

Elementor를 설치한 후 WordPress 대시보드의 페이지나 게시물로 이동하여 “Elementor로 편집”을 클릭하세요. 페이지를 디자인하기 위해 위젯과 섹션을 끌어서 놓을 수 있는 Elementor 편집기로 이동됩니다. 왼쪽 패널을 사용하여 페이지에 요소를 추가하고 맞춤설정하세요.

Elementor는 모든 WordPress 테마와 호환됩니까?

예, Elementor는 대부분의 제품과 호환되도록 설계되었습니다. 워드 프레스 테마. 그러나 최적의 통합을 위해서는 향상된 호환성과 유연성을 제공하는 Elementor용으로 특별히 설계된 테마를 사용하는 것이 좋습니다.

Elementor를 사용하여 전자상거래 사이트를 구축할 수 있나요?

예, Elementor는 WooCommerce와 호환되므로 제품 페이지, 쇼핑 페이지 및 결제 페이지 템플릿을 생성하고 사용자 정의할 수 있습니다. Pro 버전은 온라인 상점의 외관을 개선하기 위해 WooCommerce 전용 위젯을 제공합니다.

Elementor로 변경된 내용을 어떻게 미리 볼 수 있나요?

Elementor 편집기에서 "미리보기" 버튼을 클릭하면 변경 사항을 미리 볼 수 있습니다. 이를 통해 변경 사항을 실시간으로 게시하기 전에 페이지가 어떻게 보일지 확인할 수 있습니다.

Elementor는 기술 지원을 제공합니까?

예, Elementor는 Pro 사용자를 위한 포럼, 지식 기반 및 티켓팅 시스템을 통해 기술 지원을 제공합니다. 공식 Elementor 웹사이트에서 자세한 튜토리얼과 가이드에 액세스할 수도 있습니다.

Elementor에서 타사 확장 기능을 사용할 수 있나요?

예, Elementor는 추가 기능과 위젯을 추가하는 다양한 타사 확장 프로그램과 호환됩니다. 다음과 같이 설치할 수 있습니다. 워드 프레스 플러그인 Elementor의 기능을 확장하는 일반적인 것입니다.


이 기사와 유사한 리소스

결론

Elementor는 코딩 없이 뛰어난 WordPress 페이지를 생성할 수 있는 강력하고 다재다능한 솔루션입니다. 직관적인 인터페이스와 강력한 기능을 통해 초보자와 전문가 모두 매력적이고 기능적인 웹사이트를 즉시 디자인할 수 있습니다.

Elementor 인터페이스의 주요 섹션을 이해하면 편집기를 효율적으로 탐색하고, 위젯을 최적으로 사용하고, 특정 요구 사항에 맞게 페이지의 모든 측면을 사용자 정의할 수 있습니다.

작업 영역, 위젯 패널및 기타 도구는 사용 편의성을 유지하면서 최대의 유연성을 제공하도록 설계되었습니다. 섹션과 열을 원활하게 통합하고 스타일 및 레이아웃 옵션을 활용하여 비전을 현실로 만들 수 있습니다.

디자인이 모든 장치에서 멋지게 보이도록 실시간 미리보기 기능을 활용하는 것을 잊지 마십시오. Elementor를 사용하면 모든 프로젝트가 기회가 됩니다. 웹 사이트 만들기 정말 눈에 띄는 것이 인상적입니다.

Elementor 사용에 대한 더 많은 팁과 튜토리얼을 보려면 블로그를 구독하고 최신 업데이트와 팁을 계속 확인하세요. 이 기사를 다른 WordPress 및 웹 디자인 애호가와 공유하여 그들이 Elementor의 모든 잠재력을 실현하도록 돕습니다.

지금 Elementor가 제공하는 무한한 가능성을 탐색하고 아이디어를 매력적인 웹 디자인으로 바꿔보세요!

클립이 핀