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

사용자 고유의 디자인에 따라 콘텐츠가 풍부한 페이지를 만드는 것이 얼마나 쉬운지 보여 주는 간단한 페이지를 만들어 Page Builder 작업 영역에 익숙해지려면 이 세 부분으로 구성된 연습을 따르십시오.

간단한 페이지 예제

NOTE
이 연습 연습에서는 2.4.1 릴리스의 Page Builder 작업 영역에 대한 최근 변경 사항을 반영하도록 업데이트됩니다. 이전 Adobe Commerce 릴리스를 사용하는 경우 Commerce 2.3 사용 안내서에 포함된 Page Builder 연습 연습을 사용하십시오.

시작하기 전에

이 연습을 시작하기 전에 작업 중에 세션이 시간 초과되지 않도록 관리 세션 수명을 늘리는 것이 좋습니다.

필요한 컨텐츠 관리 구성 설정을 확인합니다.

연습 이미지 자산 다운로드

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

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

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

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

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

    Page Builder 연습 파일 - 단순 페이지 자산 {width="500"}

이 연습의 세 부분을 순서대로 따르십시오.

1부: 배너가 있는 전체 도련 행

이 간단한 페이지 연습에서는 전체 도련 행과 배너가 있는 페이지를 만듭니다. 행에는 데스크톱 및 모바일 장치에 대한 다른 배경 이미지가 있습니다.

배너가 있는 Page Builder 전체 도련 행 {width="700" modal="regular"}

1단계: 페이지 만들기

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

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

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

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

    기본 페이지 설정 {width="600" modal="regular"}

  3. Design 섹션에서 확장 선택기 를 확장합니다.

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

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

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

    note note
    NOTE
    전체 너비 레이아웃은 호환되는 테마에서만 사용할 수 있습니다.

    페이지 디자인 설정 {width="600" modal="regular"}

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

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

2단계: 행 서식 지정

  1. Content 섹션에서 확장 선택기 를 확장합니다.

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

    note note
    NOTE
    콘텐츠 제목 필드는 선택 사항입니다. 기본적으로 테마에 따라 제목 수준 1(H1)로 형식이 지정됩니다. 이 연습에서는 콘텐츠 제목 ​이 비어 있습니다.

    빈 행이 있는 페이지 콘텐츠 미리 보기 {width="600" modal="regular"}

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

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

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

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

    Page Builder행 도구 상자 {width="600" modal="regular"}

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

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

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

    행 설정 - 전체 도련 {width="600" modal="regular"}

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

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

    행 설정 - 여백 및 패딩 {width="600" modal="regular"}

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

3단계: 배너 추가

NOTE
Page Builder에는 이 단계에서 사용할 수 있는 배너 ​라는 새로운 콘텐츠 형식이 있습니다. 이전에 콘텐츠 메뉴의 배너 옵션이었던 것이 이제 동적 블록 ​입니다.
  1. Page Builder 패널에서 Media ​을(를) 확장하고 배너 자리 표시자를 스테이지로 드래그합니다.

    배너 콘텐츠 형식을 스테이지로 드래그 {width="600" modal="regular"}

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

    note note
    NOTE
    이제 스테이지에 두 개의 콘텐츠 컨테이너가 있으며 각 콘텐츠 컨테이너에는 별도의 도구 상자가 있습니다. 배너가 행 내부에 중첩되어 있으므로 올바른 도구 상자에서 작업하고 있는지 확인하십시오.

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

    배너 도구 상자 {width="600" modal="regular"}

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

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

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

    배너 모양 - 오른쪽 콜라주 {width="600" modal="regular"}

  5. 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"}

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

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

    Get fit and look fab in new seasonal styles.

    New LUMA yoga collection

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

    스테이지에서 배너 콘텐츠 편집 {width="600" modal="regular"}

  7. 텍스트에 서식 적용:

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

      제목 2 형식 적용 {width="600" modal="regular"}

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

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

    서식이 지정된 텍스트가 있는 콘텐츠 단계의 배너 {width="600" modal="regular"}

__

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

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

    배너 설정 - 메시지 텍스트 {width="600" modal="regular"}

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

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

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

      배너 콘텐츠 - 범주 링크 {width="600" modal="regular"}

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

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

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

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

  3. 배너 오버레이 설정:

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

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

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

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

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

      배너 설정 - 단추 오버레이 색상 {width="600" modal="regular"}

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

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

      문자 메시지와 단추가 있는 콘텐츠 단계의 배너 {width="600" modal="regular"}

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

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

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

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

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

2부: 2개의 동일한 열이 있는 포함된 행

이 연습 부분에서는 페이지에 행을 추가하고 해당 행을 동일한 두 열로 나눕니다. 그런 다음 각 열에 연결된 이미지를 추가합니다. 지침에서 Page Builder 패널을 스테이지와 정렬하기 위해 첫 번째 행 앞에 새 행이 각각 추가됩니다. 연습이 끝나면 단순 페이지 예와 일치하도록 행을 재배열합니다.

두 개의 동일한 열이 있는 포함된 행을 사용하는 예제 페이지

