Cách sử dụng mô đun Điều hướng toàn chiều rộng trên Divi Builder

Mô-đun Menu Chiều rộng Toàn phần của Divi cho phép bạn đặt menu điều hướng ở bất kỳ đâu trên trang. Điều này có thể được sử dụng để thêm menu trang thứ hai vào trang hoặc nó có thể được sử dụng kết hợp 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 của mình bên dưới phần đầu tiên để phù hợp với những người có hình ảnh khởi động lớn. Về cơ bản, điều này cho phép điều hướng tiêu đề của bạn di chuyển khắp trang bằng trình 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ô-đun menu có chiều rộng đầy đủ 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ài đặt trên của bạn Website, bạn sẽ nhận 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 qua Website ở phía trước nếu bạn đã đăng nhập vào bảng điều khiển WordPress của mình.

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 có 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 full width vào trang của bạn. Chúng tôi có một số hướng dẫn tuyệt vời về cách sử dụng các phần tử phần Divi.

Tìm mô-đun menu có chiều rộng đầy đủ trong danh sách 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ừ "Fullwith menu" hoặc "full width menu" (tùy thuộc vào phiên bản của bạn) và sau đó nhấp vào enter để tự động tìm kiếm và thêm mô-đun menu 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 menu Fullwidth dưới tiêu đề trang

Đối với ví dụ này, tôi sẽ chỉ cho bạn cách thêm menu full width trong phần tiêu đề của trang.

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

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

Để 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 khu vực Thuộc tính trang của thanh bên phải.

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

Khi bạn đã tạo menu của mình, hãy sử dụng trình tạo trực quan để thêm phần Fullwidth ngay bên dưới phần tiêu đề của trang. Sau đó, thêm mô-đun menu chiều rộng đầy đủ vào phần.

Cập nhật cài đặt menu Toàn băng thông như sau:

Tùy chọn nội dung

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

Tùy chọn thiết kế

Màu văn bản: Sáng Hướng văn bản: Menu chính giữa Phông chữ: Menu Roboto Kích thước phông chữ: 20px

Đó là tất cả!

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

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

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 của mình, bạn có thể chọn màu đó tại đây bằng cách sử dụng công cụ chọn màu.

Màu nền menu thả xuống

Theo mặc định, các menu thả xuống trong mô-đun menu của bạn kế thừa màu nền được xác định 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 menu di động

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

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

Mở menu con

Theo mặc định, tất cả các menu con mở dưới dạng menu thả xuống bên dưới thanh menu chính. Nếu bạn đặt menu của mình gần cuối trang và menu của bạn chứa các menu thả xuống dài, bạn có thể muốn mở các menu đó phía trên mô-đun menu để menu không mở rộng 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 chiều rộng nội dung mặc định của bạn. Nếu bạn muốn loại bỏ hạn chế này và để các liên kết của bạn chạy trên toàn bộ chiều rộng của trang, bắt đầu từ phía ngoài cùng 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 menu thả xuống, các liên kết được phân tách bằng đường 1 pixel. Nếu bạn muốn tùy chỉnh màu của hàng này, bạn có thể chọn màu tùy chỉnh bằng cách sử dụng bộ chọn màu trong cài đặt này.

Màu văn bản

Tại đây bạn có thể chọn giá trị văn bản của mình. 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 đang làm việc với nền sáng, văn bản của bạn phải 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à Giữa.

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

Màu của các liên kết đang 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 đang 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 menu thả xuống

Theo mặc định, văn bản trong menu thả xuống của mô-đun sẽ kế thừa màu của văn bản menu chính. Tuy nhiên, bạn có thể muốn thay đổi màu này nếu bạn đã xác định 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 sẽ kế thừa màu của văn bản 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 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 của mình bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ tuyệt vời được cung cấp 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, viết hoa và gạch chân.

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

Tại đây bạn có thể điều chỉnh kích thước phông chữ menu của mình. 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 của mình hoặc nhập trực tiếp giá trị kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầu vào 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ị 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 trong Divi đều có 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 mong muốn từ bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách giữa các chữ cái trong menu

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng cách 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ố, 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 vào trường nhập ở bên phải thanh trượt. Các trường đầu vào 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ị 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 dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản 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 cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập nằm ở bên phải của con trỏ. Các trường đầu vào 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ị kích thước của bạn để thay đổi loại đơn vị của nó.

Tùy chọn menu băng thô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 hoặc trang web của mình. Website sử dụng 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.

Hoạt ảnh của menu thả xuống

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

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

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