레이아웃 - 열

Column 콘텐츠 형식을 사용하여 Page Builder stage에서 페이지를 여러 열로 분할합니다. 행이나 탭에 열을 추가하거나 스테이지에 직접 열을 추가하면 열 그룹은 처음에는 동일한 너비의 두 열로 분할됩니다. 필요에 따라 열을 추가하거나 제거할 수 있습니다. 두 열 사이의 테두리를 끌어 열 크기를 조정할 수 있습니다. 다음 열의 너비는 행, 탭 또는 단계 내에서 사용 가능한 공간을 채우도록 조정됩니다. 단일 열이 스테이지 또는 해당 컨테이너의 전체 폭을 확장합니다.

열 추가

NOTE
Page Builder 콘텐츠를 크게 변경하는 경우 작업하는 동안 세션이 시간 초과되지 않도록 관리 세션 수명을(를) 늘리는 것이 좋습니다.

2.4.5 릴리스의 업데이트

사용자가 이제 Columns ​을(를) 개별 열의 상위 컨테이너로 사용하도록 2.4.5 릴리스에서 페이지 빌더 기능이 업데이트되었습니다. 이 새 컨테이너는 배경에 대한 속성도 지원하므로 열을 행으로 둘러싸지 않아도 됩니다. 불필요한 마크업을 줄이고 상점 표시 및 경험을 세밀하게 제어할 수 있습니다.

그룹의 다른 열 위나 아래에 열을 끌어 쌓아 Columns 컨테이너의 레이아웃을 변경할 수 있습니다. 이렇게 하면 개발자가 맞춤화할 필요 없이 수행할 수 있는 새로운 다양한 레이아웃 조합이 열립니다.

이 비디오를 통해 Columns 컨테이너를 사용하여 페이지 레이아웃을 구체화하는 방법에 대해 알아보십시오.

열 도구 상자

각 열에는 컨테이너를 마우스로 가리키면 표시되는 옵션의 도구 상자가 있습니다.

도구
아이콘
설명
이동
이동 아이콘 {width="25"}
열과 해당 콘텐츠를 다른 열을 기준으로 다른 위치로 이동합니다.
(레이블)
현재 컨테이너를 열로 식별합니다. 열 컨테이너 위로 마우스를 가져가 도구 상자를 표시합니다.
설정
설정 아이콘 {width="25"}
컨테이너의 속성을 변경할 수 있는 열 편집 페이지를 엽니다.
복제
중복 아이콘 {width="25"}
현재 열의 복사본을 만듭니다.
제거
제거 아이콘 {width="25"}
현재 열과 해당 콘텐츠를 삭제합니다.

열 그리드

grid을(를) 사용하면 콘텐츠가 열에서 일관되게 정렬되고 데스크톱 및 모바일 장치에서 페이지가 올바르게 렌더링됩니다. 자세한 내용은 Page Builder 구성의 고급 콘텐츠 도구 섹션을 참조하십시오.

한 열이 있는 행의 눈금 나누기

다음의 2열 예에서 각 열 컨테이너의 상단 테두리에 있는 괄호 안의 숫자(6/12)는 각 열의 그리드 분할 수와 총 분할 수를 나타냅니다. 이 경우 열은 총 12개 중 6개 격자 단위의 너비이다.

두 개의 열이 있는 행의 눈금 나누기

열 추가

  1. Layout ​아래의 Page Builder 패널에서​ Column ​을(를) 스테이지로 드래그합니다.

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

    이제 열 그룹이 동일한 너비의 두 열로 나뉩니다. 각 열에는 별도의 콘텐츠 컨테이너이며 고유한 도구 상자 옵션 세트가 있습니다.

    동일한 열 두 개 {width="600" modal="regular"}

  2. 열 그룹의 왼쪽 상단 모서리에서 Grid 도구( Grid 컨트롤 )를 클릭하고 필요에 따라 눈금 크기를 조정합니다.

    격자에 컨텐츠를 배치하면 컨텐츠를 일관되게 정렬하고 데스크탑 및 모바일 장치에서 페이지를 올바르게 렌더링하는 데 도움이 됩니다. 자세한 내용은 Page Builder 구성의 고급 콘텐츠 도구 섹션을 참조하십시오.

    두 열의 눈금 나누기 {width="600" modal="regular"}

