탭 패널 추가하기.

Learn DXPR BuilderBuild pagesAdd contentLay-out

관련 콘텐츠 여러 블록을 한곳에 두고 한 번에 하나만 보여주고 싶을 때 Tabs를 사용합니다. 완성되면 탭 라벨 행이 생기고, 방문자는 라벨을 클릭하여 해당 콘텐츠를 봅니다. 예제에서는 서비스마다 탭 하나씩인 에이전시 페이지를 만듭니다. 질문과 답변에는 collapse panel이 보통 더 잘 읽힙니다.

Web design, Branding, Marketing 라벨의 서비스 탭 세 개로, Web design이 텍스트와 함께 열려 있습니다

탭 패널 추가하기

  1. 컬럼에 마우스를 올리고 컨트롤 표시줄의 +를 클릭하거나, 빈 컬럼 가운데의 +를 클릭하여 요소 선택기를 엽니다.
  2. 탭 Layout에서 항목 Tabs를 클릭합니다. 탭 하나가 Title 라벨과 함께 나타납니다.
  3. 탭 패널에 마우스를 올리고 More > Settings를 엽니다. Tab title에 이름을 입력하고 Save를 클릭합니다.
  4. 패널 안의 +를 클릭하여 Text 요소 같은 콘텐츠를 추가합니다.
  5. 탭을 추가하려면 탭 라벨에 마우스를 올리고 Tabs 컨트롤 표시줄에서 Add tab을 클릭합니다. 새 탭은 다른 탭 앞에 맨 먼저 추가됩니다. 이름을 지정하고 같은 방식으로 채웁니다.

표시 내용

열린 탭의 콘텐츠 위에 탭 라벨 행이 있습니다. Preview와 게시된 페이지에서는 라벨을 클릭하면 해당 탭의 콘텐츠가 표시되고 나머지는 숨겨집니다. 각 탭은 자체 요소를 가지므로 한 탭에는 텍스트를, 다른 탭에는 카드 묶음을 넣을 수 있습니다. 너비가 768픽셀 미만인 화면에서는 탭이 쌓인 제목으로 바뀌어 접기 패널처럼 열립니다.

탭 설정하기

요소 Tabs에는 설정이 세 개 있습니다. More > Settings를 Tabs 컨트롤 표시줄에서 엽니다. 탭 라벨에 마우스를 올리면 표시됩니다.

Setting What it does Default
Tab direction 라벨 위치입니다. Default(콘텐츠 위), Left, Right Default
Style 라벨 모양입니다. Default(라벨 아래 선), Modern(둥근 카드), Accordion(구분선이 있는 제목) 중 선택합니다. Default
Mobile friendly 너비가 768픽셀 미만인 화면에서 탭을 접을 수 있는 제목으로 표시합니다. On

각 탭에는 패널의 More > Settings 아래에 자체 설정이 있습니다. Tab title은 라벨 텍스트입니다. Tab description은 열린 탭의 라벨 아래에 표시되는 짧은 줄(선택 사항)입니다.

탭 관리하기

  • Reorder: 탭 라벨을 라벨 사이 새 위치로 드래그합니다. 콘텐츠도 함께 이동합니다.
  • Rename: 탭 패널에 마우스를 올리고 More > Settings를 열어 Tab title을 변경한 뒤 Save를 클릭합니다.
  • Remove: 탭 패널에 마우스를 올리고 More를 열어 Delete를 선택합니다. 탭 안의 모든 항목이 함께 제거됩니다.

라벨은 한 단어에서 세 단어로 유지하고 탭은 다섯 개 정도로 유지하여 라벨이 한 줄에 들어가게 합니다.

표시되지 않는 경우

  • 새 탭이 마지막이 아니라 첫 번째에 있습니다. Add tab은 항상 새 탭을 맨 앞에 추가합니다. 라벨을 원하는 위치로 드래그합니다.
  • 설정에 Tab title과 Tab description만 표시됩니다. 탭 하나의 설정을 연 것입니다. 탭 라벨에 마우스를 올려 Tabs 컨트롤 표시줄을 표시한 뒤 그곳에서 More > Settings를 엽니다.
  • 휴대전화에서는 탭 대신 쌓인 헤더가 표시됩니다. Mobile friendly가 기본값으로 켜져 있습니다. 모든 화면 너비에서 탭을 유지하려면 Tabs 설정에서 끕니다.
  • 피커의 Layout 탭에 Tabs이 없습니다. DXPR Builder 사용자 프로필에서 빠져 있습니다. 관리자가 프로필의 Elements 아래에서 Tabs를 /admin/dxpr_studio/dxpr_builder/profile 경로에서 체크합니다.

다음 단계