제품 페이지 만들기.

Learn DXPR BuilderBuild pagesLay-outs hergebruiken

여기서는 제품 하나의 페이지를 만듭니다. 이름, 가격, 지금 구매하기 버튼 옆에 사진이 있고, 이어서 세 가지 기능, 사양 목록, 판매 유도 문구가 나옵니다. 판매하는 모든 것에 사용합니다. 여러 요금제를 비교하려면 pricing table을 추가합니다.

동영상에서는 Insight Hub라는 하드웨어 제품의 페이지를 만듭니다.

시작하기 전에

  • 역할에 Edit with DXPR Builder 권한이 있습니다.
  • 미디어 라이브러리에 제품 사진이 있습니다.
  • 페이지가 빌더에서 열려 있습니다. 새 페이지의 경우 Content > Add content > Landing Page (/node/add/landing_page)로 이동한 뒤 Save를 클릭합니다.
  • 새 요소는 컬럼 맨 위에 추가됩니다. 오른쪽 컬럼을 버튼부터 만드는 이유가 이것입니다.

1단계: 제품 추가하기

  1. 빈 페이지에서 Add Elements를 클릭하고 Section을 Layout 탭에서 고릅니다.
  2. 섹션에서 +를 클릭하고 Row를 고릅니다. 동일한 컬럼 두 개가 딸려 옵니다.
  3. 왼쪽 컬럼에서 +를 클릭하고 Image를 고릅니다. Select Image를 클릭하고 제품 사진을 체크한 뒤 Insert selected를 클릭합니다. Alt attribute를 SEO 패널에서 입력하고 Save를 클릭합니다.
  4. 오른쪽 컬럼에서 +를 클릭하고 Button을 고릅니다. Title을 "지금 구매하기"로, Link를 쇼핑몰로, Type을 Primary로, Size를 Large로 설정한 뒤 Save를 클릭합니다.
  5. 오른쪽 컬럼에서 +를 클릭하고 Text를 고릅니다. 버튼 위에 추가됩니다. 가격을 Heading 2로 입력하고 Save를 클릭합니다.
  6. 다시 +를 클릭하고 Text를 고릅니다. 맨 위에 추가됩니다. 제품 이름을 Heading 2로 입력하고 설명 한 줄을 추가한 뒤 Save를 클릭합니다. 테마는 페이지 제목을 페이지의 Heading 1로 출력합니다. 이 제목을 대신 Heading 1으로 쓰려면 Build SEO-friendly pages를 참조합니다.

2단계: 기능 추가하기

  1. 섹션에 마우스를 올리고 Add Section Below를 클릭합니다. 새 섹션에 Align text center 클래스를 지정합니다.
  2. 섹션에서 +를 클릭하고 Row를 고릅니다. 격자 아이콘(Column layout)을 클릭하고 1/3 + 1/3 + 1/3 프리셋을 고른 뒤 Save를 클릭합니다.
  3. 첫 번째 컬럼에서 +를 클릭하고 Text를 고릅니다. 기능 이름을 Heading 3으로 입력하고 한 줄을 추가한 뒤 Save를 클릭합니다.
  4. 동일한 컬럼에서 +를 클릭하고 Icon을 고릅니다. 텍스트 위에 추가됩니다. Font Awesome Free Solid 세트를 선택하고 plug를 검색한 뒤 아이콘을 클릭합니다. Size를 Very Large (3x)로 설정하고 Icon utilities를 열어 Style을 Circle로 설정한 뒤 Save를 클릭합니다.
  5. 두 번째 컬럼에는 cloud로, 세 번째 컬럼에는 battery-full로 반복합니다.

3단계: 사양 추가하기

  1. 다음 버튼으로 세 번째 섹션을 추가합니다. Add Section Below로 세 번째 섹션을 추가합니다. More > Settings를 열고 Style 패널에서 연회색 Background를 고른 뒤 Save를 클릭합니다.
  2. 섹션에서 +를 클릭하고 Text를 고릅니다. "Specifications"를 Heading 2로 입력한 뒤 줄에 하나씩 사양을 입력하고 Save를 클릭합니다.

4단계: 행동 유도 추가하기

  1. 네 번째 섹션을 추가하고 More > Settings를 엽니다. HTML classes 아래에서 Align text center를 고른 뒤 Style 패널에서 보라색 Background와 흰색 Font color를 고릅니다. Save를 클릭합니다.
  2. 섹션에서 +를 클릭하고 Button을 고릅니다. Title을 "영업팀과 상담"으로, Link를 /contact로, Type을 Light로, Size를 Large로 설정한 뒤 Save를 클릭합니다.
  3. 다시 +를 클릭하고 Text를 고릅니다. 버튼 위에 추가됩니다. "Insight Hub from 249 euro"를 Heading 2로 입력하고 한 줄을 추가합니다. Font color를 흰색으로 설정하고 Save를 클릭합니다.

5단계: 저장 및 미리보기

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

더 나아가기

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

  • Specification table: 사양마다 한 줄씩 쓰는 대신 텍스트 도구 모음의 Table 버튼으로 표를 삽입합니다.
  • Gallery: 사진 하나를 제품 사진의 Image carousel로 바꿉니다.
  • Plans: 가격을 pricing table에 연결합니다.

표시 내용

제품 사진이 왼쪽 절반을 채우고, 오른쪽에 이름, 가격, 지금 구매하기 버튼이 있습니다. 이어서 가운데 정렬된 기능 세 개가 나오며, 각 기능은 이름과 한 줄 위에 원형 아이콘이 있습니다. 사양은 회색 띠 위에 있으며, 보라색 띠가 영업팀과 상담으로 페이지를 마무리합니다.

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

  • 이름, 가격, 버튼 순서가 잘못되었습니다. 위에서부터 들어갔고, 새 요소는 컬럼 맨 위에 추가됩니다. 컨트롤 표시줄의 드래그 핸들로 제자리에 드래그합니다.
  • 아이콘에 원이 없습니다. Style은 Icon utilities 패널에 있으며 General에는 없습니다. 아이콘 설정을 열고 Icon utilities를 연 뒤 Style을 Circle로 설정합니다.
  • 보라색 배경에서 제목이 계속 어둡게 보입니다. Text 요소에는 자체 Font color가 없습니다. Style 패널을 열고 Font color를 흰색으로 설정합니다.
  • 다시 로드하면 변경 내용이 사라졌습니다. 빌더 도구 모음에서 Save를 클릭하기 전에 페이지를 떠났습니다. 이 경우 Save에 오류가 표시되면 Changes do not save를 참조합니다.

다음 단계