열 크기 조정

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

    테두리가 강조 표시되고 선택한 열에 대한 도구 상자가 나타납니다.

    두 열 사이의 강조 표시된 테두리 {width="600" modal="regular"}

  2. 마우스 단추를 누른 채 그리드를 표시하고 테두리를 그리드의 새 위치로 드래그합니다.

    두 열의 너비는 변경 사항을 반영하도록 조정됩니다. 각 열의 새 너비는 레이블 뒤에 나타납니다(예: 4/12(12개 중 4개) 및 8/12(12개 중 8개).

    크기가 조정된 열 {width="600" modal="regular"}

열 제거

  1. 제거할 열 위로 마우스를 가져가면 도구 상자가 표시되고 제거( 제거 아이콘 {width="20"} ) 아이콘을 선택합니다.

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

  2. 열에 콘텐츠가 포함되어 있으면 OK ​을(를) 클릭하여 확인합니다.

    앞으로 프로세스 속도를 높이려면 Do not show this again 확인란을 선택하여 확인 단계를 건너뛸 수 있습니다.

    이제 열 그룹에 단일 열(12/12)과 격자가 있습니다. 격자는 열에만 사용할 수 있으므로 이 방법을 사용하여 격자를 표시할 수 있습니다.

    눈금이 있는 단일 열 {width="600" modal="regular"}

  3. 열 그룹이 나머지 열을 행 또는 단계의 전체 너비로 확장하도록 하려면 다음을 수행합니다.

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

    • Advanced ​섹션까지 아래로 스크롤하고 네 개의​ Padding ​값을 모두 0(으)로 설정합니다.

      패딩 제로 사용 {width="600" modal="regular"}

    • 오른쪽 상단 모서리에서 Save ​을(를) 클릭하여 Edit Column ​페이지를 닫습니다.

  4. 작업 영역의 오른쪽 위 모서리에 있는 전체 화면 닫기( 전체 화면 닫기 아이콘 {width="20"} ) 아이콘을 클릭한 다음 오른쪽 위 모서리에 있는 Save ​을(를) 클릭합니다.

열 설정 변경

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

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

  2. 필요에 따라 Appearance 설정을 변경합니다.

    • 컨테이너를 기준으로 열의 위치를 결정하는 정렬 설정을 선택합니다.

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      옵션 설명
      Full Height 열은 컨테이너의 전체 높이를 확장합니다.
      Top Aligned 열은 컨테이너의 맨 위에 정렬됩니다.
      Centered 컨테이너의 중앙에 있는 열입니다.
      Bottom Aligned 열은 컨테이너의 하단에 정렬됩니다.
    • 필요한 경우 열에 대한 Minimum Height ​을(를) 입력하십시오. 예를 들어, 배경 이미지의 높이와 일치하도록 최소 높이를 설정할 수 있습니다.

    • 최소 높이를 설정하는 경우 Vertical Alignment ​을(를) 설정하여 열(Top, Center 또는 Bottom)에 추가되는 콘텐츠 컨테이너의 위치를 제어합니다.

  3. 열 콘텐츠의 배경을 변경합니다.

    • Background Color - 견본을 선택하거나, 색상 선택기를 클릭하거나, 올바른 색상 이름 또는 이에 해당하는 16진수 값을 입력하여 색상을 지정합니다. 이 설정은 열의 배경색을 결정합니다.

    • Background Image - 필요한 경우 제공된 도구를 사용하여 열에 적용할 배경 이미지를 선택하십시오.

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      도구 설명
      Upload 로컬 컴퓨터의 이미지 파일을 갤러리로 업로드한 다음 열의 배경 이미지로 적용합니다.
      Select from Gallery 갤러리에서 기존 이미지를 열의 배경 이미지로 선택하라는 메시지가 표시됩니다.
      카메라 아이콘 {width="25"} 이미지를 카메라 타일로 드래그하거나 로컬 파일 시스템에서 이미지를 검색할 수 있습니다.
    • Background Mobile Image - 필요한 경우 동일한 도구를 사용하여 모바일 장치에서 표시하는 데 사용할 다른 배경 이미지를 선택하십시오.

    • Background Size - 이 설정을 변경하여 열의 너비와 관련하여 배경 이미지의 크기 조정 방법을 결정합니다.

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      옵션 설명
      Cover 배경 이미지는 열의 전체 너비를 포함합니다.
      Contain 배경 이미지는 컨텐츠 영역의 너비로 제한됩니다.
      Auto 현재 테마의 스타일 시트에 지정된 기본 배경 크기를 적용합니다.
    • Background Position - 이 설정을 변경하여 열을 기준으로 이미지의 기준점을 결정합니다. 옵션: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center 또는 Bottom Right

    • Background Attachment - 이 설정을 변경하여 스크롤 페이지와 관련하여 배경 이미지가 어떻게 이동하는지 결정합니다.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      옵션 설명
      Scroll 페이지가 스크롤될 때 배경 이미지가 아래로 이동하도록 동기화됩니다.
      Fixed (모바일에서는 사용할 수 없음) 컨테이너가 이미지 위로 스크롤할 때 배경 이미지가 이동하지 않고 지정된 배경 위치에서 고정됩니다.
    • Background Repeat - 배경 이미지를 반복하여 공백을 채우려면 이 설정 Yes을(를) 변경하십시오.

  4. 필요에 따라 Advanced ​설정을 업데이트합니다.

    • 열에 추가되는 콘텐츠 컨테이너의 가로 위치를 제어하려면 Alignment ​을(를) 선택합니다.

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      옵션 설명
      Default 현재 테마의 스타일시트에 지정된 정렬 기본 설정을 적용합니다.
      Left 지정된 패딩을 허용하여 열 컨테이너의 왼쪽 테두리를 따라 콘텐츠 컨테이너를 정렬합니다.
      Center 지정된 패딩을 허용하여 열 컨테이너의 가운데에 컨텐츠 컨테이너를 맞춥니다.
      Right 지정된 패딩을 허용하여 열 컨테이너의 오른쪽 테두리를 따라 콘텐츠 컨테이너를 정렬합니다.
    • 열 컨테이너의 네 면에 모두 적용되는 Border 스타일을 설정합니다.

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      옵션 설명
      Default 연관된 스타일 시트에서 지정한 기본 테두리 스타일을 적용합니다.
      None 컨테이너 테두리를 시각적으로 표시하지 않습니다.
      Dotted 컨테이너 테두리가 점선으로 표시됩니다.
      Dashed 컨테이너 테두리는 파선으로 표시됩니다.
      Solid 컨테이너 테두리가 실선으로 표시됩니다.
      Double 컨테이너 테두리는 이중 선으로 표시됩니다.
      Groove 컨테이너 테두리는 홈이 있는 선으로 표시됩니다.
      Ridge 컨테이너 테두리는 절선으로 표시됩니다.
      Inset 컨테이너 테두리는 인세트 선으로 표시됩니다.
      Outset 컨테이너 테두리는 외곽선으로 표시됩니다.
    • None 이외의 테두리 스타일을 설정하는 경우 테두리 표시 옵션을 완료하십시오.

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      옵션 설명
      Border Color 색상 견본을 선택하거나 색상 선택기를 클릭하거나 유효한 색상 이름 또는 이에 해당하는 16진수 값을 입력하여 색상을 지정합니다.
      Border Width 테두리 라인 너비의 픽셀 수를 입력합니다.
      Border Radius 테두리의 각 모퉁이를 둥글게 만드는 데 사용되는 반경의 크기를 정의하려면 픽셀 수를 입력합니다.
    • (선택 사항) 열 컨테이너에 적용할 현재 스타일 시트의 CSS classes 이름을 지정합니다.

      여러 클래스 이름은 공백으로 구분합니다.

    • Margins and Padding ​에 대한 값을 픽셀 단위로 입력하여 열의 외부 여백과 내부 패딩을 지정합니다.

      열 컨테이너 다이어그램에 해당하는 각 값을 입력합니다.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      컨테이너 영역 설명
      Margins 컨테이너의 모든 면 바깥쪽 가장자리에 적용되는 빈 공간의 양입니다. 옵션: Top / Right / Bottom / Left
      Padding 컨테이너의 모든 측면 안쪽 가장자리에 적용되는 빈 공간의 양입니다. 옵션: Top / Right / Bottom / Left
  5. 완료되면 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.

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