Studio 에디터: 섹션 그리드 사용자 지정하기

7 분 분량
Studio 에디터에서 섹션은 단일 셀(전체 섹션을 수용)을 포함하는 내장 그리드와 함께 제공됩니다. 섹션을 더 많은 셀로 분할해 콘텐츠에 반응형 구조를 추가하세요. 다양한 사용자 지정 레이아웃을 선택할 수 있습니다.
Wix Studio 아카데미로 이동해 추가 Wix Studio 웨비나, 튜토리얼 및 강좌를 확인하세요.
다음 지침을 참고하세요.

섹션에 셀 추가하기

섹션에 셀을 추가해 반응형의 구조화된 레이아웃을 만드세요. 요소를 별도의 셀에 유지하면 모든 화면에서 제자리에 유지될 수 있습니다. 레이아웃을 선택하고 요소를 셀로 이동할 수 있으며, 언제든지 셀을 분할하거나 나중에 새 셀을 추가할 수 있습니다. 
컨테이너에 셀을 추가하고 싶으신가요?
컨테이너에 고급 CSS 그리드를 적용할 수 있습니다.

섹션에 셀을 추가하려면:

  1. 해당 섹션을 선택합니다.
  2. 섹션 상단에서 빈 페이지 드롭다운을 클릭합니다. 
섹션 선택 시 열리는 툴바의 스크린샷과 사용 가능한 레이아웃 드롭다운
  1. , , 콜라주 등의 레이아웃을 선택합니다.
    도움말: 언제든지 드롭다운에서 레이아웃을 변경할 수 있으며 요소는 이동하지 않습니다.
  2. 해당 셀에 요소를 끌어다 놓습니다.
콜라주 레이아웃을 적용한 직후 새 셀이 강조 표시되어 있는 Studio 에디터의 빈 섹션 스크린샷
모바일에서 그리드 셀이 겹치나요?
이 문제를 해결하려면 세로 레이아웃(예: 행)으로 전환하는 것이 좋습니다. 

섹션 그리드 사용자 지정하기

그리드를 원하는 대로 디자인하세요. 기존 셀을 분할 또는 병합하고, 새 셀을 추가하거나 그리드라인을 끌어 크기를 조정할 수 있습니다. 간격을 추가해 셀 사이에 여백을 추가할 수도 있습니다.

섹션 그리드를 사용자 지정하려면:

  1. 해당 섹션을 선택합니다.
  2. 그리드 사용자 지정 방법을 선택합니다.
참고:
현재는 셀을 복제할 수 없습니다. 

그리드 셀 교체 및 뒤집기

셀을 교체해 섹션 그리드를 빠르고 효율적으로 재구성하세요. 드래그-앤-드롭을 사용해 2개의 셀을 즉시 교체할 수 있으며, 교체 시 그리드에서 서로의 위치를 즉시 차지합니다. 
또는, 전체 그리드를 가로 또는 세로로 뒤집어 클라이언트의 콘텐츠를 표시하는 다양한 옵션을 탐색할 수 있습니다. 

셀을 교체하려면:

  1. 해당 섹션을 선택합니다.
  2. 다음에 수행할 작업을 선택합니다.

고급 CSS 그리드로 전환하기

고급 CSS 그리드로 전환하면, 중단점별로 레이아웃을 보다 정확하게 제어할 수 있습니다. 원하는 단과 행의 수를 선택하고 반응형 측정(예: fr, 최소/최대, %)을 사용해 크기를 설정할 수 있습니다.

섹션 그리드에서 CSS 그리드로 전환하려면:

  1. 해당 섹션을 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.


  3. 레이아웃으로 스크롤합니다.
  4. 고급 CSS 그리드 옆 전환을 클릭합니다.
  5. CSS 그리드로 전환을 클릭합니다.
속성 패널에서 고급 그리드로 전환하는 옵션을 보여주는 스크린샷
겹치는 요소를 처리해야 한다면:
문제 해결 동영상을 통해 확인 사항 및 해결 방법을 알아보세요. 

도움이 되었나요?

|