1단계: 행 추가

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

  2. Content 섹션에서 확장 선택기 를 확장합니다.

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

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

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

    배너 위에 새 행 추가 {width="600" modal="regular"}

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

    행 도구 상자 {width="600" modal="regular"}

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

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

    기본 포함된 모양 설정 유지 {width="600" modal="regular"}

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

2단계: 열 추가

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

    열 콘텐츠 형식을 스테이지로 드래그하는 중 {width="600" modal="regular"}

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

    같은 너비의 두 열이 있는 행 {width="600" modal="regular"}

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

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

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

    열에 대한 눈금 크기 세부 정보 표시 {width="600" modal="regular"}

3단계: 링크가 있는 이미지 추가

이 단계에서는 배너에 이미지를 업로드하는 방법을 배웁니다.

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

    이미지 콘텐츠 형식을 첫 번째 열로 드래그하는 중 {width="600" modal="regular"}

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

    이미지 자리 표시자 {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 파일을 두 번째 열에 추가합니다.

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

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

    이미지 도구 상자 {width="600" modal="regular"}

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

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

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

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

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

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

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

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

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

3부: 같지 않은 열이 있는 전체 너비 행

이 페이지의 마지막 행은 제품 리뷰의 내용을 다룹니다. 전체 너비 행을 추가하고 서로 다른 너비의 두 열로 나눕니다. 통합 효과를 위해 행에 적용되는 일치하는 배경색과 함께 배경 이미지가 첫 번째 열에 추가됩니다.

다른 너비의 열이 있는 전체 너비 행 예

1단계: 행 추가

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

  2. Content 섹션에서 확장 선택기 를 확장합니다.

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

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

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

    새 행 추가 {width="600" modal="regular"}

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

    행 도구 상자 {width="600" modal="regular"}

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

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

    전체 너비 모양 선택 {width="600" modal="regular"}

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

    배경색 설정 {width="600" modal="regular"}

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

    여백 및 패딩 설정 {width="600" modal="regular"}

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

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

    단계 배경색이 있는 행 {width="600" modal="regular"}

2단계: 다른 너비의 열 추가

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

    열을 스테이지로 드래그 {width="600" modal="regular"}

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

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

    첫 번째 열 크기 조정 {width="600" modal="regular"}

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

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

    여백 및 패딩 설정 {width="600" modal="regular"}

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

3단계: 첫 번째 열에 이미지 추가

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

    이미지 콘텐츠 형식을 첫 번째 열로 드래그하는 중 {width="600" modal="regular"}

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

    이미지 업로드 {width="600" modal="regular"}

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

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

    업로드된 이미지가 열에 추가됨 {width="600" modal="regular"}

4단계: 두 번째 열에 검토 컨텐츠 추가

행의 두 번째 열에는 별 5개 등급 이미지와 서식 있는 텍스트 메시지를 포함하여 고객 리뷰의 콘텐츠가 포함되어야 합니다.

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

    텍스트 콘텐츠 형식을 스테이지로 드래그하는 중 {width="600" modal="regular"}

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

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

    텍스트에 이미지 삽입 {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"}

  4. 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"}

  5. 텍스트 서식 지정:

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

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

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

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

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

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

      썸네일 아래에 표시되는 이미지 크기 {width="600" modal="regular"}

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

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

    • 두 번째 열 위로 마우스를 가져가 도구 상자를 표시하고 설정( 설정 아이콘 {width="20"}) 아이콘을 선택합니다.
    note note
    NOTE
    올바른 도구 상자를 표시하려면 텍스트 컨테이너가 아닌 열 컨테이너를 선택해야 합니다.
    • Minimum Height ​의 경우 첫 번째 열에 있는 이미지의 높이(픽셀)로 450을(를) 입력하십시오.

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

    최소 높이 및 세로 맞춤 설정 {width="600" modal="regular"}

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

    여백 및 패딩 설정 {width="600" modal="regular"}

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

    스테이지에 검토 내용이 있는 행 {width="600" modal="regular"}

5단계: 카탈로그 제품 링크 삽입

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

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

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

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

      ../antonia-racer-tank.html

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

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

      텍스트에 링크 삽입 {width="600" modal="regular"}

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

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

      연결된 텍스트가 있는 배너 {width="600" modal="regular"}

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

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

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

6단계: 행 재배열

세 행을 모두 완료하면 마지막 단계에서 원래 단순 페이지 예제와 일치하도록 행을 다시 정렬합니다. 원래 예와 일치시키려면 첫 번째 행을 맨 아래로 이동해야 하고 마지막 행을 맨 위로 이동해야 합니다.

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

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

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

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

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

    note note
    NOTE
    실수로 이미지와 같은 컨텐츠의 일부만 이동한 경우 컨텐츠를 해당 컨텐츠가 속한 위치로 다시 이동하고 다시 시도하십시오.

    스테이지에서 행 이동 {width="600" modal="regular"}

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

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

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

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

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

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

단순 페이지 연습을 완료했습니다. 생성한 작업은 나중에 참조할 수 있도록 보관합니다.

준비가 되면 파트2: 블록로 진행하십시오.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d