Bỏ qua đến nội dung chính

Cách tạo nút có biểu tượng trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Các nút có biểu tượng phông chữ có nhiều ứng dụng trong thế giới thiết kế web. Vì phông chữ biểu tượng vẫn sắc nét về màu sắc và thiết kế khi chúng phát triển đến các kích cỡ khác nhau, nên sử dụng chúng trong các nút. Và, việc tạo một nút với các biểu tượng phông chữ trên Divi thực sự khá dễ dàng bằng cách sử dụng các phông chữ trong 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 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 biểu tượng làm văn bản nút
  • Cách thêm phần đệm và bán kính đường viền sao cho nút có hình dạng của hình vuông hoặc hình tròn hoàn hảo
  • Cách thay biểu tượng nút bằng biểu tượng khác khi bay qua
  • Cách định vị biểu tượng nút để phủ một hình ảnh
  • và hơn thế nữa ...

khảo sát

Đây là bản xem trước những gì sắp diễn ra ...

nút phông chữ biểu tượng

thay đổi kích thước của một nút divi image.gif

nút trình diễn divi list delements.png

Bạn cần gì

Đối với hướng dẫn này, tôi sẽ sử dụng như sau:

  • Chủ đề Divi (hiển nhiên)
  • Biểu tượng phông chữ phong cách, 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!

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 hình ảnh. Chọn "Tạo từ đầu", sau đó, sau khi trình tạo hình ảnh được triển khai, hãy thêm hàng cột vào phần và thêm mô-đun nút vào dòng.

thêm một nút divi builder.jpg

Kéo phông chữ của biểu tượng thanh lịch

Để có được trò chơi màu sắc ElegantFontsbạn có thể tải xuống gói phông chữ này thông qua liên kết này. Trích xuất nội dung của 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> CSS CSS>. Sau đó kéo tập tin "ElegantIcons.ttf" vào máy tính của bạn và thả nó vào trình tạo hình ảnh.

giải nén tệp zip divi.jpg

Thao tác này sẽ tự động tải xuống phương thức Tải xuống phông chữ một cách tự động. Chỉ cần nhấp vào nút tải xuống để tải xuống phông chữ cho Divi Builder.

đặt trực tuyến divi.jpg

Bây giờ bạn sẽ có quyền truy cập vào phông chữ biểu tượng thanh lịch khi tùy chỉnh phông chữ mô-đun trong trình tạo hình ảnh.

Đ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".

nút font divi.jpg

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 vào hộp văn bản của nút bây giờ có một biểu tượng tương ứng với ký tự / ký tự hiện đang được sử dụng.

sử dụng biểu tượng button.jpg

Vì chúng tôi chỉ cần một biểu tượng cho nút của chúng tôi, 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 được 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ó được một mũi tên chevron đúng.

icon button divi 5.jpg

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 tôi 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 cho 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ác thiết lập nút như sau:

Text Size nút: Biểu tượng Nút 30px Xem ảnh chụp màn hình (điều này sẽ là biểu tượng đó sẽ thay thế phông chữ biểu tượng sử dụng cho nút) màu Biểu tượng Button: # 0c71c3 (mà phải phù hợp với màu sắc sử dụng cho các văn bản của các nút ) Biểu tượng nút vị trí: Màu văn bản flyover nút trái: rgba (255,255,255,0) (điều này hoàn toàn trong suốt để ẩn phông chữ biểu tượng nút di chuột). Tùy chỉnh điền: 1em bên trái, 1em bên phải (điền này sẽ thay thế mở rộng di chuột)

nút tùy chỉnh divi.jpg

Bây giờ, tất cả những gì chúng ta cần làm là thay thế lề cho mục 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 trước:

margin-left: 0 ! important;

thêm một nút margin diiv.png

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

Bây giờ biểu tượng của nút của bạn sẽ được thay thế bằng biểu tượng di chuột qua.

nút trình diễn được thay thế tại hover.gif

Tạo các nút biểu tượng với hình tròn được phóng to với kích thước văn bản nút

Các nút tròn hoạt động tốt cho các nút biểu tượng duy nhất. Và, nếu bạn hiểu các hoạt động bên trong của khoảng cách mô-đun nút, bạn có thể tạo các nút tròn hoàn hảo phù hợp với kích thước của văn bản nút.

Bí quyết là để không gian nút của bạn bằng cách sử dụng đơn vị chiều dài "em". Đơn vị này có độ dài tương đối so với kích thước của văn bản nút của bạn. Vì vậy, nếu kích thước của văn bản của nút là 30px, 1em giá trị cũng là 30px (2em giá trị sẽ là 60px ...). 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 trên các mặt của 4. Nhưng những gì bạn có thể đã không được xem xét là chiều cao dòng của văn bản nút là 1.7em theo mặc định. Điều này có nghĩa rằng chúng ta phải cân nhắc điều này khi chúng ta thêm giá trị đệm trên và dưới của chúng tôi.

Đối với những người bạn muốn biết toán học đằng sau các giá trị điền cần thiết để tạo các nút vòng tròn, dưới đây là:

Để điền vào bên trái và bên 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ì ...

30px padding left + 30px cho font-icon + 30px padding right = Tổng số 90px

Chiều cao của dòng văn bản của nút là 1.7em, tương đương với 170% kích thước văn bản của nút (30px) là 51px.

Đối với điền trên cùng và dưới cùng, đặt cả hai thành 0,65em. 0.65em là tương đương với 65% của kích thước văn bản nút (30px), tương đương với 19.5px.

Vì vậy, ...

