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

simple-page-assets 파일을 다운로드하고 로컬 시스템에 저장합니다.

다운로드한 파일로 이동하여 압축한 파일을 추출합니다.

Windows 시스템에서 마우스 오른쪽 단추를 클릭하고 Extract All ​개의 파일을 선택합니다. 그런 다음 대상 폴더를 선택하고 Extract ​을(를) 클릭합니다.

Mac 시스템에서는 zip 파일을 두 번 클릭하고 추출한 파일을 대상 폴더로 이동할 수 있습니다.

폴더에는 다음 이미지 파일이 포함되어 있습니다.

{width="500"}

관리자 사이드바에서 Content > Elements>Pages(으)로 이동합니다.

오른쪽 상단 모서리에서 Add New Page ​을(를) 클릭하고 다음을 수행합니다.

• 이 페이지가 스토어에 게시되지 않도록 하려면 Enable Page ​을(를) No(으)로 설정하십시오.

• Page Title ​에 대해 Simple Page을(를) 입력하십시오.

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

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

기본적으로 Layout ​이(가) Page -- Full Width(으)로 설정되어 있습니다. Page Builder은(는) 다섯 가지 표준 레이아웃 옵션 외에도 페이지, 카테고리 및 제품에 대한 전체 레이아웃 을 추가합니다.

샘플 데이터를 사용할 수 있으면 New Theme ​을(를) Magento Luma(으)로 설정하십시오. 그렇지 않으면 사용 가능한 다른 테마를 선택하거나 비워 두어 기본 테마를 사용할 수 있습니다.

New Theme ​설정을 사용하여 기본 테마를 재정의하고 다른 테마를 페이지에 적용할 수 있습니다.

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

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

페이지를 저장하면 페이지의 왼쪽 상단에 단순 페이지 이름이 나타납니다.

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

이 작업은 행이 비어 있는 Page Builder 미리 보기를 표시합니다.

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

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

확장된 Page Builder 작업 영역에서 왼쪽의 패널은 스테이지에서 콘텐츠를 빌드하는 데 사용할 수 있는 콘텐츠 도구를 제공합니다.

빈 행을 마우스로 가리키면 도구 상자가 표시됩니다.

각 콘텐츠 컨테이너에는 유사한 옵션 세트가 있는 도구 상자가 있습니다.

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

행 도구 상자에서 설정( {width="20"})을 선택합니다.

Appearance ​에서​ 전체 도련 ​을 선택합니다.

전체 도련 모양 설정은 행과 배경의 내용 영역의 왼쪽 및 오른쪽 테두리를 페이지의 전체 너비로 확장합니다.

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

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

이 설정을 사용하면 배너가 행의 전체 폭을 확장합니다.

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

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

Page Builder 패널에서 Media ​을(를) 확장하고 배너 자리 표시자를 스테이지로 드래그합니다.

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

도구 상자를 표시하려면 배너 컨테이너 위로 마우스를 가져갑니다.

도구 상자 외에도 이미지 업로드 및 갤러리에서 선택 단추가 포함되어 있으므로 스테이지에서 직접 배너를 빠르게 변경할 수 있습니다.

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

배너 도구 상자에서 설정 ( {width="20"} ) 아이콘을 선택합니다.

Appearance ​에서​ Collage Right ​을(를) 선택합니다.

콜라주 오른쪽 설정은 배너의 오른쪽에 컨텐츠를 배치합니다.

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

Background ​섹션까지 아래로 스크롤하고 배너의 배경 이미지를 설정합니다.

• Background Image ​의 경우 업로드 ​를 클릭합니다.

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

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

  이미지가 업로드되고 업로드된 이미지의 썸네일이 나타납니다. 파일 이름, 이미지 치수 및 파일 크기는 아래에 설명되어 있습니다.

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

• Background Mobile Image ​의 경우 업로드 ​를 클릭합니다.

  동일한 파일 디렉터리에서 wide-banner-background-mobile.jpg 파일을 선택합니다.

  모바일 배경 이미지는 모바일 디바이스에 사용되며 데스크탑 브라우저 창의 크기가 모바일 디바이스의 너비로 변경될 때마다 사용됩니다.

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

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

  배경이 스테이지에 나타나고 행의 전체 너비가 확장됩니다.

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

행의 오른쪽에 나타나는 자리 표시자 텍스트를 확인합니다. 이 텍스트의 위치는 오른쪽 콜라주 모양 설정을 반영합니다.

