Soho - адаптивный шаблон для Blogger

18.09.2017

SOHO - адаптивный шаблон для Blogger
Весной 2017 года в Blogger появилась возможность выбирать адаптивные шаблоны прямо в админ-панели.
Адаптивные шаблоны автоматически подстраиваются под размеры Вашего экрана. Как в браузере, так и в мобильной версии.

Попробуем разобраться - как можно настроить адаптивный шаблон Soho при помощи дизайнера шаблонов (конструктора тем).

Итак, в настройках блога в пункте "Тема" выбираем один из шаблонов группы "Soho". Я выбрала самый первый из них. (Перед тем как менять шаблон уже работающего блога советую создать сначала абсолютно новый и с ним экспериментировать).



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




Нажимаем кнопку Настроить и попадаем в конструктор тем Blogger (он же - дизайнер шаблонов).

Сначала я решила разобраться с котом 😸😁 Вернее, где настраивается эта картинка.

Оказывается, что авторы решили поместить ее вместо фона. 



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



На вкладке "Дополнительно" очень много настроек шаблона. 

Здесь можно настроить:

  • основную часть
  • заголовок
  • сообщения
  • комментарии
  • боковую панель
  • публикацию и др.


В подпункте "Основная часть" настраиваются шрифт, цвет заголовка; цвета и шрифт ссылок




Здесь же настраивается внешний вид гаджетов, которые расположены в основной части блога.



Различные настройки "окна фильтра" - это то (насколько я поняла), как будут выглядеть некоторые параметры блога после того как Вы "отфильтруете" материал - по ярлыку, в поиске.

В подпункте "Заголовок" настраиваем название блога (цвет фона, шрифт, цвет заголовка). 

Цвета и шрифты страниц изменяем также в этом подпункте.



Особенность
Я не сразу поняла, что здесь отдельно настраиваются:
 - "Сообщения" - это сообщения, в которых содержится только текст,
 - "Публикация" - это сообщения, в которых содержатся изображения.
От этих настроек зависит - как будет выглядеть превью сообщения на Главной странице блога.

Интересно, что в адаптивных шаблонах есть настройки комментариев - шрифты и цвета имени автора, текста комментариев.



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


Самое главное, что в адаптивных шаблонах также, как и в обычных, можно изменить ширину: ширину боковой панели, ширину области с контентом, внешние поля области с контентом. 

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


В пункте"Гаджеты" настраивается то же самое, что и в пункте "Дизайн" в админ-панели блога.

Как добавить свою шапку в адаптивный шаблон Soho


Я решила в свой блог с адаптивным шаблоном Soho свою шапку (по аналогии с настройкой шапки в стандартных шаблонах).

Сначала я оставила картинку с котом и добавляла шапку с ней (потом удалила).

Я подготовила картинку. Затем зашла в пункт "Дизайн" блога и в гаджете "Заголовок страницы" нажала на значок карандаша.



Выбираем файл и картинка сразу загрузится. Ниже выбираем место ее размещения.

Сначала я попробовала разместить шапку после названия и описания. Получилось, что картинка отображается не полностью. 


Тогда выбрала "вместо заголовка и описания", как я чаще всего вставляю шапку в блоги.


Картинка так отображается целиком и вместе с шаблоном автоматически уменьшается, если уменьшается размер экрана.

К тому же, получается кликабельная шапка - при нажатии на картинку происходит переход на Главную страницу блога.

И вот теперь я окончательно решила, что кот мне ни к чему и я эту картинку удалила (см. выше - как). 

А шапку блога изменила на другую, предварительно наложив на картинку текст (название блога).

Итак, как у меня получилось настроить Soho - адаптивный шаблон для Blogger - смотрите на примере блога Мир Индии

1 комментарий:

Загляните и на другие страницы ^