요소를 사용하여 WordPress에서 수직 스크롤 탭을 만드는 방법

세로 스크롤 탭을 사용하면 키가 크고 나란히 레이아웃에 탭 콘텐츠를 표시 할 수 있습니다. 탭은 왼쪽이나 오른쪽에 쌓여 있고 각 탭의 내용은 반대쪽에 나타납니다. 방문자는 탭을 아래로 스크롤하여 그 안의 내용을 탐색 할 수 있습니다.

이것은 페이지를 깨끗하게 유지하고 사람들은 현재 페이지를 남기지 않고 많은 정보를 볼 수 있습니다. 텍스트를 표시 할 수있을뿐만 아니라 수직 스크롤 탭에 이미지, 비디오 및 템플릿을 표시 할 수도 있습니다. 사용자는 탭을 클릭하거나 탭하여 링크 된 콘텐츠를 확인할 수 있지만 다른 섹션은 숨겨져 있습니다.

Elementor는 인기있는 No-Code 웹 사이트 빌더입니다. 이 플러그인을 사용하면 드래그 앤 드롭 기능을 사용하여 전체 웹 사이트를 처음부터 구축 할 수 있습니다. 이 튜토리얼 게시물에서는 요소와 함께 WordPress에서 수직 스크롤 탭을 만드는 방법을 보여줍니다.

수직 스크롤 탭의 사용 사례

수직 스크롤 탭을 사용하면 작은 공간에서 많은 양의 콘텐츠를 구성하는 데 도움이됩니다. 그들은 방문객들이 새 페이지를로드하지 않고 주제를 이동할 수 있도록합니다. 이 레이아웃은 데스크탑과 모바일에서 사용하기 쉽습니다. 아래의 수직 스크롤 탭의 일부 사용 사례를 살펴 보겠습니다.

에이. 제품 또는 서비스 세부 사항

많은 제품 또는 서비스 설명을 나란히 표시 할 수 있습니다. 각 탭은 사양, 가격, 기능 또는 리뷰를 보유 할 수 있습니다. 방문자는 페이지를 떠나지 않고 다른 옵션을 빠르게 비교할 수 있습니다.

비. 자주 묻는 질문 (FAQ)

수직 탭은 FAQ에 적합합니다. 한 탭에서 유사한 질문을 그룹화하고 다른 탭에서 답변 할 수 있습니다. 독자는 스크롤하여 관심있는 질문 만 클릭 할 수 있습니다.

기음. 단계별 가이드 또는 튜토리얼

많은 단계와 프로세스를 공유하려면 세로 탭이 각 단계를 명확하게 유지합니다. 사용자는 각 탭을 클릭하여 가이드를 따라 순서대로 할 수 있습니다. 이것은 학습을 쉽게하고 페이지를 깔끔하게 유지합니다.

디. 팀원 또는 직원 프로필

각 회원에게 탭을 제공하여 팀을 전문적인 방식으로 소개하십시오. 각 탭에는 사진, 역할 및 짧은 바이오가 표시 될 수 있습니다. 방문객들은 목록을 스크롤하고 혼란없이 모든 사람에 대해 배울 수 있습니다. 최고의 팀 페이지 예제를 탐색하십시오.

이자형. 포트폴리오 또는 프로젝트 쇼케이스

공간을 절약하기 위해 수직 탭에 작업이나 프로젝트를 표시하십시오. 각 탭에는 이미지, 설명 및 세부 사항에 대한 링크가 표시 될 수 있습니다. 이를 통해 방문자는 한 페이지의 한 페이지에서 많은 프로젝트를 탐색하는 데 도움이됩니다.

요소에서 수직 스크롤 탭을 만드는 방법

이론적 인 부분은 끝났습니다. 이제 수직 스크롤 탭이 무엇인지, 사용 사례가 무엇인지 명확하게 생각하기를 바랍니다. 우리는 지금 튜토리얼 부분을 다룰 것입니다. 이 섹션에서 WordPress에서 Elementor와 함께 수직 스크롤 탭을 만드는 방법을 설명합니다. 계속 읽으십시오!

튜토리얼을 시작하기위한 사전 반품

요소를 사용하여 WordPress에서 수직 스크롤 탭을 만들려면 사이트에 다음 플러그인을 설치하고 활성화해야합니다.

• 요소가 없음
• Happyaddons 무료
• Happyaddons Pro

참고 : Elementor에는 스크롤 탭을 만들기위한 내장 옵션이 없기 때문에 HappyAddons Pro가 필요합니다. HappyAddons Pro는 스크롤 탭 이라는 위젯을 제공하여 수직 스크롤 탭을 쉽게 만들 수 있습니다.

