Page Builder 연습 2부: 블록

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

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

Block Title ​에 대해 Google Map을(를) 입력하십시오.

Identifier ​에 대해 google-map을(를) 입력하십시오.

블록을 사용할 수 있는 Store View ​을(를) 선택하십시오.

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

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

Page Builder 콘텐츠 미리 보기(현재 비어 있음)까지 아래로 스크롤한 다음 Edit with Page Builder ​을(를) 클릭합니다.

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

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

스토어에 대해 Google Maps이(가) 구성된 경우 스토어 위치에 대한 맵이 나타납니다.

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

Google Maps이(가) 스토어에 대해 아직 구성되지 않은 경우 자리 표시자 맵이 표시됩니다.

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

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

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

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

Google Cloud Platform Console(으)로 이동합니다.

프로젝트 드롭다운을 클릭하고 API 키를 추가할 프로젝트를 선택하거나 만듭니다.

API 자격 증명을 구성하려면 Google Maps 설명서의 지침을(를) 따르십시오.

API 키를 클립보드에 복사합니다.

Commerce 관리자로 돌아가서 Stores > Settings>Configuration(으)로 이동합니다.

General ​아래의 왼쪽 패널에서​ Content Management ​을(를) 선택합니다.

Advanced Content Tools ​을 확장합니다.

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

Content Management Advanced Tools 구성 옵션에 대한 자세한 내용은 구성 참조 안내서 ​를 참조하십시오.

Google Maps API Key ​의 경우 복사한 키를 붙여 넣으십시오.

Test Key ​을(를) 클릭합니다.

키에 문제가 있는 경우 Google Maps 플랫폼 사이트로 돌아가 문제를 해결하십시오. 그런 다음 다시 시도하십시오.

키를 확인한 후 Save Config ​을(를) 클릭합니다.

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

그리드에서 첫 번째 자습서에서 만든 Simple Page ​을(를) 찾은 다음​ Action 열에서 Edit ​을(를) 선택합니다.

Content 섹션에서 를 확장하고 Edit with Page Builder 또는 콘텐츠 미리 보기 영역 내부를 클릭합니다.

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

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

Page Builder 패널에서 Add Content ​을(를) 확장하고 Block 자리 표시자를 새 행으로 드래그합니다.

빈 블록 컨테이너에 마우스를 가져다 대고 도구 상자를 표시하고 설정( {width="20"}) 아이콘을 선택합니다.

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

[블록 편집] 페이지에서 Select Block ​을(를) 클릭합니다.

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

검색 상자에 map을(를) 입력하고 Enter/Return 키를 눌러 만든 블록을 찾습니다.

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

그리드에서 Select ​을(를) 클릭하여 Google Maps 블록을 선택합니다.

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

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

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

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

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

{width="700" modal="regular"}

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

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

새 동적 블록에 대한 기본 설정을 완료합니다.

• Enable Dynamic Block ​을(를) Yes(으)로 설정합니다.

• Dynamic Block Name ​에 대해 Tee Shirt Promo을(를) 입력하십시오.

• Dynamic Block Type ​을(를) Content Area(으)로 설정하고 Done ​을(를) 클릭합니다.

  동적 블록 형식은 페이지 레이아웃에서 블록이 배치되는 위치를 결정합니다. 스토어에 대한 동적 블록을 설정할 때는 사용 가능한 공간을 잘 사용할 수 있도록 페이지 레이아웃과 테마를 모두 고려하십시오. 일부 스토어에는 고정된 너비로 제한된 활성 콘텐츠 영역이 있는 반면, 다른 스토어는 화면의 전체 너비를 확장합니다.

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

• Customer Segment ​의 경우 동적 블록에 적용할 각 세그먼트의 확인란을 선택하고 완료 ​를 클릭하여 세그먼트 목록을 저장합니다.

  다음 예제에서는 성별에 따라 등록된 고객을 식별하는 두 개의 고객 세그먼트가 있습니다. 이 동적 블록은 매장에서 쇼핑하는 동안 계정에 로그인한 등록된 여성 고객에게만 표시됩니다.

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

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

Appearance ​에서​ Full Bleed ​을(를) 선택합니다.

Minimum Height ​에 대해 400px을(를) 입력하십시오.

Select from Gallery ​을(를) 클릭하고 첫 번째 자습서에서 업로드한 wide-banner-background.png 이미지를 선택하여 Background ​섹션으로 스크롤하고​ Background Image ​을(를) 설정합니다.

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

이미지가 있는 {width="600" modal="regular"}

Page Builder 패널에서 Elements ​을(를) 확장하고 Text 자리 표시자를 두 번째 열로 드래그합니다.

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

편집기에 다음 세 줄의 텍스트를 입력합니다.

Even more ways to mix and match.

Buy 3 Luma tees and get a 4th free.

Shop Tees >

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

세 줄의 텍스트를 모두 선택하고 도구 모음을 사용하여 줄 높이 ​를 40px(으)로 설정합니다.

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

각 줄에 대해 Font Size ​을(를) 다음과 같이 설정합니다.

