Hàng tuần, chúng tôi cung cấp cho bạn những ý tưởng thiết kế mới mà bạn có thể sử dụng cho các dự án khác nhau của mình Divi. Những hướng dẫn này thường bao gồm các trường hợp sử dụng sẽ giúp bạn thực hiện Website ở cấp trên.

Tuần này, như một phần của sáng kiến ​​thiết kế của chúng tôi Divi Trong quá trình thực hiện, chúng tôi sẽ hướng dẫn bạn cách tạo menu tổng quan nổi tuyệt đẹp sẽ mở rộng khi bạn di chuột hoặc nhấp vào menu đó. Hãy bắt đầu với một số bước chung. Chúng tôi sẽ tiếp tục bằng cách thêm các mục menu bằng cách sử dụng mô-đun Blurb và chúng tôi sẽ kết thúc bằng cách cho phép bạn chọn giữa hiệu ứng di chuột hoặc nhấp chuột.

Chúng ta hãy đi!

khảo sát

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả mà chúng ta có thể nhận được. Nhưng điều này có thể khác bởi vì bạn có thể sẽ muốn tùy chỉnh những gì bạn học.

1. Tạo một trang trống và sử dụng Mẫu trang tham quan

Thêm một trang trống mới và kích hoạt Divi Builder

Điều đầu tiên cần làm là tạo một trang trống mới. Đặt tiêu đề cho trang của bạn và tiếp tục Divi Người xây dựng.

Tải xuống một trang điểm du lịch

Khi bạn đã bật Trình tạo Divi, hãy tải xuống bố cục trang đích Gói tham quan.

2. Thêm một phần thông thường mới ở dưới cùng của trang

Khi thanh menu chính bị ẩn, chúng ta có thể bắt đầu thêm menu tổng quan. Để làm điều này, chúng tôi sẽ thêm một phần thông thường mới ở cuối trang của chúng tôi.

Màu nền

Mở cài đặt phần và thêm màu nền trắng trong suốt.

• Màu nền: rgba (255,255,255,0.98)

khoảng cách

Chuyển sang tab Thiết kế và xóa tất cả phần đệm trên và dưới mặc định khỏi phần này.

• Đệm hàng đầu: 0px
• Đệm dưới: 0px

Bóng mặc định

Thêm một bóng hộp vào phần tiếp theo.

• Lực lượng bóng mờ hộp: 18px
• Màu bóng: #383838

Hover Box Shadow

Và thay đổi cường độ mờ của bóng hộp di chuột.

• Lực lượng bóng mờ hộp: 1000px

Ẩn phần vượt qua và tăng chỉ số Z

Chúng tôi sẽ sử dụng cài đặt định kích thước phần để làm cho kỹ thuật này hoạt động, nhưng để đảm bảo không có gì vượt ra ngoài vùng chứa phần, chúng tôi sẽ cần phải ẩn phần tràn. Chúng tôi cũng đang tăng chỉ số Z để đảm bảo phần này vẫn ở đầu phần còn lại của trang.

• Tràn ngang: ẩn
• Tràn dọc: ẩn
• Chỉ số Z: 9999

3. Định cấu hình kích thước menu để phù hợp với tất cả các kích thước màn hình

Thêm hàng 1

Cấu trúc cột

Khi bạn đã có các tham số cơ bản của bộ phần, đã đến lúc thêm tất cả các nội dung mà bạn muốn hiển thị trong menu. Bạn có thể tạo bất kỳ thiết kế nào bạn muốn bằng cách sử dụng các yếu tố thiết kế và tùy chọn tích hợp của Divi, nhưng bạn cần đảm bảo rằng nó có tỷ lệ hoàn hảo ở độ cao “100px” cho mọi kích thước màn hình. Để làm điều này, chúng ta sẽ sử dụng đơn vị chiều rộng khung nhìn trong suốt quá trình xây dựng và điều chỉnh các giá trị trên các kích thước màn hình khác nhau. Bắt đầu bằng cách thêm một hàng mới vào phần của bạn bằng cấu trúc cột sau:

kích thước

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và đảm bảo chúng lấp đầy toàn bộ chiều rộng của phần.

• Sử dụng chiều rộng máng tùy chỉnh: Có
• Chiều rộng máng xối: 1
• Chiều rộng: 100%
• Chiều rộng tối đa: 100%

khoảng cách

Đi tới cài đặt khoảng cách và xóa tất cả đệm trên và dưới mặc định.

• Đệm hàng đầu: 0px
• Đệm dưới: 0px

Thêm một mô-đun văn bản vào một cột

Thêm một biểu tượng