이 플러그인이 사이트에 준비되면 아래 설명 된 자습서를 따르십시오.

단계 01 : 요소가있는 페이지를 엽니 다

수직 스크롤 탭을 만들려면 Elementor와 함께 페이지를 열기 만하면됩니다.

STEP 02 : 캔버스에서 스크롤 탭 위젯을 드래그 앤 드롭

요소 패널에서 스크롤 탭 위젯을 찾으십시오 . 요소 캔버스에 드래그 앤 드롭.

스크롤 탭 위젯에는 기본 콘텐츠가 포함되어 있습니다. 위젯이 캔버스에 추가되면이 기본 콘텐츠가 표시됩니다.

단계 03 : 탭에 컨텐츠 추가를 시작하십시오

스크롤 탭 위젯에 컨텐츠를 추가하고 여러 가지 방법으로 레이아웃을 스타일로 만들 수 있습니다. 이 단계에서 그들을 탐색하십시오.

# 스크롤 탭 위젯에 제목을 추가합니다

모든 웹 섹션에는 어떤 유형의 컨텐츠가 포함되어 있는지 명확하게 알려주는 제목이 있어야합니다. 따라서 스크롤 탭 위젯 섹션에 대한 제목을 작성해야합니다.

컨텐츠> 탭 컨텐츠> 제목 으로 이동하십시오. 타이틀을 쓸 공간을 얻을 수 있습니다. 당신은 우리가 '세련된 시계 통찰력'이라는 제목을 썼다는 것을 알 수 있습니다.

# 위젯에 대한 설명을 작성하십시오

제목 아래에 쓰면 위젯에 대한 설명을 쓸 수 있습니다. 설명이 필요하지 않으면 제거 할 수 있습니다.

# 탭에 컨텐츠를 추가합니다

커서를 탭으로 가져 가서 클릭하십시오. 탭을 확장하고 컨텐츠를 추가 할 수 있습니다.

# 탭의 제목을 작성하십시오

각 탭에 대한 제목을 작성 해야합니다. 탭이 확장되면 NAV 텍스트 아래에 상자가 나타납니다. 여기에서 탭의 제목을 쓸 수 있습니다.

# 탭의 아이콘을 변경합니다

필요하지 않은 경우 아이콘을 제거 할 수 있습니다. 그러나 아이콘을 변경하려면 NAV 아이콘 아래에서 볼 수있는 아이콘을 클릭하십시오 .

아이콘 라이브러리가 즉시 열립니다. 좋아하는 아이콘을 선택 하고 삽입 버튼을 누르십시오 .

아이콘이 변경되었음을 알 수 있습니다.

# 편집기를 통해 탭에 컨텐츠를 추가합니다

각 탭에서는 두 가지 유형의 컨텐츠를 추가 할 수 있습니다. 편집기 또는 템플릿을 사용할지 여부를 선택할 수 있습니다.

먼저 편집기 옵션을 선택 하겠습니다.

이 편집기를 사용하면 모든 유형의 텍스트 및 이미지를 추가 할 수 있으며 각 탭의 캔버스에 즉시 표시됩니다.

# 탭 컨텐츠의 배경색을 변경합니다

탭의 내용을 더 잘 강조 표시하려면 배경색을 변경할 수 있으므로 탭에 추가 한 모든 컨텐츠와 잘 맞습니다.

# 템플릿을 통해 탭에 컨텐츠를 추가합니다

위에서 말했듯이 위젯을 사용하면 편집기 및 템플릿을 통해 탭에 컨텐츠를 추가 할 수 있습니다. 이제 템플릿을 사용하여 컨텐츠를 추가하는 방법을 살펴 보겠습니다.

컨텐츠 유형 에서 템플릿 옵션을 선택하십시오. 사이트에 이미 사전 디자인 된 템플릿을 저장 한 경우이 옵션이 적합합니다.

템플릿을 선택하는 옆에 드롭 다운 아이콘을 클릭하십시오 . 그런 다음 탭에 표시 할 템플릿을 선택하십시오.

원하는 템플릿이 이미 탭에 추가되어 있음을 알 수 있습니다.

같은 방식으로 스크롤 탭 위젯의 모든 탭에 컨텐츠를 추가하십시오.

단계 04 : 스크롤 탭 위젯의 설정을 구성합니다

컨텐츠 부분이 완료되면 설정 섹션을 확장하십시오 .

