Bạn có muốn biết làm thế nào để tiết lộ nội dung khi di chuột qua dấu phân cách phần trong Divi ?
Các dải phân cách tiếp tục là một yếu tố thiết kế Divi nổi tiếng. Có nhiều kiểu phân chia để lựa chọn với các tùy chọn hữu ích giúp bạn dễ dàng thêm chuyển tiếp và nền độc đáo vào trang của mình.
Trong hướng dẫn này, chúng tôi sẽ sử dụng các bộ chia phần khác nhau một chút. Divi cho phép bạn điều chỉnh chiều cao và bố cục của từng dải phân cách. Điều này cho phép chúng ta định vị các dấu phân cách phía trên các khu vực nhất định hoặc nội dung của phần.
Bằng cách sử dụng tùy chọn di chuột cho chiều cao của dải phân cách, chúng ta có thể thêm các hiệu ứng di chuột độc đáo để hiển thị nội dung ẩn một phần. Điều này rất hiệu quả trong việc thu hút sự chú ý đến một lời kêu gọi hành động hoặc nút cụ thể mà bạn muốn mọi người nhấp vào. khách nhấp chuột.
khảo sát
Tải xuống DIVI ngay bây giờ !!!
Tạo một trang mới với Divi Builder
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Thiết kế Hiệu ứng Di chuột của dải phân cách trong Divi
Tạo phần và dòng
Tạo một phần thông thường với một hàng hai cột.
Trước khi thêm một mô-đun, hãy mở cài đặt phần và cập nhật những điều sau:
Nền Gradient (Trái): # 73ba57
Nền Gradient (Phải): # 2a4c23
Chiều rộng: 80%
Chiều rộng tối đa: 1px
Căn chỉnh phần: Căn giữa
Thêm tiêu đề phần
Để thêm tiêu đề phần, hãy tạo mô-đun Văn bản và chèn văn bản sau:
<h2>The Juice</h2>
Tiếp theo, cập nhật thiết kế như sau:
Phông chữ: Lato
Kích thước văn bản: 80px
Khoảng cách chữ cái: -5px
Lề: -50px (Trên), -40px (Dưới)
Chỉ số Z: -1
Lề tùy chỉnh và chỉ mục z sẽ cho phép văn bản ở sau hình ảnh mà chúng tôi sẽ thêm vào trong bước tiếp theo.
Thêm hình ảnh
Trong mô-đun Văn bản có tiêu đề trong cột 1, hãy thêm mô-đun Hình ảnh. Sau đó, tải lên một hình ảnh có nền trong suốt. Chúng tôi sử dụng một hình ảnh từ gói bố cục Cửa hàng nước ép 240 pixel x 300 pixel.
Việc điều chỉnh căn chỉnh của hình ảnh ở trung tâm.
Thêm mô-đun “Gọi hành động” trong cột 2
Trong cột 2, hãy thêm mô-đun Gọi hành động.
Thêm URL liên kết nút để đảm bảo nút hiển thị.
Nền CTA và kiểu văn bản tiêu đề
Tiếp theo, cập nhật các cài đặt thiết kế sau:
Nền: #ffffff
Màu văn bản: tối
Phông chữ tiêu đề: Lato
Trọng lượng phông chữ tiêu đề: Nặng
Kiểu phông chữ: TT
Kích thước văn bản tiêu đề: 18px
Tùy chỉnh nút CTA
Cập nhật thiết kế nút như sau:
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Màu văn bản nút: #ffffff
- Màu nền của nút: # 73ba57
- Chiều rộng đường viền: 0px
Tùy chỉnh đường viền Mô-đun CTA
Sau đó, thêm một đường viền để đóng khung mô-đun như sau:
Chiều rộng đường viền: 10px
Màu viền: rgba (115,186,87,0.15)
Đã thêm hiệu ứng di chuột vào bộ chia để hiển thị mô-đun "Gọi hành động"
Bây giờ đã đến lúc thêm hiệu ứng di chuột vào thanh chia phần để hiển thị mô-đun "Kêu gọi Hành động". Để thực hiện việc này, trước tiên chúng ta cần tạo các bộ chia phần của chúng ta.
Đọc cũng: Divi: Cách hiển thị nội dung khi di chuột qua các tab
Thêm dấu phân cách trên
Mở các tham số phần và dấu phân cách trên với các tham số sau.
Kiểu dải phân cách trên cùng: xem ảnh chụp màn hình
Màu dải phân cách trên cùng: # 73ba57
Chiều cao dải phân cách: 70% (mặc định), 0% (di chuột)
Lật dải phân cách trên cùng: ngang
Lưu ý rằng chiều cao của dấu phân tách bắt đầu với chiều cao mặc định là 70%, sau đó thay đổi thành chiều cao 0% khi di chuột.
Đã thêm dải phân cách dưới cùng
Sau đó thêm một dấu phân cách thấp hơn tương tự như phần có các tham số sau.
- Kiểu dải phân cách dưới cùng: xem ảnh chụp màn hình
- Màu dải phân cách dưới cùng: # 73ba57
- Chiều cao dải phân cách: 70% (mặc định), 0% (di chuột)
- Lật dải phân cách: Ngang
- Sắp xếp: Trên đầu phần Nội dung
Dải phân cách thấp hơn này cũng bắt đầu với chiều cao 70% giảm xuống 0% khi di chuột. Tuy nhiên, vì tùy chọn sắp xếp bộ chia được đặt phía trên nội dung, bộ chia phần sẽ ẩn phần dưới cùng của mô-đun "Gọi Hành động" trong cột 1. Sau đó, khi di chuột, phần còn lại của mô-đun sẽ được tiết lộ.
Kiểm tra kết quả cho đến nay.
Tải xuống DIVI ngay bây giờ !!!
Đã thêm hiệu ứng di chuột bóng hộp để chuyển đổi và thiết kế độc đáo
Để có sự chuyển đổi và thiết kế độc đáo khi di chuột, chúng ta có thể thêm hiệu ứng di chuột bóng hộp sẽ diễn ra đồng thời với hiệu ứng di chuột của bộ tách. Để làm điều này, hãy thêm bóng hộp sau vào phần.
- Box Shadow: xem ảnh chụp màn hình
- Vị trí ngang: 0px
- Vị trí dọc: 0px
- Sức mạnh trải rộng của Box Shadow: 0px (mặc định), 150px (di chuột)
- Màu bóng: # 73ba57
Làm chậm thời gian chuyển đổi
Bước cuối cùng, hãy làm chậm thời gian chuyển đổi.
Thời gian chuyển tiếp: 700ms
Kết quả cuối cùng
Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Chúng tôi hy vọng bài viết này đã cung cấp cho bạn một số cảm hứng để tạo hiệu ứng di chuột qua bộ chia phần độc đáo để hiển thị nội dung.
Trên thực tế, việc điều chỉnh bộ tách di chuột có thể là một tính năng thiết kế tuyệt vời của riêng nó. Ngoài ra, các thiết kế mẫu sẽ giúp bạn bắt đầu khám phá và thiết kế của riêng mình.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
