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​을(를) 찾은 다음​ Edit ​열에서​ Action ​을(를) 선택합니다.

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

Page Builder 아래의 Layout​패널에서​ 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을(를) 입력하십시오.

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

오른쪽 상단 모서리에서 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 을(를) 클릭합니다.

Page Builder 아래의 Layout​패널에서 새​ 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"}