Các mô-đun bản đồ giúp bạn dễ dàng tích hợp Google Maps tùy chỉnh ở bất kỳ đâu trên trang của mình. Bạn thậm chí có thể thêm ghim không giới hạn vào bản đồ và đặt vị trí bắt đầu tùy chỉnh. Card Mods cũng có định dạng toàn chiều rộng, vì vậy hãy nhớ kiểm tra điều đó!

map divi apercu.png

Khóa API Google Maps

Khóa API là Yêu cầu để sử dụng mô-đun Bản đồ. Để lấy khóa API, hãy đăng nhập vào Bảng điều khiển Nhà phát triển của Google, sẽ hướng dẫn bạn qua quy trình và tự động kích hoạt API JavaScript của Google Maps và tất cả các dịch vụ liên quan. Điều đầu tiên bạn sẽ được yêu cầu là tạo một dự án mới.

đăng ký API Google.jpg

Tiếp theo, bạn sẽ được yêu cầu đặt tên cho dự án của mình. Bạn có thể đặt tên cho dự án bất cứ điều gì bạn muốn. Trong ví dụ này, tôi chỉ đơn giản gọi nó là “Bản đồ”. Bạn cũng có thể nhập tên miền của trang web của bạn (thêm dấu * phía trước nếu bạn cho phép truy cập từ www.domain.com và domain.com) để đảm bảo rằng khóa API của bạn được ủy quyền.

để đặt tên cho một dự án Google API.jpg

Sau khi bạn đã tạo một dự án được đặt tên, bạn sẽ thấy một khóa API mà bạn có thể sử dụng.

tạo một thông tin ứng dụng bản đồ Google.jpg

Sau khi có được khóa API, bạn phải sao chép / dán nó vào bảng tùy chọn chủ đề bằng cách đi tới: Divi >> Tùy chọn chủ đề >> Cài đặt chung >> Khóa API Google Maps

Cách thêm mô-đun bản đồ vào trang của bạn

Trước khi bạn có thể thêm mô-đun bản đồ vào trang của mình, trước tiên bạn phải chuyển sang Divi Builder. Một khi Chủ đề Divi được cài đặt trên trang web của bạn, bạn sẽ thấy một nút Sử dụng Divi Builder phía trên trình chỉnh sửa bài đăng bất cứ khi nào bạn tạo một trang mới. Nhấp vào nút này để kích hoạt Divi Builder và truy cập tất cả các mô-đun của Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo ở chế độ trực quan. Bạn cũng có thể nhấp vào nút Sử dụng Visual Builder khi bạn duyệt trang web của bạn ở phía trước nếu bạn được kết nối với bảng điều khiển WordPress của bạn.

divi builder

Khi bạn đã vào Visual Builder, bạn có thể nhấp vào nút dấu cộng màu xám để thêm mô-đun mới vào trang của mình. Mô-đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn đang bắt đầu một trang mới, hãy nhớ thêm một hàng vào trang của bạn trước.

Tìm mô-đun bản đồ trong danh sách các mô-đun và nhấp vào mô-đun đó để thêm vào trang của bạn. Danh sách các mô-đun có thể tìm kiếm được, có nghĩa là bạn cũng có thể nhập từ "bản đồ" và sau đó nhấp vào enter để tự động tìm kiếm và thêm mô-đun bản đồ! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón bởi danh sách tùy chọn mô-đun. Các tùy chọn này được chia thành ba nhóm chính: Nội dung , Conception et tiên tiến .

Trường hợp sử dụng mẫu: Thêm mô-đun bản đồ vào trang liên hệ

Mô-đun bản đồ là một cách tuyệt vời để giới thiệu vị trí doanh nghiệp của bạn trên trang liên hệ của bạn. Và khả năng thêm nhiều ghim vào bản đồ của bạn để làm nổi bật các vị trí khác nhau và thông tin doanh nghiệp là một tính năng hữu ích và hấp dẫn.

