워드프레스 엘리멘터 구글지도 위젯 사용하기

2021. 5. 1. 00:01 | 댓글 3

인기 워드프레스 페이지 빌더인 엘리멘터(Elementor)에서는 무료 버전에서도 구글 맵을 쉽게 넣을 수 있는 구글지도 위젯을 제공합니다. Elementor 페이지 빌더의 구글지도 위젯을 사용하면 데스크탑(PC), 태블릿, 모바일 기기에 맞게 크기를 조정할 수 있습니다.

워드프레스 엘리멘터 구글지도 위젯 사용하기

엘리멘터에는 구글지도(Google Maps)를 삽입할 수 있는 구글지도 위젯을 제공합니다.

워드프레스 엘리멘터 구글지도 위젯 사용하기

위젯 검색 필드에 'google'을 입력하면 '구글지도' 위젯이 검색됩니다. 구글지도 위젯을 원하는 곳으로 끌어다 놓은 후에 주소를 입력하면 구글맵이 추가됩니다.

구글지도 위젯을 추가하면 '영국 런던 아이' 지역이 구글맵에 표시됩니다. 

주소를 입력하고 줌(확대/축소), 높이를 설정할 수 있습니다.

하단의 반응형 모드를 클릭하여 모바일, 태블릿, PC에서 기기 해상도에 맞게 높이 등을 지정할 수 있습니다.

대략적인 과정을 다음 영상을 통해 확인해볼 수 있습니다.

참고로 Jupiter 테마를 사용하는 경우 자체적으로 제공하는 Advanced Maps (고급지도) 위젯을 사용할 수 있습니다.

워드프레스 Elementor Page Builder 구글지도 위젯 사용하기

마치며

이상으로 워드프레스 엘리멘터 페이지 빌더에서 제공하는 구글지도 위젯에 대해 간단히 살펴보았습니다. 구글지도 위젯을 사용하는 경우 별도의 Google Maps API 키를 입력하지 않아도 작동하는 것 같습니다. 하지만 일정 페이지 뷰 이상인 경우 Google Maps API 키 입력을 요구할 수도 있을 것입니다. 쥬피터 테마의 Advanced Maps 위젯을 사용하는 경우에는 구글맵 API 키를 입력해야 합니다.

주피터 테마의 고급지도 위젯을 사용하기 위해서는 Google API 키를 엘리멘터 > 설정 > Jupiter X 탭의 Google API Key 섹션에 입력해야 한다.

참고

avada.tistory.com/2197

 

엘리멘터 페이지 빌더의 탭 (Tabs) 기능

아래 영상과 같이 탭 형식으로 콘텐츠를 표시하고 싶은 경우 페이지 빌더에 포함된 탭 기능을 사용할 수 있습니다. 아바다(Avada)나 엔폴드(Enfold) 등 인기 테마에는 자체 페이지 빌더에서 탭(Tabs)

avada.tistory.com

avada.tistory.com/2172

 

워드프레스 아바다 테마 탭 기능 (Tabs)

대부분의 페이지 빌더에서는 탭 기능을 제공합니다. 무료 페이지 빌더인 엘리멘터에서도 탭 기능이 제공됩니다. 이 글에서는 아바다 테마에 탑재된 Avada Builder에서 제공하는 탭 (Tabs) 기능과 Eleme

avada.tistory.com

avada.tistory.com/2211

 

Divi 테마용 무료 레이아웃 팩 Apothecary Layout Pack

워드프레스는 정말 다양한 테마가 있어서 어떤 테마를 선택해야 할지 고민이 되는 분들이 많을 것 같습니다. 여러 개의 사이트에 설치할 테마를 원하거나 고객사를 위해 사이트 제작 업무를 하

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    Q쩡이Q

    언제나 좋은 정보 항상 감사합니다

  2. thumbnail
    블루밍 이탈리아

    안녕하세요.
    댓글 다신것 보고 들어왔습니다.
    구독합니다.

  3. thumbnail
    空空(공공)

    요건 좀 알아 놓아야겠습니다^^