이 섹션에서 다양한 정렬 조정을 포함하여 네비게이터 패널의 너비와 컨텐츠 패널의 높이를 변경할 수 있습니다.

# NAV 패널의 너비를 조정하십시오

스크롤 탭 위젯에는 네비게이터 패널 (NAV 패널)과 컨텐츠 패널 의 두 부분이 있습니다.

이 옵션에서 스케일을 드래그하여 네비게이터 패널의 너비를 변경할 수 있습니다. 또한 위치와 정렬을 조정할 수 있습니다. 프로세스는 아래에 첨부 된 비디오 클립에 표시됩니다.

# 제어판의 높이를 조정합니다

같은 방식으로 제어판의 높이를 조정하십시오. 또한 내용이 수직으로 올바르게 정렬되었는지 확인하십시오.

단계 05 : 스크롤 탭 위젯의 양식화

스타일 탭 으로 오세요. 먼저 네비게이터 패널 의 배경색을 설정합시다 .

# NAV 패널 컨텐츠의 타이포그래피를 사용자 정의합니다

네비게이터 패널에 추가 한 각 컨텐츠에 대해 타이포그래피를 하나씩 업데이트하십시오. 필요에 따라 글꼴 패밀리, 크기, 무게, 선 높이 등을 변경할 수 있습니다.

# 탭을 styl습니다

테두리 유형, 테두리 너비, 패딩, 테두리 색상, 테두리 반경, 텍스트 색상 및 배경색을 추가하면 탭을 양식화하여 다음 이미지처럼 표시 할 수 있습니다. 당신이 직접 할 수 있기를 바랍니다.

같은 방식으로 컨텐츠 패널 및 스크롤 섹션과 관련된 컨텐츠를 확장하고 스타일을 유지하십시오.

단계 06 : 휴대폰 용 스크롤 탭 위젯 최적화

모바일 화면 크기의 위젯을 최적화하려면 상단 막대의 모바일 초상화 모드 로 이동하십시오 .

네비게이터 탭이 기본적으로 상단에 나타납니다.

# 모바일 장치의 컨텐츠 패널 높이를 조정하십시오

컨텐츠 패널에는 기존 높이가 충분하지 않을 수 있습니다. 이 경우 탭 내의 모든 컨텐츠를 모바일 화면 크기에서 완벽하게 볼 수 있도록 높이를 늘려야합니다.

단계 07 : 태블릿의 스크롤 탭 위젯 최적화

마찬가지로 태블릿 초상화 모드 로 전환하여 태블릿 화면 크기에 최적의 디스플레이를위한 컨텐츠를 최적화하십시오 .

아래에 첨부 된 비디오 클립에서 위젯이 이미 태블릿 화면에서 잘 보이는 것을 볼 수 있습니다. 따라서 어쨌든 수정할 필요는 없습니다.

단계 08 : 스크롤 탭 위젯 미리보기

미리보기 페이지로 와서 위젯이 잘 작동하는지 확인하십시오. 위젯이 우리의 끝에서 잘 작동한다는 것을 알 수 있습니다.

따라서 elementor와 함께 WordPress에서 수직 스크롤 탭을 만들 수 있습니다.

마지막 테이크 아웃!

수직 스크롤 탭은 많은 정보를 공유하면서 웹 페이지를 깔끔하게 유지하는 현명한 방법입니다. 그들은 방문객들이 새로운 페이지로 뛰어 들지 않고 필요한 것을 찾을 수 있도록합니다. 위의 단계를 따르면 Elementor 및 Happyaddons Pro와 함께 이러한 탭을 쉽게 설계 할 수 있습니다.

이것은 귀하의 사이트에 현대적인 모습을 제공하고 사용자가 귀하의 콘텐츠를 탐색하는 방식을 향상시킵니다. 그러나이 섹션을 작성하는 동안 몇 가지 모범 사례를 명심하십시오. 각 탭에 대한 명확한 제목을 사용하여 사용자가 기대할 내용을 알 수 있습니다. 페이지가 빠르게로드되도록 텍스트, 이미지 및 동영상이 가볍지 않은지 확인하십시오.

다양한 화면 크기에서 디자인을 확인하고 모바일 사용자의 간격을 조정하십시오. 색상과 글꼴을 사이트 스타일과 일치하게 유지하여 탭이 나머지 디자인과 자연스럽게 혼합됩니다. 이 작은 세부 사항은 모든 방문객에게 매끄럽고 전문적인 경험을 제공하는 데 도움이됩니다.

요소와 함께 WordPress에서 플립 박스를 디자인하는 방법을 배우십시오.