Đối với ví dụ này, tôi sẽ thêm một mô-đun bản đồ để hiển thị thông tin vị trí và doanh nghiệp bằng cách thêm một ghim tùy chỉnh vào bản đồ.

bản đồ trình bày google map company.jpg

Quan trọng : Đảm bảo rằng khóa API Google hợp lệ đã được nhập vào bảng điều khiển Tùy chọn của Chủ đề Divi. Mô-đun bản đồ sẽ không hoạt động nếu không có nó.

Sử dụng Visual Builder, thêm một phần tiêu chuẩn ở cuối trang liên hệ. Sau đó, chèn mô-đun Bản đồ vào phần mới của bạn. Trong tab Nội dung của cài đặt thẻ, hãy nhập địa chỉ công ty của bạn trong tùy chọn Địa chỉ trung tâm thẻ. Địa chỉ trung tâm bản đồ là điểm trung tâm của bản đồ.

thêm một tùy chọn map divi.jpg

Sau đó nhấn + Thêm một mục mới để tạo ghim đầu tiên của bạn. Cập nhật thông tin sau:

Tiêu đề: [nhập tiêu đề vị trí của bạn]
Nội dung: [nhập nội dung mã pin của bạn (địa chỉ và số điện thoại)]
Địa chỉ bản đồ: [nhập địa chỉ cho vị trí cụ thể này]

nhập địa chỉ cho một địa điểm

Lưu cài đặt

Đó là tất cả. Bây giờ bạn có một mô-đun bản đồ động ở cuối trang liên hệ với một chốt có thể nhấp được hiển thị thông tin công ty.

pin divi module card.jpg

Tùy chọn nội dung mô-đun bản đồ

Trong tab Nội dung, bạn sẽ tìm thấy tất cả các yếu tố nội dung của mô-đun, chẳng hạn như văn bản, hình ảnh và biểu tượng. Tất cả điều khiển cái gì xuất hiện trong mô-đun của bạn sẽ luôn được tìm thấy trong tab này.

module nội dung tùy chọn map.png

+ Thêm bài viết mới

Đây là nơi bạn thêm các chân (hoặc khe cắm) mới vào mô-đun bo mạch của mình. Nhấp vào "thêm mục mới" sẽ mở ra một danh sách hoàn toàn mới về cài đặt thiết kế (bao gồm nội dung, thiết kế, nâng cao) cho mã pin mới của bạn. Xem bên dưới để biết cài đặt pin riêng lẻ.

Sau khi bạn thêm ghim đầu tiên, bạn sẽ thấy một thanh màu xám xuất hiện với tiêu đề ghim của bạn dưới dạng thẻ. Thanh màu xám cũng có ba nút cho phép bạn chỉnh sửa, sao chép hoặc xóa đinh ghim.

Khóa API của Google

Mô-đun Maps sử dụng API Google Maps và yêu cầu khóa API Google hợp lệ để hoạt động. Trước khi sử dụng mô-đun Bản đồ, hãy đảm bảo bạn đã thêm khóa API của mình vào bảng Tùy chọn của Chủ đề Divi.

Địa chỉ của Trung tâm Bản đồ

Nhập địa chỉ cho điểm trung tâm của bản đồ và địa chỉ đó sẽ được mã hóa địa lý và hiển thị trên bản đồ bên dưới. Điều này hữu ích nếu bạn có nhiều ghim và bạn muốn bản đồ được phóng to ở một vị trí cụ thể và chính xác hơn. Bạn có thể chỉ cần nhập địa chỉ theo định dạng chuẩn, chẳng hạn như "1235 Sunny Road, Some City, State, 88343".

Nhãn quản trị viên

Điều này sẽ thay đổi nhãn mô-đun trong hàm tạo để dễ dàng nhận biết. Khi bạn sử dụng dạng xem WireFrame trong Visual Builder, các nhãn này xuất hiện trong khối mô-đun của giao diện Divi Builder.

Tùy chọn thiết kế mô-đun bản đồ

