Wednesday, May 22, 2024

Cách tạo tab bên phải và add thêm Title trong Flatsome (phần 1)

Cách tạo tab bên phải và add thêm Title trong Flatsome

Có nhiều bạn hỏi làm sao cho cái tab đẹp hơn một chút , mặc định của tab có sẳn trong Flatsome nó không có gì đặc sắc chỉ gọi là đủ dùng và trong thực tế đủ dùng là chưa đủ phải đẹp nhé. Sau đây mình sẽ hướng dẫn các bạn tạo tab và thêm title trong flatsome bằng css một cách đẹp mắt và phù hợp trong theme Flatsome bạn nhé.

Tạo tab bên phải và add thêm Title trong Flatsome.

Ở đây, điều khác với nhưng tab khác là cái tab nằm bên phải ( mặc định nó nằm bên trái ) và có thể dòng tựa đề bên trái nội dung tab bên dưới chung ta hay thấy trong các trang thương mại điện tử – Giờ cùng bắt đầu vào làm nhé.

Cách làm Tạo tab bên phải:

Để thêm tab thì bạn phải tạo một Table = > colum (12) = > Tabs

""

Nhớ đặt tên Class cho tab nhé ( ở bài này tớ đặt là hethong –> css class của mình sẽ có tên hethong trước nhé)

"<yoastmark

– Các bạn chọn định dạng bên phải nhé.

Tiếp chèn 1 textbox bên trên đặt tên class là hethong-title như hình ( tên class sẽ có css bên dưới dùng nhé ).

"<yoastmark

Các bạn lưu lại và chèn css bên dưới vào nhé:

/*hệ thống*/
.hethong .nav-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: right;
    border-bottom: 1px solid #44608452;
    padding-bottom: 10px;
}
.hethong-title {
    position: absolute;
}
.hethong ul li a {
padding:0 10px;
color: #fff;
}
.hethong ul li.tab.has-icon {
    color: #fff;
    background: #a2a2a2;
    padding: 2px 10px;
    margin-right: 0.7em;
    margin-bottom: 0.5em;
    margin-left: 0;
    cursor: pointer;
    border-radius: 4px;
    min-width: max-content;
    line-height: 1.8em;
}
.hethong ul li.tab.active.has-icon {
    background: #b41e4d !important;
}
.hethong ul li.tab.active.has-icon a {
    color: #fff !important;
}
Lưu ý: .hethong .nav-left – do ban đầu mình không chọn định dạng bên phải ( mặc đinh đang là bên trái nên mới có css này ) – Nếu bạn chọn bên phải bỏ dòng .hethong .nav-left này nhé.
Trên đây là cách tạo tab bên phải và add thêm title của An Nhiên 
Chúc các bạn thực hiện thành công nhé!
5/5 - (1 vote)
46,788FansLike

Bài Viết Mới