Bạn có muốn thêm một hộp tính năng với các biểu tượng đẹp trên trang chủ của trang WordPress của bạn? Các hộp tính năng này hiển thị các điểm bán hàng quan trọng của sản phẩm và dịch vụ của bạn. Nó đã được chứng minh là một kỹ thuật rất hấp dẫn trong việc giới thiệu các tính năng cho khách hàng mới. Trong bài này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm các hộp tính năng với các biểu tượng trong trang WordPress của bạn.
Các hộp tính năng có biểu tượng là gì?
Hầu hết mọi người khi họ truy cập các trang web không thực sự đọc chúng. Là con người, chúng ta đang trở thành các máy quét chuyên nghiệp.
Điều này có nghĩa là với tư cách là chủ doanh nghiệp, bạn cần đưa ra các thông tin quan trọng theo một định dạng có thể dễ dàng quét được và có tính hấp dẫn cao.
Đó là lý do tại sao các trang web kinh doanh phổ biến nhất thường có một hình ảnh lớn hoặc thanh trượt trên đầu trang với một nút gọi hành động.
Ngay bên dưới, bạn có thể sử dụng hộp tính năng cho phép bạn giới thiệu các tính năng quan trọng của sản phẩm hoặc dịch vụ của bạn. Mỗi hộp tính năng có thể có lời gọi hành động riêng của mình để có thể dẫn người dùng tìm hiểu thêm.
Dưới đây là một ví dụ từ trang web của chúng tôi OptinMonster:
Thêm các hộp tính năng với các biểu tượng trên trang chủ WordPress của bạn
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Nâng cao WP Cột. Khi kích hoạt bạn cần truy cập Cài đặt »Cột WP nâng cao để cấu hình plugin.
Đơn giản chỉ cần cuộn xuống đến tùy chọn ‘Column class’ và nhập vào mycolumns bên cạnh no. Đừng quên nhấp vào nút lưu thay đổi để lưu cài đặt của bạn.
Tiếp theo, bạn sẽ cần một plugin để chèn các biểu tượng SVG đẹp vào các hộp tính năng của bạn. Cài đặt và kích hoạt plugin WP SVG Icons.
Bạn đã sẵn sàng để tạo các hộp tính năng của mình.
Bắt đầu bằng cách chỉnh sửa trang nơi bạn muốn thêm các hộp tính năng.
Bạn sẽ nhận thấy hai nút mới trên màn hình soạn thảo bài đăng. Đầu tiên là nút Thêm biểu tượng nằm ngay bên trên trình chỉnh sửa. Nút thứ hai được đặt là mục cuối cùng trong trình đơn biên tập trực quan.
Nếu trình chỉnh sửa thị giác của bạn chỉ hiển thị một hàng nút, thì bạn cần nhấp vào nút thanh công cụ chuyển đổi để mở rộng nó.
Đầu tiên, bạn cần kích nút Advanced WP Columns. Thao tác này sẽ hiển thị cửa sổ bật lên nơi bạn cần nhấp vào Trống và sau đó chọn số cột bạn muốn thêm.
Sau đó bạn cần phải bấm vào từng cột để thêm một số văn bản. Nếu bạn không thêm một số văn bản bây giờ, thì sẽ rất khó để xem các cột trong trình soạn thảo bài đăng. Khi bạn đã hoàn tất, hãy nhấp vào nút thêm cột ở cuối.
Bạn sẽ thấy các cột trong trình chỉnh sửa bài đăng của bạn ngay bây giờ. Bước tiếp theo là thêm các biểu tượng trên văn bản.
Hãy di chuyển chuột đến phần đầu của vùng văn bản trong cột đầu tiên và nhấp vào nút enter. Thao tác này sẽ di chuyển văn bản xuống và cho khoảng trống để chèn biểu tượng của bạn.
Bây giờ bạn cần nhấp vào nút Thêm biểu tượng, sẽ hiển thị cửa sổ bật lên đẹp như sau:
Từ đó, bạn có thể chọn biểu tượng bạn muốn sử dụng bằng cách nhấp vào nó. Tiếp theo, bạn cần nhấp vào nút khoảng thời gian, vì vậy biểu tượng của bạn được quấn vào bên trong thành phần.
Cuối cùng, nhấp vào nút chèn. Bây giờ bạn sẽ thấy mã vạch cho biểu tượng SVG trong trình chỉnh sửa bài đăng của bạn. Tùy thuộc vào tên của biểu tượng mà bạn đã chọn, nó sẽ trông giống như sau:
[wp-svg-icons icon = "tên lửa" wrap = "span"]
Lặp lại quá trình để thêm các biểu tượng trong hộp tính năng khác là tốt.
Khi bạn đã hoàn tất, chỉ cần nhấp vào nút Cập nhật để lưu trang của bạn.
Bạn đã gần xong, nhưng nếu bạn xem trước trang của mình thì bạn sẽ nhận thấy rằng các biểu tượng quá nhỏ và các hộp tính năng của bạn gần như không nhận thấy được.
Bạn sẽ cần phải thêm một ít CSS để giải quyết vấn đề này. Chỉ cần thêm đoạn mã CSS này vào chủ đề hoặc biểu định kiểu của chủ đề con.
span.wp-svg-rocket.rocket {
kích thước phông chữ: 100px;
}
span.wp-svg-cloud.cloud {
kích thước phông chữ: 100px;
}
span.wp-svg-headphones.headphones {
kích thước phông chữ: 100px;
}
.mycolumns {
biên giới: 1px rắn #eee;
min-height: 250px;
padding-top: 20px; quan trọng;
}
Đừng quên điều chỉnh CSS phù hợp với tên của các biểu tượng mà bạn đang sử dụng.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm một phần hộp các tính năng đẹp trên trang chủ của bạn