Trong tab Thiết kế, bạn sẽ tìm thấy tất cả các tùy chọn tạo kiểu mô-đun, chẳng hạn như phông chữ, màu sắc, định cỡ và khoảng cách. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun của mình. Mỗi mô-đun Divi có một danh sách dài các cài đặt thiết kế mà bạn có thể sử dụng để thay đổi bất cứ điều gì bạn muốn.

sơ đồ mô-đun ongle design.png

Chuột phóng to

Tại đây bạn có thể chọn mức thu phóng sẽ được điều khiển bằng con lăn chuột hay không. Thông thường, tốt nhất là tắt tùy chọn này để khách truy cập không bị làm phiền khi họ cuộn xuống trang và mắc kẹt con lăn chuột trong khung nội tuyến của bản đồ. Điều này đặc biệt đúng đối với các mô-đun thẻ có chiều rộng đầy đủ.

Zoom có ​​thể kéo

Bạn có thể chọn ở đây nếu thẻ có thể được di chuyển trên thiết bị di động.

Sử dụng bộ lọc thang độ xám

Bật tùy chọn này sẽ biến bản đồ của bạn thành hình ảnh thang độ xám.

Tùy chọn bản đồ nâng cao

Trên tab nâng cao, bạn sẽ tìm thấy các tùy chọn mà các nhà thiết kế web có kinh nghiệm hơn có thể thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Tại đây, bạn có thể áp dụng CSS tùy chỉnh cho bất kỳ phần tử nào trong số nhiều phần tử của mô-đun. Bạn cũng có thể áp dụng các lớp CSS và ID tùy chỉnh cho mô-đun, có thể được sử dụng để tùy chỉnh mô-đun trong tệp style.css của chủ đề con của bạn.

mô-đun trước tab divi.png

ID CSS

Nhập một ID CSS tùy chọn để sử dụng cho mô-đun này. ID có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc để liên kết đến các phần cụ thể trên trang của bạn.

Lớp CSS

Nhập các lớp CSS tùy chọn để sử dụng cho mô-đun này. Một lớp CSS có thể được sử dụng để tạo kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bằng dấu cách. Các lớp này có thể được sử dụng trong chủ đề con Divi của bạn hoặc trong biểu định kiểu CSS tùy chỉnh mà bạn thêm vào trang của mình hoặc vào trang web của bạn bằng cách sử dụng các tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.

CSS tùy chỉnh

CSS tùy chỉnh cũng có thể được áp dụng cho mô-đun và bất kỳ nội dung nào của mô-đun. Trong phần CSS tùy chỉnh, bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm các biểu định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục nhập CSS trong các cài đặt này đã được bao bọc trong các thẻ kiểu. Vì vậy, chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy.

tầm nhìn

Tùy chọn này cho phép bạn kiểm soát các thiết bị mà mô-đun của bạn xuất hiện trên đó. Bạn có thể chọn tắt từng mô-đun của mình trên máy tính bảng, điện thoại thông minh hoặc máy tính để bàn. Điều này hữu ích nếu bạn muốn sử dụng các mod khác nhau trên các thiết bị khác nhau hoặc nếu bạn muốn đơn giản hóa thiết kế di động bằng cách loại bỏ một số yếu tố nhất định khỏi trang.

Tùy chọn ghim thẻ cá nhân

tùy chọn đóng divi.png

Tiêu đề

Khi tạo một ghim mới, bạn có thể gán một tiêu đề. Tiêu đề này sẽ xuất hiện trong hộp khi di chuột qua ghim trên bản đồ.

Nội dung

Khi tạo một ghim mới, bạn có thể gán một khối văn bản nội dung. Văn bản này sẽ xuất hiện trong hộp khi di chuột qua ghim trên bản đồ.

Địa chỉ bản đồ

Đây là vị trí chính xác trên bản đồ nơi ghim mới của bạn sẽ xuất hiện. Bạn có thể nhập địa chỉ ở định dạng chuẩn.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Hướng dẫn Divi khác