Загрузить другой логотип на мобильном устройстве.

Вопрос или проблема

Я создаю сайт для благотворительной организации, но у меня нет большого опыта.

Если вы просматриваете сайт на компьютере (https://walkministries.org.uk/newsite/), логотип синий на светло-сером фоне.

Но когда вы переключаетесь на мобильное устройство, логотип перемещается в другую область заголовка. На мобильных устройствах он загружается на синем фоне. Это делает логотип невидимым, потому что он такого же цвета, как и цвет фона.

Есть ли способ загрузить другую версию логотипа для мобильных/адаптивных устройств? У меня есть светлая/белая версия логотипа, которая отображается в режиме закрепленного заголовка при прокрутке на мобильном устройстве. Просто она не загружается при первом открытии страницы на мобильном устройстве.
Я не могу получить помощь от создателя темы.

Спасибо!

Страница, с которой мне нужна помощь: https://walkministries.org.uk/newsite/

Похоже, вы выбрали неправильный “светлый логотип” для мобильного просмотра. Я изучил код и заметил, что “светлый логотип” на самом деле темный! Замените этот логотип на белый, и все должно быть в порядке.

И если вы не хотите изменять настройки темы, просто перейдите в админ-панель WordPress > Внешний вид > Настройщик > Пользовательский CSS и добавьте следующий код, затем сохраните его.

@media(max-width: 1199px) {
    body.switchable-logo header#header .menuzord-brand .logo-light.logo-1x {
        display: none;
    }

    body.switchable-logo header#header .menuzord-brand .logo-dark.logo-2x.retina {
        display: block;
    }
}

Ответ или решение

Введение на рынок веб-сайта с адаптивным дизайном – необходимый шаг для любой организации, включая благотворительные учреждения. Однако, когда речь идет об отображении элементов дизайна на различных устройствах, могут возникнуть технические трудности, такие как описанная вами проблема с логотипом. В данном случае задача заключается в том, чтобы адаптировать логотип вашего сайта в зависимости от устройства, на котором он отображается. Давайте рассмотрим, как это можно сделать.

Теория

Основная задача заключается в том, чтобы обеспечить разное отображение логотипа на мобильных устройствах и настольных компьютерах, используя принципы адаптивного дизайна. Один из подходов к решению этой задачи – использование медиазапросов CSS для изменения свойств элементов в зависимости от размеров экрана. Преимущество этого метода заключается в его универсальности и отсутствии необходимости изменения HTML-разметки.

Дополнительно, тема вашего сайта, вероятно, поддерживает опции для задания различных логотипов (например, "светлый" и "темный" логотипы) для разных условий, таких как фоновое изображение или цветовую схему, которая может изменяться в зависимости от устройства.

Обычно это достигается в админ-панели WordPress в разделе "Настройки темы" или "Кастомизация" при помощи интуитивных интерфейсов для загрузки изображений и задания их атрибутов.

Пример

В вашем конкретном случае, логотип на мобильных устройствах совпадает по цвету с фоном и из-за этого становится невидимым. Теоретически, если существуют различные версии логотипа (светлая и темная), их можно переключать в зависимости от устройства.

Вот пример CSS медиазапроса, который вы можете использовать для решения этой проблемы:

@media(max-width: 1199px) {
    body.switchable-logo header#header .menuzord-brand .logo-light.logo-1x {
        display: none;
    }

    body.switchable-logo header#header .menuzord-brand .logo-dark.logo-2x.retina {
        display: block;
    }
}

Этот код использует медиазапросы (@media), которые срабатывают, когда ширина экрана составляет 1199 пикселей и менее. Логотип класса «logo-light» становится невидимым, а логотип класса «logo-dark» отображается. Это решает проблему, при которой светлый логотип становится неразличимым на светлом фоне, позволяя вам использовать тёмный логотип на мобильных устройствах.

Приложение

Изучите тему и ее настройки: Прежде чем вносить изменения напрямую в код, стоит проверить возможности, предоставляемые используемой вами темой. Зачастую темы поддерживают различные логотипы в зависимости от сценария использования. Проверьте, доступны ли такие настройки.
Загрузка подходящих изображений: Если тема поддерживает возможность загрузки различных версий логотипов, убедитесь, что у вас есть как светлая, так и темная версия логотипа в подходящем формате и разрешении.
Изменение CSS: Если же изменения в настройках темы недостаточно, можно применить пользовательские стили CSS, как было предложено ранее. Добавьте их в WordPress через панель администратора: "Внешний вид" → "Кастомайзер" → "Дополнительные стили".
Тестирование и отладка: После внесения изменений обязательно протестируйте сайт на разных устройствах и различных браузерах. Убедитесь, что логотип отображается корректно и не возникает дополнительных визуальных проблем.

Использование медиазапросов позволяет эффективно дифференцировать дизайн страницы на различных устройствах, значительно улучшая пользовательский опыт. Ваша цель — сделать каждый аспект сайта интуитивно понятным и эстетически привлекательным, и правильное отображение логотипа играет в этом немалую роль.

Заключение

В эпоху многообразия устройств важно, чтобы каждый элемент веб-сайта, включая логотип, был адаптирован для различных экранов. Знание того, как грамотно применять CSS для реализации адаптивного дизайна, позволяет минимизировать визуальные недочеты и укрепить общее восприятие бренда. Решая вопрос отображения логотипа, вы не только решаете техническую проблему, но и улучшаете взаимодействие пользователей с сайтом, важности чего нельзя недооценивать в любой, в том числе и благотворительной, деятельности.