레이아웃 - 탭

Layout ​아래의 Page Builder 패널에서​ Tabs ​자리 표시자를 스테이지 또는 스테이지의 행 또는 열로 직접 드래그합니다.

{width="600" modal="regular"}

Tab 1 레이블을 클릭하여 개별 탭 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

레이블로 사용할 Tab Name ​을(를) 입력하십시오.

{width="600" modal="regular"}

필요한 경우 탭의 Minimum Height ​을(를) 입력합니다.

이 값은 유효한 CSS 단위(예: 100px, 50%, 50em, 100vh) 또는 계산(예: 100vh - 237px)이 있는 숫자일 수 있습니다.

Vertical Alignment 설정을 선택하여 탭에 추가된 모든 콘텐츠 컨테이너(위쪽, 가운데 또는 아래쪽)를 정렬합니다.

필요한 경우 다음 섹션을 지침으로 사용하여 다른 옵션을 설정합니다.

• Background
• Advanced

오른쪽 상단 모서리에서 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

도구 상자를 표시하고 추가( {width="20"} ) 아이콘을 선택하려면 탭 컨테이너 위로 마우스를 가져갑니다.

Tab 2 레이블을 클릭하여 커서를 표시하고 탭의 사용자 지정 레이블을 입력합니다.

스테이지에서 두 번째 탭을 다시 클릭하고 복제( {width="20"} ) 아이콘을 선택합니다.

YourName Copy 레이블을 클릭하여 커서를 표시하고 세 번째 탭에 대한 사용자 지정 레이블을 입력합니다.

이동할 탭을 클릭합니다.

탭 레이블 텍스트 바로 앞에 표시되는 이동( {width="20"}) 아이콘을 선택하여 탭 집합 내의 새 위치로 드래그합니다.

콘텐츠를 추가할 탭을 클릭합니다.

Page Builder 패널에서 Elements ​을(를) 확장하고 Text 자리 표시자를 탭으로 드래그합니다.

편집기에 텍스트를 입력하거나 붙여 넣고 편집기 도구 모음을 사용하여 필요에 따라 서식을 지정합니다.

텍스트 콘텐츠 형식 작업에 대한 자세한 내용은 요소 - 텍스트를 참조하십시오.

{width="500" modal="regular"}

오른쪽 상단에서 Save ​을(를) 클릭합니다.

도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택하려면 개별 탭 위로 마우스를 가져갑니다.

필요한 경우 탭의 기본 설정을 변경합니다.

• Tab Name - 탭 레이블에 대해 수정된 텍스트를 입력합니다. 스테이지에서 직접 레이블을 수정할 수도 있습니다.

• Minimum Height - 자동 높이를 재정의하려면 픽셀로 입력하십시오. 예를 들어, 전체 이미지가 표시되도록 하기 위해 배경 이미지의 높이와 일치하도록 최소 높이를 설정할 수 있습니다.

• Vertical Alignment - 탭에 추가되는 콘텐츠 컨테이너의 세로 위치를 선택합니다.

자세한 내용은 다음 섹션을 사용하여 필요에 따라 다른 설정을 변경합니다.

완료되면 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택하려면 탭 집합 컨테이너의 위쪽 테두리를 마우스로 가리킵니다.

필요한 경우 Default Active Tab ​을(를) 변경합니다.

페이지가 로드될 때 활성화할 세트에서 탭을 선택합니다.

탭 집합의 자동 높이를 무시하려면 Minimum Height ​을(를) 픽셀 단위로 입력하십시오.

탐색 탭을 탭 집합의 맨 위에 배치하려면 Tab Navigation Alignment(Left, Center 또는 Right)을(를) 선택합니다.

{width="500" modal="regular"}

탭 세트에 대한 고급 옵션을 설정합니다.

• 상위 컨테이너 내에 있는 탭 집합의 위치를 제어하려면 Alignment ​을(를) 선택하십시오.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  옵션	설명
  Default	현재 테마의 스타일시트에 지정된 정렬 기본 설정을 적용합니다.
  Left	지정된 패딩을 허용하여 부모 컨테이너의 왼쪽 테두리를 따라 탭 세트를 정렬합니다.
  Center	지정된 패딩을 허용하여 부모 컨테이너의 중앙에 있는 탭 집합을 정렬합니다.
  Right	지정된 패딩을 허용하여 부모 컨테이너의 오른쪽 테두리를 따라 탭 세트를 정렬합니다.

• 탭 컨테이너의 네 면 모두에 적용되는 Border 스타일을 설정합니다.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  옵션	설명
  Default	연관된 스타일 시트에서 지정한 기본 테두리 스타일을 적용합니다.
  None	컨테이너 테두리를 시각적으로 표시하지 않습니다.
  Dotted	컨테이너 테두리가 점선으로 표시됩니다.
  Dashed	컨테이너 테두리는 파선으로 표시됩니다.
  Solid	컨테이너 테두리가 실선으로 표시됩니다.
  Double	컨테이너 테두리는 이중 선으로 표시됩니다.
  Groove	컨테이너 테두리는 홈이 있는 선으로 표시됩니다.
  Ridge	컨테이너 테두리는 절선으로 표시됩니다.
  Inset	컨테이너 테두리는 인세트 선으로 표시됩니다.
  Outset	컨테이너 테두리는 외곽선으로 표시됩니다.

• None 이외의 테두리 스타일을 설정하는 경우 테두리 표시 옵션을 완료하십시오.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  옵션	설명
  Border Color	색상 견본을 선택하거나 색상 선택기를 클릭하거나 유효한 색상 이름 또는 이에 해당하는 16진수 값을 입력하여 색상을 지정합니다.
  Border Width	테두리 라인 너비의 픽셀 수를 입력합니다.
  Border Radius	테두리의 각 모퉁이를 둥글게 만드는 데 사용되는 반경의 크기를 정의하려면 픽셀 수를 입력합니다.

• (선택 사항) 탭 컨테이너에 적용할 현재 스타일 시트의 CSS classes 이름을 지정합니다.

  여러 클래스 이름은 공백으로 구분합니다.

• Margins and Padding ​의 값을 픽셀 단위로 입력하여 탭 컨테이너의 외부 여백과 내부 패딩을 결정합니다.

  탭 컨테이너 다이어그램에 해당 값을 입력합니다.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  컨테이너 영역	설명
  Margins	컨테이너의 모든 면 바깥쪽 가장자리에 적용되는 빈 공간의 양입니다. 옵션: Top / Right / Bottom / Left
  Padding	컨테이너의 모든 측면 안쪽 가장자리에 적용되는 빈 공간의 양입니다. 옵션: Top / Right / Bottom / Left

완료되면 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.