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

Cách sử dụng Mô-đun Điều hướng Toàn bộ Divi Builder

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

Mô-đun menu Divi Full Width cho phép bạn đặt menu điều hướng ở bất cứ đâu trên trang. Điều này có thể được sử dụng để thêm menu trang thứ hai trên trang hoặc có thể được sử dụng cùng với tính năng Trang trống để di chuyển điều hướng chính của bạn xuống cuối trang. Ví dụ: bạn có thể di chuyển menu bên dưới phần đầu tiên của mình để chứa mọi người với hình ảnh khởi động lớn. Điều này về cơ bản cho phép điều hướng tiêu đề của bạn di chuyển trên trang bằng cách sử dụng hàm tạo!

Cách thêm mô-đun menu toàn màn hình vào trang của bạn

Trước khi bạn có thể thêm một mô-đun menu có độ rộng đầy đủ vào trang của mình, trước tiên bạn phải nhảy vào 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.

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. 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. Chúng tôi có một số hướng dẫn tốt về việc sử dụng các yếu tố phần của Divi.

full width menu module.png

Tìm mô-đun menu có độ 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 mô-đun có thể tìm kiếm, có nghĩa là bạn cũng có thể nhập từ "menu Fullwith" hoặc "menu có độ rộng" (tùy thuộc vào phiên bản của bạn), sau đó nhấp enter để tự động tìm kiếm và thêm mô-đun trình đơn có độ rộng đầy đủ ! 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 Menu đầy đủ bên dưới tiêu đề trang

Trong ví dụ này, tôi sẽ chỉ cho bạn cách thêm một menu fullwidth bên dưới phần tiêu đề của một trang.

Đây là một ví dụ:

ví dụ về menu fullwidth divi.jpg

Vì menu toàn trang mới này sẽ thay thế menu điều hướng chính mặc định, cần chọn mẫu trang trống để trình đơn điều hướng mặc định không xuất hiện ở đầu trang ngoài trình đơn đầy đủ chiều rộng mà tôi sẽ thêm vào.

Để chỉnh sửa mẫu trang của bạn, hãy chuyển đến trình chỉnh sửa trang của bạn và chọn mẫu "trang trống" trong hộp Thuộc tính trang trên thanh bên phải.

thuộc tính của page.png

Vì mô-đun này sẽ hiển thị một menu đã tồn tại, điều quan trọng là bạn đã tạo trình đơn trước khi thêm nó vào mô-đun menu có độ rộng đầy đủ.

menu ví dụ wordpress.jpg

Một khi bạn đã tạo ra trình đơn của bạn, sử dụng Visual Builder để thêm một phần Fullwidth ngay bên dưới phần tiêu đề của trang. Sau đó, thêm mô-đun menu có độ rộng đầy đủ vào phầ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í]

thêm một menu có độ rộng đầy đủ bên dưới title.jpg

Cập nhật cài đặt menu Fullwidth như sau:

Tùy chọn nội dung

Menu: [chọn menu sẽ được sử dụng trong mô-đun] Bối cảnh: # 333333

Tùy chọn thiết kế

Màu văn bản: Định hướng văn bản sáng: Menu phông chữ trung tâm: Kích cỡ phông chữ Roboto Menu: 20px

Vậy là xong!

Thủ thuật : Bạn có thể sử dụng tùy chọn hiển thị trên tab Nâng cao để ẩn menu này trên thiết bị di động và hiển thị menu khác phía trên tiêu đề để người dùng di động có thể xem menu mà không phải cuộn xuống trang. .

menu kết quả divi.jpg

Tùy chọn nội dung trình đơn đầ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.

fullwidth-menu-section content.png

Thực đơn

Chọn menu để sử dụng trong mô-đun. Bạn có thể tạo các menu mới bằng cách sử dụng trang Xuất hiện> Menu của bảng điều khiển WordPress của bạn. Mỗi khi bạn tạo một menu mới, menu sẽ được chọn từ trình đơn thả xuống này.

Màu nền

Theo mặc định, mô-đun menu có màu nền trắng. Nếu bạn muốn sử dụng màu khác cho nền menu, bạn có thể chọn màu ở đây bằng cách sử dụng bộ chọn màu.

Màu nền của menu thả xuống

Theo mặc định, các menu thả xuống trong mô-đun trình đơn của bạn kế thừa bộ màu nền trong cài đặt trước đó. Nếu bạn muốn các menu thả xuống có màu riêng, bạn có thể chọn màu tùy chỉnh bằng cách sử dụng cài đặt này.