자리 표시자 텍스트를 클릭하고 다음 메시지를 두 줄로 입력합니다.

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

편집기 도구 모음이 텍스트 상자 위에 나타납니다. 스테이지에서 직접 또는 배너 도구 상자에서 설정 ​을 선택하여 텍스트를 입력하고 서식을 지정할 수 있습니다.

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

텍스트에 서식 적용:

• 텍스트의 첫 번째 줄을 선택합니다. 형식 아래의 편집기 도구 모음에서 Heading 2을(를) 선택합니다.

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

• 텍스트 두 번째 줄을 선택합니다. 형식 아래의 편집기 도구 모음에서 Paragraph을(를) 선택합니다.

서식 설정은 현재 테마와 연결된 스타일 시트의 스타일을 적용합니다.

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

마우스로 가리키면 배너 도구 상자를 표시하고 설정( {width="20"}) 아이콘을 다시 선택한 다음 Content ​섹션으로 스크롤합니다.

텍스트가 메시지 텍스트 상자에 표시됩니다. 스테이지 또는 배너 설정의 Content ​섹션에서 텍스트를 입력하고 편집할 수 있습니다.

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

Content ​섹션에서 계속 진행하여 배너 링크 및 단추를 설정합니다.

• Link ​을(를) Category(으)로 설정한 다음 Select ​을(를) 클릭하여 범주 트리를 표시합니다.

• What's New을(를) 연결된 범주로 선택합니다.

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

• Show Button ​을(를) Always(으)로 설정합니다.

• Button Text ​의 경우 단추에 나타나는 텍스트로 Shop Now을(를) 입력하십시오.

• Button Type ​의 경우 Primary 기본값을 사용합니다.

  현재 테마의 단추 스타일에 따라 단추 형식이 결정됩니다.

배너 오버레이 설정:

오버레이를 사용하여 모양새 설정으로 정의된 활성 컨텐트 영역에 배경색을 적용할 수 있습니다. 배너 배경 이미지는 배너의 전체 너비에 대해 계속 표시됩니다.

• Show Overlay ​을(를) Always(으)로 설정합니다.

• Overlay Color ​의 경우 다음 중 하나를 수행합니다.

  • 색상 사각형을 클릭하고 흰색 색상 견본을 선택합니다.
  • 색상 없음 텍스트 상자를 클릭하고 White 또는 16진수 값 #ffffff을(를) 입력하십시오.

  Apply ​을(를) 클릭합니다.

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

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

  스테이지의 배너 메시지 아래에 단추가 표시됩니다.

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

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

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

언제든지 원하는 대로 두 작업 영역 모드 간을 전환할 수 있습니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 아래로 스크롤하여 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 ​자리 표시자를 스테이지로 드래그하여 이 연습의 두 번째 부분에서 만든 행 위에 놓습니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

텍스트 서식 지정:

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

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

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

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

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

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

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

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

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

• 두 번째 열 위로 마우스를 가져가 도구 상자를 표시하고 설정( {width="20"}) 아이콘을 선택합니다.

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

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

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

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

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

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

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

Antonia Racer Tank 텍스트를 선택하고 편집기 도구 모음에서 링크 삽입( ) 아이콘을 클릭합니다.

링크 삽입 대화 상자에서 카탈로그 제품에 대한 링크를 지정합니다.

• 제품 URL ​을(를) 입력하십시오.

  상대 URL 또는 정규화된 URL을 입력할 수 있습니다. 이 예제에서는 다음과 같은 상대 링크를 입력합니다.

  ../antonia-racer-tank.html

• (선택 사항) Title ​에 제품 이름을 입력하십시오.

  Title 링크 속성은 일부 브라우저에서 툴팁으로 사용됩니다.

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

• 완료되면 OK ​을(를) 클릭하여 링크를 저장합니다.

  이제 연결된 텍스트가 배너에 강조 표시됩니다.

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

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

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

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

필요한 경우 Content 섹션에서 를 확장합니다.

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

스테이지의 첫 번째 행을 가리키면 도구 상자가 표시되고 이동( ) 아이콘을 선택합니다.

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

행의 모든 컨텐츠가 선택되어 있는지 확인하려면 마우스 단추를 누른 채 행을 페이지 하단에 있는 빨간색 지침 아래 위치로 드래그합니다.

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

첫 번째 행을 두 번째 위치로 이동하려면 이 프로세스를 반복합니다.

이제 페이지의 행 순서가 단순 페이지 예와 일치합니다.

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

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

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

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