Bỏ qua đến nội dung chính

Hướng dẫn Divi: Cách sử dụng mô-đun Bản đồ

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Các mô-đun bản đồ giúp dễ dàng tích hợp Google Maps tùy chỉnh ở mọi nơi trên trang của bạn. Bạn thậm chí có thể thêm các chân không giới hạn vào bản đồ và đặt vị trí bắt đầu tùy chỉnh. Các mô-đun thẻ cũng có định dạng toàn chiều rộng, vì vậy hãy chắc chắn 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 Thẻ. Để có được 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 hỏi là tạo một dự án mới.

đăng ký API Google.jpg

Sau đó, bạn sẽ được yêu cầu đặt tên dự án của bạn. Bạn có thể đặt tên dự án như bạn muốn. Trong ví dụ này, tôi chỉ đơn giản gọi nó là "Thẻ". Bạn cũng có thể nhập tên miền của trang web của bạn (thêm * ở 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 cấp phép.

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

Khi bạn đã tạo một dự án có tên, một khóa API mà bạn có thể sử dụng được hiển thị.

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

Sau khi lấy 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. Sau 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 nhà xuất bản mỗi khi bạn tạo trang mới. Nhấn nút này để kích hoạt Divi Builder và truy cập tất cả các module Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo trong 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 mình ở nền trước nếu bạn được kết nối với trang tổng quan WordPress của mình.

divi builder

Khi bạn đã nhập 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 bạn. Các mô đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn bắt đầu một trang mới, trước tiên đừng quên thêm một dòng vào trang của bạn.

Tìm mô-đun bản đồ trong danh sách các mô-đun và nhấp vào nó để thêm nó 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ấn enter để tìm kiếm và tự động thêm mô-đun bản đồ! Khi module được thêm vào, bạn sẽ được chào đón bởi danh sách tùy chọn module. 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 .

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

Mô-đun thẻ là cách tuyệt vời để trình bày 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 công ty là một tính năng hữu ích và hấp dẫn.

Trong ví dụ này, tôi sẽ thêm một mô-đun bản đồ để trình bày thông tin vị trí và công ty bằng cách thêm một ghim tùy chỉnh vào bản đồ.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

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

Quan trọng Đảm bảo rằng bạn đã nhập khóa API Google hợp lệ trong bảng Tùy chọn của chủ đề Divi. Mô-đun thẻ sẽ không hoạt động nếu không có.

Sử dụng Visual Builder, thêm một phần tiêu chuẩn ở dưới cùng của trang liên hệ. Sau đó chèn mô-đun Thẻ vào phần mới của bạn. Trong tab Thẻ Cài đặt Nội dung, nhập địa chỉ của công ty bạn dưới Địa chỉ của Trung tâm Thẻ. Địa chỉ của 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ục mới để tạo ghim đầu tiên của bạn. Cập nhật các mục sau:

Titre: [entrez le titre de votre emplacement] Contenu: [entrez le contenu de votre épinglette (adresse et numéro de téléphone)] Adresse de la carte: [entrez l’adresse pour ce lieu précis]

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 mã pin nhấp chuột 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 phần 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ả cá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.

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

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 ghim mới (hoặc khe) vào mô-đun thẻ của bạn. Nhấp vào "thêm mục mới" sẽ mở ra một danh sách các thông số thiết kế hoàn toàn mới (bao gồm nội dung, thiết kế, nâng cao) cho pin mới của bạn. Xem bên dưới để biết cài đặt ghim riêng lẻ.

Sau khi thêm mã pin đầu tiên, bạn sẽ thấy thanh màu xám có tiêu đề ghim của bạn làm nhãn. 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 lỗi.

Khóa API Google

Mô-đun Maps sử dụng API Google Maps và yêu cầu một khóa API Google hợp lệ để hoạt động. Trước khi bạn 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 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 rất hữu ích nếu bạn có nhiều chân và muốn thẻ được mở rộng đến một vị trí cụ thể và cụ thể hơn. Bạn có thể chỉ cần nhập một đị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ễ nhận dạng. Khi bạn sử dụng khung nhìn 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 kiểu của mô-đun, chẳng hạn như phông chữ, màu sắc, kích thước và khoảng trắng. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun. Mỗi mô-đun Divi có một danh sách dài các thông số thiết kế mà bạn có thể sử dụng để thay đổi những gì bạn muốn.

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

Chuột phóng to

Ở đây bạn có thể chọn mức thu phóng sẽ được điều khiển bằng bánh xe chuột hay không. Thông thường, tốt hơn là tắt tùy chọn này để khách truy cập không bị quấy rầy khi họ cuộn trên trang và chặn con lăn chuột trong khung nội tuyến của thẻ. Điều này đặc biệt đúng đối với các mô-đun thẻ có độ 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

Trong 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. Ở đây bạn có thể áp dụng CSS tùy chỉnh cho một trong nhiều thành phần của mô-đun. Bạn cũng có thể áp dụng các lớp tùy chỉnh và ID CSS 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ã định danh CSS tùy chọn để sử dụng cho mô-đun này. Có thể sử dụng ID để tạo kiểu CSS tùy chỉnh hoặc tạo 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 một 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 bảng định kiểu CSS tùy chỉnh mà bạn thêm vào trang hoặc trang web của mình bằng cách sử dụng các tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Khuyến nghị]

CSS tùy chỉnh

CSS tùy chỉnh cũng có thể được áp dụng cho mô đun và một trong các thành phần bên trong của mô-đun. Trong phần Custom CSS, bạn sẽ tìm thấy một trường văn bản, trong đó bạn có thể thêm các bảng định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục CSS trong các tham số này đã được gói 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. Bạn có thể chọn tắt 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 rất hữu ích nếu bạn muốn sử dụng các mô-đun 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ỏ các yếu tố nhất định của trang.

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

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

Tiêu đề

Khi tạo mã pin mới, bạn có thể gán tiêu đề. Tiêu đề này sẽ xuất hiện trong hộp bằng cách 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 bằng cách 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ỉ theo định dạng chuẩn.

Hướng dẫn Divi khác

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
14 cổ phiếu
cổ phiếu8
tweet1
Enregistrer5