Để tạo một Floating Panel (thanh bảng nổi) ở cuối website WordPress, bạn có 2 cách chính: Dùng Plugin (nhanh, dễ) hoặc Code tay (tối ưu, nhẹ web).

Dưới đây là hướng dẫn chi tiết cho cả hai cách:

Cách 1: Sử dụng Code tay (CSS & HTML) - Tối ưu nhất

Cách này giúp web của bạn nhẹ hơn vì không phải cài thêm plugin. Bạn có thể chèn code này vào phần Customize > Additional CSS hoặc file footer.php.

Bước 1: Chèn mã HTML (Vào file footer.php trước thẻ </body> hoặc dùng plugin Insert Headers and Footers):

HTML
<div class="floating-panel">
    <p>🔥 Ưu đãi tháng 1: Giảm 20% cho khóa học BA! <a href="#">Xem ngay</a></p>
    <button onclick="this.parentElement.style.display='none'" class="close-btn">×</button>
</div>

Bước 2: Chèn mã CSS (Vào Appearance > Customize > Additional CSS):

CSS
.floating-panel {
    position: fixed;
    bottom: 20px; /* Cách đáy 20px */
    left: 50%;
    transform: translateX(-50%); /* Căn giữa màn hình */
    width: 90%;
    max-width: 600px;
    background-color: #333; /* Màu nền tối chuyên nghiệp */
    color: white;
    padding: 15px 25px;
    border-radius: 50px; /* Bo tròn phong cách hiện đại */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.floating-panel a {
    color: #ffda44;
    text-decoration: underline;
    margin-left: 10px;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    margin-left: 15px;
}

Cách 2: Sử dụng Plugin (Dành cho người không chuyên)

Nếu bạn muốn có nhiều giao diện đẹp và tùy chỉnh nút bấm dễ dàng mà không cần chạm vào code, hãy dùng các plugin sau:

  1. Buttonizer: Plugin cực mạnh để tạo các nút nổi (Floating Action Button - FAB). Bạn có thể thêm nút Gọi điện, Chat Zalo, hoặc link khuyến mãi.

  2. My Sticky Elements: Chuyên tạo các thanh liên hệ nổi ở cạnh hoặc dưới đáy màn hình.

  3. HashBar: Một plugin chuyên tạo thông báo (Notification Bar) nổi ở trên đầu hoặc dưới cùng website, rất phù hợp để làm các chương trình khuyến mãi.

3. Một số lưu ý từ góc độ dự án (PM/Dev/Designer)

  • Góc độ Designer (UI/UX): Đừng làm cái bảng quá lớn chiếm hết diện tích trên Mobile. Hãy đảm bảo nó có nút "X" để tắt, nếu không người dùng sẽ cảm thấy bị làm phiền.

  • Góc độ Dev: Hãy kiểm tra độ ưu tiên của CSS (z-index). Nếu z-index quá thấp, cái bảng sẽ bị các thành phần khác của website đè lên.

  • Góc độ Mobile: Trên điện thoại, hãy dùng CSS Media Queries để điều chỉnh lại chiều rộng:

    CSS
    @media (max-width: 600px) {
    .floating-panel {
        width: 95%;
        font-size: 14px;
        bottom: 10px;
    }
}