Thêm CSS Tiêu Đề đẹp cho Element TITLE Flatsome

Hiệu ứng CSS Element Title Flatsome là vài dòng CSS đơn giản nhưng hiệu quả và đáng chú ý cho giao diện Flatsome.

Cách thêm Hiệu ứng CSS Element Title Tiêu Đề Flatsome

Bước 1: Chọn Element Title

Trên mục thêm, gõ Title là ra và chọn

Bước 2: thêm Class triangle

Sau khi chọn Element TITLE, bạn kéo xuống dưới thêm Class triangle

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

Bạn thêm CSS dưới đây vào Tùy Biến / Custom CSS

.triangle * {
    border: none !important;
    margin-bottom: 0 !important;
}

.triangle {
    margin-bottom: 1rem;
}

.triangle .section-title-main {
    padding: 10px;
    padding-right: 2rem;
    display: inline-block;
    width: max-content;
    color: inherit;/* Thay đổi màu sắc của chữ theo ý */
    background: bisque; /* Thay đổi màu sắc của nền theo ý */
    position: relative;
    clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
}

Bước 4: Reload lại và thưởng thức

Bạn Tải lại trang và thưởng thức. Chú ý Clear Cache nếu có cài đặt Plugin Cache như WP Rocket, LiteSpeed Cache, … etc

Thành quả

Dưới đây là thành quả:

MẸO sử dụng CSS Element TITLE Flatsome

Mỗi khi cần sử dụng bạn chỉ cần thêm class triangle và sử dụng. Ngoài ra chú ý đến các class khác như .section-title-main và thay đổi cho phù hợp.

Ngoài ra hãy thay đổi màu chữ hoặc màu nền cho hợp lý với tổng thể website của bạn.

Chúc bạn thành công

Một số CSS cho Element TITLE đẹp

Dưới đây là nguồn trên CodePen, mình không phải tác giả của phần này trên CodePen, mình chỉ chia sẻ lại