Page Builder 연습 1부: 단순 페이지

페이지 그리드에서 이 연습의 첫 번째 부분에서 만든 단순 페이지 ​를 찾은 다음 Action ​열에서​ Edit ​을(를) 선택합니다.

Content 섹션에서 를 확장합니다.

콘텐츠 미리 보기 영역 내에서 Edit with Page Builder 또는 을(를) 클릭합니다.

Layout ​아래의 Page Builder 패널에서​ Row ​자리 표시자를 스테이지로 드래그하여 배너 위에 놓습니다.

빨간색 지침은 두 행 사이의 경계를 표시합니다.

새 행 위로 마우스를 가져가면 도구 상자를 표시하고 설정( ) 아이콘을 선택합니다.

Appearance ​에서​ 포함 ​기본 설정을 적용합니다.

이 설정은 행의 콘텐츠 영역을 테마에 정의된 페이지 너비로 제한합니다.

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

Layout ​아래의 Page Builder 패널에서​ Column ​자리 표시자를 새 행으로 드래그합니다.

이제 행이 동일한 너비의 두 열로 나뉩니다. 각 열은 전용 옵션 도구 상자가 있는 컨텐츠용 별도의 컨테이너입니다.

첫 번째 열의 왼쪽 상단 모서리에서 원형 Grid 컨트롤( )을 클릭하여 눈금 지침을 표시합니다.

격자를 사용하면 콘텐츠가 일관되게 정렬되고 데스크탑 및 모바일 장치에서 올바르게 렌더링됩니다. 눈금 크기 구성에 대한 자세한 내용은 Page Builder 설정 항목의 구성 Page Builder 섹션을 참조하십시오.

각 열 컨테이너의 상단 테두리에 있는 괄호 안의 숫자(6/12)는 각 열의 그리드 분할 수와 행의 총 분할 수를 나타냅니다.

Page Builder 패널에서 Media 섹션을 확장하고 Image 자리 표시자를 첫 번째 열로 드래그합니다.

자리 표시자에 샘플 이미지를 삽입합니다.

시스템에 있는 이미지의 경우 다음 방법 중 하나를 선택할 수 있습니다.

• 이미지 파일 업로드: 첫 번째 열에서 Upload Image ​을(를) 클릭합니다. 그런 다음 추출한 단순 페이지 자산을 저장한 디렉터리로 이동하여 small-banner-1.jpg 파일을 선택합니다.

  

  이 작업을 반복하여 small-banner-2.jpg 파일을 두 번째 열에 추가합니다.

• 이미지 파일을 끌어서 놓습니다: 바탕 화면에서 간단한 페이지 에셋 폴더를 열고 Page Builder 단계로 작업하는 관리 브라우저 창과 나란히 놓습니다. 그런 다음 단순 페이지 에셋 폴더에서 small-banner-1.jpg 파일을 끌어서 첫 번째 열에 놓습니다.

  

  이 작업을 반복하여 small-banner-2.jpg 파일을 두 번째 열에 추가합니다.

카탈로그에서 각 이미지에 연결할 페이지를 결정합니다.

첫 번째 열의 이미지 위로 마우스를 가져가 도구 상자를 표시하고 설정( ) 아이콘을 선택합니다.

이미지를 범주에 연결합니다.

• 아래로 스크롤하여 Link ​을(를) Category(으)로 설정합니다.

• 범주 트리에서 드릴다운하여 Men's Hoodies & Sweatshirt 범주를 선택합니다.

• 오른쪽 상단 모서리에서 설정을 Save ​하고 Page Builder 작업 영역으로 돌아갑니다.

두 번째 열의 이미지를 Gear 범주에 연결하려면 이전 단계를 반복합니다.

스테이지의 오른쪽 위 모서리에서 전체 화면 닫기( ) 아이콘을 클릭합니다.

이 아이콘을 클릭하면 미리보기가 표시된 페이지의 Content ​섹션으로 돌아갑니다.

오른쪽 상단 모서리에서 Save 화살표를 클릭하고 Save & Close ​을(를) 선택합니다.

메시지가 표시되면 페이지 상단의 메시지에서 캐시 관리 링크를 클릭하고 잘못된 캐시를 새로 고칩니다.

페이지 그리드에서 이 연습의 첫 번째 부분에서 만든 단순 페이지 ​를 찾은 다음 Action ​열에서​ Edit ​을(를) 선택합니다.

Content 섹션에서 를 확장합니다.

콘텐츠 미리 보기 영역 내에서 Edit with Page Builder 또는 을(를) 클릭합니다.

Layout ​아래의 Page Builder 패널에서​ Row ​자리 표시자를 스테이지로 드래그하여 이 연습의 두 번째 부분에서 만든 행 위에 놓습니다.

빨간색 지침은 두 행 사이의 경계를 표시합니다.

도구 상자를 표시하고 설정( ) 아이콘을 선택하려면 새 행 위로 마우스를 가져갑니다.

Appearance ​아래의 행 편집 페이지에서​ Full Width ​을(를) 선택합니다.

