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

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

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

Почему именно шапки профессионального блога на WordPress?

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

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

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

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

Если у вас остались вопросы по настройке шапки профессионального блога на WordPress с шаблоном — конструктором AB-Inspiration, не стесняйтесь, задавайте здесь в комментариях. Буду рада ответить и помочь.

 


Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget
Настройки шапки сайта / блога на WordPress в мобильной версии шаблона AB-Inspiration

   6 голосов
Средняя оценка: 4 из 5
Находите эту информация полезной и интересной? Тогда смело жмите на кнопки соцсетей и поделитесь этой информацией со своими друзьями и знакомыми:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Подпишись на меня в Telegram! Только важные новости и лучшие статьи
Оставьте свой комментарий:

Комментарии на Блог
5 комментариев
  1. Здравствуйте, Анфиса!
    Большое спасибо за статью! После прочтения статьи включил смартфон свой и обнаружил, что у меня и меню-то нет. Буду сейчас настраивать.

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

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

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

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

Добавить комментарий для Ирина Лукшиц Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *