Việc sử dụng các tùy chọn kích thước có thể kéo mới của Divi không chỉ giúp chúng tôi tạo ra các trang web có độ phản hồi cao mà còn giúp chúng tôi tạo ra các tương tác độc đáo. Sử dụng các tùy chọn này bạn có thể tùy chỉnh bất kỳ Website bạn tạo và tùy chỉnh cấu trúc các trang của mình dựa trên xu hướng thiết kế hiện tại.
Đặc biệt, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo các phần di chuột bằng Divi. Chúng tôi sẽ tạo một trang mới và cho phép hiển thị tất cả các tiêu đề phần, nhưng mỗi phần sẽ chỉ mở khi di chuột (máy tính để bàn) hoặc khi nhấp chuột (thiết bị di động). Ngay sau khi bạn mở một phần khác, phần bạn đã mở trước đó sẽ tự động bị đóng lại. Chúng tôi sẽ bắt đầu bằng cách giải thích cách tiếp cận chung và tiếp tục bằng cách tạo lại ví dụ mà bạn có thể thấy bên dưới từ đầu. Chúng tôi hy vọng hướng dẫn này khuyến khích bạn tạo thiết kế phần di chuột của riêng mình!
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ả.
Thiết kế sân khấu
Trước khi đi sâu vào hướng dẫn, chúng ta sẽ xem xét kỹ thuật được sử dụng để tạo các phần cuộn qua. Bạn có thể áp dụng kỹ thuật này cho bất kỳ loại Website bạn xây dựng, với bất kỳ phong cách nào.
1. Thêm phần đầu tiên vào trang của bạn
Giả sử bạn bắt đầu một thiết kế mới trên một trang hoàn toàn mới. Điều đầu tiên cần làm là thêm một phần thông thường mới.
2. Thêm một dòng mới bao gồm một tiêu đề phần
Sau đó, bạn có thể tiếp tục bằng cách thêm một dòng mới với mô-đun văn bản bao gồm tiêu đề phần của bạn. Bạn cũng có thể thêm mô-đun phân chia và nội dung nào đó cho biết dòng sẽ mở rộng khi di chuột hoặc chạm. Điều quan trọng là phải tách tiêu đề của phần này ra khỏi phần còn lại của nội dung của phần. Vì vậy, hãy đảm bảo chừa đủ khoảng trống giữa tiêu đề của phần và mọi thứ tiếp theo.
3. Điều chỉnh phần còn lại nội dung của phần
Các yếu tố thiết kế theo tiêu đề phần là hoàn toàn tùy thuộc vào bạn. Bạn có thể tạo một phần dài hoặc ngắn tùy ý và sử dụng bất kỳ phong cách thiết kế nào.
4. Thay đổi độ cao mặc định và di chuột qua phần
Khi bạn đã tinh chỉnh phần và tất cả các yếu tố thiết kế của nó, đã đến lúc tạo hiệu ứng cuộn qua. Chiều cao mặc định của phần của bạn được thiết kế để chỉ khớp với tiêu đề phần. Khi di chuột, phần này sẽ trở lại kích thước ban đầu.
5. Ẩn tràn dọc
Một phần quan trọng khác của kỹ thuật này là ẩn phần tràn dọc. Khi bạn đặt chiều cao tối đa mặc định cho phần của mình nhỏ hơn chiều cao của phần ban đầu, một phần tràn sẽ được tạo. Để đảm bảo phần tràn không hiển thị, bạn cần đảm bảo phần tràn bị ẩn trong cài đặt hiển thị phần.
5. Lặp lại các bước cho tất cả các phần của trang.
Lặp lại các bước tương tự cho tất cả các phần trên trang của bạn để tạo trải nghiệm người dùng rõ ràng mà bạn khách Sẽ đánh giá cao.
Bắt đầu thiết kế!
Thêm một phần mới
Màu nền mặc định
Bây giờ chúng ta đã làm theo cách tiếp cận trong bài viết này, đã đến lúc bắt đầu thực hiện mọi việc! Thêm phần đầu tiên thông thường vào một trang hoàn toàn mới của bạn Website WordPress và mở phần cài đặt. Thay đổi màu nền mặc định của phần thành màu bạn chọn.
- Màu nền: # 000000
Bay trên màu nền
Thay đổi màu nền lơ lửng này.
- Màu nền: #ffffff
Thêm hàng 1
Cấu trúc cột
Tiếp tục thêm dòng đầu tiên vào phần của bạn bằng cấu trúc cột sau:
Thêm một mô-đun văn bản
Thêm nội dung H2
Thêm một mô-đun văn bản vào dòng mới tiếp theo của bạn. Thêm một bản sao H2 với biểu tượng '▼' khi phần mở ra.
Cài đặt văn bản H2
Chuyển đến tab Thiết kế mô-đun và thay đổi cài đặt văn bản H2.
- Phông chữ 2: Trebuchet
- Tiêu đề 2 Trọng lượng phông chữ: Ultra Bold
- Tiêu đề 2 Sắp xếp văn bản: Trái
- Tiêu đề 2 Màu văn bản: #ff0f3b
- Tiêu đề 2 Kích thước văn bản: pixel 100 (máy tính để bàn), pixel 80 (máy tính bảng), pixel 60 (điện thoại)
- Khoảng cách tiêu đề 2: -5px
Thêm một mô-đun phân chia
tầm nhìn
Mô-đun thứ hai và cuối cùng chúng ta cần trong hàng này là một mô-đun phân chia. Đảm bảo bật tùy chọn "Hiển thị dấu phân cách" trong cài đặt hiển thị.
- Hiển thị dải phân cách: Có
Màu
Sau đó, chuyển đến tab Thiết kế và thay đổi màu của dấu phân cách.
- Màu: #ff0f3b
kích thước
Cũng thay đổi các tham số kích thước của mô-đun.
- Trọng lượng bộ chia: 2px
- Chiều rộng: 14%
Thêm dòng 2
Cấu trúc cột
Hàng tiếp theo! Đây là nơi bạn sẽ cần phải đặt tất cả các nội dung mà bạn muốn hiển thị sau khi di chuột (máy tính để bàn) hoặc nhấp chuột (máy tính bảng và thiết bị di động). Chúng tôi sử dụng cấu trúc cột sau, nhưng lưu ý rằng bạn có thể thêm bao nhiêu hàng và mô-đun tùy thích và tùy chỉnh chúng theo nhu cầu của mình:
Thêm một mô-đun văn bản vào cột 1
Thêm nội dung
Đặt một mô-đun văn bản trong cột đầu tiên với nội dung bạn chọn.
Cài đặt văn bản
Chuyển đến tab Thiết kế của mô-đun văn bản và thay đổi hướng của văn bản.
- Định hướng văn bản: Justify
Thêm một mô-đun văn bản vào cột 2
Thêm nội dung
Đồng thời thêm một mô-đun văn bản vào cột thứ hai với nội dung bạn chọn.
Cài đặt văn bản
Một lần nữa, hãy thay đổi hướng của văn bản trong cài đặt văn bản của mô-đun.
- Định hướng văn bản: Justify
Thêm các tham số kích thước cho phần
Kích thước mặc định
Khi bạn đã hoàn thành phần của mình, đã đến lúc tạo hiệu ứng di chuột. Mở cài đặt phần và thay đổi chiều cao tối đa cho các kích thước màn hình khác nhau:
- Chiều cao tối đa: 300px (máy tính để bàn), 280px (máy tính bảng), 260px (điện thoại)
Di chuột
Đồng thời bật tùy chọn di chuột trên chiều cao tối đa và thêm giá trị đủ lớn để bao phủ tất cả các phần tử, bất kể kích thước màn hình. Giá trị này đảm bảo rằng tất cả các phần tử của bạn xuất hiện mà không vượt quá kích thước ban đầu của vùng chứa phần.
- Chiều cao tối đa: 5000px
Tràn dọc
Sau đó, chuyển đến tab Nâng cao của phần này và thay đổi phần tràn dọc. Thao tác này sẽ ẩn tất cả nội dung vượt ra ngoài vùng chứa phần.
- Tràn dọc: ẩn
Chuyển tiếp
Để tạo quá trình chuyển đổi suôn sẻ, chúng tôi cũng thay đổi cài đặt chuyển tiếp trong tab Nâng cao.
- Thời lượng của quá trình chuyển đổi: 800ms
- Thời gian chuyển tiếp: 500 ms
Sao chép toàn bộ phần nhiều lần tùy thích
Khi bạn đã tạo phần cầu vượt đầu tiên, bạn có thể sao chép nó bao nhiêu lần tùy ý.
Thay đổi tiêu đề phần
Tất nhiên, bạn sẽ muốn thay đổi tiêu đề phần trùng lặp.
Thay đổi màu sắc của văn bản H2
Để tạo ra các biến thể trong thiết kế, chúng tôi cũng sẽ thay đổi màu văn bản của các mô-đun được đánh dấu trong màn hình in bên dưới.
- Tiêu đề 2 Màu văn bản: #c4c4c4
Thay đổi màu của dải phân cách
Với các màu tách đi kèm với các mô-đun văn bản.
- Màu: #c4c4c4
khảo sát
Bây giờ tất cả các bước đã được hoàn thành, chúng ta hãy xem xét kết quả cuối cùng.
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách sử dụng sáng tạo các tùy chọn định cỡ có thể kéo mới của Divi để tạo ra các tương tác độc đáo bằng cách sử dụng các phần di chuột trên bất kỳ trang web nào bạn tạo. Chúng tôi bắt đầu bằng cách giải thích cách tiếp cận và tiếp tục bằng cách tạo lại ví dụ thiết kế từ đầu. Bạn cũng có thể tải xuống tệp JSON miễn phí! Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy để lại nhận xét trong phần bình luận bên dưới.
