레이아웃 - 열

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

필요에 따라 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)에 추가되는 콘텐츠 컨테이너의 위치를 제어합니다.

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

• 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을(를) 변경하십시오.

필요에 따라 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

완료되면 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.