Elementor 웹사이트에 Instagram 피드 표시 [단계별]

WordPress 웹 사이트에 대한 Elementor Instagram 피드를 만들고 싶습니까?

이 단계별 가이드에서는 Spotlight라는 무료 비기술 플러그인을 사용하여 Instagram 피드를 Elementor에 추가하는 방법을 배웁니다 .

기술 지식이나 비용이 필요하지 않습니다. 튜토리얼을 따라하기만 하면 바로 시작할 수 있습니다.

단계별 가이드: Elementor 웹사이트에 Instagram 피드 표시

시작할 준비가 되셨습니까? 다음은 Elementor Instagram 피드를 표시하는 방법에 대한 단계별 가이드입니다.

1단계: Instagram 피드 플러그인 설치 및 활성화

시작하려면 Spotlight Instagram 피드 플러그인을 설치하고 활성화해야 합니다.

다시 말하지만 Spotlight는 무료로 사용할 수 있으며 Elementor와 100% 호환됩니다.

무료 Spotlight 플러그인은 WordPress.org에 나열되어 있으므로 다음 지침에 따라 설치할 수 있습니다.

1. WordPress 대시보드를 엽니다.
2. 플러그인 → 새로 추가 로 이동합니다.
3. "스포트라이트"를 검색합니다.
4. 지금 설치 버튼을 클릭합니다.
5. 설치 프로세스가 완료되면 활성화 버튼을 클릭하여 Spotlight 플러그인을 활성화합니다.

2단계: Instagram 액세스 토큰 만들기

다음으로 WordPress 사이트가 Instagram에 연결할 수 있도록 하는 Instagram 액세스 토큰을 만들어야 합니다.

걱정하지 마세요. 조금 기술적으로 들리겠지만 버튼 몇 개만 클릭하면 총 30초 정도 소요됩니다!

자신의 개인 계정을 사용하는 경우 Spotlight를 통해 계정을 직접 연결할 수도 있습니다( 이 경우 다음 단계로 건너뛸 수 있는 옵션이 있음 ). 그러나 클라이언트 계정 연결(클라이언트 웹 사이트를 구축하는 경우)을 포함하여 모든 설정에 사용할 수 있으므로 Instagram 액세스 토큰 방법을 사용할 것입니다.

Instagram 액세스 토큰을 만들려면 이 페이지로 이동하세요.

또는 클라이언트 웹 사이트를 구축하는 경우 클라이언트에게 이 페이지로 이동하여 동일한 지침을 따르도록 요청하십시오.

그런 다음 개인 Instagram 계정 또는 비즈니스 계정을 연결할지 여부에 따라 관련 액세스 토큰 생성 버튼을 클릭합니다.

이렇게 하면 계정에 액세스할 수 있는 Spotlight 권한을 부여할지 묻는 Instagram의 팝업 화면이 열립니다.

팝업에서 허용 버튼을 클릭합니다.

허용 을 클릭하면 원본 페이지에 Instagram 액세스 토큰이 표시되어야 합니다.

잠시 후에 필요하므로 이 액세스 토큰을 안전한 장소에 복사하십시오.

또는 사이트를 구축하는 개발자와 함께 작업하는 경우 개발자가 플러그인 설정을 계속할 수 있도록 이 액세스 토큰을 개발자와 공유해야 합니다 .

3단계: Instagram 계정을 Elementor 웹사이트에 연결

이제 WordPress 대시보드에 이 Instagram 액세스 토큰을 추가하여 Elementor 웹사이트를 Instagram에 연결할 수 있습니다.

1. WordPress 대시보드로 돌아갑니다.
2. Instagram 피드 → 설정 으로 이동합니다.
3. Instagram/Facebook 액세스 토큰 상자에 Instagram 액세스 토큰을 붙여넣습니다.
4. 연결 버튼을 클릭합니다.

자신의 Instagram 계정으로만 작업하는 경우 개인 계정 연결 또는 비즈니스 계정 연결 버튼을 클릭하여 직접 연결할 수도 있습니다.

Connect 를 클릭하면 성공 메시지가 표시됩니다.

개인 계정을 연결하는 경우 맞춤 사진 및 약력 텍스트를 추가하는 옵션도 표시됩니다. 예를 클릭하여 지금 할 수 있습니다. 또는 Elementor Instagram 피드를 구성한 후 나중에 언제든지 추가할 수 있습니다.

말하자면…

4단계: Instagram 피드 구성

