Bạn có muốn tạo menu Divi nguyên bản dưới dạng bánh xe quay khi di chuột không?
Tạo bánh xe menu xoay khi di chuột là một cách thú vị để giới thiệu các liên kết hữu ích trên Website. Đây sẽ là một cách tuyệt vời để cung cấp nhiều lời kêu gọi hành động trong tiêu đề để hướng người dùng đến nơi họ cần đến. Và nó cũng sẽ là một menu danh mục phụ thú vị dành cho blog của bạn.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo bánh xe menu xoay khi di chuột trong Divi. Điều này có thể được thực hiện bằng cách sử dụng kết hợp các tùy chọn Divi tích hợp sẵn và một số đoạn mã css tùy chỉnh.
khảo sát
Trước khi đi vào hướng dẫn này, chúng ta hãy xem kết quả mà chúng ta muốn đạt được.
Tải xuống DIVI ngay bây giờ !!!
Tạo một trang mới với Divi Builder
Để bắt đầu, bạn sẽ cần những thứ sau:
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ế bánh xe menu xoay trong Divi
Tạo phần và dòng 1
Trong phần được hiển thị theo mặc định, hãy thêm một hàng có cấu trúc cột sau.
Sau đó, thêm một mô-đun văn bản vào dòng có nội dung sau.
Tiếp theo, cập nhật thiết kế văn bản như sau:
- Phông chữ văn bản: Share Tech
- Khoảng cách chữ cái văn bản: 1px
- Tiêu đề 2 Kích thước văn bản: 8vw
Thêm dòng 2 để tạo bánh xe
Tiếp theo, chúng ta cần thêm một hàng mới vào một cột bên dưới hàng 1.
Trước khi bắt đầu thêm các mô-đun Văn bản cho các liên kết của mình, chúng ta cần thiết kế đường của mình như một bánh xe. Sẽ có rất nhiều tối ưu hóa cần thiết ở hàng để tạo ra thiết kế bánh xe của chúng tôi.
Đọc cũng: Cách hiển thị nội dung trên Dải phân cách phần di chuột trong Divi
Để bắt đầu, hãy mở cài đặt Hàng 2 và cập nhật những điều sau:
- Màu nền: # 02366b
- Màu nền bên trái gradient: rgba (0,0,0,0.45)
- Màu gradient nền bên phải: # 02366b
- Loại Gradient: Hình tròn
- Hướng xuyên tâm: Trung tâm
- Vị trí bắt đầu: 36%
- Vị trí kết thúc: 0%
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng máng xối: 1
- Chiều rộng: 500px
- Chiều rộng tối đa: 500px (Máy tính để bàn), tự động (Máy tính bảng và Điện thoại)
- Chiều cao: 500px (Máy tính để bàn), tự động (Máy tính bảng và Điện thoại)
- Padding (Máy tính để bàn): 0px (Trên cùng và Dưới cùng)
- Padding (Máy tính bảng và Điện thoại): 20px (Trên cùng, Dưới cùng và Bên trái)
- Ký quỹ (Điện thoại): -10% (Phải)
Chúng ta cần đặt cả chiều cao và chiều rộng của đường thẳng là 500 pixel để nó là một hình vuông hoàn hảo. Điều này sẽ cho phép chúng tôi tạo cho nó một hình tròn hoàn hảo bằng cách sử dụng tùy chọn các góc tròn (bán kính đường viền) của Divi.
- Góc tròn: 50%
Sau đó, chúng ta có thể thêm một cấp độ khác của thiết kế hình tròn bằng cách sử dụng bóng hộp như sau:
- Độ mạnh của Box Shadow Blur: 0px
- Sức mạnh lan tỏa của Box Shadow: 210px
- Màu bóng: rgba (2,54,107,0.66)
Tiếp theo, chúng tôi sẽ thêm một đoạn CSS nhỏ để căn giữa nội dung hàng của chúng tôi theo chiều dọc. Dưới tab Nâng cao, thêm CSS tùy chỉnh sau trong phần tử chính.
display:flex;align-items:center;
Thêm liên kết
Mỗi liên kết trong bánh xe sẽ được tạo bằng một mô-đun bản văn. Chúng tôi sẽ tạo tổng cộng sáu mô-đun bản văn. Năm trong số các mô-đun bản văn sẽ chứa các liên kết cho bánh xe và cái kia sẽ chứa tiêu đề của menu.
Bắt đầu bằng cách tạo mô-đun “Văn bản” mới.
Tiếp theo, cập nhật cài đặt văn bản như sau:
- Bộ đồ liền thân: “Yếu tố 1”
- Phông chữ văn bản: Share Tech
- Màu văn bản: #ffffff
- Kích thước: 16px (mặc định), 20px (Di chuột)
- Khoảng cách chữ cái: 1px
- Chiều cao dòng văn bản: 60px
- Chiều rộng: 250px (Máy tính để bàn), tự động (Máy tính bảng và Điện thoại)
- Chiều cao: 60px
- Phần đệm (Trái): 20px
Lưu cài đặt ngay bây giờ. Sau đó, sao chép mô-đun văn bản 4 lần để tạo tổng cộng 5 mô-đun văn bản.
Định vị liên kết / mô-đun văn bản
Bây giờ chúng tôi đã sẵn sàng để định vị các liên kết của chúng tôi dọc theo chu vi của bánh xe. Để làm điều này, chúng tôi sẽ cập nhật từng mô-đun bản văn với các tùy chọn chuyển đổi di chuyển / dịch và xoay mô-đun tại chỗ.
Khám phá thêm: Cách tạo lưới cột chất lỏng khi di chuột trong divi
Để tạo điều kiện thuận lợi cho việc này, hãy triển khai chế độ hiển thị khung dây và gắn nhãn các mô-đun Văn bản bắt đầu bằng liên kết 1 ở trên cùng đến liên kết 5 ở dưới cùng.
Liên 1
Chúng tôi sẽ bắt đầu bằng cách chỉnh sửa Liên kết 1. Mở cài đặt mô-đun Văn bản cho Liên kết 1 và cập nhật những điều sau:
- Chuyển đổi Dịch (trục Y): 120 px (Máy tính để bàn), 0 px (Máy tính bảng và Điện thoại)
- Chuyển đổi Xoay (trục Z): 60 độ (Máy tính để bàn), 0 px (Máy tính bảng và Điện thoại)
- Nguồn gốc: 50% (giữa bên phải)
Liên 2
Mở cài đặt mô-đun văn bản cho liên kết 2 và cập nhật phần sau:
- Chuyển đổi
- Dịch (trục Y): 60px (Máy tính để bàn), 0px (Máy tính bảng và Điện thoại)
- Xoay trục Z: 30deg (Máy tính để bàn), 0px (Máy tính bảng và Điện thoại)
- Nguồn gốc: 50% (giữa bên phải)
Liên 3
Vì mô-đun Văn bản cho liên kết 3 nằm ở giữa, chúng ta có thể để nó ở vị trí cũ.
Liên 4
Mở cài đặt mô-đun văn bản cho liên kết 2 và cập nhật phần sau:
- Biến đổi :
- Dịch trục Y: -60px (Máy tính để bàn), 0px (Máy tính bảng và Điện thoại)
- Xoay trục Z: -30deg (Máy tính để bàn), 0px (Máy tính bảng và Điện thoại)
- Nguồn gốc: 50% (Chính giữa)
Liên 5
Mở cài đặt mô-đun văn bản cho liên kết 2 và cập nhật phần sau:
- Biến đổi :
- Dịch trục Y: -120px (Máy tính để bàn), 0px (Máy tính bảng và Điện thoại)
- Xoay trục Z: -60deg (Máy tính để bàn), 0px (Máy tính bảng và Điện thoại)
- Nguồn gốc: 50% (giữa bên phải)
Bây giờ chúng ta hãy xem kết quả cho đến nay. Lưu ý cách các liên kết / văn bản trong các mô-đun văn bản chạy hoàn hảo dọc theo chu vi của hình tròn.
Đã thêm nhãn menu
Để thêm nhãn menu, chúng ta sẽ cần thêm một mô-đun Văn bản khác lên trên năm mô-đun Văn bản mà chúng tôi đã có. Hãy tiếp tục và thêm một mô-đun Văn bản mới ở trên liên kết 1.
Tiếp theo, cập nhật nội dung phần thân với những nội dung sau:
Menu
Sau đó, để tăng tốc thiết kế, hãy sao chép các kiểu mô-đun Văn bản cho liên kết 3 và dán các kiểu mô-đun này vào mô-đun Văn bản mới.
Sau đó, cập nhật những điều sau:
- Chiều cao dòng văn bản: 300px (Máy tính để bàn), 20px (Máy tính bảng và điện thoại)
- Chiều cao: khôi phục cài đặt mặc định (tự động)
- Chuyển đổi Xoay (trục Z): 180 độ (Máy tính để bàn), 0 độ (Máy tính bảng và Điện thoại)
- Nguồn gốc biến đổi: 50% (giữa bên phải)
Sau khi thực hiện xong, chúng ta cần cung cấp cho mô-đun Văn bản Nhãn Menu ở một vị trí tuyệt đối. Để thực hiện việc này, hãy thêm CSS tùy chỉnh sau vào phần tử chính:
position: absolute!important;
Bây giờ hãy tìm hiểu kết quả. Bạn sẽ thấy mục menu lộn ngược bên phải bánh xe.
Đã thêm hiệu ứng di chuột quay vào đường / bánh xe
Để thêm hiệu ứng di chuột quay vào hàng, hãy cập nhật cài đặt hàng như sau:
- Chuyển đổi Xoay (trục Z): 180 độ (Máy tính để bàn), 0 độ (Di chuột), 0 độ (Máy tính bảng và Điện thoại)
Tiếp theo, cập nhật cài đặt chuyển đổi như sau:
- Thời gian chuyển tiếp: 450ms
- Chuyển đổi đường cong tốc độ: Dễ dàng vào-ra
Bây giờ hãy quan sát cách bánh xe quay khi di chuột qua nó.
Tạo bố cục hai cột cho phần
Hiện tại, bố cục bao gồm hai hàng một cột xếp chồng lên nhau. Tuy nhiên, chúng ta có thể sử dụng thuộc tính flex css để căn chỉnh hai đường theo chiều ngang.
Để làm điều này, chúng ta có thể thêm một đoạn CSS tùy chỉnh nhỏ vào phần này. Sau khi hoàn tất, chúng tôi sẽ cần điều chỉnh khoảng cách một chút để mọi thứ vừa phải.
Mở cài đặt phần và thêm css tùy chỉnh sau vào phần tử chính:
display:flex;
Cập nhật khoảng cách dòng 1
Tiếp theo, cập nhật kích thước và khoảng cách của dòng 1 như sau:
- Chiều rộng: 40% (Máy tính để bàn)
- Lề (Máy tính để bàn): Còn 5%
Kết quả cuối cùng
Bây giờ hãy xem kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Thiết kế nửa bánh thay thế
Một thiết kế thay thế đẹp là ẩn nửa bên phải của bánh xe ở bên ngoài phần để các liên kết được ẩn và sau đó được hiển thị khi di chuột.
Để làm điều này, hãy tiếp tục và sao chép toàn bộ phần có chứa bản vẽ chúng ta vừa tạo.
Trong phần trùng lặp, hãy cập nhật các thông số ở dòng 1 như sau:
- Chiều rộng: 70% (máy tính để bàn)
Tiếp theo, cập nhật các thông số ở dòng 2 để đẩy bánh xe ra khỏi mặt cắt như sau:
- Lề: -250px bên phải
Chúng ta cần sử dụng -250px vì tổng chiều rộng của bánh xe là 500px và chúng ta muốn ẩn chính xác một nửa đường.
Sau đó, đặt chế độ hiển thị của phần thành ẩn như sau:
- Tràn ngang: Ẩn
- Tràn dọc: Ẩn
Đây là kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Bánh xe liên kết quay là một trong những yếu tố thiết kế phong cách có thể thu hút khách với hiệu ứng di chuột tinh tế và độc đáo. Và thật đáng ngạc nhiên là thiết kế này có thể được thực hiện dễ dàng như thế nào với cài đặt thiết kế tích hợp sẵn của Divi.
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.
...
