Настройки шапки в мобильной версии шаблона AB-Inspiration

  Автор:
  1509
Настройки шапки в мобильной версии шаблона AB-Inspiration

Как говориться, совершенству нет предела :). Переработала я немного шапку для мобильной версии, по просьбам пользователей. В связи с адаптацией шаблона под мобильные устройства пришлось создать дополнительный раздел настроек для настройки шапки.

Почему именно шапки?

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

Поэтому была создан отдельный раздел «Стиль шапки в мобильной версии».

new-mobile-settings

В этом разделе доступны следующие настройки:
1. Фон — здесь вы можете указать цвет фона и/или изображение. Настраивается также как и в других элементах.

mobile-header-fon

2. Граница — здесь вы можете поставить галочку и указать цвет. Если стоит галочку, то между шапкой и контентом появится горизонтальный разделитель.

mobile-header-border

3. Тень — здесь вы можете активировать тень под шапкой. Она тоже будет визуально разделять шапку от контента. Если вы ставите галочку, тень отображается, если нет, тени не будет.

mobile-header-shadow

4. Настройка логотипа/описания блога в виде изображения. Эта точно такая же настройка как и в шапке. Если вы хотите, чтобы в мобильной версии блога в шапке отображалось название блога в виде изображения, поставьте галочку и загрузите это изобажение/логотип

mobile-header-logo

5. Текст. Здесь вы настраиваете название блога и описание в виде текста. Если вы хотите, чтобы название блога и описание было в виде текста, а не картинки, не ставьте галочку в предыдущем пункте, просто настройте отображение заголовка и описания. Обратите внимания, здесь вы можете отключить показ описания.

mobile-header-logo-text

В тексте важно указать цвет заголовка, даже если вы его не используете (если у вас заголовок в виде изображения). Этот цвет будет отображаться на кнопке меню.

В шапке также используется меню. Его нужно создать отдельно. Для этого:
1. зайдите в раздел «Внешний вид» => «Меню»
2. Создайте новое или откройте уже существующее меню
3. Если создаете новое, сформируйте его из страницы/рубрик/произвольных ссылок итд
4. Поставьте галочку в настойках меню «Меню в мобильной версии»
5. Сохраните меню

menu-mobile

И еще одно новшество в шапке в мобильной версии — форма поиска по блогу :)

Вот так выглядит теперь мобильная версия моего блога:

anfisabreus-mobile

Я записала небольшое видео по настройке шапки меню в мобильной версии. В видео я рассказываю все тоже самое, что изложила выше в скриншотах.

Если у вас остались вопросы по настройке шапки, не стесняйтесь, задавайте здесь в комментариях. Буду рада ответить и помочь.

Настройки шапки в мобильной версии шаблона AB-Inspiration

   6 голосов
Средняя оценка: 4 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Комментарии на блоге
5 комментариев
  1. Здравствуйте, Анфиса!
    Большое спасибо за статью! После прочтения статьи включил смартфон свой и обнаружил, что у меня и меню-то нет. Буду сейчас настраивать.

  2. Анфиса, здравствуйте!
    Вчера успешно обновил шаблон и все настроилось отлично. Сегодня также сделал обновление по увеличению отступа от названия сайта и описания, также все хорошо.
    Огромное спасибо за Ваш труд и заботу о нас!

  3. Сама обычно пользуюсь компьютером, поэтому мобильная версия как-то осталась вне зоны моего внимания. Сегодня займусь проработкой внешнего вида. Для мобильной версии лучше сделать шапку попроще, верно? Еще вопрос. А главная страница для мобильной версии остается без изменений, там ничего не надо менять? Или можно для мобильной версии выбрать, что показывать — главную страницу или ленту новостей?

  4. Спасибо!
    Настройка блога в сотовом удалась успешно, меню открывается.
    Сменила шапку блога для сотового.
    =)

  5. А какого размера должна быть картинка для шапки?

Комментарии в Фейсбук
Комментарии в Вконтакте