Thêm feature boxes với icon trong WordPress

7 ngày ago, Hướng dẫn WordPress, 1 Views
Thêm feature boxes với icon trong WordPress

Giới thiệu về Feature Box trong WordPress

Trong thế giới thiết kế web, việc tạo ra một trang web hấp dẫn và dễ sử dụng là vô cùng quan trọng. Một yếu tố then chốt góp phần vào điều này là cách bạn trình bày thông tin. Feature box, hay còn gọi là hộp tính năng, là một công cụ mạnh mẽ giúp bạn làm nổi bật những điểm quan trọng, lợi ích, hoặc tính năng chính của sản phẩm, dịch vụ hoặc trang web của bạn.

Feature box thường bao gồm tiêu đề, mô tả ngắn gọn và một biểu tượng (icon) trực quan. Chúng được sử dụng để thu hút sự chú ý của người xem và nhanh chóng truyền tải thông điệp chính. Sử dụng feature box một cách hiệu quả có thể cải thiện trải nghiệm người dùng, tăng tỷ lệ chuyển đổi và nâng cao giá trị thương hiệu.

Bài viết này sẽ hướng dẫn bạn cách thêm feature box với icon trong WordPress một cách dễ dàng, sử dụng các plugin phổ biến và chỉnh sửa code nếu bạn muốn tùy biến sâu hơn.

Tại sao nên sử dụng Feature Box?

Sử dụng feature box mang lại nhiều lợi ích thiết thực cho website của bạn:

  • Nâng cao trải nghiệm người dùng: Feature box giúp người dùng dễ dàng tìm thấy thông tin quan trọng một cách nhanh chóng và trực quan.
  • Tăng tỷ lệ chuyển đổi: Bằng cách làm nổi bật lợi ích sản phẩm hoặc dịch vụ, bạn có thể khuyến khích người dùng thực hiện hành động mong muốn (mua hàng, đăng ký, liên hệ…).
  • Cải thiện thiết kế trang web: Feature box giúp trang web của bạn trở nên chuyên nghiệp và hấp dẫn hơn về mặt thị giác.
  • Truyền tải thông điệp hiệu quả: Feature box giúp bạn truyền tải thông điệp chính một cách ngắn gọn và dễ hiểu.
  • Tăng tính tương tác: Sử dụng icon và hiệu ứng đẹp mắt có thể thu hút sự chú ý và khuyến khích người dùng tương tác với nội dung của bạn.

Sử dụng Plugin để thêm Feature Box

Đây là cách dễ dàng nhất để thêm feature box vào WordPress. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện việc này.

1. Plugin Shortcodes Ultimate

Shortcodes Ultimate là một plugin phổ biến cung cấp một loạt các shortcode, bao gồm cả shortcode để tạo feature box. Plugin này rất linh hoạt và dễ sử dụng.

Ưu điểm:

  • Miễn phí (phiên bản cơ bản).
  • Dễ sử dụng với giao diện trực quan.
  • Nhiều tùy chọn tùy chỉnh.
  • Tương thích với nhiều theme WordPress.

Nhược điểm:

  • Phiên bản miễn phí có thể hạn chế về tính năng.

Hướng dẫn sử dụng:

  1. Cài đặt và kích hoạt plugin Shortcodes Ultimate.
  2. Trong trình soạn thảo bài viết hoặc trang, nhấp vào nút “Insert shortcode”.
  3. Chọn “Box” hoặc một shortcode tương tự có chức năng tương đương.
  4. Tùy chỉnh các thuộc tính của shortcode (tiêu đề, nội dung, icon…) theo ý muốn.
  5. Nhấp vào “Insert” để chèn shortcode vào nội dung.
  6. Xem trước bài viết/trang để kiểm tra kết quả.

2. Plugin Elementor Page Builder

Elementor là một page builder mạnh mẽ cho phép bạn tạo các trang web phức tạp một cách trực quan bằng cách kéo và thả. Nó cũng bao gồm một widget feature box.

Ưu điểm:

  • Giao diện kéo và thả trực quan.
  • Nhiều widget và template có sẵn.
  • Tùy chỉnh cao.
  • Phiên bản miễn phí có nhiều tính năng hữu ích.

Nhược điểm:

  • Có thể làm chậm trang web nếu sử dụng quá nhiều widget.
  • Phiên bản Pro có tính năng nâng cao nhưng cần trả phí.

Hướng dẫn sử dụng:

  1. Cài đặt và kích hoạt plugin Elementor Page Builder.
  2. Tạo một trang hoặc bài viết mới và nhấp vào nút “Edit with Elementor”.
  3. Tìm widget “Icon Box” hoặc “Feature Box” trong thanh bên.
  4. Kéo và thả widget vào vị trí mong muốn trên trang.
  5. Tùy chỉnh nội dung, icon và kiểu dáng của widget trong phần cài đặt.
  6. Nhấp vào “Publish” hoặc “Update” để lưu thay đổi.

3. Plugin Visual Composer Website Builder

Visual Composer là một plugin page builder khác, tương tự như Elementor, cũng cung cấp các element để tạo feature box.

Ưu điểm:

  • Giao diện kéo và thả.
  • Nhiều element và template.
  • Thư viện nội dung lớn.
  • Tích hợp với nhiều plugin khác.

Nhược điểm:

  • Chủ yếu là plugin trả phí.
  • Có thể phức tạp hơn Elementor đối với người mới bắt đầu.

