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

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

간단한 페이지 예제 {width="700" modal="regular"}

NOTE
이 연습 연습에서는 2.4.1 릴리스의 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 패널을 스테이지와 정렬하기 위해 첫 번째 행 앞에 새 행이 각각 추가됩니다. 연습이 끝나면 단순 페이지 예와 일치하도록 행을 재배열합니다.

두 개의 동일한 열이 있는 포함된 행을 사용하는 예제 페이지 {width="600" modal="regular"}

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부: 같지 않은 열이 있는 전체 너비 행

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

다른 너비의 열이 있는 전체 너비 행 예 {width="500"}

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