Chia sẻ CSS làm nổi phần chữ trên banner/slider trong Flatsome

Khi làm website bằng Flatsome hoặc các theme WP bán hàng, phần banner là khu vực rất quan trọng vì khách vào web sẽ nhìn thấy đầu tiên. Tuy nhiên nhiều khi ảnh nền banner đẹp nhưng chữ đặt lên lại bị chìm, khó đọc, nhất là những banner có nền nhiều chi tiết hoặc màu sáng tối lẫn lộn.

Mình chia sẻ một đoạn CSS nhỏ giúp tạo nền mờ nhẹ phía sau chữ, làm cho tiêu đề, mô tả và nút bấm nổi bật hơn. Cách này rất phù hợp cho những bạn đang custom theme mới, làm giao diện bán hàng, hoặc tối ưu lại các mẫu theme WP giá rẻ để nhìn chuyên nghiệp và dễ đọc hơn.

CSS này dùng được cho banner trong Flatsome, chỉ cần đặt class cho khối chữ hoặc banner là phongvt-hero, sau đó dán CSS vào phần CSS bổ sung là có thể dùng ngay.

.phongvt-hero {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 8px 8px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25) !important;
}
.phongvt-hero h1,
.phongvt-hero h2,
.phongvt-hero h3,
.phongvt-hero h4,
.phongvt-hero p {
    color: #ffffff !important;
    text-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.65),
        0 8px 22px rgba(0, 0, 0, 0.35) !important;
}
.phongvt-hero h1,
.phongvt-hero h2,
.phongvt-hero h3 {
    font-weight: 800 !important;
}
.phongvt-hero a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}
.phongvt-hero a:hover {
    color: #f59a23 !important;
}

.phongvt-hero .button,
.phongvt-hero a.button {
    background: #d28a3a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.phongvt-hero .button:hover,
.phongvt-hero a.button:hover {
    background: #3f3f3f !important;
    color: #ffffff !important;
}

Cách dùng:

Vào phần chỉnh sửa banner hoặc text box trong Flatsome, ở ô Class nhập:

phongvt-hero

Lưu ý là trong ô Class không cần dấu chấm. Dấu chấm chỉ dùng khi viết CSS.

Nếu muốn nền chữ đậm hơn một chút, đổi dòng này:

background: rgba(255, 255, 255, 0.08) !important;

thành:

background: rgba(255, 255, 255, 0.15) !important;

Nếu muốn nền gần như trong suốt hơn nữa thì dùng:

background: rgba(255, 255, 255, 0.05) !important;

Đoạn CSS này giúp banner nhìn chuyên nghiệp hơn, chữ dễ đọc hơn, đặc biệt phù hợp với website bán hàng, decor, nội thất, thời trang, mỹ nghệ hoặc các bạn đang làm theme mới, chỉnh theme WP, tối ưu theme WP giá rẻ để giao diện nhìn đẹp và chỉn chu hơn.

Ai đang dùng Flatsome hoặc đang custom theme WP thì lưu lại để khi cần làm nổi chữ banner có thể dùng ngay nhé!