Thủ thuật, CSS, Videos Ngày 04/02/2024 442 lượt xem

Làm logo full width trong theme flatsome – thủ thuật theme Flatsome

Logo full width trong giống mấy trang báo chí hoặc trang trường học trên theme Flatsome thì làm như thế nào ? Đó là câu hỏi của…

Lê Anh Đông Lê Anh ĐôngFlatsome trên Google News

Logo full width trong giống mấy trang báo chí hoặc trang trường học trên theme Flatsome thì làm như thế nào ? Đó là câu hỏi của 1 bác trong Group WordPress, vì thấy nó cũng cơ bản nên hôm nay tớ viết bài với vài dòng css có thể giúp bác bác coppy dán logo này nhanh gọn nhé. Hãy xem hết bài hướng dẫn bên dưới để có thể làm được nhé anh em

Logo full width trong theme flatsome ( Banner full width )

Để dễ hình dung được demo bạn có thể xem câu hỏi và hình Demo bên dưới để bạn dể hình dung nhé

Làm logo full width trong theme flatsome - thủ thuật theme Flatsome
Làm logo full width trong theme flatsome – thủ thuật theme Flatsome

Cách làm Logo full width

Để làm được như hình thì sẽ có nhiều cách, 1 trong những cách đơn giản nhất là úp cái banner đó  thay thế cái banner trang hiện tại , sau đó css nó full là ok

Bước 1 : vào head và thay thế cái logo như hình bên dưới ( chuẩn bị 1 banner với chiều dài và bề rộng hợp lý để thay vào nhé )

Làm logo full width trong theme flatsome - thủ thuật theme Flatsome
Làm logo full width trong theme flatsome – thủ thuật theme Flatsome

Bước 2 : Coppy css bên dưới bỏ vào là được nhé

Giải thích về đoạn css trên để bạn có thể hiểu hơn

height: auto; <= Thường flatsome set cố định chiều rộng nên đoạn này đặt auto để head có thể rộng theo chiều rộng của hình ảnh

margin-right: unset; < = mặc định là cái logo bị margin bên phải nên dùng Unset để bỏ qua margin-right này

width: 100% !important; <= mặc đinh cái logo ko chiếm được 100% chiều dài của Khung nên dùng css này để ép Logo có thể full 100% khung

OK sau khi thêm css trên và lưu lại thì chúng ta có kết quả như sau

Làm logo full width trong theme flatsome - thủ thuật theme Flatsome
Làm logo full width trong theme flatsome – thủ thuật theme Flatsome

OK vậy là được như bạn yêu cầu rồi nhé 🙂

Đơn giản chỉ là coppy và dán thôi , nếu bạn thấy hữu ích vui lòng cho tớ 5 sao bên dưới nhé

Cảm ơn bạn !

Điểm 4.4/5 - ( Có 14 bình chọn)

Có Nhận xét cho "Làm logo full width trong theme flatsome – thủ thuật theme Flatsome"

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *