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

Hướng dẫn Divi: Cách sử dụng mô-đun bản đồ toàn màn hình Divi

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 thẻ Divi đầy đủ tính năng giúp bạn 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 bản đồ cũng ở định dạng Chiều rộng thông thường, do đó hãy chắc chắn kiểm tra điều đó!

fullwidth-đồ-overview.png

Khóa API Google Maps

Khóa API là Yêu cầu để sử dụng mô-đun Maps. Để 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.

tạo khóa API Google

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 mình (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 cho phép.

thêm một khóa API vào một project.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ài liệu hình ảnh

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 thẻ màn hình đầy đủ Divi

Trước khi bạn có thể thêm mô-đun bản đồ toàn màn hình 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 Bật Trình tạo hình ảnh 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.

sử dụng 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 fullwidth mới chỉ có thể được thêm vào bên trong phần fullwidth.

toàn bộ phần divi builder.png

Nếu bạn đang bắt đầu một trang mới, đừng quên thêm phần fullwidth vào trang của bạn trước tiên.

toàn màn hình screen.png

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í]

Xác định vị trí mô-đun bản đồ độ rộng đầy đủ 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 module có sẵn, có nghĩa là bạn có thể gõ từ "toàn màn hình bản đồ" và bấm Enter để tự động tìm và thêm các gói bản đồ đầy đủ chiều rộng! 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 đồ độ rộng đầy đủ vào trang liên hệ

Mô-đun bản đồ toàn độ rộng là 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 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 đồ có chiều rộng đầy đủ để 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 đồ.

thêm một bản đồ full-width divi builder.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 Fullwidth ở dưới cùng của trang liên hệ. Sau đó chèn module Fullwidth Map vào phần mới của bạn. Trong tab Nội dung của cài đặt bản đồ toàn chiều rộng, nhập địa chỉ của công ty bạn trong tùy chọn Đị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 bản đồ divi example.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:

Tiêu đề: [nhập tiêu đề của trang web của bạn] Nội dung: [nhập nội dung của pin của bạn (địa chỉ và số điện thoại)] Thẻ địa chỉ: [nhập địa chỉ cho rằng vị trí cụ thể]

thêm chi tiết full width map divi.jpg

Lưu cài đặt

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]

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

kết quả bản đồ full-width divi.jpg

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

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.

nội dung tùy chọn divi builder full map map.png

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ị

Đ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ế bản đồ toàn chiều rộng

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 bất cứ điều gì.

tùy chọn thiết kế mô-đun full width map.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 đồ toàn chiều rộng 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.

phần trước mô-đun thẻ full-width 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 nội dung bản đồ toàn chiều rộng riêng lẻ

thẻ mô-đun tham số pin đầy đủ width.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
18 cổ phiếu
cổ phiếu10
tweet3
Enregistrer5