이 블록은 페이지의 어디에나 배치할 수 있으므로 제목 수준이 아닌 기본 단락 스타일을 사용하십시오. 또한 텍스트가 아직 열에 올바르게 감싸지지 않을 수도 있습니다.

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

다른 브라우저 탭에서 스토어프런트를 열고 링크의 대상 페이지로 이동합니다.

저장소 도메인에 대한 참조를 생략하는 상대 URL 또는 정규화된 URL을 사용할 수 있습니다.

전체 URL
: https://mystore.com/women/tops-women/tees-women.html

상대 URL
: ../women/tops-women/tees-women.html

Page Builder 작업 영역 탭과 텍스트 편집기로 돌아가서 세 번째 줄에서 Shop Tees > 텍스트를 선택하고 편집기 도구 모음에서 굵게( )을 선택합니다.

세 번째 줄의 Shop Tees > 텍스트를 계속 선택한 상태에서 편집기 도구 모음에서 링크 삽입/편집( )을(를) 선택하십시오.

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

URL ​에 대해 준비한 상대 링크를 입력하십시오.

Target ​을(를) None(으)로 설정합니다.

이 설정은 새 탭을 열지 않고 동일한 브라우저 창에서 페이지를 엽니다.

Title ​에 대해 Shop Tees을(를) 입력하십시오.

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

링크를 저장하고 Page Builder 작업 영역으로 돌아가려면 OK ​을(를) 클릭합니다.

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

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

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

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

편집 모드에서 티셔츠 프로모션 동적 블록을 다시 엽니다.

Related Promotions 섹션에서 를 확장하고 Add Cart Price Rules ​을(를) 클릭합니다.

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

관련 장바구니 가격 규칙 추가 페이지에서 3개 티셔츠 구매 가격 규칙에 대한 확인란을 선택하고 Add Selected ​을(를) 클릭합니다.

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

가격 규칙은 관련 장바구니 가격 규칙 아래의 관련 프로모션 섹션에 표시됩니다. 여러 가격 규칙을 동적 블록과 연관시킬 수 있습니다. 그러나 이 간단한 예제는 하나만 사용합니다.

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

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

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

첫 번째 연습 연습 연습에서 만든 단순 페이지 ​를 찾아 편집 모드로 엽니다.

Content 섹션에서 를 확장하고 Edit with Page Builder ​을(를) 클릭합니다.

동적 블록과 같은 이미지를 사용하여 맨 위 행에 마우스를 올려 놓으면 도구 상자와 제거( {width="20"}) 아이콘이 표시됩니다.

페이지에서 행 제거를 확인하려면 OK 을(를) 클릭합니다.

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

Page Builder 패널에서 Add Content ​을(를) 확장하고 Dynamic Block 자리 표시자를 새 행으로 드래그합니다.

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

동적 블록 컨테이너에 마우스를 가져다 대고 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

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

Edit Dynamic Block ​페이지에서​ Select Dynamic Block ​을(를) 클릭합니다.

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

만든 Tee Shirt Promo ​동적 블록을 찾아​ Select ​을(를) 클릭합니다.

동적 블록 정보의 요약이 아래에 나타납니다.

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

기본 Template, Dynamic Block Block Template을(를) 수락합니다.

완료되면 Save ​을(를) 클릭하여 설정을 저장하고 Page Builder 작업 영역으로 돌아갑니다.

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

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

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

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

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

그리드에서 Tee Shirt Promo ​동적 블록을 찾아 편집 모드로 엽니다.

Content 섹션에서 를 확장하고 Edit with Page Builder ​을(를) 클릭합니다.

열 너비를 변경합니다.

• 두 열 사이의 테두리를 마우스로 가리킵니다.

• 마우스 단추를 누른 채 테두리 두 구획을 왼쪽으로 드래그합니다.

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

  이제 첫 번째 열은 12개(4/12) 격자 분할 중 4개 너비이고 두 번째 열은 12개(8/12) 분할 중 8개 너비입니다.

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

텍스트 색상 변경:

• 처음 두 줄의 텍스트를 선택합니다.

• 편집기 도구 모음에서 Text Color ​을(를) 선택하고 White 견본을 클릭합니다.

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

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

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

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

상점으로 브라우저 창을 엽니다.

샘플 페이지를 보려면 주소 표시줄의 URL을 다음과 같이 수정하십시오.

mystore.com/sample-page

스토어에서 html 접미사를 포함하도록 구성한 경우 접미사를 다음과 같이 포함하십시오.

mystore.com/sample-page.html

여성 고객으로 로그인:

• 홈 페이지의 오른쪽 상단 모서리에서 Sign In ​을(를) 클릭합니다.

• 샘플 Luma 데이터가 시스템에 설치된 경우 다음 자격 증명을 사용합니다.

  Email - roni_cost@example.com

  Password - roni_cost3@example.com

• Sign In ​을(를) 클릭합니다.

• Tee Shirt 프로모션으로 만든 다이내믹 블록을 보려면 샘플 페이지로 돌아갑니다.

고객 세그먼트에 대해 {width="700" modal="regular"}