Các dải phân cách tiếp tục là một yếu tố thiết kế phổ biến trên Divi. Có nhiều kiểu dấu phân cách ngoài kia, bao gồm một số tùy chọn hữu ích giúp bạn dễ dàng thêm các 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 ta sẽ sử dụng các bộ chia phần hơi khác 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 tôi định vị các dấu phân cách phía trên các khu vực hoặc nội dung nhất định trong phần. Bằng cách sử dụng tùy chọn di chuột cho chiều cao dải phân cách, chúng ta có thể thêm các hiệu ứng di chuột độc đáo để lộ một 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 lời kêu gọi hành động hoặc một nút cụ thể mà bạn muốn mọi người nhấp vào. khách nhấp chuột.
Chúng ta hãy bắt đầu.
Kết quả mẫu
Những gì bạn cần để bắt đầu
Để bắt đầu, bạn cần những điều sau đây:
- Le Chủ đề Divi đã cài đặt và hoạt động
- Một trang mới được tạo để xây dựng từ đầu trên front-end (hàm tạo trực quan)
- Một số hình ảnh giả để sử dụng trong thiết kế. Tôi sẽ sử dụng một số hình ảnh có nền trong suốt từ Gói bố trí cửa hàng nước trái cây .
Sau đó, bạn đã sẵn sàng để bắt đầu!
Triển khai thiết kế hiệu ứng khi di chuột của dải phân cách chiều cao trong Divi
Tạo phần và dòng
Hãy bắt đầu bằng cách tạo một phần thông thường với một hàng gồm 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:
Độ dốc nền bên trái: #73ba57
Độ dốc nền bên phải: #2a4c23
Chiều rộng: 80%
Chiều rộng tối đa: 1080px
Phần sắp xếp: Trung tâm
Nhưng bạn cũng có thể chọn bảng màu mà bạn thích theo hình ảnh của bạn. bảng màu của tôi là: # fff200 - # e09900 trong gradient.
Thêm tiêu đề
Để thêm tiêu đề phần, hãy tạo một mô-đun văn bản và cập nhật nội dung của phần thân với tiêu đề h2 sau:
Nước trái cây
Sau đó cập nhật bản vẽ như sau:
Phông chữ 2: Lato
Tiêu đề Kích thước văn bản 2: 80px
Khoảng cách tiêu đề 2: -5px
Ký hiệu: -50px ở trên cùng, -40px ở dưới cùng
Chỉ số Z: -1
Lề tùy chỉnh và chỉ mục z sẽ cho phép văn bản nằm sau hình ảnh mà chúng ta sẽ thêm vào trong bước tiếp theo.
Thêm hình ảnh
Bên dưới 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. Tôi đang sử dụng hình ảnh từ Gói Bố cục Cửa hàng Nước ép có kích thước 240 pixel x 300 pixel.
Điều chỉnh căn chỉnh của hình ảnh cho chính giữa.
Thêm lời kêu gọi hành động trong cột 2
Trong cột 2, thêm một cuộc gọi đến mô-đun hành động.
Thêm một URL liên kết nút để đảm bảo nút được hiển thị.
CTA nền và phong cách tiêu đề
Sau đó cập nhật các thông số thiết kế sau:
Màu nền: #ffffff
Màu văn bản:
Phông chữ: Lato
Chính sách trọng lượng tiêu đề: Nặng
Tiêu đề Kiểu chữ: TT
tiêu đề Kích thước văn bản: 18px
Cách điệu nút CTA
Cập nhật thiết kế nút như sau:
Màu văn bản nút: #ffffff
Màu nền nút: # e09900
Nút Độ rộng viền: 0 px
Tạo kiểu viền CTA
Sau đó thêm một đường viền để đóng khung mô-đun như sau:
Chiều rộng của đường viền: 10px
Màu của đường viền: rgba (224,145,0,0.25)
Đã thêm hiệu ứng di chuột theo chiều cao của dải phân cách để hiển thị lời kêu gọi hành động
Bây giờ, đã đến lúc thêm hiệu ứng di chuột để phân chia chiều cao phần để hiển thị lời gọi hành động. Để làm điều này, trước tiên chúng ta cần tạo các phần chia.
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 của dải phân cách trên: # 73ba57 Chiều cao của dải phân cách trên cùng: 70% (mặc định), 0% (di chuột qua)
Lật đầu ngăn chia: ngang
Lưu ý rằng chiều cao của dải phân cách bắt đầu với chiều cao mặc định là 70%, sau đó di chuyển đến chiều cao 0% trên cuộn qua.
Bổ sung dải phân cách dưới
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 trên cùng: xem ảnh chụp màn hình Màu của dải phân cách trên: # 73ba57 Chiều cao của dải phân cách trên cùng: 70% (mặc định), 0% (di chuột qua)
Lật đầu ngăn chia: ngang
Bố cục dải phân cách: Ở đầu phần Nội dung
Dấu phân tách nền này cũng bắt đầu với chiều cao 70% sẽ thay đổi thành 0% khi di chuột. Tuy nhiên, vì tùy chọn bố cục dấu phân tách được đặt ở đầu nội dung, dấu phân tách phần sẽ ẩn phần dưới cùng của lời gọi hành động trong cột 1. Sau đó, khi di chuột, phần còn lại của l lời kêu gọi hành động được tiết lộ.
Kiểm tra kết quả cho đến nay.
Đã thêm hiệu ứng di chuột bóng hộp để chuyển đổi và thiết kế độc đáo
Để có thiết kế và chuyển tiếp di chuột độc đáo, chúng ta có thể thêm hiệu ứng di chuột qua bóng hộp sẽ diễn ra đồng thời với hiệu ứng di chuột theo chiều cao của dải phân cách. Để thực hiện việc này, hãy thêm bóng của hộp sau vào phần.
Box Shadow: xem ảnh chụp màn hình
Hộp bóng Vị trí ngang: 0px
Vị trí dọc của hộp Shadow: 0px
Lực lượng lây lan bóng hộp: 0px (mặc định), 150px (di chuột)
Màu bóng hộp: #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 lượng của quá trình chuyển đổi: 700ms
Kết quả cuối cùng
Đây là kết quả cuối cùng trên máy tính để bàn.
Dựa trên những gì chúng tôi đã làm ở trên, bạn sẽ có thể tùy chỉnh màn hình trên thiết bị di động và máy tính bảng.
cuối cùng suy nghĩ
Hy vọng hướng dẫn này đã cung cấp cho bạn một số cảm hứng để tạo các hiệu ứng di chuột qua phần chia độ cao độc đáo để hiển thị nội dung. Trên thực tế, việc điều chỉnh chiều cao của dải phân cách lơ lửng có thể là một yếu tố thiết kế đáng chú ý. Và các mẫu thiết kế sẽ giúp bạn bắt đầu khám phá và thiết kế của riêng bạn.
Hy vọng nhận được từ bạn trong các ý kiến.
Để sức khỏe của bạn!
