변환된 페이지는 구조적으로 올바르지만 완성된 것은 아닙니다. 매번 동일한 짧은 체크리스트를 같은 순서로 실행하면 프로젝트마다 같은 문제를 다시 발견하는 일을 막을 수 있습니다.
0. 안전 보고서 읽기 (30초)
이 작업은 무엇이든 붙여넣은 후가 아니라 붙여넣기 전에 수행하세요. 결과 보기에는 변환 중 제거되거나 다시 작성된 모든 항목이 나열됩니다. 제거된 스크립트, 정리된 폼 액션, 폐기된 임베드, absolute로 강등된 fixed 포지셔닝, 빈 슬롯으로 바뀐 Base64 이미지 등입니다.
여기서 30초만 투자하면 나머지 점검에서 무엇을 다루게 될지 알 수 있습니다. 제거된 항목이 없다고 보고된 페이지는 스크립트 4개와 폼 2개가 보고된 페이지보다 훨씬 짧은 점검이 필요합니다. 또한 보고서의 한 줄에 이미 무엇이 다시 작성되었고 왜 그랬는지 나와 있는데, 요소가 잘못 보이는 이유를 찾느라 10분을 허비하는 가장 낭비적인 실패 방식을 막아 줍니다.
1. 브레이크포인트 먼저 (4분)
개별 위젯을 건드리기 전에 데스크톱, 태블릿, 모바일을 차례로 확인하세요. 레이아웃 문제는 컨테이너 수준에서 고치는 것이 가장 비용이 적게 들며, 먼저 고치면 나중에 위젯 스타일을 다시 작업하는 일을 막을 수 있습니다. 다중 열 그리드가 접히는지, 히어로 높이가 적절한지, 긴 제목이 심하게 끊어지지 않는지 확인하세요.
순서는 보기보다 훨씬 중요합니다. 위젯 스타일링은 레이아웃의 다음 단계입니다. 카드를 다시 스타일링한 후 태블릿에서 그리드가 2열이어야 한다는 것을 알게 되면 카드를 또 다시 스타일링하게 됩니다. 항상 컨테이너 먼저, 위젯은 그 다음입니다.
2. 링크와 버튼 (3분)
모든 행동 유도(CTA) 요소를 클릭하세요. 추출된 블록은 때때로 감싸는 앵커를 잃기 때문에 버튼에 링크가 없는 상태로 도착할 수 있습니다. 그동안 호버 색상도 설정하세요. 호버 상태는 소스에서 읽을 수 없으며, 스타일이 지정되지 않은 호버는 가져온 페이지에서 가장 눈에 띄는 흔적입니다.
3. 이미지 (3분)
모든 플레이스홀더 슬롯을 채우세요. 각 슬롯의 캡션에는 원래 무엇이 있어야 했는지 알려줍니다. 이미지를 넣은 후 캡션을 표시하지 않으려면 캡션을 삭제하고, 전체 너비 카드 이미지가 의도한 대로 크롭되는지 확인하세요.
4. 아이콘 (1분)
비어 있는 아이콘 컨트롤을 살펴보세요. 아이콘을 이름으로 매칭하지 못한 경우 의도적으로 비워 두었으니, 잘못 추측한 아이콘을 그대로 두지 말고 아이콘 선택기에서 올바른 아이콘을 고르라는 신호입니다.
5. 통합 (2분)
모든 내비게이션 메뉴 위젯을 실제 WordPress 메뉴에 연결하세요. 모든 폼 위젯의 액션을 구성하세요. 원래 제출 엔드포인트는 의도적으로 가져오지 않습니다.
6. 제목과 SEO (1분)
H1이 정확히 하나인지, 제목 수준이 논리적으로 내려가는지 확인하세요. 이미 H1이 있는 페이지에 독립형 페이지를 가져온 경우 가져온 제목의 수준을 다시 조정하세요.
7. 글꼴 (1분)
타이포그래피 값(글꼴 패밀리, 크기, 굵기, 줄 높이)은 변환되지만 글꼴 파일은 그렇지 않습니다. 소스가 사이트에 없는 자체 호스팅 또는 라이선스 글꼴 패밀리를 사용한 경우 위젯은 올바른 패밀리 이름을 유지하지만 브라우저는 조용히 다른 글꼴로 대체합니다. 대개 빠르게 훑어보면 알아차리지 못할 만큼 비슷해 보입니다.
제목 하나와 문단 하나를 열어 글꼴 패밀리가 실제로 적용되는지 확인하세요. 적용되지 않는다면 먼저 사이트에 글꼴을 설치하세요. Elementor 사용자 정의 글꼴, Google Fonts 선택, 또는 테마를 통해서 말이죠. 그러면 위젯을 하나도 건드리지 않고 타이포그래피가 정렬됩니다.
8. 전역 값에 다시 연결 (2분)
사이트 색상 모드에서 변환하지 않았다면 모든 색상이 하드코딩된 상태로 도착합니다. 페이지는 지금 올바르게 보이지만 브랜드 색상이 처음 바뀌는 순간 골칫거리가 됩니다. 한 곳에서 변경할 수 없기 때문입니다.
페이지가 작고 어떤 색이 어떤 것인지 기억하는 지금, 주요 색상과 텍스트 스타일을 Elementor 전역 색상 및 전역 글꼴에 다시 할당하세요. 새 페이지에서는 몇 번의 클릭이면 되지만, 세 사람이 편집한 페이지에서는 오후 전체가 걸립니다.
9. 잔여물 정리 (1분)
인라인 스타일을 유지한 채로 변환했다면 페이지 상단에 원본 스타일시트를 담고 있는 CSS 블록이 있을 수 있습니다. 위젯이 자체 설정을 잘 담고 있다고 확인되면 보통 삭제할 수 있습니다. 삭제한 후 레이아웃을 확인하세요. 더 이상 필요하지 않은 래퍼에서 남은 빈 컨테이너도 제거하세요.
무언가 잘못 보이는데 이유를 모를 때
트리를 이리저리 클릭하며 찾으려고 하지 마세요. 변환기로 돌아가 구조 맵을 열고 문제가 있는 미리보기 위에 마우스를 올리세요. Elementor 트리에서 일치하는 행이 강조 표시되고, 그 반대도 마찬가지입니다. 이렇게 하면 ‘이 요소가 실제로 무엇이 되었는가?’에 대한 답을 한 번에 얻을 수 있습니다.
대부분의 경우 두 가지 답으로 설명됩니다. 빨간 HTML 위젯 행은 네이티브 대응 요소가 없어서 원시 마크업으로 보존되었다는 뜻입니다. 보통 사용자 정의 인라인 SVG나 특이한 임베드가 그렇습니다. 아무것도 강조 표시되지 않는다면 보고 있는 것이 애초에 DOM 요소가 아니라는 뜻입니다. 가상 요소, 생성된 인용 부호, 그라디언트 오버레이 같은 것들입니다. 어느 쪽도 Elementor를 뒤져서 고칠 수 없기 때문에 먼저 확인할 가치가 있는 것입니다.
그런 다음 템플릿으로 저장하세요
페이지나 섹션이 재사용될 예정이라면 지금, 깨끗한 상태에서 템플릿 라이브러리에 저장하세요. 미래의 자신이 고마워할 것입니다. 전역 처리 전에 저장된 섹션은 두 번 정리해야 하는 섹션이기도 합니다.