19.5px trên đệm + 51px chiều cao dòng + 19.5px padding thấp hơn = Tổng số 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 trên 90px (hình vuông hoàn hảo). Trong 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, tổng kích thước của nút là 3 lần giá trị. Do đó, một văn bản nút của 40 pixel sẽ tạo ra một nút của 120 pixel bởi 120 pixel, v.v.

Ngay bây giờ, nút có kích thước phù hợp, nhưng nó vẫn vuông. Tất cả chúng ta phải làm là thêm một bán kính biên giới của 50% để thay đổi nút hình vuông thành một 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

sửa đổi button.png

Hãy nhớ rằng, bạn có thể điều chỉnh kích thước của văn bản nút và nút sẽ hoàn toàn trong vòng tròn như điền kích thước văn bản.

tùy chỉnh kích thước của nút.gif

Thêm các 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 duy nhất để phù hợp với thiết kế của bất kỳ bố cục được xác định trước nào.

Trong ví dụ này, tôi sẽ chỉ cho bạn cách thêm một nút biểu tượng vào bố cục của trang chủ Bed & Breakfast.

Để thêm bố cục trang 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ía ở cuối trang (đảm bảo trình tạo hình ảnh được bật). Sau đó bấm vào biểu tượng Load 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.

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

chọn bố cục divi.png

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ỏ để che phủ góc của hình ảnh với một CTA bổ sung được liên kết với một sản phẩm hoặc dịch vụ cụ thể. Tất cả bạn phải 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ữ biểu tượng và đảm bảo rằng nó trùng lặp hình ảnh với khoảng cách tùy chỉnh.

Tìm phần "Giới thiệu" trên trang chủ. Sau đó, thêm một mô-đun nút ngay dưới một trong những hình ảnh được sử dụng để trình bày "Phòng đôi" (cột đầu tiên trong cột đầu tiên của hàng ba cột).

nút divi.png

Sau đó, mở các tham số của nút và đặt một chữ "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 các trò chơi nền tuyệt vời như phông chữ nút.

văn bản nút divi.png

Để nhanh chóng bắt đầu kết hợ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 bây giờ" ở đầu bố cục. Mở cài đặt nút và sao chép các kiểu nút bằng cách nhấp chuột phải vào tiêu đề Toggle của 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".

dán mô-đun style.jpg

Sau đó cập nhật các 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: NO

Sau đó, thêm đệm tùy chỉnh thông minh của chúng tôi để nút là 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

nút phông chữ biểu tượng

Để định vị nút để nó bao phủ góc dưới cùng bên phải của hình ảnh, trước tiên bạn phải xóa lề dưới của mô-đun hình ảnh ở trên. Mở cài đặt mô-đun hình ảnh từ hình ảnh ngay phía trên nút và đặt lề dưới thành 0px.

tùy chỉnh của button.png

Bây giờ, chúng ta phải 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 với chiều cao của nút. Để làm điều này, chúng ta phải xác định chiều cao của nút.

Như đã đề cập trước đó trong bài viết này, với tùy chỉnh điền vào chỗ, chúng ta có thể biết kích thước chính xác của nút của chúng tôi 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 của văn bản nút là 20px, chúng tôi biết rằng chiều cao của nút của chúng tôi là 3em (3 lần kích thước của văn bản nút), là 60px. Vì vậy, chúng ta cần phải xác định một lề tùy chỉnh cho nút của chúng tôi như sau:

Lề tùy chỉnh: -60px Trên cùng

Và sau đó chúng tôi có thể định vị nút của chúng tôi ở bên phải bằng cách điều chỉnh căn chỉnh của nút ở bên phải.

thay đổi căn chỉnh của nút divi.png

Bây giờ chúng ta có một thiết kế chức năng cho hình ảnh của chúng ta và nút của chúng ta. Tất cả những gì chúng ta phải làm là thêm cùng một nút cho tất cả các hình ảnh trong phần.

Vì chúng tôi đã xóa 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ả 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".

extend image style.jpg

Trong hộp thoại Mở rộng kiểu, chọn "Phần này" cho tùy chọn thông qua và nhấp vào nút Mở rộng. Bây giờ tất cả các hình ảnh có tỷ lệ thấp hơn của 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.

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Khuyến nghị]

nút thiết kế cuối cùng divi.png

Và bởi vì chúng tôi đã sử dụng các kỹ thuật khoảng cách thích hợp, nút này cũng sẽ giữ nguyên vị trí trên thiết bị di động ...

nút xem trước trên mobile.png

Các biểu tượng có sẵn bằng cách sử dụng mô-đun nút

Vì văn bản nút mô-đun nút bị giới hạn đối với 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 đơn giản để làm điều này là tạo một mô-đun nút có phông chữ nút đặt trên phông chữ thanh lịch và nhập các ký tự vào hộp văn bản của nút.

Dưới đây là ảnh chụp màn hình của các ký tự có biểu tượng phông chữ tương ứng của chúng:

danh sách các biểu tượng có sẵn divi.png

Nếu bạn thấy danh sách này không đầy đủ, bạn luôn có thể sử dụng mô-đun văn bản để tạo liên kết biểu tượng bằng cách sử dụng mã Unic được liệt kê ici .

Suy nghĩ cuối cùng

Sử dụng các biểu tượng thanh lịch với Mô-đun nút Divi là một cách thuận tiện để tạo các nút duy nhất cho trang web của bạn. Điều này mở ra cánh cửa cho sự sáng tạo với các 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 qua và hơn thế nữa. Tôi đặc biệt thích các giá trị khoảng cách của các nút tùy chỉnh để đảm bảo rằng các nút có hình dạng của 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ố nguồn cảm hứng cho các dự án của riêng bạn.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
6 cổ phiếu
cổ phiếu4
tweet
Enregistrer2