Các mô-đun bản đồ toàn màn hình trên Divi tạo điều kiện tích hợp Google Maps được cá nhân hóa ở mọi nơi trên trang của bạn. 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. Bản đồ mô-đun cũng ở định dạng Chiều rộng Bình thường, vì vậy hãy nhớ kiểm tra điều đó!
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.
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.
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.
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 Divi Full Screen Card
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. 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 Bật Trình tạo hình ảnh 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.
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. Chỉ có thể thêm các mô-đun toàn băng thông mới vào bên trong các phần băng thông đầy đủ.
Nếu bạn đang bắt đầu một trang mới, trước tiên đừng quên thêm phần fullwidth vào trang của bạn.
Tìm mô-đun bản đồ chiều rộng đầy đủ 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 đồ toàn màn hình" và sau đó nhấp vào enter để tự động tìm và thêm mô-đun bản đồ chiều rộng đầy đủ! 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 .
Ví dụ về trường hợp sử dụng: Thêm mô-đun bản đồ toàn chiều rộng vào trang liên hệ
Mô-đun bản đồ toàn chiều rộng 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ô-đun bản đồ có chiều rộng đầy đủ để hiển thị thông tin vị trí và doanh nghiệp bằng cách thêm ghim tùy chỉnh vào bản đồ.
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 phần Fullwidth ở cuối trang liên hệ. Sau đó, chèn mô-đun Bản đồ băng thông đầy đủ vào phần mới của bạn. Trong tab Nội dung của cài đặt bản đồ chiều rộng đầy đủ, hãy nhập địa chỉ công ty của bạn dưới tùy chọn Địa chỉ trung tâm bản đồ. Địa chỉ trung tâm bản đồ là điểm trung tâm của bản đồ.
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 đề cho vị trí của bạn] Nội dung: [nhập nội dung ghim 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]
Lưu cài đặt
Đó là tất cả. Giờ đây, bạn có một mô-đun bản đồ động với chiều rộng đầy đủ ở 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.
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 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.
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ị
Đ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ế 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 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 kỳ điều gì.
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 đồ toàn chiều rộng 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.
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 nội dung bản đồ toàn chiều rộng riêng lẻ
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
- trang web 5 để sử dụng hàng Divi chủ đề
- Cách thêm văn bản vào sản phẩm Divi WooCommerce
- Cách thay đổi màu menu giữa các trang Divi
- Cách cá nhân hóa lưới của blog với Divi
- Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
- Cách tạo thanh trượt Divi toàn màn hình
- Cách thay đổi màu của menu giữa các trang Divi
- Các tính năng có thể bạn chưa biết về Divi
- Cách sử dụng Divi Builder trên WordPress
- Cách sử dụng mô-đun cuộn video Divi
- Cách sử dụng mô-đun Divi Builder Flip
- Cách thêm mô-đun chứng thực trên Divi Builder
- Cách sử dụng mô-đun văn bản Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng Divi
- Cách sử dụng mô-đun Truyền thông xã hội Divi
- Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
- Cách sử dụng mô-đun bên Divi
- Cách sử dụng mô-đun bảng giá Divi
- Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
- Cách thêm mô-đun video của Divi
- Cách sử dụng mô-đun điều hướng bài viết
- Cách sử dụng mô-đun tìm kiếm Divi
- Cách sử dụng mô-đun ví Divi
- Cách sử dụng mô-đun người trên Divi Builder
- Cách sử dụng mô-đun ví với bộ lọc Divi
- Cách sử dụng mô-đun trượt toàn bộ chiều rộng
- Cách sử dụng Mô-đun hình ảnh Divi Builder
- Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
- Cách sử dụng mô-đun thư viện hình ảnh
- Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
- Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
- Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
- Cách sử dụng Module Divi Counter
- Cách sử dụng thanh trượt bài viết trên Divi Builder
- Cách sử dụng mô-đun Optin Email Optin