Các nút với phông chữ mang tính biểu tượng có nhiều công dụng trong thế giới thiết kế web. Vì các phông chữ biểu tượng luôn sắc nét về màu sắc và thiết kế khi chúng mở rộng theo các kích thước khác nhau, nên việc sử dụng chúng trong các nút là rất hợp lý. Và, việc tạo một nút với các phông chữ mang tính biểu tượng trên Divi thực sự khá dễ dàng bằng cách sử dụng các phông chữ từ thư viện " ElegantIcons". Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng phông chữ biểu tượng với mô-đun nút của Divi để tạo một nút biểu tượng duy nhất.
Một số điểm nổi bật của hướng dẫn này bao gồm:
- Cách sử dụng ElegantIcons để thêm một biểu tượng dưới dạng văn bản nút
- Cách thêm vùng đệm và bán kính đường viền để làm cho nút trông giống như một hình vuông hoặc hình tròn hoàn hảo
- Cách thay thế biểu tượng nút bằng một biểu tượng khác khi di chuột
- Cách định vị biểu tượng nút để che hình ảnh
- và hơn thế nữa ...
khảo sát
Đây là bản xem trước của những gì sắp tới ...
Bạn cần gì
Đối với hướng dẫn này, tôi sẽ sử dụng như sau:
- Chủ đề Divi (rõ ràng)
- Biểu tượng phông chữ thời trang, một hướng dẫn về Chủ đề thanh lịch chính xác hơn nhiều. Khi bạn đã tải xuống tệp zip từ bài đăng trên blog, chúng tôi sẽ kéo tệp đó vào tệp phông chữ eleganticons.ttf để sử dụng làm phông chữ tùy chỉnh cho mô-đun nút của chúng tôi.
- Trang chủ Bed & Breakfast (có sẵn miễn phí từ Divi Builder)
Hãy bắt đầu nào!
Thêm phông chữ Biểu tượng Thanh lịch vào mô-đun nút của bạn
Thêm mô-đun nút
Để bắt đầu, hãy tạo một trang mới và triển khai trình tạo trực quan. Chọn "Xây dựng từ Scratch", sau đó sau khi triển khai trình tạo trực quan, hãy thêm một hàng cột vào phần, sau đó thêm mô-đun nút vào hàng.
Kéo Phông chữ Biểu tượng Phong cách
Để có được trò chơi màu sắc ElegantFontsbạn có thể tải về gói phông chữ này thông qua liên kết này. Giải nén nó nội dung từ tệp zip và tìm các tệp phông chữ biểu tượng thanh lịch bằng cách điều hướng đến lớp Elegant_font > HTML CSS >. Sau đó kéo tệp “ElegantIcons.ttf” vào máy tính của bạn và thả nó vào trình tạo hình ảnh.
Thao tác này sẽ hiển thị chế độ Tự động tải xuống phông chữ. Chỉ cần nhấp vào nút tải xuống để tải phông chữ xuống Divi Builder.
Bây giờ bạn sẽ có quyền truy cập vào phông chữ biểu tượng phong cách khi tùy chỉnh phông chữ mod trong trình tạo trực quan.
Đi tới cài đặt mô-đun nút và cập nhật phông chữ nút bằng phông chữ Biểu tượng thanh lịch mới mà bạn vừa tải xuống. Nó sẽ xuất hiện trong danh sách các biểu tượng trong “Phông chữ Tùy chỉnh”.
Bạn có thể nhận thấy rằng văn bản nút của bạn đã được chuyển thành một loạt các biểu tượng. Thật vậy, mỗi ký tự được nhập trong vùng nhập văn bản nút giờ đây có một biểu tượng tương ứng với ký tự / ký tự hiện đang được sử dụng.
Vì chúng tôi chỉ cần một biểu tượng cho nút của mình, bạn có thể chọn bất kỳ ký tự nào trên bàn phím để tạo biểu tượng liên kết với ký tự đó. Ví dụ: nhập số 5 cho văn bản nút của bạn để có một mũi tên chữ V bên phải.
Các biểu tượng nút trao đổi khi di chuột
Như bạn đã biết, mô-đun nút bao gồm tùy chọn thêm biểu tượng khi di chuột. Chúng ta có thể sử dụng tính năng này để thay thế phông chữ biểu tượng bằng biểu tượng di chuột để có hiệu ứng di chuột đẹp mắt. Tất cả những gì chúng ta cần làm là thay đổi cài đặt nút như sau:
Nút Kích thước văn bản: 30px Biểu tượng nút: xem ảnh chụp màn hình (đây sẽ là biểu tượng sẽ thay thế biểu tượng phông chữ được sử dụng cho nút) Màu Biểu tượng Nút: # 0c71c3 (phải khớp với màu được sử dụng cho văn bản nút ) Vị trí biểu tượng nút: Màu văn bản di chuột của Nút trái: rgba (255,255,255,0) (điều này hoàn toàn trong suốt để ẩn phông chữ của biểu tượng nút di chuột). Điền tùy chỉnh: thứ nhất bên trái, thứ nhất bên phải (điền này sẽ thay thế mở rộng khi di chuột)
Bây giờ tất cả những gì chúng ta cần làm là thay thế lề cho phần tử phía trước trong css tùy chỉnh. Chuyển đến tab Nâng cao và nhập mã CSS sau vào hộp phía trước:
margin-left: 0 !important; |
Bây giờ biểu tượng nút của bạn sẽ được thay thế bằng biểu tượng di chuột qua.
Các nút biểu tượng sáng tạo có vòng tròn được chia tỷ lệ với kích thước văn bản nút
Các nút hình tròn hoạt động tốt cho các nút biểu tượng đơn lẻ. Và, nếu bạn hiểu cơ chế hoạt động bên trong của khoảng cách giữa các mô-đun nút, bạn có thể tạo các nút tròn hoàn hảo có kích thước tương đương với kích thước của văn bản nút.
Bí quyết là để trống nút của bạn bằng cách sử dụng đơn vị chiều dài "em". Đơn vị độ dài này có liên quan đến kích thước của văn bản trên nút của bạn. Vì vậy, nếu kích thước văn bản của nút là 30px, 1em cũng là 30px (2em sẽ là 60px, v.v.). Biết được điều này, chúng ta chỉ cần đảm bảo rằng phần đệm xung quanh nút của chúng ta sẽ giống nhau ở cả 4 mặt. Nhưng điều bạn có thể không cân nhắc là chiều cao dòng văn bản của nút theo mặc định là 1.7em. Điều này có nghĩa là chúng tôi phải xem xét điều này khi chúng tôi thêm các giá trị đệm trên cùng và dưới cùng của mình.
Đối với những người bạn muốn biết toán học đằng sau các giá trị đệm cần thiết để tạo các nút vòng tròn, đây là:
Đối với điền từ trái và phải, hãy đặt cả hai thành 1em. Điều này có nghĩa là tổng chiều rộng của nút của bạn sẽ là 90px (hoặc 3em) vì ...
Phần đệm 30px bên trái + 30px cho biểu tượng phông chữ + phần đệm 30px bên phải = tổng 90px
Chiều cao của dòng văn bản nút là 1.7em, tương đương với 170% kích thước văn bản nút (30px) là 51px.
Đối với phần đệm trên và dưới, hãy đặt cả hai thành 0,65em. 0.65em tương đương với 65% kích thước văn bản nút (30px), tương đương với 19.5px.
Vì vậy, ...
Phần đệm trên 19.5px + chiều cao dòng 51px + phần đệm dưới 19.5px = tổng 90px
Điều này có nghĩa là khi văn bản nút được đặt thành 30px, tổng kích thước của nút sẽ là 90px x 90px (một hình vuông hoàn hảo). Trên thực tế, bạn có thể nghĩ về nó theo cách đó. Bất kể kích thước của văn bản nút là bao nhiêu, tổng kích thước của nút là 3 lần giá trị. Vì vậy, văn bản nút 40px sẽ tạo ra một nút 120px x 120px, v.v.
Hiện tại, nút có kích thước chính xác, nhưng nó vẫn là hình vuông. Tất cả những gì chúng ta phải làm là thêm 50% bán kính đường viền để thay đổi nút vuông thành nút tròn hoàn hảo.
Dưới đây là những gì bạn cần để thay đổi nút của bạn thành một nút vòng tròn:
Nút Bán kính biên giới: 50%
Upholstery tùy chỉnh: 0.65em hàng đầu, 0.65em dưới, 1em thẳng, 1em trái
Hãy nhớ rằng, bạn có thể điều chỉnh kích thước văn bản của nút và nút sẽ nằm trong một vòng tròn hoàn hảo giống như điền kích thước văn bản.
Thêm nút trên Divi
Divi giúp bạn dễ dàng thêm và tùy chỉnh các nút biểu tượng độc đáo để phù hợp với thiết kế của bất kỳ bố cục định sẵn nào.
Đối với ví dụ này, tôi sẽ chỉ cho bạn cách thêm một nút biểu tượng duy nhất vào bố cục trang chủ Bed & Breakfast.
Để thêm bố cục vào trang của bạn, hãy mở menu cài đặt bằng cách nhấp vào biểu tượng màu tím ở cuối trang (đảm bảo rằng trình tạo trực quan được bật). Sau đó nhấp vào biểu tượng Tải từ thư viện. Chọn bố cục của trang chủ Bed & Breakfast và nhấp vào nút "Sử dụng bố cục này" để triển khai bố cục trên trang.
Thêm nút biểu tượng vào hình ảnh
Giả sử bạn muốn thêm một nút biểu tượng nhỏ để phủ lên góc của hình ảnh với một CTA bổ sung liên quan đến một sản phẩm hoặc dịch vụ cụ thể. Tất cả những gì bạn cần làm là thêm một mô-đun nút bên dưới hình ảnh và tùy chỉnh nó để bao gồm phông chữ của biểu tượng và đặt nó chồng lên hình ảnh với khoảng cách tùy chỉnh.
Tìm phần "Giới thiệu về chúng tôi" trên trang chủ. Sau đó, thêm một mô-đun nút ngay bên dưới một trong những hình ảnh được sử dụng để trình bày "Phòng Đôi" (hình ảnh đầu tiên trong cột đầu tiên của hàng ba cột).
Sau đó, mở cài đặt nút và viết hoa "P" vào hộp văn bản của nút. Điều này sẽ thay đổi trong biểu tượng của chúng tôi khi bạn chọn bộ nền tuyệt vời như phông chữ nút.
Để nhanh chóng bắt đầu khớp thiết kế nút với bố cục, hãy lưu cài đặt nút của bạn và tìm nút "Đặt ngay" ở đầu bố cục. Mở Cài đặt nút và sao chép kiểu nút bằng cách nhấp chuột phải vào tiêu đề chuyển đổi Tùy chọn nút và chọn tùy chọn “Sao chép kiểu nút” từ danh sách.
Bây giờ, nhấp chuột phải vào mô-đun bạn đã thêm bên dưới hình ảnh và chọn "Dán kiểu nút".
Sau đó cập nhật cài đặt nút như sau:
Nút phông chữ: Phông chữ tuyệt vời
nút phông chữ Chiều rộng đường viền: 0px
Hiển thị biểu tượng nút: KHÔNG
Sau đó thêm phần đệm tùy chỉnh thông minh của chúng tôi để nút là một hình vuông hoàn hảo:
Tùy chỉnh đệm: 0.65em hàng đầu, 0.65em dưới, 1em trái, 1em
Để định vị nút sao cho nó che đi góc dưới bên phải của hình ảnh, trước tiên bạn phải loại bỏ lề dưới khỏi mô-đun hình ảnh ở trên. Mở cài đặt Mô-đun Hình ảnh Hình ảnh ngay trên nút và đặt Lề dưới cùng thành 0px.
Bây giờ chúng ta cần kéo nút trên hình ảnh bằng cách sử dụng giá trị lề âm tùy chỉnh bằng chiều cao của nút. Để làm điều này, chúng tôi cần xác định chiều cao của nút của chúng tôi.
Như đã đề cập trước đó trong bài viết này, với vị trí điền tùy chỉnh, chúng ta có thể biết kích thước chính xác của nút dựa trên kích thước hiện tại của văn bản nút. Vì kích thước văn bản của nút là 20px, chúng tôi biết chiều cao nút của chúng ta là 3em (gấp 3 lần kích thước văn bản của nút), là 60px. Do đó, chúng ta cần đặt lề tùy chỉnh cho nút của mình như sau:
Ký hiệu tùy chỉnh: -60px Hàng đầu
Và sau đó chúng ta có thể định vị nút bên phải bằng cách điều chỉnh căn chỉnh của nút bên phải.
Bây giờ chúng ta có một thiết kế hoạt động cho hình ảnh và nút của chúng ta. Tất cả những gì chúng ta phải làm là thêm nút giống nhau vào tất cả các hình ảnh trong phần.
Vì chúng tôi đã loại bỏ lề dưới của hình ảnh, chúng tôi có thể dễ dàng áp dụng thay đổi này cho tất cả các hình ảnh trong phần bằng cách sử dụng tùy chọn Mở rộng Kiểu. Nhấp chuột phải vào hình ảnh và chọn "Mở rộng Kiểu hình ảnh".
Trong hộp thoại Mở rộng Kiểu, chọn “Phần này” cho tùy chọn Ngang và nhấp vào nút Mở rộng. Bây giờ tất cả các hình ảnh đều có lề dưới 0px.
Bước cuối cùng chỉ đơn giản là sao chép và dán các mô-đun Nút dưới mỗi hình ảnh.
Đây là thiết kế cuối cùng.
Và bởi vì chúng tôi đã sử dụng các kỹ thuật giãn cách thích hợp, nút cũng sẽ giữ nguyên vị trí trên thiết bị di động ...
Các biểu tượng có sẵn bằng mô-đun nút
Vì văn bản nút mô-đun nút được giới hạn trong các ký tự có sẵn trên bàn phím, bạn sẽ cần khám phá các phím này để tìm các biểu tượng có sẵn được liên kết với mỗi phím. Một cách dễ dàng để làm điều này là tạo mô-đun nút với phông chữ nút được đặt thành phông chữ trang nhã và nhập các ký tự vào hộp văn bản nút.
Đây là ảnh chụp màn hình của các ký tự với biểu tượng phông chữ tương ứng của họ:
Nếu bạn thấy danh sách này hơi đầy đủ, bạn luôn có thể sử dụng mô-đun văn bản để tạo các liên kết biểu tượng bằng cách sử dụng các mã Unic được liệt kê. ici .
cuối cùng suy nghĩ
Sử dụng Biểu tượng thanh lịch với Mô-đun nút của Divi là một cách thuận tiện để tạo các nút độc đáo cho Website. Điều này mở ra cánh cửa cho sự sáng tạo với cài đặt mô-đun để tùy chỉnh nút của bạn với các kiểu văn bản độc đáo, hiệu ứng di chuột và hơn thế nữa. Tôi đặc biệt thích các giá trị khoảng cách nút tùy chỉnh đảm bảo các nút có hình dạng của một hình vuông hoặc hình tròn hoàn hảo.
Có rất nhiều cách sử dụng cho các nút biểu tượng. Hy vọng rằng ví dụ sử dụng được đề cập trong hướng dẫn này sẽ thêm một số cảm hứng cho các dự án của riêng bạn.
