Bạn có muốn tạo một bản đồ có nhiều vị trí trong WordPress với Elementor và Addons cần thiết?
Giả sử bạn có một doanh nghiệp đã có nhiều chi nhánh trong thành phố và bạn muốn tạo một bản đồ kỹ thuật số hiển thị vị trí của các chi nhánh đó. Nếu bạn có một trang web dựa trên WordPress, bạn có thể dễ dàng tạo một bản đồ như vậy. Có một plugin tuyệt vời mà bạn có thể sử dụng để tạo bản đồ nhiều vị trí: Addons cần thiết.
Addons cần thiết là một tiện ích bổ sung Elementor trả phí nên bạn cũng cần phải cài đặt Elementor trước khi bạn có thể sử dụng nó. Bạn có thể sử dụng phiên bản Elementor miễn phí để tạo thẻ với mô-đun Essential Addons.
La phiên bản miễn phí của Essential Addons cũng có sẵn. Tuy nhiên, tiện ích tạo bản đồ chỉ khả dụng trên phiên bản trả phí. Bạn có thể tải xuống phiên bản trả phí của Essential Addons trên Trang web chính thức.
Chúng tôi sẽ sử dụng nền tảng Google Maps để tạo bản đồ trên WordPress của bạn bằng các Addons cần thiết. Trước khi bạn bắt đầu, hãy đảm bảo cài đặt Elementor và Essential Addons.
Tích hợp Google Maps với mô-đun Essential Addons
Trước khi bạn có thể thêm bản đồ Google Maps bằng Essential Addons, trước tiên bạn phải tích hợp chúng. Bạn cần có khóa API để tích hợp Google Maps với các mô-đun Essential Addons.
Đầu tiên, hãy truy cập vào Bảng điều khiển API của Google và đăng nhập bằng tài khoản Google của bạn. Tạo một dự án mới bằng cách nhấp vào menu thả xuống ở trên cùng và nhấp vào DỰ ÁN MỚI.
Đặt tên cho dự án mới của bạn và nhấp vào nút CREATE .
Khi dự án mới của bạn đã được tạo, hãy chọn nó từ trình đơn thả xuống và nhấp vào Thư viện trên bảng điều khiển bên trái.
Google chia Google Maps Platform API thành 17 loại. Bạn có thể nhìn thấy chúng bằng cách nhấp vào liên kết HIỂN THỊ TẤT CẢ trong phần Cartes. Bạn cần bật API tùy thuộc vào những gì bạn muốn thực hiện.
Khám phá thêm: Cách tạo Mẫu sản phẩm đơn tùy chỉnh trong WooC Commerce với Elementor
Trong trường hợp của chúng tôi, bạn cần kích hoạt các API sau để thêm bản đồ từ Google Maps bằng các Addons cần thiết.
- API chỉ đường
- API mã hóa địa lý
- API JavaScript của Maps
- API địa điểm
Để kích hoạt API, hãy chọn API bạn muốn kích hoạt (bằng cách nhấp vào API đó) và nhấp vào nút KÍCH HOẠT.
Khi bạn đã hoàn tất việc bật các API được yêu cầu, hãy quay lại trang tổng quan chính của Google API Console và nhấp vào định danh trên bảng điều khiển bên trái. Nhấn nút Tạo thông tin đăng nhập và chọn Khóa API. Sao chép khóa API trên cửa sổ bật lên xuất hiện.
Đăng nhập vào bảng điều khiển WordPress của bạn và nhấp vào Addons cần thiết trên bảng điều khiển bên trái. bấm vào tab Các yếu tố và cuộn xuống trong phần Bản đồ Google nâng cao. Nhấp vào Cài đặt và dán khóa API bạn vừa sao chép.
Nhấn nút LƯU CÁC THIẾT LẬP để áp dụng thay đổi mới.
Bắt đầu tạo bản đồ
Khi Google Maps và các Tiện ích bổ sung cần thiết được tích hợp, bạn có thể bắt đầu tạo bản đồ. Để thực hiện việc này, hãy tạo một trang mới (Trang -> Thêm ) hoặc một mục mới (Mục -> Thêm) và chỉnh sửa nó bằng Elementor.
Trước khi tạo trang, hãy đặt bố cục bằng cách nhấp vào biểu tượng bánh răng ở góc dưới bên trái để mở bảng Cài đặt. Đặt bố cục từ trình đơn thả xuống.
Tạo một phần mới bằng cách nhấp vào nút dấu cộng trong hộp chỉnh sửa. Để có diện tích rộng hơn cho bản đồ, bạn có thể chọn cấu trúc cột đơn. Kéo tiện ích EA Google Maps từ bảng điều khiển bên trái đến khu vực chỉnh sửa.
Chuyển đến bảng điều khiển bên trái và đặt loại thẻ thành nhiều điểm đánh dấu.
Mở phần Cài đặt đánh dấu bản đồ và nhấp vào điểm đánh dấu bản đồ hiện có để chỉnh sửa nó. Dán vĩ độ và kinh độ của vị trí đầu tiên bạn muốn thêm vào bản đồ. Cũng đặt tiêu đề cũng như mô tả.
Để lấy vĩ độ và kinh độ của một vị trí, hãy mở Google Maps và tìm kiếm vị trí (địa điểm) có vĩ độ và kinh độ bạn muốn lấy. Sau khi tìm thấy, hãy nhấp chuột phải và nhấp chuột trái vào số xuất hiện trên menu ngữ cảnh.
Do đó, hành động này cho phép bạn sao chép vĩ độ (giá trị đầu tiên) và kinh độ (giá trị thứ hai).
Khi hoàn thành việc thêm vĩ độ và kinh độ của vị trí đầu tiên, hãy nhấp vào nút THÊM PHẦN TỬ để thêm một vị trí khác vào bản đồ của bạn.
Mở lại Google Maps và tìm vị trí mới mà bạn muốn thêm vào bản đồ và sao chép kinh độ cũng như kinh độ và dán chúng vào các trường tương ứng như trên. Lặp lại các bước trên để thêm nhiều vị trí hơn vào bản đồ.
Đọc cũng: Cách sử dụng Widget bài viết của Elementor
Khi hoàn tất việc thêm địa điểm, hãy mở khối Điều khiển bản đồ để bật/tắt các lệnh bạn muốn cung cấp trên thẻ của mình. Bạn cũng có thể đặt mức thu phóng tại đây.
Bạn cũng có thể mở khối chủ đề bản đồ để chọn chủ đề Google Maps mà bạn muốn sử dụng.
Cho đến nay, bạn đã tạo thành công một bản đồ với nhiều vị trí. Bạn có thể mở tab Phong cách để xác định chiều cao cũng như chiều rộng của bản đồ.
Nếu bạn muốn có bản đồ có chiều rộng đầy đủ, hãy đặt phần chứa bản đồ thành toàn chiều rộng. Để làm điều này, bấm vào tay cầm của phần.
Trong tab và khối Giao diện đặt Chiều rộng nội dung thành chiều rộng đầy đủr và Khoảng cách cột trên Không sai lệch
Nhấp vào nút ĐƯỢC PHÁT HÀNHER ở cuối bảng điều khiển bên trái để xuất bản trang của bạn.
Nhúng bản đồ vào một trang hoặc bài đăng
Nếu vì lý do nào đó bạn muốn nhúng bản đồ của mình vào một trang/bài đăng (trang/bài đăng được tạo bằng trình chỉnh sửa mặc định của WordPress — Gutenberg), bạn có thể sử dụng Plugin WordPress Elementor Blocks cho Gutenberg. Plugin này sẽ chuyển đổi mẫu Elementor thành khối Gutenberg.
Để lưu bản đồ bạn vừa tạo dưới dạng mẫu Elementor, hãy nhấp vào biểu tượng mũi tên bên cạnh nút XUẤT BẢN / CẬP NHẬT và chọn Lưu dưới dạng Mẫu.
Đặt tên cho mô hình của bạn và nhấp vào nút NĂNG LƯỢNG.
Tiếp theo, tạo một trang hoặc bài đăng mới (đảm bảo bạn đã cài đặt Plugin phần tử khối cho Gutenberg). Thêm một khối mới và chọn thư viện phần tử và chọn mẫu bạn vừa tạo.
Remarque: Nếu bạn thấy thông báo "Chỉ dành cho mục đích phát triển" khi thêm thẻ, hãy đảm bảo bật thanh toán Google Cloud của bạn. Chính sách mới của Google yêu cầu các nhà phát triển phải kích hoạt tài khoản thanh toán (bạn vẫn có thể sử dụng miễn phí API Google Maps).
Tải xuống Elementor Pro ngay bây giờ !!!
Kết luận
Vì thế ! Vậy là xong bài viết hướng dẫn bạn cách tạo bản đồ với nhiều vị trí bằng Elementor. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho họ biết trong ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
