페이지 하나를 변환하면 오후 시간을 아낄 수 있습니다. 변환하고 정리한 섹션 라이브러리를 쌓아 두면, 이후 모든 것을 만드는 속도가 달라집니다.
페이지가 아니라 섹션을 저장하세요
페이지 전체는 재사용하기 어렵지만, 섹션은 거의 항상 재사용할 수 있습니다. 히어로, 기능 그리드, 가격 행, 추천사 블록을 변환하고 정리한 뒤에는 해당 컨테이너 하나를 설명이 잘 드러나는 이름으로 템플릿 라이브러리에 저장하세요. 프로젝트 이름보다는 형태를 설명하는 이름을 목표로 하세요. “기능 그리드, 3열, 아이콘 상단”이 “client-x-section-2”보다 낫습니다.
두 가지 내보내기 경로, 두 가지 용도
- Elementor 데이터 복사 — 이미 열려 있는 페이지에 섹션을 추가할 때 가장 빠릅니다.
- JSON 템플릿 다운로드 — 라이브러리를 구축할 때 더 좋습니다. 파일은 어떤 사이트에서든 가져올 수 있고, 버전 관리에 넣을 수 있으며, 팀과 공유할 수 있습니다.
라이브러리 작업에는 JSON 경로가 클릭 한 번을 더할 가치가 있습니다. 클립보드 상태가 아니라 휴대 가능한 파일을 얻게 됩니다.
저장하기 전에 블록을 사이트 독립적으로 만드세요
색상과 글꼴을 하드코딩한 블록은 다음 사이트에서 어색하게 보입니다. 라이브러리에 저장하기 전에 사이트 색상과 사이트 타이포그래피로 다시 변환하는 것을 고려하세요. 그러면 해당 블록은 대상 사이트가 정의한 팔레트와 글꼴을 그대로 따르게 되어, 같은 블록이 어디에서나 자연스럽게 보입니다.
구조를 정직하게 유지하세요
재사용 가능한 블록은 최상위 Container 하나와 그 안에 얕은 트리 구조여야 합니다. 저장하기 전에 남아 있는 빈 래퍼를 삭제하고, 카드 행은 각 카드가 불필요한 자체 컨테이너에 들어 있는 대신 위젯을 직접 담는 Grid 또는 flex Container인지 확인하세요. 깔끔한 트리는 6개월 뒤에 훨씬 다시 스타일링하기 쉽습니다.
진짜로 공유되는 부분에는 글로벌 위젯을 사용하세요
여러 페이지에서 반드시 동일하게 유지되어야 하는 요소(CTA 밴드, 보증 스트립 등)에는 템플릿보다 글로벌 위젯이 더 강력합니다. 한 번 편집하면 모든 인스턴스가 업데이트됩니다. 템플릿은 시작점으로, 글로벌 위젯은 절대 달라지면 안 되는 요소에 사용하세요.
분명히 짚어 둘 주의사항이 하나 있습니다. 글로벌 위젯은 Elementor Pro 기능입니다. 무료 버전에는 저장된 템플릿만 있으며, 이는 복사본입니다. 5개 페이지에 삽입하면 업데이트해야 할 독립적인 복사본 5개가 생깁니다. 무료 버전을 사용 중인데 정말로 달라지면 안 되는 요소가 있다면, 복제하는 대신 단일 표준 페이지를 유지하고 그 페이지로 연결하세요.
사이트 간에 이동하는 것과 이동하지 않는 것
JSON 템플릿은 휴대 가능하지만 자체 완결적이지는 않습니다. 다른 사이트에 블록을 처음 가져올 때 사람들을 놀라게 하는 세 가지가 있습니다.
- 이미지는 파일이 아니라 URL로 이동합니다. 블록은 주소로 이미지를 참조합니다. 원본 호스트에 접근할 수 없는 사이트나 해당 파일이 나중에 삭제된 사이트로 가져오면 이미지가 깨집니다. 계속 유지할 라이브러리라면 저장하기 전에 사진을 자신의 미디어나 의도적인 플레이스홀더로 교체하세요.
- 글꼴은 이미 존재해야 합니다. 템플릿은 글꼴 패밀리 이름을 저장합니다. 대상 사이트에 해당 패밀리가 설치되어 있지 않으면 텍스트는 조용히 대체됩니다. 사이트 타이포그래피 모드로 저장된 블록은 패밀리 자체를 담지 않으므로 이 문제를 완전히 피합니다.
- 글로벌 색상은 이름으로 참조됩니다. 글로벌 색상에 바인딩된 위젯은 대상 사이트에서 해당 글로벌 색상을 찾습니다. 없으면 동작은 Elementor 버전에 따라 달라지며, 원하는 대로 되는 경우는 드뭅니다. 라이브러리 블록을 명시적 색상으로 유지하거나, 작업하는 사이트 전반에서 글로벌 팔레트 이름을 표준화하세요. 두 번째 방법은 처음에 할 일이 더 많지만 이후에는 훨씬 좋습니다.
코드처럼 이름을 짓고 버전을 붙이세요
라이브러리는 그 안에서 항목을 찾을 수 없게 되는 순간 쓸모없어집니다. 두 가지 습관이 대부분을 해결합니다.
- 출처가 아니라 형태를 설명하세요. “히어로, 분할, 이미지 오른쪽”은 사용 여부를 알려 줍니다. “acme-homepage-v2″는 그렇지 않아서, 올바른 것을 찾으려고 템플릿 다섯 개를 열게 됩니다.
- JSON 내보내기 파일 이름에 날짜나 버전을 넣으세요. 블록을 개선하고 이전 버전을 다시 원하게 되는 때가 정확히 한 번은 옵니다. 그때 정말로 필요할 것입니다.
프로젝트와 함께 저장소에 JSON 파일을 보관하면 diff와 이력을 무료로 얻을 수 있습니다. 페이지 섹션을 버전 관리되는 산출물로 취급하는 것은 드문 일이지만, 무엇이 바뀌었는지 알아야 하는 첫 순간에 그 가치가 드러납니다.
신뢰하기 전에 블록을 테스트하세요
테스트는 저렴하고 위의 모든 것을 잡아냅니다. 블록을 만든 사이트가 아닌 스크래치 사이트, 이상적으로는 다른 테마와 비어 있는 글로벌 팔레트를 가진 사이트에 가져와 보세요. 깨진 이미지, 잘못된 글꼴, 누락된 글로벌 문제는 모두 즉시 나타나며, 그때 고치는 데는 1분이면 됩니다. 클라이언트 앞에서, 곧 인계할 페이지에서 발견하는 대신 말입니다.
가질 만한 라이브러리
이름이 잘 붙고 사이트 독립적인 섹션 10~15개면 마케팅 사이트에 필요한 대부분을 충당합니다. 히어로, 기능 그리드, 분할 기능, 단계, 추천사, 로고 스트립, 가격, FAQ, CTA 밴드, 푸터. 변환된 소스에서 한 번 구축해 두면 이후 대부분의 페이지는 건설이 아니라 조립이 됩니다.
처음부터 시작할 필요도 없습니다. 이 사이트의 템플릿 라이브러리에는 미리 보고, 변환하고, 적용할 수 있는 기성 블록이 있습니다. 모든 섹션을 처음부터 디자인하지 않고도 자신의 세트에서 빈자리를 채우는 합리적인 방법입니다.