이제 Page Builder Sandwich를 사용하여 페이지 디자인에 지도를 배치할 수 있습니다!
지도에 대해 이렇게 기대한다는 게 조금 신기하게 느껴질 수도 있습니다. 보통은 Google 지도 URL을 가져와 임베드하거나, 온라인에서 지도 플러그인을 찾아 숏코드를 넣거나, 기존에 쓰던 다른 페이지 빌더에 이미 기능이 있어 언제든 추가할 수 있으니까요. 하지만 저희가 기대에 찬 이유는 지도를 추가하는 방식을 완전히 새로운 차원으로 끌어올렸기 때문입니다.
미리보기는 다음과 같습니다:
지도를 추가하는 지루하고 오래된 방식
일반적인 페이지 빌더에서 지도를 추가하는 방법은 다음과 같습니다:
- 새 지도 요소를 드래그합니다.
- 필드에 위도와 경도를 입력합니다.
- 지도 높이, 지도 너비, 도로 스타일 확인란 선택 등 필드의 다른 값을 입력합니다.
- 미리보기를 눌러 어떻게 보이는지 확인하고, 더 멋지게 보이도록 변경할 부분이 있는지 결정합니다.
- 페이지 빌더로 돌아가 값을 변경한 다음 위의 4단계를 반복합니다.
Page Builder Sandwich 방식으로 지도 추가하기
웹사이트의 지도는 대화형입니다. 둘러보고 지도를 확대 및 축소할 수 있죠. 그래서 우리는 어림짐작으로 작업하는 번거로움을 모두 없애고, 페이지를 제작하는 동안 사용자가 지도와 직접 상호작용할 수 있도록 하면 어떨까 생각했습니다.
Page Builder Sandwich로 지도를 추가하는 방법은 다음과 같습니다:
- 지도 요소를 추가합니다.
- 지도의 중심을 맞추고자 하는 위도와 경도 또는 주소를 입력합니다.
- 원하는 모습을 얻을 때까지 지도를 이동하고 확대 또는 축소합니다.
- 스타일에 맞게 지도에 멋진 색상을 추가합니다.
- 저장을 누릅니다.
저희 방식은 훨씬 더 재미있고 직관적입니다. 일반적인 Google 지도를 사용하는 것과 똑같은 방식으로 지도와 상호작용할 수 있습니다.
색상 지도를 만들거나 SnazzyMaps로 스타일 지정하기
저희가 추가한 멋진 기능 중 하나는 지도에 색조와 색상을 입히는 기능이며, 사용하기도 아주 쉽습니다. (이 기능은 프리미엄 버전에만 제공됩니다). 지도에 색을 입히고 싶다면 색상 선택기를 클릭하고 색상을 선택하기만 하면 지도가 즉시 변경됩니다.
다음은 분홍색 색조를 입힌 예시입니다:
또한 Page Builder Sandwich는 SnazzyMaps를 통한 더욱 정교한 색상 구성표를 지원합니다. 사용자가 기여한 방대한 색상 구성표 목록이 있으며, 색상을 더 세밀하게 제어하고 싶다면 직접 만들 수도 있습니다.
마음에 드는 색상 구성표를 찾은 후 코드를 복사하여 Page Builder Sandwich에 붙여넣기만 하면 됩니다. 색상 구성표가 지도에 즉시 적용됩니다.
다음은 SnazzyMaps의 papuportal dark:
원하는 곳 어디에나 지도를 배치하세요
더욱 극적인 효과를 위해 전체 너비 행에 추가하는 등 지도 기능으로 할 수 있는 멋진 작업이 훨씬 더 많습니다. 원하신다면 캐러셀 내부나 탭 내부(예정된 기능)에도 추가할 수 있습니다.
아직 Page Builder Sandwich를 사용하고 있지 않으시다면, 위의 “라이브 데모(Live Demo)” 링크.