이 설정은 컨텐츠 영역을 테마에 의해 정의된 최대 페이지 너비로 제한합니다. 배경색 및/또는 이미지는 제한되지 않으며 행의 전체 폭을 확장합니다.

Background ​섹션에서 #f1f1f1을(를)Background Color(으)로 입력합니다.

Advanced ​섹션까지 아래로 스크롤하고 모든​ 여백 및 패딩 ​값을 0(으)로 설정합니다.

페이지 맨 위로 스크롤한 다음 Save ​을(를) 클릭하여 설정을 저장하고 Page Builder 작업 영역으로 돌아갑니다.

그 행의 배경색은 이제 옅은 베이지색이다.

Layout ​아래의 Page Builder 패널에서​ Column ​자리 표시자를 스테이지의 맨 위 행으로 드래그합니다.

첫 번째 열의 오른쪽 테두리를 그리드에서 12개(4/12) 위치 중 4개 위치로 끕니다.

두 번째 열의 크기가 12(8/12) 중 8개로 조정됩니다.

첫 번째 열 컨테이너 위로 마우스를 가져가면 도구 상자를 표시하고 설정( ) 아이콘을 선택합니다.

Advanced ​섹션까지 아래로 스크롤하고 모든​ 여백 및 패딩 ​값을 0(으)로 설정합니다.

페이지 맨 위로 스크롤한 다음 Save ​을(를) 클릭하여 설정을 저장하고 Page Builder 작업 영역으로 돌아갑니다.

Page Builder 패널에서 Media ​을(를) 확장하고 Image 콘텐츠 형식을 첫 번째 열로 드래그합니다.

이미지 자리 표시자에서 Upload Image ​을(를) 클릭합니다.

추출된 단순 페이지 자산을 저장한 디렉터리로 이동한 다음 review-image.jpg 파일을 선택합니다.

업로드된 이미지는 첫 번째 열에 표시되며 행의 배경색과 매끄럽게 혼합됩니다.

Page Builder 패널에서 Elements 섹션을 확장하고 Text 콘텐츠 형식을 두 번째 열로 드래그합니다.

텍스트 요소를 클릭하여 편집기 도구 모음을 표시합니다.

도구 모음에서 이미지 삽입( ) 아이콘을 클릭하고 다음을 수행합니다.

• Insert/edit image ​대화 상자에서​ Source 필드 옆에 있는 찾기( ) 아이콘을 클릭합니다.

  

• Select Images ​페이지에서​ Choose Files ​을(를) 클릭합니다.

• 단순 페이지 자산을 저장한 폴더에서 rating.png을(를) 선택합니다.

• 페이지로 돌아가서, 이미지 타일을 두 번 클릭하여 선택하고 Source 필드에 해당 URL을 삽입합니다.

  

• Image Description ​에 대해 5-Star Rating을(를) 입력하고 OK ​을(를) 클릭하여 열에 이미지를 삽입합니다.

• 편집기 도구 모음에서 가운데 정렬( )을 클릭하여 열에서 이미지를 가운데로 맞춥니다.

  

5성급 이미지 바로 뒤에 삽입 포인터를 놓고 Enter/Return 키를 눌러 새 줄을 시작한 후 다음 텍스트를 입력합니다.

Awesome Tank!

I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

Antonia Racer Tank – Reviewed by Allyson

입력하는 동안 텍스트의 가운데가 표시됩니다.

텍스트 서식 지정:

• 텍스트 첫 줄의 아무 곳이나 클릭하고 편집기 도구 모음의 서식 ​에서 Heading 2을(를) 선택합니다.

• 나머지 텍스트를 선택하고 편집기 도구 모음의 형식 ​에서 Paragraph을(를) 선택합니다.

테마에 연결된 스타일시트에 따라 텍스트 서식이 지정됩니다.

열에서 콘텐츠를 세로로 가운데에 배치할 수 있도록 이미지의 치수를 가져옵니다.

• 첫 번째 열의 이미지 위로 마우스를 가져가 도구 상자를 표시하고 설정( ) 아이콘을 선택합니다.

• 이미지 축소판 아래에 이미지 크기를 기록합니다.

  

• 오른쪽 상단에서 닫기 ​를 클릭합니다.

두 번째 열에서 컨텐츠를 세로로 가운데 맞춥니다.

• 두 번째 열 위로 마우스를 가져가 도구 상자를 표시하고 설정(

  

  ) 아이콘을 선택합니다.

NOTE

올바른 도구 상자를 표시하려면 텍스트 컨테이너가 아닌 열 컨테이너를 선택해야 합니다.

• Minimum Height ​의 경우 첫 번째 열에 있는 이미지의 높이(픽셀)로 450을(를) 입력하십시오.

• Vertical Alignment ​을(를) Center(으)로 설정합니다.

Advanced ​섹션까지 아래로 스크롤한 다음 모든​ Margins and Padding ​값을 0( 0 )으로 설정합니다.

페이지 맨 위로 스크롤하고 오른쪽 상단 모서리에서 Save ​을(를) 클릭하여 설정을 저장하고 Page Builder 작업 영역으로 돌아갑니다.