에디터 X: 탭 추가 및 사용자 지정하기

5 분 분량
에디터 X는 에이전시 및 프리랜서를 위한 새로운 플랫폼인 Wix Studio로 전환됩니다.Wix Studio에 대해 자세히 알아보세요.
탭 요소를 사용해 페이지의 관련 콘텐츠를 구성하고 그롭화하세요. 탭 요소를 사용하면 콘텐츠의 여러 섹션을 간결하게 표시할 수 있어 방문자가 필요한 정보를 쉽게 찾을 수 있습니다. 
라이브 사이트에서 탭 요소가 작동하는 방식을 보여주는 GIF
도움말:

페이지에 탭 요소 추가하기

정보를 구성하는 데 필요한 만큼 탭 요소를 추가하세요. 디자인을 선택해 페이지로 끌어온 후 콘텐츠를 사용자 지정하고 필요한 요소를 추가하세요. 

탭을 추가하려면:

  1. 에디터 X 상단 바에서 요소 추가를 클릭합니다.
  2. 레이아웃 도구를 클릭합니다.
  3. 을 클릭합니다.
  4. 원하는 디자인을 선택한 후 페이지로 끌어다 놓습니다.
  5. 탭 콘텐츠를 사용자 지정하려면:
    1. 방금 추가한 탭 요소를 클릭합니다.
    2. 탭 관리를 클릭합니다.
    3. 작업하고자 하는 탭을 선택합니다.
    4. 탭의 콘텐츠를 편집합니다. 
      • 요소 추가
      • 기존 요소 편집
      • 원하는 레이아웃으로 그리드 조정

탭 관리하기

탭 관리 패널을 사용해 탭을 추가, 복제, 이름 변경 또는 삭제할 수 있습니다. 또한, 관리 패널에서 탭 간을 탐색할 수 있습니다. 탭을 클릭해 표시되는 방식을 확인하세요.  

탭을 관리하려면:

  1. 탭 요소를 클릭합니다.
  2. 탭 관리를 클릭합니다.
  3. 해당 탭에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
  4. 이름 변경, 삭제 또는 복제중 탭에 사용할 작업을 선택합니다.
빈 탭을 추가하려면:
패널 하단에서 탭 추가를 클릭하세요.

탭 디자인하기

페이지 스타일에 맞게 탭 요소를 개인화하세요. 탭 메뉴 및 탭 콘텐츠를 표시하는 컨테이너를 디자인할 수 있습니다.
도움말:
기본, 마우스오버, 선택됨의 3가지 상태에 대한 탭 메뉴를 디자인할 수 있습니다.

탭을 디자인하려면:

  1. 탭 요소를 클릭합니다. 
  2. 에디터 X 상단에서 속성 아이콘을 클릭합니다.
  3. 디자인 탭을 클릭합니다.
  4. 드롭다운에서 디자인할 요소를 선택합니다.
    • 메뉴 컨테이너: 탭 메뉴를 표시하는 컨테이너입니다.
    • 탭: 메뉴에 표시되는 탭입니다.
    • 컨테이너: 각 탭의 콘텐츠를 보여주는 컨테이너입니다.
  5. 사용 가능한 디자인 옵션을 사용합니다.
    • 배경 채우기: 색상, 그라데이션 또는 이미지 배경을 적용합니다. 여러 배경 레이어를 추가하고 투명도를 조정할 수 있습니다. 
    • 테두리: 테두리를 추가해 사이트 페이지와의 대비를 생성합니다. 디자인 및 색상을 선택한 후 두께를 설정하세요.
    • 모서리: 모서리를 표시할 방법을 선택합니다. 각 모서리를 다르게 조정하고 더 둥글게 또는 더 각지게 만들 수 있습니다.
    • 음영: 멋진 3D 효과를 위해 음영을 추가합니다. 크기, 선명도, 각도 등을 설정해 더 큰 효과를 낼 수 있습니다.
    • 레이아웃: 안쪽 여백을 조정해 더 크게 또는 더 작게 만듭니다. 자물쇠undefined 아이콘을 활성화 또는 비활성화해 각 면을 개별적으로 조정하거나 동일하게 조정할 수 있습니다.
    • 텍스트: 메뉴에 표시되는 탭 이름의 스타일 및 서식을 지정합니다. 글꼴, 크기, 색상 등을 변경할 수 있습니다. 
참고:
사용 가능한 옵션은 디자인하기로 선택한 요소에 따라 다릅니다(예: 메뉴 컨테이너, 탭 또는 컨테이너). 

기본 탭 선택하기

기본 탭은 방문자에게 가장 먼저 표시되는 탭입니다. 먼저 표시되길 원하는 탭을 기본 탭으로 지정할 수 있습니다.
도움말:
탭 관리 패널에서 현재 기본 탭 옆 체크 표시 아이콘을 확인할 수 있습니다.

기본 탭을 설정하려면:

  1. 탭 요소를 클릭합니다.
  2. 탭 관리를 클릭합니다.
  3. 해당 탭에 마우스오버한 후 추가 작업 아이콘을 클릭합니다.
  4. 기본값으로 지정을 클릭합니다.

탭 레이아웃 조정하기

탭 요소의 레이아웃, 간격, 여백을 사용자 지정해 원하는 대로 표시되도록 하세요. 탭이 많은 경우, 메뉴에 표시하는 방법을 결정할 수 있습니다. 방문자가 스크롤해 나머지 탭을 볼 수 있도록 하거나 메뉴에 행을 추가해 모두 표시되도록 할 수 있습니다. 

탭 레이아웃을 조정하려면:

  1. 탭 요소를 클릭합니다.
  2. 레이아웃 아이콘을 클릭합니다.
  3. 다음 옵션을 사용해 레이아웃을 조정합니다.
    • 레이아웃 선택: 탭 메뉴를 얼마나 늘릴 것인지 선택합니다.
      • 기본 텍스트: 메뉴가 텍스트에 맞춰 늘어나지 않습니다. 메뉴를 왼쪽, 중앙 또는 오른쪽으로 정렬할 수 있습니다.
      • 가로에 맞춤: 텍스트에 맞게 메뉴가 늘어납니다. 메뉴의 텍스트를 왼쪽, 중앙 또는 오른쪽으로 정렬할 수 있습니다.
    • 탭 간격: 슬라이더를 끌어 메뉴에서 탭 사이의 간격을 변경합니다.
    • 탭 및 컨테이너 간 간격: 각 탭의 콘텐츠를 표시하는 컨테이너와 메뉴 사이의 간격을 변경합니다.
    • 가로 여백: 메뉴 탭의 왼쪽 및 오른쪽 여백을 조정합니다.
    • 세로 여백: 메뉴 탭 상단 및 하단의 여백을 조정합니다.
    • 크기가 맞지 않는 탭 표시 방법: 메뉴에 표시되지 않는 탭을 표시하는 방법을 선택합니다.
      • 스크롤: 방문자가 메뉴를 스크롤해 더 많은 탭을 볼 수 있습니다.
      • 줄바꿈: 다른 탭에 맞게 행이 추가됩니다. 슬라이더를 사용해 행 사이의 간격을 조정할 수 있습니다.
    • 탭 표시 옵션: 메뉴의 탭을 왼쪽에서 오른쪽으로 또는 그 반대로 표시합니다.

도움이 되었나요?

|