Sử dụng logo riêng biệt cho desktop và mobile trên Flatsome

Tối ưu hiển thị logo riêng biệt cho Desktop và Mobile trên Flatsome

Trong thiết kế website, việc duy trì tính thẩm mỹ trên mọi thiết bị là ưu tiên hàng đầu. Logo trên desktop thường có kích thước lớn và tỷ lệ khung hình ngang, điều này đôi khi khiến logo bị thu nhỏ quá mức hoặc mất chi tiết khi hiển thị trên màn hình điện thoại. Tại STAR WAR Digital Solutions, chúng tôi khuyến khích việc sử dụng logo riêng biệt cho từng thiết bị để đảm bảo nhận diện thương hiệu luôn sắc nét và chuyên nghiệp.

Dưới đây là hướng dẫn kỹ thuật giúp bạn tùy chỉnh logo cho theme Flatsome mà không cần can thiệp sâu vào file hệ thống.

Giải pháp CSS tùy chỉnh cho Flatsome

Để thực hiện, bạn chỉ cần truy cập vào Flatsome > Advanced > Global Settings > Custom CSS và chèn đoạn mã dưới đây. Lưu ý thay thế đường dẫn ảnh trong đoạn code bằng URL logo dành riêng cho mobile của bạn.

@media (max-width: 549px) {
    #logo img {
        max-height: 45px;
        opacity: 0;
        margin-right: 10px;
    }
    .logo a {
        background-image: url('ĐƯỜNG_DẪN_LOGO_MOBILE_CỦA_BẠN');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50% 50%;
        margin-right: 10px;
    }
}

.logo a {
    text-decoration: none;
    display: block;
    color: #446084;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0;
}

Lưu ý quan trọng khi triển khai

• Kích thước ảnh: Logo mobile nên được thiết kế với kích thước tối ưu (thường là hình vuông hoặc tỷ lệ 1:1) để hiển thị tốt nhất trong không gian header hạn chế.
• Định dạng file: Ưu tiên sử dụng định dạng .png (trong suốt) hoặc .svg để logo sắc nét trên các màn hình có độ phân giải cao (Retina).
• Kiểm tra hiển thị: Sau khi lưu, hãy xóa cache trình duyệt và cache của website (nếu có sử dụng các plugin như WP Rocket hoặc LiteSpeed Cache) để kiểm tra kết quả thực tế trên thiết bị di động.

Việc tinh chỉnh nhỏ này không chỉ giúp giao diện website của bạn chuyên nghiệp hơn mà còn cải thiện trải nghiệm người dùng trên thiết bị di động – yếu tố quan trọng trong đánh giá SEO hiện nay.

Nếu bạn gặp khó khăn trong quá trình tùy chỉnh hoặc cần giải pháp tối ưu hóa giao diện chuyên sâu hơn cho hệ thống website của doanh nghiệp, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng hỗ trợ. Liên hệ với chúng tôi để được tư vấn các giải pháp phát triển web hiệu quả.