Hướng dẫn sử dụng:

  1. Cài đặt và kích hoạt plugin Visual Composer Website Builder.
  2. Tạo một trang hoặc bài viết mới và nhấp vào nút “Edit with Visual Composer”.
  3. Nhấp vào dấu cộng (+) để thêm một element.
  4. Tìm element “Icon Box” hoặc “Feature Box” và thêm nó vào trang.
  5. Tùy chỉnh nội dung, icon và kiểu dáng của element trong phần cài đặt.
  6. Nhấp vào “Save” và sau đó “Publish” hoặc “Update” để lưu thay đổi.

Thêm Feature Box bằng Code (Tùy biến cao)

Nếu bạn muốn có toàn quyền kiểm soát giao diện và chức năng của feature box, bạn có thể tự mình viết code. Cách này đòi hỏi kiến thức về HTML, CSS và có thể là PHP.

Bước 1: Tạo HTML Structure

Đầu tiên, tạo cấu trúc HTML cho feature box của bạn. Ví dụ:

<div class="feature-box">
  <div class="feature-icon">
    <i class="fas fa-lightbulb"></i>
  </div>
  <div class="feature-content">
    <h3 class="feature-title">Tiêu đề Feature</h3>
    <p class="feature-description">Mô tả ngắn gọn về tính năng này.</p>
  </div>
</div>

Trong ví dụ này:

  • .feature-box: Lớp bao bọc toàn bộ feature box.
  • .feature-icon: Lớp chứa biểu tượng (icon). Chúng ta sử dụng Font Awesome (fas fa-lightbulb) ở đây, hãy đảm bảo bạn đã tích hợp Font Awesome vào theme của mình.
  • .feature-content: Lớp chứa tiêu đề và mô tả.
  • .feature-title: Lớp cho tiêu đề feature.
  • .feature-description: Lớp cho mô tả feature.

Bước 2: Thêm CSS Styling

Tiếp theo, thêm CSS để tạo kiểu cho feature box của bạn. Bạn có thể thêm CSS vào file style.css của theme hoặc sử dụng custom CSS plugin.

.feature-box {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

.feature-icon {
  margin-right: 20px;
  font-size: 30px;
  color: #007bff; /* Màu xanh dương */
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.feature-description {
  font-size: 16px;
  color: #555;
}

Bạn có thể tùy chỉnh các thuộc tính CSS này để phù hợp với thiết kế của trang web của bạn.

Bước 3: Thêm vào WordPress

Bạn có thể thêm đoạn code HTML này trực tiếp vào bài viết, trang hoặc template của theme. Tuy nhiên, để tiện lợi và dễ quản lý hơn, bạn có thể tạo một shortcode tùy chỉnh.

Tạo Shortcode (Sử dụng PHP)

Thêm đoạn code sau vào file functions.php của theme hoặc sử dụng một plugin cho phép thêm code tùy chỉnh (ví dụ: Code Snippets).

function feature_box_shortcode( $atts, $content = null ) {
  $atts = shortcode_atts( array(
    'icon' => 'fas fa-info-circle', // Icon mặc định
    'title' => 'Tiêu đề Feature', // Tiêu đề mặc định
  ), $atts );

  $icon = esc_attr( $atts['icon'] );
  $title = esc_html( $atts['title'] );

  $output = '<div class="feature-box">';
  $output .= '<div class="feature-icon"><i class="' . $icon . '"></i></div>';
  $output .= '<div class="feature-content">';
  $output .= '<h3 class="feature-title">' . $title . '</h3>';
  $output .= '<p class="feature-description">' . do_shortcode( $content ) . '</p>';
  $output .= '</div>';
  $output .= '</div>';

  return $output;
}
add_shortcode( 'feature_box', 'feature_box_shortcode' );

Cách sử dụng Shortcode:

[feature_box icon="fas fa-lightbulb" title="Tiêu đề của bạn"]
Nội dung mô tả chi tiết về tính năng.
[/feature_box]

Lưu ý:

  • Đảm bảo bạn đã cài đặt và cấu hình thư viện icon (ví dụ: Font Awesome) trước khi sử dụng shortcode này.
  • Bạn có thể tùy chỉnh các thuộc tính của shortcode (icon, title) để phù hợp với nhu cầu của mình.

Lời khuyên khi sử dụng Feature Box

  • Sử dụng icon phù hợp: Chọn icon có liên quan đến nội dung của feature box. Điều này giúp người dùng hiểu rõ hơn về thông tin bạn đang trình bày.
  • Giữ nội dung ngắn gọn: Tránh viết quá nhiều chữ trong feature box. Tập trung vào những thông tin quan trọng nhất.
  • Thiết kế nhất quán: Đảm bảo rằng feature box của bạn phù hợp với thiết kế tổng thể của trang web.
  • Sử dụng màu sắc tương phản: Sử dụng màu sắc tương phản để làm nổi bật feature box trên nền trang web.
  • Kiểm tra trên nhiều thiết bị: Đảm bảo rằng feature box hiển thị tốt trên cả máy tính để bàn, máy tính bảng và điện thoại di động.

Kết luận

Feature box là một công cụ mạnh mẽ để cải thiện trải nghiệm người dùng và tăng tỷ lệ chuyển đổi trên trang web WordPress của bạn. Bằng cách sử dụng các plugin hoặc viết code tùy chỉnh, bạn có thể dễ dàng thêm feature box với icon vào trang web của mình và làm nổi bật những thông tin quan trọng nhất. Hy vọng bài viết này đã cung cấp cho bạn đầy đủ kiến thức để bắt đầu sử dụng feature box một cách hiệu quả.

Related Topics by Tag
, , , ,

..