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

Hướng dẫn Divi: Cách sử dụng Mô-đun thẻ màn hình đầy đủ 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 701.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 đồ 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 đó!

fullwidth-đồ-overview.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.

tạo khóa 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 dự án bất cứ điều gì bạn muốn. Trong ví dụ này, tôi chỉ đặt tên nó là “Cards”. Bạn cũng có thể nhập tên miền trang web của mình (thêm dấu * trước tên miền nếu bạn đang cho phép truy cập từ www.domain.com và domain.com) để đảm bảo khóa API của bạn được ủy quyền.

thêm khóa API vào dự án.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ài liệu hình ảnh

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. 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.

sử dụng 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. 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 đủ.

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

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.

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ả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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 để hiển thị 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.

Đối với ví dụ này, tôi sẽ thêm mô-đun bản đồ toàn chiều rộng để hiển thị 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 khóa API Google hợp lệ đã được nhập vào bảng Tùy chọn của chủ đề Divi. Mô-đun thẻ 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 đồ.

thêm bản đồ divi example.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 đề 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]

thêm chi tiết bản đồ chiều rộng đầy đủ divi.jpg

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.

kết quả bản đồ toàn chiều rộng divi.jpg

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

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

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.

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

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 rằng bạn đã thêm khóa API của mình trong 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ì.

tùy chọn thiết kế mô-đun full width map.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 đồ 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.

phần trước mô-đun thẻ full-width 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.

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

Tải xuống miễn phí WooCommerce, 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. [Đề xuất]

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ẻ

thẻ mô-đun tham số pin đầy đủ width.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.

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 đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
18 cổ phiếu
cổ phiếu10
tweet3
Enregistrer5