Bạn có muốn biết cách sử dụng mô-đun Biểu tượng của Divi để tạo các biểu tượng tùy chỉnh?
Các nút biểu tượng đã trở thành một yếu tố quan trọng trong thế giới thiết kế web. Các biểu tượng cung cấp các lời gọi hành động trực quan ngắn gọn, hoạt động hiệu quả cho các thiết bị di động vì chúng không chiếm nhiều dung lượng. Chúng cũng hoạt động tốt như các nút bật tắt hoặc bật lên mà người dùng nhận ra bằng trực giác mà không cần đến văn bản.
Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn cách thiết kế các nút biểu tượng với Divi. Tạo một nút biểu tượng trong Divi khá đơn giản và thú vị để làm.
Sử dụng mô-đun Biểu tượng, chúng ta có thể chọn từ hàng trăm biểu tượng và sử dụng vô số tùy chọn thiết kế tích hợp từ Divi Builder để tạo bất kỳ loại nút biểu tượng nào bạn có thể nghĩ tới.
Chúng tôi hy vọng bài viết này sẽ giúp bạn bắt đầu tạo các nút biểu tượng tuyệt vời cho dự án tiếp theo của mình.
Hãy bắt đầu!
khảo sát
Dưới đây là tổng quan nhanh về các nút biểu tượng mà chúng tôi sẽ tạo trong hướng dẫn này.
Tạo một trang mới với Divi Builder
Xem thêm: Divi: Cách tùy chỉnh giỏ hàng và các biểu tượng tìm kiếm của mô-đun "Fullwidth Menu"
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.
Tạo các nút biểu tượng bằng mô-đun Divi Icons
Phần 1: Tạo một nút biểu tượng
Để bắt đầu, hãy thêm một hàng một cột vào phần thông thường mặc định.
Sau đó, thêm một mô-đun mới Biểu tượng vào cột.
Biểu tượng, URL liên kết và màu nền
Dưới tab Nội dung cài đặt mô-đun biểu tượng, cập nhật những điều sau:
- Biểu tượng: Mũi tên phải (xem ảnh chụp màn hình)
- URL liên kết biểu tượng: # (hiện tại chỉ là phần bổ sung)
- Nền: # 3e22ff
Biên giới và bán kính biên giới
Dưới tab Thiết kế, cập nhật những điều sau:
- Góc tròn: 10px
- Chiều rộng đường viền: 2px
- Màu viền: # 7272ff
Hộp bóng
- Box Shadow: Xem ảnh chụp màn hình
- Màu bóng: rgba (62,34,255,0.48)
Khớp không gian có thể nhấp với kích thước nút biểu tượng
Hiện tại, mô-đun biểu tượng sẽ kéo dài toàn bộ chiều rộng của vùng chứa mẹ (hoặc cột). Điều này có nghĩa là không gian có thể nhấp lớn hơn so với nút biểu tượng thực tế.
Để phù hợp với không gian có thể nhấp với kích thước của nút biểu tượng, chúng tôi có thể cung cấp cho mô-đun chiều rộng tối đa bằng với chiều rộng của nút biểu tượng.
Trong ví dụ này, tổng chiều rộng của nút là 94 pixel.
Trong tab nâng cao, thêm CSS tùy chỉnh sau vào phần tử chính:
max-width: 94px
Đây là kết quả.
Phần 2: Tạo nút biểu tượng hình vuông
Để tạo nút biểu tượng hình vuông của chúng ta, hãy sao chép hàng có chứa nút biểu tượng đầu tiên mà chúng ta vừa tạo. Điều này sẽ cung cấp cho chúng tôi một nút trùng lặp trong hàng để làm việc.
Cung cấp cho biểu tượng cùng chiều cao và chiều rộng trong khi giữ nó ở giữa
Bộ sưu tập lớn các biểu tượng có sẵn để sử dụng trong mô-đun Biểu tượng bao gồm cả biểu tượng Divi và biểu tượng Fontawesome. Tuy nhiên, không phải tất cả các biểu tượng sẽ có cùng chiều cao và chiều rộng. Điều này làm cho nó khó khăn hơn một chút để xác định chiều rộng và chiều cao chính xác của nút biểu tượng.
Để tạo một nút vuông hoàn hảo thu hút biểu tượng khi di chuột, chúng ta có thể thêm CSS tùy chỉnh để đặt chiều cao và chiều rộng cho biểu tượng cũng như căn giữa biểu tượng bằng thuộc tính CSS Flex.
Đây là cách.
Đầu tiên, mở cài đặt biểu tượng trùng lặp. Sau đó, cập nhật biểu tượng bằng một biểu tượng mới từ bộ chọn biểu tượng.
Xóa phần đệm khỏi mô-đun biểu tượng. Điều này sẽ không cần thiết vì chúng tôi sẽ đặt chiều cao và chiều rộng cho biểu tượng.
Trong tab nâng cao, thêm CSS tùy chỉnh sau vào Yếu tố biểu tượng :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Bây giờ nút biểu tượng sẽ có chiều cao và chiều rộng bằng 90 pixel, làm cho nó trở thành một hình vuông hoàn hảo. Ngoài ra, thuộc tính flex căn chỉnh biểu tượng ở trung tâm của mô-đun. Điều này cho phép bạn dễ dàng cập nhật kích thước biểu tượng trong mô-đun biểu tượng.
Để hoàn thành nút này, hãy tạo cho nó một gradient nền và màu viền trắng như sau:
- Dừng Gradient:
- 0%: # 3e22ff
- 100%: # ff2000
- Màu viền: #fff
Đây là kết quả cuối cùng.
Nút tạo biểu tượng hình tròn
Một khi nút biểu tượng là một hình vuông hoàn hảo, việc làm cho nó trở thành hình tròn rất đơn giản. Nhưng trước khi chỉ cho bạn thủ thuật đơn giản này, hãy nhân đôi dòng trước đó để bắt đầu xây dựng nút biểu tượng hình tròn của chúng ta.
Bây giờ, hãy mở cài đặt cho biểu tượng trùng lặp mới của chúng tôi và trong tab Thiết kế, cập nhật bán kính đường viền (hoặc các góc tròn) như sau:
- Góc tròn: 50%
Và chỉ như vậy, chúng ta có một nút biểu tượng hình tròn!
Để thay đổi thiết kế một chút, hãy cung cấp cho mô-đun biểu tượng một biểu tượng và màu nền khác như sau:
- Biểu tượng: xem ảnh chụp màn hình
- Nền: # 121212
Đây là kết quả.
Tạo một nút biểu tượng menu ngang
Một xu hướng phổ biến là sử dụng các biểu tượng để tạo menu biểu tượng thường bao gồm một số nút được đặt cạnh nhau. Để làm điều này, chúng ta có thể sử dụng thuộc tính flex.
Đây là cách để làm điều đó.
Đầu tiên, thêm một hàng mới vào một cột trên trang.
Mở cài đặt đường và cập nhật chiều rộng rãnh lên 1.
- Chiều rộng máng xối: 1
Tiếp theo, mở cài đặt cột bên trong hàng và thêm CSS tùy chỉnh sau vào phần tử cột chính:
display:flex;
align-items:center;
Thêm một mô-đun mới Biểu tượng vào cột.
Dưới tab Nội dung cài đặt biểu tượng, chọn một biểu tượng và thêm URL liên kết biểu tượng.
Dưới tab Thiết kế, cập nhật những điều sau:
- Màu biểu tượng: # 3e22ff
- Kích thước biểu tượng: 40px
- Lề (Trái và Phải): 10px
- Chiều rộng đường viền: 2px
- Màu viền: # 3e22ff
NHẬN XÉT : Lề sẽ tạo khoảng trống giữa các nút liền kề sau khi chúng ta thêm vào sau.
Dưới tab Nâng cao, thêm CSS tùy chỉnh sau vào trường Yếu tố biểu tượng (như chúng tôi đã làm trước đó cho nút biểu tượng hình vuông):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Bây giờ bất cứ khi nào chúng tôi thêm các nút biểu tượng mới, chúng sẽ xuất hiện cạnh nhau. Để minh họa điều này, hãy nhân đôi nút biểu tượng hiện có ba lần để tạo tổng cộng bốn nút biểu tượng trong menu ngang.
Sau đó, chúng ta có thể quay lại và cập nhật các biểu tượng khi cần thiết.
Đây là kết quả.
Đã thêm hiệu ứng di chuột vào nút biểu tượng
Thật khó để nói về thiết kế nút biểu tượng mà không đề cập đến hiệu ứng di chuột. Họ chỉ là quá vui để bỏ qua.
Thay đổi màu nền và màu biểu tượng khi di chuột
Thay đổi màu sắc của nút là một hiệu ứng di chuột phổ biến và hiệu quả. Ví dụ, chúng ta có thể thay đổi đồng thời màu nền và màu biểu tượng khi người dùng di chuột qua nút.
Để thực hiện việc này, hãy mở cài đặt mô-đun biểu tượng và bật các tùy chọn di chuột cho màu nền và chọn một màu khác cho trạng thái di chuột. Sau đó, bạn có thể làm tương tự cho biểu tượng.
Trong ví dụ này, chúng tôi thay đổi màu nền từ trắng sang xanh lam và biểu tượng từ xanh lam sang trắng.
Thay đổi biểu tượng khi di chuột
Một hiệu ứng di chuột khác mà bạn có thể thích là thay đổi hoàn toàn biểu tượng. Để thực hiện việc này, bạn có thể chọn một biểu tượng khác cho trạng thái di chuột khi bạn chọn một biểu tượng trong cài đặt biểu tượng.
Tỷ lệ nút biểu tượng khi di chuột
Một hiệu ứng di chuột khó có thể bỏ qua là hiệu ứng di chuột mở rộng. Điều này phóng to hoặc phóng to nút biểu tượng. Cách tốt nhất để thêm loại hiệu ứng di chuột này là sử dụng các tùy chọn biến đổi của Divi. Điều này sẽ cho phép nút phát triển mà không ảnh hưởng đến các yếu tố xung quanh nó.
Để thêm hiệu ứng di chuột theo tỷ lệ vào nút biểu tượng, hãy mở cài đặt biểu tượng và trong tab Thiết kế, tìm kiếm các tùy chọn chuyển đổi. Bật tùy chọn di chuột, sau đó chỉ định tỷ lệ chuyển đổi sau cho trạng thái di chuột:
- Biến đổi Y: 118%
- Biến đổi X: 118%
Điều này sẽ tăng kích thước của nút biểu tượng lên 18% khi người dùng di chuột qua nó.
Xoay nút biểu tượng khi di chuột
Xoay các vật thể lơ lửng luôn là một tương tác vi mô thú vị. Để xoay nút biểu tượng khi di chuột, chúng ta có thể sử dụng tùy chọn xoay chuyển đổi. Nhưng trước đó, hãy làm cho nút tròn để chỉ có biểu tượng xuất hiện để xoay.
Để làm cho biểu tượng hình tròn, giả sử nút là hình vuông, chỉ cần cập nhật cài đặt góc tròn thành 50% trên tất cả bốn góc.
Sau đó, cập nhật các tùy chọn chuyển đổi để bao gồm giá trị xoay chuyển đổi sau ở trạng thái di chuột:
- Biến đổi Xoay Z: 180deg
Chúng ta hãy xem xét 4 hiệu ứng di chuột đang hoạt động.
Kết quả cuối cùng
Hãy cùng xem kết quả cuối cùng của hướng dẫn của chúng tôi.
Đọc cũng: Divi: Cách làm nổi bật mô-đun “Làm nổi bật” khi di chuột và làm mờ các mô-đun khác
Đây là ba nút biểu tượng của chúng tôi (tiêu chuẩn, hình vuông và hình tròn).
Và đây là menu nút biểu tượng ngang với các hiệu ứng di chuột.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Biết cách thiết kế các nút biểu tượng cho một Website là điều cần thiết. Và, như chúng ta đã thấy trong hướng dẫn này, nó không quá khó với Divi. Mô-đun Biểu tượng của Divi có một loạt các tùy chọn tích hợp mở ra cánh cửa cho các thiết kế nút biểu tượng sáng tạo.
Hy vọng rằng các kỹ thuật trong bài viết này sẽ giúp bạn mở khóa một số điều kỳ diệu của các thiết kế nút biểu tượng của riêng 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.
...
