Elementor를 사용하여 Instagram의 바이오 랜딩 페이지에 링크를 만드는 방법

인스타그램을 사용하여 청중과 소통하고 있다면 인스타그램은 방문자를 웹사이트로 보낼 수 있는 단 하나의 옵션인 인스타그램 약력의 링크만 제공합니다.

개별 Instagram 게시물을 연결할 수 없기 때문에 일부 사람들은 웹사이트에 새 블로그 게시물을 게시할 때마다 약력에서 수동으로 링크를 업데이트합니다.

이 게시물에서는 방문자가 항상 Instagram 프로필의 링크에서 최신 콘텐츠에 액세스할 수 있도록 하는 동시에 약력에 동일한 링크를 유지할 수 있는 더 나은 방법을 배웁니다.

이를 위해 Elementor를 사용하여 Instagram의 바이오 랜딩 페이지에 전용 링크를 만들 수 있습니다. 약력 소개 페이지의 링크는 원활한 경험을 위해 Instagram과 유사한 디자인을 따르고 손가락 하나 까딱하지 않고도 최신 블로그 콘텐츠를 동적으로 표시할 수 있습니다.

모든 단계가 자세히 설명된 전체 자습서를 보려면 위의 전체 비디오 자습서를 볼 수 있습니다. 그렇지 않으면 비디오와 함께 이어지는 텍스트 기반 자습서를 계속 읽으십시오.

참고 – 이 자습서를 따르려면 게시물 위젯에 액세스할 수 있도록 Elementor Pro가 필요합니다. 게시물 위젯을 사용하면 새 블로그 게시물을 게시할 때마다 방문 페이지를 편집할 필요 없이 콘텐츠를 동적으로 표시할 수 있습니다.

시작하려면 WordPress 대시보드에서 새 페이지를 만드세요( 페이지 → 새로 추가 ).

그런 다음 제목(예: Link in Bio)을 추가하고 Elementor 로 편집 버튼을 클릭하여 Elementor 인터페이스를 엽니다.

Elementor 인터페이스에서 왼쪽 하단 모서리에 있는 톱니바퀴 아이콘을 클릭한 다음 페이지 레이아웃 을 Elementor Canvas와 동일하게 설정합니다 . 그런 다음 스타일 탭으로 이동하여 Body Style 의 배경에 밝은 색상을 사용합니다.

그런 다음 더하기 아이콘을 클릭하여 새 섹션을 만들고 3열 레이아웃을 선택합니다.

섹션 설정에서 콘텐츠 너비 를 Boxed 와 동일하게 설정하고 너비 를 940으로 설정합니다. 이렇게 하면 Instagram의 boxed 레이아웃의 모양과 느낌을 유지하는 데 도움이 됩니다.

섹션 배경을 흰색으로 설정하고 하단에 단색 회색 테두리를 추가합니다.

그런 다음 디자인에 콘텐츠를 추가합니다.

• 가장 왼쪽 열에 이미지 위젯을 추가하여 이미지 로고를 표시합니다. 링크 설정을 사용하여 홈페이지에 대한 동적 링크를 설정할 수 있습니다.
• 중간 열에 다른 이미지 위젯을 추가하여 워드마크 로고(또는 워드마크가 없는 경우 텍스트)를 표시합니다.
• 가장 오른쪽 열에 버튼 위젯을 추가하고 연결하려는 페이지와 CTA를 설정합니다. 그런 다음 버튼의 스타일을 지정합니다.

콘텐츠를 추가했으면 첫 번째 열의 설정을 열고 너비를 10%로 변경하여 이미지 위젯이 잘 정렬되도록 합니다.

그런 다음 왼쪽 하단 모서리에 있는 아이콘을 사용하여 모바일 미리보기를 엽니다. 필요한 경우 모바일 버전의 방문 페이지가 보기 좋게 보이도록 조정하세요. Instagram 방문자의 대부분은 모바일 장치를 사용한다는 것을 기억하십시오.

필요한 경우 로고와 버튼이 수평으로 정렬되도록 중간 열을 숨길 수 있습니다.

