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 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 của Google Maps

Khóa API là Yêu cầu để sử dụng mô-đun Bản đồ. Để 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 trong suốt quá 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

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 khóa API vào dự án.jpg

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

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 của 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 Trình tạo Divi. 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 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 Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động máy phát ở 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 đã nhập Visual Builder, bạn có thể nhấp vào nút cộng màu xám để thêm mô-đun mới vào trang của mình. Các mô-đun toàn băng thông mới chỉ có thể được thêm vào bên trong các phần toàn băng thông.

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

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

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

Xác định mô-đun bản đồ toàn chiều rộng 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 đồ toàn màn hình" và sau đó nhấp vào để tìm kiếm và tự động thêm mô-đun bản đồ toàn chiều rộng! Sau khi mô-đun được thêm vào, bạn sẽ được chào đón bởi danh sách các tùy chọn của mô-đun. Các tùy chọn này được tách 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 để hiển thị 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í và thông tin công ty khác nhau 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 đồ toàn chiều rộng để trình bày vị trí và thông tin của công ty bằng cách thêm 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 Google API hợp lệ đã được nhập vào bảng Tùy chọn chủ đề Divi. Các mô-đun thẻ sẽ không hoạt động mà không có nó.

Sử dụng Visual Builder, thêm phần Toàn băng thông ở cuối trang liên hệ. Sau đó chèn mô-đun Bản đồ Toàn bộ 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 dưới tùy chọn Địa chỉ của trung tâm thẻ. Đị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 pin đầu tiên của bạn. Cập nhật các mục sau:

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

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

Lưu cài đặt

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]

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

kết quả bản đồ toàn chiều rộng 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 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 Google API

Mô-đun Bản đồ sử dụng API Google Maps và yêu cầu khóa Google API 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 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 rất hữu ích nếu bạn có nhiều ghim và muốn bản đồ được phóng to đế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, Thành phố nào đó, Bang, 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 biết. Khi bạn sử dụng chế độ xem WireFrame trong Visual Builder, các nhãn này sẽ 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 cách. Đâ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 tham 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

Tại đây bạn có thể chọn mức độ phóng to sẽ được điều khiển bởi 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ị làm phiền khi họ cuộn trên trang và chặn bánh xe chuột trong iframe của thẻ. Đ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

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. Tại đây bạn có thể áp dụng CSS tùy chỉnh cho một trong nhiều yếu tố 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 bạn.

phần trước mô-đun thẻ full-width divi.png

ID CSS

Nhập một định danh 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 để 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 kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bởi một khoảng trắng. 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 hoặc trang web của mình bằng cách sử dụng 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 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]

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 yếu tố bên trong của mô-đun. Trong phần Tùy chỉnh CSS bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm tùy chỉnh CSS trực tiếp cho từng hạng mục. Các mục CSS trong các tham số này đã được 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 điều khiển 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 riêng lẻ. Này rất hữu ích nếu bạn muốn sử dụng các module khác nhau trên các thiết bị khác nhau, hoặc muốn đơn giản hóa thiết kế điện thoại di động bằng cách loại bỏ các yếu tố trang nhất định.

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ã pin mới, bạn có thể chỉ định 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 bay qua ghim trên bản đồ.

Địa chỉ bản đồ

Đây là vị trí chính xác trên bản đồ nơi pin 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 đá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