Tiếp tục bằng cách thêm mô-đun văn bản vào cột hàng. Thêm ký hiệu '=' vào ô nội dung hoặc thoải mái sử dụng bất kỳ biểu tượng nào khác mà bạn chọn.

Màu nền

Thay đổi màu nền của mô-đun sau đó.

• Màu nền: #000000

Cài đặt văn bản

Chuyển sang tab Thiết kế và thay đổi cả cài đặt văn bản.

• Phông chữ: Mở Sans
• Sắp xếp văn bản: trung tâm
• Màu văn bản: #ffffff
• Kích thước văn bản: 3vw (máy tính để bàn), 5vw (máy tính bảng), 7vw (điện thoại)
• Chiều cao của dòng văn bản: 1em

khoảng cách

Chúng tôi cũng thêm không gian ở đầu và cuối mô-đun bằng cách sử dụng các giá trị đệm tùy chỉnh sau:

• Phần đệm trên: 2.5vw (máy tính để bàn), 3.5vw (máy tính bảng), 5vw (điện thoại)
• Upholstery ở phía dưới: 2.5vw (máy tính để bàn), 3.5vw (máy tính bảng), 5vw (điện thoại)

Thêm dòng 2

Cấu trúc cột

Tiếp tục thêm một dòng thứ hai bằng cấu trúc cột sau:

kích thước

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và để nó lấp đầy toàn bộ chiều rộng của màn hình.

• Sử dụng chiều rộng máng tùy chỉnh: Có
• Chiều rộng máng xối: 1
• Chiều rộng: 100%
• Chiều rộng tối đa: 100%

khoảng cách

Đi tới cài đặt khoảng cách và sau đó thêm tô tùy chỉnh ở trên cùng và dưới cùng.

• Phần đệm trên: 2vw (máy tính để bàn), 4vw (máy tính bảng), 6vw (điện thoại)
• Upholstery ở phía dưới: 2vw (máy tính để bàn), 4vw (máy tính bảng), 6vw (điện thoại)

trưng bày

Để đảm bảo hai cột nằm cạnh nhau trên kích thước màn hình nhỏ hơn, chúng tôi sẽ thêm một dòng mã CSS vào phần tử hàng chính.

hiển thị: flex;

Thêm mô-đun Blurb vào cột 1

Thêm nội dung

Đã đến lúc bắt đầu thêm các mục menu! Thêm mô-đun Blurb mới vào cột đầu tiên trong hàng và nhập nội dung de Votere choix.

Chọn biểu tượng

Chọn một biểu tượng tiếp theo.

Thêm một liên kết

Và nhập liên kết trang tương ứng với mục menu.

• URL tiêu đề liên kết: #

Cài đặt biểu tượng

Chuyển sang tab Thiết kế và thay đổi cài đặt biểu tượng cho phù hợp:

• Màu biểu tượng: # ff3314
• Vị trí biểu tượng: Hàng đầu
• Sử dụng Kích thước Phông chữ Biểu tượng: Có
• Kích thước phông chữ biểu tượng: 2vw (máy tính để bàn), 3vw (máy tính bảng), 4vw (điện thoại)

Cài đặt văn bản tiêu đề

Cũng thay đổi cài đặt văn bản của tiêu đề.

• Tiêu đề cảnh sát: PT Serif
• Kiểu chữ Tiêu đề: Gạch chân
• Màu gạch chân của tiêu đề: # ff3314
• Tiêu đề văn bản: Căn chỉnh trung tâm
• Kích thước tiêu đề văn bản: 1.8vw (máy tính để bàn), 2.3vw (máy tính bảng), 3.3vw (điện thoại)

Cài đặt văn bản

Sau đó thay đổi cài đặt văn bản cơ thể.

• Phông chữ cơ thể: Lato
• Căn chỉnh của cơ thể của văn bản: trung tâm
• Màu văn bản cơ thể: # c6c6c6
• Kích thước văn bản cơ thể: 0.9vw (máy tính để bàn), 1.7vw (máy tính bảng), 2.1vw (điện thoại)
• Chiều cao cơ thể: 1.8em

kích thước

Và thay đổi chiều rộng mô-đun trên các kích thước màn hình khác nhau bằng cách sử dụng các giá trị sau:

• Chiều rộng: 60% (máy tính để bàn), 65% (máy tính bảng), 80% (điện thoại)

Hoạt hình

Chúng tôi cũng xóa hoạt ảnh biểu tượng trong cài đặt hoạt ảnh.

• Biểu tượng Hoạt hình: Không Hoạt hình

Sao chép mô-đun và đặt bản sao vào cột 2

Khi bạn đã hoàn thành mô-đun Blurb, bạn có thể sao chép nó và đặt bản sao vào cột thứ hai của dòng.

Thay đổi bản sao

