Elementor에는 컨테이너를 위한 두 가지 레이아웃 모드가 있습니다: Flexbox와 Grid. 어떤 모드가 적용되는지는 클래스 이름이 아니라 브라우저가 해당 요소에 실제로 계산한 display 값에 의해 결정됩니다.
display:flex → Flexbox 컨테이너
변환기는 중요한 속성들을 가져옵니다: 방향(row/column), wrap, justify-content, align-items, gap. 그래서 flexbox로 만든 가로 카드 행은 Direction = row이고 CSS에서 지정한 gap과 동일한 값을 가진 컨테이너로 변환됩니다.
display:grid → Grid 컨테이너
Grid 레이아웃은 Grid 컨테이너가 되고, 편집기는 구조 패널에서 그리드 아이콘과 함께 Grid로 표시합니다. 열, 행, 간격, 항목 정렬 옵션이 그대로 전달됩니다.
동일한 열은 fr로 유지됩니다
이 부분은 이해할 가치가 있습니다. 브라우저는 grid-template-columns: repeat(5, minmax(0, 1fr))를 실제 픽셀 값(예: 241.597px 241.597px 241.604px …)으로 계산합니다. 아주 작은 서브픽셀 차이가 있다는 점에 주목하세요. 변환기가 이 문자열을 단순 비교하면 열이 서로 다르다고 판단해 고정 픽셀 너비를 기록하고, 그러면 그리드가 반응형으로 동작하지 않게 됩니다.
대신 열을 허용 오차를 두고 수치로 비교하여, 거의 동일한 트랙을 동일한 것으로 인식하고 N fr로 기록합니다. 이는 컨테이너 크기가 변할 때 재배치되는 진짜 반응형 그리드입니다. 실제로 균등하지 않은 트랙(예: 2fr 1fr)은 사용자 지정 템플릿으로 보존됩니다.
행은 콘텐츠 크기에 맞춰집니다
행은 Elementor의 기본값인 동일 높이 행 대신 auto로 설정됩니다. 따라서 텍스트 길이가 다른 카드가 가장 높은 카드에 맞춰 늘어나지 않고 자연스러운 높이를 유지합니다.
너비, 패딩 그리고 중앙 정렬 함정
매우 흔한 패턴은 중앙 정렬된 콘텐츠 열입니다: max-width: 760px; margin: 0 auto;. 여기서 브라우저는 auto를 현재 뷰포트에 따라 실제 픽셀 값으로 계산합니다. 특정 너비에서는 양쪽에 260px로 보고될 수 있습니다.
그 픽셀 값을 Elementor에 그대로 넣으면 화면 크기가 바뀌는 순간 중앙 정렬이 깨집니다. 따라서 max-width와 대칭적인 auto margin을 가진 블록은 자동 중앙 정렬로 감지되어 Elementor 방식으로 표현됩니다. 즉, Content width = Boxed와 max-width를 사용하여 어떤 화면 크기에서도 기본적으로 중앙에 배치됩니다. 계산된 좌우 margin은 버려집니다.
열 개수는 추측이 아니라 각 브레이크포인트에서 측정됩니다
데스크톱에서 4열, 태블릿에서 2열을 표시하는 그리드는 단순히 줄어드는 하나의 레이아웃이 아니라, 다른 너비에서의 서로 다른 값입니다. 데스크톱 렌더링만 보는 변환기는 나머지를 놓칩니다.
따라서 페이지는 두 번 이상 측정됩니다. 레이아웃은 각 브레이크포인트 너비에서 다시 읽히고, 해당 너비의 열 개수는 Elementor의 기기별 반응형 필드에 기록됩니다. 기본 설정에서는 820px과 390px(일반적인 세로형 태블릿과 일반적인 휴대폰)에서 두 번의 추가 측정이 이루어지며, 결과는 Elementor의 기본 태블릿(최대 1024px) 및 모바일(최대 767px) 필드에 들어갑니다. 각 범위의 최상단이 아닌 실제 기기 너비에서 측정하는 것이 중요합니다. 760px이나 640px에서 수동으로 작성한 미디어 쿼리는 767px에서는 실행되지 않으므로, 그 지점에서 측정하면 대부분의 모바일 레이아웃을 놓치게 됩니다.
확장 브레이크포인트를 켜면 다섯 번 측정합니다. 노트북 1280px, 태블릿-엑스트라 1100px, 태블릿 960px, 모바일-엑스트라 820px, 모바일 390px. Elementor 사이트 설정에서 해당 브레이크포인트가 활성화되어 있는 경우에만 사용하세요. 꺼져 있는 기기에 대한 값을 기록하면 나중에 스크롤하며 지나쳐야 하는 불필요한 값만 늘어날 뿐입니다.
숨겨진 요소는 삭제되지 않고 숨겨집니다
display: none 또는 visibility: hidden으로 계산되는 요소는 작은 함정입니다. 보이지 않기 때문에 변환기가 건너뛰어야 한다고 생각하기 쉽지만, 모바일 전용 메뉴, 오프캔버스 패널, 기본적으로 닫혀 있는 모달은 변환 시점에는 보이지 않지만 여전히 디자인의 일부입니다.
이러한 요소들은 변환되며, 삭제되는 대신 Elementor의 데스크톱에서 숨기기 반응형 플래그를 받습니다. 콘텐츠는 유지되며, 그것이 필요한지는 나중에 결정하면 됩니다. 캔버스에서 기대했던 것이 보이지 않는다면, 유실되었다고 가정하기 전에 반응형 표시 여부 토글을 확인하세요.
매핑이 전혀 없는 레이아웃
세 가지 소스 패턴에는 Elementor에 상응하는 기능이 없습니다. 변환한 후에 알게 되는 것보다 변환 전에 아는 것이 낫습니다.
- Float 기반 레이아웃. Elementor 컨테이너에는 float라는 개념이 없으므로 float는 전혀 읽지 않습니다.
float: left로 만든 오래된 2열 레이아웃은 세로로 쌓인 블록으로 변환됩니다. 이는 마크업이 flexbox 이전의 것임을 보여주는 가장 분명한 신호이며, 소스에서 현대화할 가치가 있습니다. - 테이블 레이아웃. 마찬가지입니다. 레이아웃 테이블은 디자인이 아니라 구조이므로 열이 아닌 중첩된 블록으로 변환됩니다.
- 명명된 그리드 영역.
grid-template-columns는 변환되지만grid-template-areas는 변환되지 않습니다. Elementor의 Grid에는 명명된 영역에 대응하는 개념이 없기 때문입니다. 자식 요소는 소스 순서대로 배치됩니다.
가져온 후 올바른 모드 선택하기
변환 결과는 최종이 아닙니다. 컨테이너의 레이아웃 모드는 Elementor의 드롭다운이며, 모드를 전환해도 자식 요소는 유지됩니다. 따라서 어떤 섹션이 Flexbox로 변환되었지만 Grid로 관리하고 싶다면 모드를 변경하고 열을 설정하면 됩니다. 두 가지 경험 법칙이 있습니다:
- Grid — 자식 요소가 양방향으로 정렬되어야 할 때. 카드 덱, 기능 매트릭스, 이미지 갤러리처럼 두 번째 행이 첫 번째 행과 정렬되는 것이 중요한 경우입니다.
- Flexbox — 자식 요소가 한 방향으로 흐르고 크기가 콘텐츠에 따라 결정될 때. 내비게이션 바, 버튼 그룹, 배지 옆의 제목, 미디어 객체 행 등이 이에 해당합니다.
변환기는 소스와 일치하는 모드를 선택하는데, 이는 올바른 기본값입니다. 하지만 소스 마크업은 종종 결정보다는 습관의 결과이며, 작성자가 항상 flexbox를 사용해서 flexbox로 만든 레이아웃이 실제로는 그리드에 더 적합할 수 있습니다.
실용 팁
- 그리드/플렉스 자식 요소 사이에는 margin보다
gap을 사용하세요. gap은 깔끔하게 매핑되지만 자식별 margin은 그렇지 않습니다. - 중앙 정렬 섹션에는
max-width+margin:0 auto를 사용하세요. Boxed 컨테이너로 올바르게 변환됩니다. - flex/grid와 float를 섞지 마세요. float에는 Elementor 대응 기능이 없어 수동 작업이 필요합니다.
- 모바일에서 행이 줄 바꿈되지 않아야 한다면, 가져온 후 Elementor에서 설정하세요. 반응형 줄 바꿈 동작은 Elementor에서 조정하기가 더 쉽습니다.
- 확장 브레이크포인트 설정을 Elementor에서 실제로 활성화된 것과 일치시키세요. 그렇지 않으면 사이트에서 사용하지 않는 기기에 대한 반응형 값이 생성됩니다.