Bạn có muốn thêm một hộp tính năng mang các tượng trưng đẹp mắt trên trang chủ của trang web WordPress của mình không? Các hộp tính năng này hiển thị những đ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à 1 kỹ thuật quyến rũ cao trong việc giới thiệu những tính năng cho quý khách mới. Trong bài viết này, chúng tôi sẽ chỉ dẫn bạn bí quyết tiện dụng thêm những hộp tính năng có các biểu trưng trong trang web WordPress của bạn.
cách thêm hộp tính năng sở hữu tượng trưng trong WordPress
[caption id="attachment_31626" align="alignnone" width="520"]
cách thức thêm hộp tính năng với tượng trưng trong WordPress[/caption]
Hộp tính năng mang tượng trưng là gì?
số đông mọi người khi họ truy vấn cập những trang web ko thực sự đọc chúng. Là con người, chúng ta đang trở nên những máy quét chuyên nghiệp.
Điều này có tức thị mang tư cách là chủ doanh nghiệp, bạn cần diễn tả thông tin quan trọng ở định dạng với thể quét tiện lợi và quyến rũ cao.
ấy là lý do vì sao tất cả các trang web kinh doanh phổ thông thường sở hữu 1 hình ảnh to hoặc 1 thanh trượt ở trên cộng mang nút kêu gọi hành động.
Ngay bên dưới ô đấy, bạn sở hữu thể sử dụng hộp tính năng cho phép bạn giới thiệu những tính năng quan trọng của sản phẩm hoặc nhà sản xuất của mình. Mỗi hộp tính năng mang thể mang lời kêu gọi hành động riêng để các bạn mang thể Nhận định thêm.
Đây là 1 thí dụ từ trang web OptinMonster của chúng tôi:
Video hướng dẫn
ví như bạn ko thích video hoặc cần thêm chỉ dẫn, thì hãy tiếp diễn đọc.
Thêm hộp tính năng có biểu trưng trên trang chủ WordPress của bạn
Điều trước hết bạn cần làm là cài đặt và kích hoạt plugin Advanced WP Columns . Khi kích hoạt, bạn cần tầm nã cập Cài đặt »Cột WP nâng cao để định cấu hình plugin.
Chỉ cần cuộn xuống tùy chọn ‘Lớp cột’ và nhập các cột của tôi bên cạnh. Đừ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 1 plugin để chèn những biểu tượng SVG đẹp mắt vào các hộp tính năng của mình. Cài đặt và kích hoạt plugin WP SVG Icons .
hiện nay bạn đã sẵn sàng để tạo những hộp tính năng của mình.
bắt đầu bằng phương pháp chỉnh sửa trang mà bạn muốn thêm những hộp tính năng.
Bạn sẽ nhận thấy 2 nút mới trên màn hình chỉnh sửa bài đăng. Trước hết là nút Thêm tượng trưng nằm ngay phía trên trình chỉnh sửa. Nút thứ 2 nằm ở mục rút cuộc trong thực đơn trình chỉnh sửa trực quan.
giả dụ trình chỉnh sửa trực giác của bạn chỉ hiển thị 1 hàng nút, thì bạn cần nhấp vào nút bật tắt trên thanh dụng cụ để mở mang nó.
đầu tiên, bạn cần nhấp vào nút Advanced WP Columns. Thao tác này sẽ hiển thị 1 cửa sổ bật lên, nơi bạn cần nhấp vào Empty và sau ấy chọn số cột bạn muốn thêm.
Sau ấy, bạn cần nhấp vào từng cột để thêm 1 số văn bản. Ví như bạn không thêm 1 số văn bản ngay hiện tại, thì sẽ rất khó để xem các cột trong trình chỉnh sửa bài đăng. Khi bạn đã hoàn tất, hãy nhấp vào nút thêm cột ở dưới cộng.
Bạn sẽ thấy những cột trong trình chỉnh sửa bài đăng của mình ngay ngày nay. Bước tiếp theo là thêm các tượng trưng phía trên văn bản.
Đưa chuột tới đầu vùng văn bản trong cột trước tiên và nhấp vào nút enter. Thao tác này sẽ vận động văn bản xuống và cung ứng không gian để chèn các biểu trưng của bạn.
hiện giờ bạn cần nhấp vào nút Thêm biểu tượng, nó sẽ xuất hiện một cửa sổ bật lên đẹp như sau:
từ đấy, bạn mang thể chọn biểu tượng bạn muốn tiêu dùng bằng phương pháp nhấp vào nó. Tiếp theo, bạn cần nhấp vào nút span để biểu trưng của bạn được bao bọc bên trong phần tử .
cuối cùng, nhấp vào nút chèn. Bây giờ bạn sẽ thấy mã ngắn cho biểu trưng SVG trong trình chỉnh sửa bài đăng của mình. Tùy thuộc vào tên của tượng trưng bạn đã chọn, nó sẽ trông giống như sau:
[wp-svg-icons icon=”rocket” wrap=”span”]
Lặp lại trật tự để thêm những tượng trưng trong các hộp tính năng khác.
Sau lúc hoàn thành, chỉ cần nhấp vào nút Cập nhật để lưu trang của bạn.
Bạn đã gần hoàn thành, 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 trưng quá nhỏ và các hộp tính năng của bạn hầu như chơi đáng chú ý.
Bạn sẽ cần thêm một chút CSS để khắc phục vấn đề này. Chỉ cần thêm đoạn mã CSS này vào biểu định kiểu của chủ đề hoặc chủ đề con của bạn.
span.wp-svg-rocket.rocket font-size:100px; span.wp-svg-cloud.cloud font-size:100px; span.wp-svg-headphones.headphones font-size:100px; .mycolumns border:1px solid #eee; min-height:250px; padding-top:20px !important;
Đừng quên điều chỉnh CSS để khớp mang tên của những tượng trưng bạn đang tiêu dùng.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm phần hộp tính năng đẹp mắt trên trang chủ của mình. Bạn cũng với thể muốn xem hướng dẫn của chúng tôi về 5 trình xây dựng trang WordPress kéo và thả tốt nhất vì gần như trình tạo trang đấy đã tích hợp sẵn chức năng hộp tính năng này.
.
Bạn sở hữu muốn thêm một hộp tính năng sở hữu những biểu tượng đẹp mắt trên trang chủ của trang web WordPress của mình không? Những 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à nhà cung cấp của bạn. Nó đã được chứng minh là 1 công nghệ quyến rũ cao trong việc giới thiệu các tính năng cho khách hàng mới. Trong bài viết này, chúng tôi sẽ chỉ dẫn bạn cách thuận lợi thêm những hộp tính năng với những biểu trưng trong trang web WordPress của bạn.
Hộp tính năng có biểu tượng là gì?
toàn bộ mọi người khi họ truy vấn cập những trang web không thực thụ đọc chúng. Là con người, chúng ta đang phát triển thành những máy quét chuyên nghiệp.
Điều này mang nghĩa là sở hữu tư cách là chủ tổ chức, bạn cần diễn đạt thông báo quan trọng ở định dạng mang thể quét thuận tiện và quyến rũ cao.
đó là lý do tại sao phần nhiều những trang web buôn bán rộng rãi thường mang một hình ảnh lớn hoặc một thanh trượt ở trên cộng có nút kêu gọi hành động.
Ngay bên dưới ô đấy, bạn sở hữu thể 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 mình. Mỗi hộp tính năng mang thể sở hữu lời kêu gọi hành động riêng để các bạn có thể Phân tích thêm.
Đây là một ví dụ trong khoảng trang web OptinMonster của chúng tôi:
Video hướng dẫn
nếu như bạn ko thích video hoặc cần thêm chỉ dẫn, thì hãy tiếp diễn đọc.
Thêm hộp tính năng có tượng trưng trên trang chủ WordPress của bạn
Điều trước hết bạn cần làm cho là cài đặt và kích hoạt plugin Advanced WP Columns . Khi kích hoạt, bạn cần truy tìm cập Cài đặt »Cột WP tăng để định cấu hình plugin.
Chỉ cần cuộn xuống tùy chọn ‘Lớp cột’ và nhập các cột của tôi kế bên. Đừ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 những tượng trưng SVG đẹp mắt vào những hộp tính năng của mình. Cài đặt và kích hoạt plugin WP SVG Icons .
hiện tại bạn đã sẵn sàng để tạo các hộp tính năng của mình.
khởi đầu bằng cách chỉnh sửa trang mà bạn muốn thêm những hộp tính năng.
Bạn sẽ nhận thấy hai nút mới trên màn hình chỉnh sửa bài đăng. Trước nhất là nút Thêm biểu tượng nằm ngay phía trên trình chỉnh sửa. Nút thứ 2 nằm ở mục chung cuộc trong menu trình chỉnh sửa trực quan.
giả dụ trình chỉnh sửa trực giác của bạn chỉ hiển thị 1 hàng nút, thì bạn cần nhấp vào nút bật tắt trên thanh công cụ để mở mang nó.
đầu tiên, bạn cần nhấp vào nút Advanced WP Columns. Thao tác này sẽ hiển thị một cửa sổ bật lên, nơi bạn cần nhấp vào Empty và sau ấy chọn số cột bạn muốn thêm.
Sau đấy, bạn cần nhấp vào từng cột để thêm một số văn bản. Ví như bạn ko thêm 1 số văn bản ngay ngày nay, thì sẽ rất khó để xem những cột trong trình chỉnh sửa bài đăng. Khi bạn đã hoàn thành, hãy nhấp vào nút thêm cột ở dưới cộng.
Bạn sẽ thấy các cột trong trình chỉnh sửa bài đăng của mình ngay hiện giờ. Bước tiếp theo là thêm những biểu trưng phía trên văn bản.
Đưa chuột tới đầu vùng văn bản trong cột trước nhất và nhấp vào nút enter. Thao tác này sẽ đi lại văn bản xuống và cung ứng không gian để chèn các tượng trưng của bạn.
hiện giờ bạn cần nhấp vào nút Thêm biểu trưng, nó sẽ xuất hiện 1 cửa sổ bật lên đẹp như sau:
từ đó, bạn sở hữu thể chọn biểu trưng bạn muốn sử dụng bằng phương pháp nhấp vào nó. Tiếp theo, bạn cần nhấp vào nút span để biểu tượng của bạn được bao bọc bên trong phần tử .
rút cuộc, nhấp vào nút chèn. Hiện giờ bạn sẽ thấy mã ngắn cho biểu tượng SVG trong trình chỉnh sửa bài đăng của mình. Tùy thuộc vào tên của tượng trưng bạn đã chọn, nó sẽ trông giống như sau:
[wp-svg-icons icon=”rocket” wrap=”span”]
Lặp lại quy trình để thêm các tượng trưng trong các hộp tính năng khác.
Sau lúc hoàn thành, chỉ cần nhấp vào nút Cập nhật để lưu trang của bạn.
Bạn đã sắp hoàn thành, nhưng nếu như bạn xem trước trang của mình, thì bạn sẽ nhận thấy rằng những tượng trưng quá nhỏ và các hộp tính năng của bạn hầu như chơi đáng chú ý.
Bạn sẽ cần thêm một tí CSS để khắc phục vấn đề này. Chỉ cần thêm đoạn mã CSS này vào biểu định kiểu của chủ đề hoặc chủ đề con của bạn.
span.wp-svg-rocket.rocket font-size:100px; span.wp-svg-cloud.cloud font-size:100px; span.wp-svg-headphones.headphones font-size:100px; .mycolumns border:1px solid #eee; min-height:250px; padding-top:20px !important;
Đừng quên điều chỉnh CSS để khớp mang tên của những biểu trưng bạn đang dùng.
Chúng tôi kỳ vọng bài viết này đã giúp bạn thêm phần hộp tính năng đẹp mắt trên trang chủ của mình. Bạn cũng có thể muốn xem chỉ dẫn của chúng tôi về 5 trình vun đắp trang WordPress kéo và thả rẻ nhất vì phần nhiều trình tạo trang đấy đã tích hợp sẵn chức năng hộp tính năng này.
.
Theo : Thủ thuật Blog - Thủ thuật Flatsome