이제 바탕 화면 보기로 돌아가서 헤더 섹션을 마우스 오른쪽 버튼으로 클릭하여 복제합니다.

복제된 섹션에 대한 설정에서 스타일 탭으로 이동하여 배경색을 투명하게 설정합니다.

그런 다음 오른쪽 클릭을 사용하여 두 번째 및 세 번째 열을 삭제합니다. 그렇게 하면 로고만 남게 됩니다.

거기에서:

• 나머지 열의 설정을 엽니다.
• 고급 탭으로 이동합니다.
• 모든 면의 패딩을 0으로 설정합니다.
• 나머지 이미지 위젯(내 로고)을 삭제합니다.

모든 항목을 삭제했으면 제목 위젯을 끌어서 사이트에 대한 텍스트를 추가할 수 있습니다. 귀하의 사이트와 일치하도록 색상과 서체를 설정하십시오.

그런 다음 제목 위젯을 복제하고 텍스트를 사이트의 URL과 동일하게 설정합니다. 그런 다음 사이트 URL이 포함된 동적 링크를 추가합니다.

다시 한 번, 모바일 미리보기로 이동하여 몇 가지 조정을 하고 싶을 것입니다. 예를 들어 열 너비를 변경하고 모바일 장치의 패딩을 편집해야 할 수 있습니다.

이제 랜딩 페이지의 나머지 공간을 사용하여 최근에 게시한 콘텐츠를 선보일 수 있습니다.

최근 게시물을 표시하려면 바탕 화면 미리보기로 돌아가서 두 개의 제목 위젯 아래에 게시물 위젯을 추가합니다.

게시물 위젯 설정에서:

• 열 을 1로 설정
• 페이지당 게시물 을 1로 설정
• 이미지 비율 을 0.3으로 설정

제목을 숨기고 메타 데이터를 제거합니다.

그런 다음 쿼리 설정을 사용하여 표시할 게시물을 제어합니다.

• 포함 기준 을 용어와 동일하게 설정
• 용어 를 Linkinbio와 동일하게 설정

"Linkinbio"라는 새로운 WordPress 블로그 게시물 카테고리를 만들어야 합니다. 이 카테고리에 추가하는 모든 게시물은 Instagram 방문 페이지에 자동으로 표시됩니다.

그런 다음 스타일 탭으로 이동하여 발췌 텍스트의 스타일을 지정합니다.

마지막으로 새 Divider 위젯을 추가하여 하단 테두리를 만듭니다. 첫 번째 섹션의 테두리에서 동일한 밝은 회색을 일치시킵니다.

이제 추천 게시물 아래에 표시되는 Instagram 그리드를 만들어야 합니다.

시작하려면 기존 게시물 위젯을 마우스 오른쪽 버튼으로 클릭하여 복사합니다. 그런 다음 이전 섹션의 아래쪽 회색 테두리 아래에 붙여넣습니다.

이제 복제된 게시물 위젯을 약간만 변경하면 됩니다.

• 열 을 3으로 변경
• 페이지당 게시물 수 를 3 의 배수로 설정하여 항상 정사각형 그리드를 갖도록 합니다.
• 이미지 비율 을 1로 설정
• 발췌문 숨기기

스타일 탭을 사용하여 이미지의 간격을 조정할 수도 있습니다.

그런 다음 모바일 미리보기로 이동하여 모바일 디자인을 조정합니다.

다음을 원할 수 있습니다.

• 큰 추천 게시물 이미지 및 구분선 숨기기
• 모바일에서 게시물 그리드를 3 으로 설정

그리고 그게 다야! 맞춤 Instagram 랜딩 페이지를 만들었습니다.

Linkinbio 카테고리로 새 블로그 게시물을 게시할 때마다 이 페이지에 자동으로 표시됩니다.

작업을 마치려면 Instagram 프로필에 방문 페이지 링크를 추가하기만 하면 됩니다. 이제 새 게시물을 게시할 때마다 링크를 업데이트할 필요가 없습니다. 멋지죠?

바이오 랜딩 페이지에서 자신의 Instagram 링크를 시작하려면 지금 Elementor Pro를 구매하십시오.