Đảm bảo thay đổi bản sao. Đừng quên thay đổi biểu tượng và liên kết.

Nhân bản dòng hai lần

Khi bạn đã hoàn thành cả hai mô-đun Blurb trong hàng, bạn có thể nhân đôi toàn bộ dòng hai lần.

Thay đổi bản sao, biểu tượng và liên kết cho từng bản sao chỉnh sửa riêng lẻ

Đảm bảo thay đổi bản sao, biểu tượng và liên kết cho từng mục trong menu blurb riêng lẻ.

4. Làm cho phần khó khăn

Điều này

Khi bạn đã thêm tất cả các phần tử bạn muốn hiển thị vào phần của mình, bạn có thể giữ phần ở trên cùng bên trái của trang bằng cách thêm hai dòng mã CSS sau vào phần tử phần chính. :

vị trí: cố định; đầu trang: 0;

Di chuột (Quan trọng!)

Bật tùy chọn di chuột trên phần tử chính của phần và đảm bảo rằng phần đó cũng ở trạng thái đó.

vị trí: cố định;

5. Chọn một phương thức: A) Menu quá sáng hoặc B) Nhấp vào menu

A) Menu di chuột

Kích thước phần mặc định

Trong phần tiếp theo của hướng dẫn, bạn sẽ cần chọn một phương pháp ưa thích. một menu di chuột hoặc nhấp chuột. Menu di chuột sẽ hoạt động giống như menu nhấp chuột trên các thiết bị nhỏ hơn. Nếu bạn quyết định chọn tùy chọn di chuột, hãy mở lại cài đặt phần, chuyển đến cài đặt kích thước và thay đổi chiều rộng và chiều cao menu của bạn cho phù hợp:

• Chiều rộng: 8vw (máy tính để bàn), 12vw (máy tính bảng), 20vw (điện thoại)
• Chiều cao: 7.4vw (máy tính để bàn), 12vw (máy tính bảng), 16vw (điện thoại)

Phần di chuột

Thay đổi giá trị cuộn qua để tạo menu mở rộng.

• Chiều rộng: 80%
• Chiều cao: 100vh

B) Menu khi nhấp

Thêm một lớp CSS vào một phần

Nếu bạn muốn một menu chỉ mở bằng cách nhấp, bạn cần mở mô-đun văn bản có chứa ký hiệu menu. Chuyển đến tab Nâng cao và thêm một lớp CSS tùy chỉnh.

• Lớp CSS: mở toàn băng thông

Thêm một lớp CSS vào mô-đun văn bản

Sau đó mở các tham số của phần và thêm một lớp CSS khác.

• Lớp CSS: chuyển đổi trơn tru

Phần kích thước

Sau đó chúng tôi sửa đổi chiều rộng và chiều cao của phần của chúng tôi.

• Chiều rộng: 8vw (máy tính để bàn), 12vw (máy tính bảng), 20vw (điện thoại)
• Chiều cao: 7.4vw (máy tính để bàn), 12vw (máy tính bảng), 16vw (điện thoại)

Thêm mã vào trang

Thêm một dòng mới ở dưới cùng của phần

Bây giờ, để tạo hiệu ứng lật, chúng ta sẽ cần một chút mã JQuery và CSS. Bắt đầu bằng cách thêm mô-đun mã vào một dòng mới ở cuối phần của bạn.

Thêm một mô-đun mã vào phần và chèn mã chuyển đổi JQuery

Sao chép các dòng sau từ mã JQuery và dán chúng vào hộp mã:

jQuery(function($){
$("#fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});
});

Thêm mã CSS tùy chỉnh vào cài đặt trang

Cuối cùng nhưng không kém phần quan trọng, hãy mở các cài đặt trang sau và thêm các dòng mã CSS sau:

.smooth-Transform-active {height: 100vh; chiều rộng: 80%; } .smooth-Transform {-webkit-quá trình chuyển đổi: tất cả các 0.5 đều dễ dàng; -moz-quá trình chuyển đổi: tất cả các 0.5 dễ dàng; -o-trans: tất cả các 0.5 dễ dàng; -ms-quá trình chuyển đổi: tất cả các 0.5 dễ dàng; chuyển tiếp: tất cả các 0.5 dễ dàng; }

cuối cùng suy nghĩ

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách tạo một mô-đun bản trình bày đẹp mắt có thể mở rộng bằng cách nhấp / di chuột (tùy thuộc vào sở thích của bạn). Đó là một cách tuyệt vời để thêm tương tác bổ sung vào menu của bạn trong khi vẫn duy trì kết quả đáp ứng cho mọi kích thước màn hình. Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, vui lòng để lại bình luận trong phần dành riêng bên dưới.