Màu nền của menu di động

Trên thiết bị di động, mô-đun menu được chuyển thành thiết kế thân thiện với thiết bị di động và khác biệt. Bạn có thể kiểm soát màu nền của menu thả xuống trên thiết bị di động độc lập với đối tác trên máy tính để bàn của nó.

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.

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]

Tùy chọn thiết kế menu có độ rộng đầy đủ

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

phần menu thiết kế mô-đun fullwidth.png

Mở menu con

Theo mặc định, tất cả menu con mở trong menu thả xuống bên dưới thanh trình đơn chính. Nếu bạn đặt menu ở cuối trang và menu của bạn chứa các menu thả xuống dài, bạn có thể mở các menu này phía trên mô-đun trình đơn để menu không vượt ra ngoài cửa sổ trình duyệt.

Tạo liên kết menu có độ rộng đầy đủ

Theo mặc định, các liên kết cấp cao nhất với mô đun menu được đặt trong giới hạn chiều rộng nội dung mặc định của bạn. Nếu bạn muốn xóa giới hạn này và các liên kết của bạn mở rộng trên toàn bộ chiều rộng của trang, từ phía xa bên trái của màn hình, bạn có thể bật tùy chọn này.

Màu của dòng menu thả xuống

Trong các trình đơn thả xuống, các liên kết được phân cách bằng một dòng của 1 pixel. Nếu bạn muốn tùy chỉnh màu của đường này, bạn có thể chọn màu tùy chỉnh bằng cách sử dụng công cụ chọn màu trong cài đặt này.

Màu văn bản

Ở đây bạn có thể chọn giá trị của văn bản của bạn. Nếu bạn đang làm việc trên nền tối, văn bản của bạn sẽ được bật. Nếu bạn làm việc với một nền tảng rõ ràng, văn bản của bạn nên tối.

Định hướng văn bản

Điều này kiểm soát cách văn bản của bạn được căn chỉnh trong mô-đun. Bạn có thể chọn giữa Trái, Phải và Căn giữa.

Màu liên kết hoạt động

Màu liên kết hoạt động được đánh dấu trong mô-đun menu để hiển thị cho người dùng vị trí hiện tại của họ. Bạn có thể thay đổi màu đánh dấu được sử dụng cho các liên kết hoạt động này bằng cách sử dụng cài đặt này.

Màu của văn bản của trình đơn thả xuống

Theo mặc định, văn bản trong menu thả xuống của mô-đun kế thừa màu của văn bản từ menu chính. Tuy nhiên, bạn có thể muốn thay đổi màu này nếu bạn đã đặt màu nền menu thả xuống tùy chỉnh.

Màu của văn bản menu di động

Theo mặc định, văn bản trong menu thả xuống của mô-đun kế thừa màu của văn bản từ menu chính. Tuy nhiên, bạn có thể muốn thay đổi màu này nếu bạn đã đặt màu nền menu cho trình đơn di động tùy chỉnh.

Phông chữ menu

Bạn có thể thay đổi phông chữ của phông chữ menu bằng cách chọn phông chữ mong muốn từ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn được hỗ trợ bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, chữ hoa và gạch chân.

Menu kích thước phông chữ

Ở đây bạn có thể điều chỉnh kích thước phông chữ menu của bạn. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản hoặc nhập giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập ở bên phải thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Màu của văn bản menu

Theo mặc định, tất cả các màu văn bản Divi xuất hiện bằng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản kỹ thuật số, hãy chọn màu bạn muốn trong bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách của các chữ cái menu <

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản số của bạn, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập ở bên phải của thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao của dòng menu

Chiều cao của dòng ảnh hưởng đến khoảng trống giữa mỗi dòng của văn bản kỹ thuật số Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập nằm ở bên phải của con trỏ. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Tùy chọn menu 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.

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

menu module fullwidth phần nâng cao 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.

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.

Hoạt ảnh của trình đơn thả xuống

Bạn có thể chọn giữa các hoạt ảnh khác nhau để sử dụng khi trình đơn thả xuống được kích hoạt. Theo mặc định, hoạt ảnh được đặt thành mờ dần, nhưng bạn thay đổi nó thành: mở rộng, kéo hoặc lậ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. 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.

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
17 cổ phiếu
cổ phiếu10
tweet3
Enregistrer4