이제 Instagram 계정을 연결했으므로 첫 번째 Elementor Instagram 피드를 설정할 준비가 되었습니다.

그렇게 하려면 WordPress 대시보드에서 Instagram 피드 → 피드 로 이동합니다.

피드 유형 선택

먼저 표시할 콘텐츠 유형을 선택합니다.

무료 버전의 Spotlight를 사용하면 자신의 Instagram 게시물 피드를 표시할 수 있습니다. 그러나 Spotlight Pro는 해시태그 기반 피드 또는 계정에 태그가 지정된 게시물과 같은 더 많은 옵션을 추가합니다.

Spotlight Pro를 사용하려면 Spotlight Pro의 14일 무료 평가판에 액세스하여 작동 방식을 확인할 수 있습니다(신용 카드 필요 없음). 오른쪽 상단 모서리에 있는 무료 14 일 평가판 버튼을 클릭하기만 하면 됩니다.

Elementor Instagram Feed 튜토리얼에서는 My Instagram posts 옵션을 사용하겠습니다.

그런 다음 다음 단계를 클릭하여 진행합니다.

템플릿 선택

다음으로 Spotlight의 템플릿 중 하나를 선택하여 Elementor Instagram 피드의 레이아웃과 디자인을 제어할 수 있습니다.

무료 버전은 6개의 템플릿을 제공하며 Spotlight Pro는 8개의 템플릿을 추가합니다.

이 예에서는 무료 기본 피드 템플릿을 선택하지만 원하는 경우 다른 템플릿을 자유롭게 선택할 수 있습니다.

선택을 마치면 다음 단계 버튼을 클릭하여 계속 진행합니다.

인스타그램 계정 선택

다음 단계에서 연결 및 사용자 지정 하라는 메시지가 표시됩니다. 하지만 Instagram 계정을 이미 연결했기 때문에 여기에서 더 이상 아무것도 할 필요가 없습니다.

계속 진행하려면 연결 및 사용자 정의 버튼을 클릭하십시오.

Elementor Instagram 피드 사용자 정의

이제 선택한 템플릿을 추가로 사용자 지정할 수 있는 Spotlight 사용자 지정 도구에 있게 됩니다.

시작하려면 이 계정의 게시물 표시 제목 아래에서 이전 단계에서 연결한 계정을 선택합니다.

이렇게 하면 Instagram 계정의 실제 게시물을 사용하도록 피드의 실시간 미리보기가 업데이트됩니다.

다음으로 디자인 탭으로 이동하여 Elementor Instagram 피드 템플릿을 사용자 지정할 수 있습니다.

다음은 플러그인의 무료 버전으로 여기에서 선택할 수 있는 몇 가지 선택 사항입니다.

• 표시할 게시물 수와 열 수를 선택합니다.
• 피드 순서를 조정합니다. 기본적으로 가장 최근 게시물이 먼저 표시되지만 원하는 경우 이를 변경할 수 있습니다.
• 사용자가 게시물을 클릭할 때 게시물을 여는 방법을 선택합니다.
• 피드의 크기와 간격을 조정하세요.
• 피드 항목 위에 표시되는 피드 헤더를 사용자 정의하십시오.
• Instagram 팔로우 버튼 스타일 및 텍스트를 구성합니다.
• 더 많은 게시물 로드 버튼 스타일과 텍스트를 구성합니다.
• 더 많은 제어를 원하는 경우 사용자 정의 CSS를 추가하십시오.

Spotlight Pro를 사용하면 캡션, 좋아요 및 댓글과 같은 세부 사항을 더 많이 제어할 수 있습니다.

Spotlight Pro 사용자는 다른 탭에 액세스하여 피드 콘텐츠를 필터링 및 조정하거나 피드 프로모션을 설정할 수도 있습니다.

피드 모양에 만족하면 오른쪽 상단 모서리에 있는 저장 버튼을 클릭해야 합니다.

그런 다음 Elementor에 Instagram 피드를 삽입하는 방법으로 이동하겠습니다.

5단계: Elementor에 Instagram 피드 삽입

Spotlight는 Elementor Instagram 피드를 삽입하는 두 가지 방법을 제공합니다.

• Spotlight(무료) – 일반 Spotlight WordPress 위젯을 사용하여 Elementor에 피드를 추가할 수 있습니다. Elementor 인터페이스에서 직접 이 위젯을 추가할 수 있지만 Elementor에서 피드 설정을 사용자 지정할 수는 없습니다.
• Spotlight Pro – 전용 Spotlight Instagram Feed Elementor 위젯을 사용하면 피드를 삽입할 수 있을 뿐만 아니라 Elementor 인터페이스에서 직접 디자인과 스타일을 추가로 구성할 수 있습니다.

