Page Builder 연습 2부: 블록
다음 연습에서는 단순 블록과(와) 동적 블록 간의 차이점 및 Page Builder을(를) 사용하여 각 유형의 블록을 만드는 방법을 보여 줍니다.
이 연습에서는 필수 구성 요소 및 다운로드한 샘플 파일을(를) 포함하여 파트1: 단순 페이지를 완료한 것으로 가정합니다. 이 연습 연습의 각 부분을 순서대로 따르십시오.
1부: 간단한 블록 만들기
이 연습 연습에서는 Google Maps의 콘텐츠로 간단한 블록을 만듭니다. 단순 블록은 콘텐츠가 변경되지 않으므로 CMS 블록 또는 정적 블록 이라고도 합니다. 단순 블록은 재사용할 수 있는 콘텐츠에 이상적입니다.
1단계: 블록 만들기
-
관리자 사이드바에서 Content > Elements>Blocks(으)로 이동합니다.
-
오른쪽 상단에서 Add New Block 을(를) 클릭합니다.
-
Block Title 에 대해
Google Map
을(를) 입력하십시오. -
Identifier 에 대해
google-map
을(를) 입력하십시오. -
블록을 사용할 수 있는 Store View 을(를) 선택하십시오.
{width="600" modal="regular"}
-
오른쪽 상단에서 Save 을(를) 클릭합니다.
2단계: Google Map 추가
-
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 을(를) 선택합니다.
3단계: Google Maps 구성
스토어에 대해 Google Maps이(가) 이미 구성된 경우 이 단계를 건너뛰고 다음 단계로 진행할 수 있습니다.
-
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 을(를) 클릭합니다.
4단계: 페이지에 블록 추가
-
관리자 사이드바에서 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 을(를) 선택합니다.
축하합니다! 블록 연습의 첫 번째 부분을 완료했습니다. 참고용으로 작업한 것을 잊지 말아라.
2부: 동적 블록 만들기
동적 블록에는 블록 표시 위치, 시기 및 대상을 결정하는 논리가 포함되어 있습니다. 이 연습에서는 가격 규칙 조건이 충족될 때 트리거되고 특정 고객 세그먼트에만 표시되는 프로모션에 대한 동적 블록을 만듭니다. 이 예제의 결과는 첫 번째 연습에서 만든 배너와 유사하지만 상점 첫 번째 연습에서 나타나는 시점을 제어하는 논리를 사용합니다.
1단계: 새 동적 블록 만들기
-
관리자 사이드바에서 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"}
-
2단계: 설정 완료
Content 섹션까지 아래로 스크롤하여 빈 Page Builder 콘텐츠 미리 보기를 표시하고 Edit with Page Builder 을(를) 클릭합니다. 그런 다음 다음 다음 작업을 완료하십시오.
작업 1: 배경 이미지 추가
-
행 컨테이너 위로 마우스를 가져가 도구 상자를 표시하고 설정( {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"}
작업 2: 열 추가
Layout 아래의 Page Builder 패널에서 Column 자리 표시자를 행으로 드래그합니다.
이제 행이 동일한 너비의 두 열로 나뉩니다.
작업 3: 텍스트 추가
-
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 을(를) 다음과 같이 설정합니다.
table 0-row-2 1-row-2 2-row-2 3-row-2 라인 글꼴 크기 1행: 28px
2행: 24px
3행: 18px
이 블록은 페이지의 어디에나 배치할 수 있으므로 제목 수준이 아닌 기본 단락 스타일을 사용하십시오. 또한 텍스트가 아직 열에 올바르게 감싸지지 않을 수도 있습니다.
{width="600" modal="regular"}
작업 4: 링크 추가
첫 번째 연습에서는 Button 콘텐츠 형식을 사용하여 링크를 만드는 방법을 배웠습니다. 이 예에서는 편집기 도구 모음에서 링크를 삽입하는 방법을 보여 줍니다.
-
다른 브라우저 탭에서 스토어프런트를 열고 링크의 대상 페이지로 이동합니다.
저장소 도메인에 대한 참조를 생략하는 상대 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 을(를) 클릭합니다.
3단계: 가격 규칙 추가
-
편집 모드에서 티셔츠 프로모션 동적 블록을 다시 엽니다.
-
Related Promotions 섹션에서 를 확장하고 Add Cart Price Rules 을(를) 클릭합니다.
{width="600" modal="regular"}
-
관련 장바구니 가격 규칙 추가 페이지에서 3개 티셔츠 구매 가격 규칙에 대한 확인란을 선택하고 Add Selected 을(를) 클릭합니다.
{width="600" modal="regular"}
가격 규칙은 관련 장바구니 가격 규칙 아래의 관련 프로모션 섹션에 표시됩니다. 여러 가격 규칙을 동적 블록과 연관시킬 수 있습니다. 그러나 이 간단한 예제는 하나만 사용합니다.
{width="600" modal="regular"}
-
오른쪽 상단에서 Save 을(를) 클릭합니다.
4단계: 페이지에 동적 블록 추가
-
관리자 사이드바에서 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 을(를) 선택합니다.
블록 연습의 두 번째 부분을 완료했습니다. 참고용으로 작업한 것을 잊지 말아라.
3부: 동적 블록 업데이트
연습의 마지막 부분에서는 페이지가 스토어에서 라이브되는 동안 동적 블록을 편집합니다. 그런 다음 고객 세그먼트의 멤버로 스토어에 로그인하여 블록이 나타나도록 합니다.
1단계: 동적 블록 편집
-
관리자 사이드바에서 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 을(를) 클릭합니다.
2단계: 동적 블록 보기
이 동적 블록은 특정 고객 세그먼트의 구성원에게만 표시되므로 고객 세그먼트의 구성원인 고객으로 로그인하여 판촉을 확인해야 합니다. 이 예에서는 블록이 여성 고객에게만 표시됩니다.
-
상점으로 브라우저 창을 엽니다.
-
샘플 페이지를 보려면 주소 표시줄의 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"}
-
차단 연습을 완료했습니다. 참고용으로 작업한 것을 잊지 말아라.
준비가 되면 파트3: 카탈로그 콘텐츠로 진행하십시오.