팀 디렉터리 만들기.

Learn DXPR BuilderBuild pagesLay-outs hergebruiken

여기서는 팀 페이지를 만듭니다. 가운데 정렬 헤더, 세 번째 아래에 LinkedIn 링크가 있는 리더십 카드 세 개, 팀 카드 네 개의 그리드가 나옵니다. 모든 동료를 쉽게 찾을 수 있게 할 때 사용합니다. 회사 페이지의 짧은 팀 섹션에는 대신 Create an About Us page를 따릅니다.

동영상에서는 물류 회사의 팀 페이지를 만듭니다.

시작하기 전에

  • 역할에 Edit with DXPR Builder 권한이 있습니다.
  • 페이지가 빌더에서 열려 있습니다. 새 페이지의 경우 Content > Add content > Landing Page (/node/add/landing_page)로 이동한 뒤 Save를 클릭합니다.
  • 새 요소는 섹션이나 컬럼 맨 위에 추가됩니다. 소셜 링크를 위 카드보다 먼저 넣는 이유가 이것입니다.

1단계: 헤더 추가하기

  1. 빈 페이지에서 Add Elements를 클릭하고 Section을 Layout 탭에서 고릅니다.
  2. 섹션에 마우스를 올리고 More > Settings를 엽니다. HTML classes 아래에서 Align text center를 고른 뒤 Save를 클릭합니다.
  3. 섹션에서 +를 클릭하고 Text를 Content 탭에서 고릅니다.
  4. "Our team"을 Heading 2로 입력하고 소개 한 줄을 추가한 뒤 Save를 클릭합니다. 테마는 페이지 제목을 페이지의 Heading 1로 출력합니다. 이 제목을 대신 Heading 1으로 쓰려면 Build SEO-friendly pages를 참조합니다.

2단계: 리더십 카드 추가하기

  1. 섹션에 마우스를 올리고 Add Section Below를 클릭합니다. 새 섹션의 More > Settings를 열고 연회색 Background를 Style 패널에서 고른 뒤 Save를 클릭합니다.
  2. 섹션에서 +를 클릭하고 Row를 고릅니다. 격자 아이콘(Column layout)을 클릭하고 1/3 + 1/3 + 1/3 프리셋을 고른 뒤 Save를 클릭합니다.
  3. 첫 번째 컬럼에서 +를 클릭하고 Card를 고릅니다. More > Settings를 열고 Header에 역할을, Title에 이름을 입력한 뒤 Save를 클릭합니다.
  4. 두 번째 컬럼에도 같은 방식으로 Card를 추가합니다.
  5. 세 번째 컬럼에서 +를 클릭하고 Social links를 고릅니다. 예시 행 두 개가 딸려 옵니다. 첫 번째 줄의 "Facebook"을 linkedin으로 바꾸고 옆에 프로필 URL을 입력합니다. 두 번째 줄은 ×로 제거하고 Style을 Circle로, Size를 2x로 설정한 뒤 Save를 클릭합니다.
  6. 동일한 컬럼에서 +를 클릭하고 Card를 고릅니다. 링크 위에 추가됩니다. Header와 Title을 같은 방식으로 설정하고 Save를 클릭합니다.
  7. 섹션에서 +를 클릭하고 Text를 고릅니다. 로우 위에 추가됩니다. "Leadership"을 Heading 2로 입력하고 Save를 클릭합니다.

3단계: 팀 그리드 추가하기

  1. 다음 버튼으로 세 번째 섹션을 추가합니다. Add Section Below로 세 번째 섹션을 추가한 뒤 Row를 추가합니다. 격자 아이콘(Column layout)을 클릭하고 1/4 + 1/4 + 1/4 + 1/4 프리셋을 고른 뒤 Save를 클릭합니다.
  2. 카드부터 추가합니다. 각 컬럼에 Card를 추가합니다. More > Settings를 열고 역할을 Header로, 이름을 Title로 설정한 뒤 Save를 클릭합니다.
  3. 섹션에서 +를 클릭하고 Text를 고릅니다. 로우 위에 추가됩니다. "The team"을 Heading 2로 입력하고 Save를 클릭합니다.

4단계: 저장 및 미리보기

  1. 빌더 도구 모음에서 Save를 클릭합니다.
  2. 보기 메뉴(eye icon)를 열고 Preview를 선택합니다.

더 나아가기

동영상에 나오지 않는 내용:

  • Photos and biographies: 카드에서 +를 클릭하고 Text 전기를 추가합니다. 카드에서 +를 다시 클릭하고 Image를 추가합니다. 텍스트 위에 추가됩니다. Alt attribute에 인물 이름을 입력합니다.
  • Rounded photos: 각 이미지에서 Border radius를 Style 패널에서 설정합니다. 값은 픽셀 단위로 최대 100입니다.
  • Lift on hover: 카드의 Hover style 패널에서 Drop shadow를 2로 설정합니다.
  • Team that updates itself: "Team member" 콘텐츠 유형과 블록 디스플레이의 Grid 뷰를 만듭니다. Drupal Views 탭에서 뷰를 삽입하면 편집자가 페이지를 건드리지 않고 인물을 추가합니다.

표시 내용

"Our team"이 맨 위에 가운데 정렬로 있습니다. 회색 띠에서는 리더십 카드 세 개가 헤더에 역할, 아래에 이름을 표시하고, 세 번째 아래에는 원형 LinkedIn 아이콘이 있습니다. 이어서 "The team"과 나란한 카드 네 개가 나옵니다.

표시된 대로 보이지 않는 경우

  • 추가한 후에도 카드에 설정 대화상자가 표시되지 않습니다. 카드는 빈 상태로 열리며 대화상자가 없습니다. 카드에 마우스를 올리고 More > Settings를 열어 Header와 Title을 입력합니다.
  • 소셜 링크에 “No matching brand icon found” 메시지가 표시됩니다. 해당 브랜드는 알려진 아이콘 이름이 아닙니다. linkedin처럼 소문자로 입력합니다.
  • The LinkedIn icon sits above the card. 카드가 링크보다 먼저 들어갔고, 새 요소는 컬럼 맨 위에 추가됩니다. 컨트롤 표시줄의 드래그 핸들로 카드를 링크 위로 드래그합니다.
  • 다시 로드하면 변경 내용이 사라졌습니다. 빌더 도구 모음에서 Save를 클릭하기 전에 페이지를 떠났습니다. 이 경우 Save에 오류가 표시되면 Changes do not save를 참조합니다.

다음 단계

  • Card element에서 카드 유형과 자식 요소를 알아봅니다.
  • Social links element에서 아이콘 스타일과 색상을 알아봅니다.
  • About page에서 회사 페이지에 짧은 팀 섹션을 배치합니다.