두 가지 옵션을 모두 살펴보겠습니다…

어느 쪽이든 Elementor Instagram 피드를 추가하려는 콘텐츠에 대한 Elementor 편집기를 열어 시작할 수 있습니다.

스포트라이트(무료)

무료 버전의 Spotlight를 사용하는 경우 Elementor 사이드바에서 WordPress 섹션까지 아래로 스크롤하고 옵션 목록을 확장합니다.

그런 다음 Spotlight Instagram 피드 위젯을 피드를 표시할 Elementor 디자인으로 드래그합니다.

위젯을 추가하면 사이드바에 두 가지 옵션이 표시됩니다.

1. 제목을 추가하거나 비워 둡니다.
2. 이전 단계에서 방금 생성한 Instagram 피드를 선택합니다.

그런 다음 적용 을 클릭합니다.

고급 탭을 사용하여 간격 및 여백과 같은 세부 정보를 조정할 수도 있습니다.

Elementor 편집기에서 피드의 실시간 미리보기가 표시되지 않을 수 있습니다.

그러나 라이브 미리 보기 또는 페이지의 라이브 버전을 열면 Elementor Instagram 피드가 표시됩니다.

스포트라이트 프로

Spotlight Pro를 사용하는 경우 전용 Spotlight Instagram Feed Elementor 위젯을 받게 됩니다.

이 위젯을 사용하면 Elementor 편집기에서 실시간 미리보기를 볼 수 있을 뿐만 아니라 Elementor 인터페이스에서 직접 Instagram 피드를 사용자 지정(및 생성)할 수도 있습니다.

다시 말하지만, 이것을 테스트하고 싶다면 Spotlight Pro의 14일 무료 평가판을 받을 수 있습니다. 신용 카드가 필요하지 않습니다.

이름으로 위젯을 검색하거나 Elementor 위젯의 일반 섹션에서 찾을 수 있습니다.

위젯을 추가하면 Elementor Instagram 피드의 미리보기가 즉시 표시됩니다.

필요한 경우 편집 버튼을 클릭하여 Elementor에서 바로 피드 설정을 편집할 수 있습니다. 또는 여러 피드를 표시하려는 경우 새 피드를 만들 수도 있습니다.

6단계: 팝업에 Instagram 피드 표시

이 마지막 단계는 선택 사항입니다…

그러나 Elementor의 팝업에 Instagram 피드를 표시하려면 몇 가지 옵션이 있습니다.

먼저 Spotlight에는 방문자가 개별 게시물을 클릭할 때 팝업에 개별 게시물을 표시하는 기능이 내장되어 있습니다. 이것은 무료 및 유료 버전 모두에서 사용할 수 있습니다.

예를 들면 다음과 같습니다.

이 설정을 사용하거나 조정하려면 피드 옵션 에서 게시물 열기 설정을 팝업 상자 로 설정하세요.

Spotlight Pro 사용자는 팝업 라이트박스 설정을 사용하여 팝업을 추가로 구성할 수 있습니다.

전체 Instagram 피드를 팝업에 표시하려면 다음과 같은 몇 가지 옵션이 있습니다.

1. Elementor Pro가 있는 경우 Spotlight Instagram Feed 위젯을 Elementor Popup Builder로 만든 팝업에 추가할 수 있습니다. 팝업 디자인에 위젯을 추가할 때 이전 단계와 동일한 단계를 따르십시오.
2. Popup Maker와 같은 WordPress 팝업 플러그인을 사용할 수 있습니다. 팝업에 피드를 표시하려면 Spotlight 단축 코드를 사용할 수 있습니다.

결론

이것으로 무료 Spotlight 플러그인을 사용하여 Elementor Instagram 피드를 표시하는 방법에 대한 가이드를 마칩니다.

이 가이드의 모든 내용을 따르고 비용을 들이지 않고도 Elementor Instagram 피드를 만들 수 있습니다.

일반 Spotlight WordPress 위젯 대신 사용할 수 있는 전용 Elementor Instagram 피드 위젯과 같은 더 많은 기능을 원하는 경우 Spotlight Pro로 업그레이드할 수 있습니다.

Spotlight Pro는 신용 카드가 필요 없는 14일 무료 평가판을 제공하므로 약정하기 전에 항상 프리미엄 기능을 테스트할 수 있습니다.