Настройка нового адаптивного шаблона на сайте uCoz

 
 
 
Недавно uCoz порадовал своих сайтосоздателей новыми бесплатными адаптивными шаблонами, чем и я не преминул воспользоваться, обновив дизайн своего сайта.
 
Здесь я поделюсь с вами некоторыми нюансами установки и настройки нового шаблона под себя, так как та же замена шапки и фона в новом дизайне отличается от подобных операций в прежних шаблонах. Описывать буду на примере дизайна 2011.
 
Подготовка черновика.
 
Прежде чем устанавливать новый шаблон, нужно подготовить «запасные пути», чтобы, если что, без проблем вернуть прежний дизайн.
 
 
Я для этого совершил три операции: скопировал все коды в блокнот и сохранил; а также создал в uCoz ещё один тестовый сайт с таким же дизайном, что на моём сайте сейчас, зашёл в Панели управления своего основного сайта и тестового, открыв их на соседних вкладках одного браузера, и начал по очереди, проходя все шаблоны дизайна, копировать коды из прежнего кода в новый код на соответствующие места.
 
Этот сайт-черновик поможет нам потом не искать заново пропавшие при установке нового шаблона скрипты кнопок «Наверх», Яндекс-Метрики, рекламных блоков, кнопок «Спасибо», и прочих полезностей и украшений, и вспоминать, где их нужно вставлять — а сразу копировать из кода сайта-черновика.
 
Ну и, конечно, делаем бэкап прежнего шаблона в самой Панели управления.
 
Установка нового шаблона.
 
 
Чтобы установить новый шаблон, открываем Панель управления своим сайтомДизайнВыбрать шаблон из библиотеки.
 
 
В открывшемся окошке жмём на нужный нам шаблон.
 
 
Если мы заменили дизайн, а в окошке редактирования видим код от прежнего шаблона (такое может быть при наличии внесённых вами ранее изменений в стандартный код), жмём на кнопочку справа «Восстановить стандартный шаблон». 
 
Замена фона.
 
 
Ищем нужную нам строку со ссылкой на картинку фона и заменяем на свою (о том, как найти в коде нужную нам картинку, определить, что это именно та картинка, которая нам нужна, и изменить на свою, я подробно написал вот в этой статье).
 
 
Вот так примерно должен выглядеть код после внесённых изменений. Фон в новом дизайне можно использовать от прежнего шаблона.
 
Замена логотипа и шапки. 
 
 
Ищем здесь же в таблице картинки логотипа logo.jpg и шапки promo.jpg, и заменяем на свои, предварительно изготовив свои в фотошопе и загрузив в Файловый менеджер.
 
 
Заменяем ссылки на логотип,
 
 
и на шапку.
 
 
Если картинку шапки нужно делать по размерам точно такую же, как прежнюю, то с логотипом можно поэкспериментировать — сделать его подлиннее, например. 
 
 
Но здесь нужно учитывать нюансы сдвига логотипа и названия сайта при изменении размера монитора. Если длинный логотип будет нормально смотреться на большом мониторе, то при просмотре с мобильника он может сдвинуться и выйти за границы фона сайта, что будет выглядеть очень некрасиво.
 
Поэтому при создании своего логотипа стараемся не уходить далеко от размеров стандартного логотипа. Я, например, сделал свой логотип немного длиннее, а высоту оставил ту же.
 
 
Ещё важный нюанс — при замене логотипа на свой с другими размерами название сайта может налезть на логотип. Тогда в строке «.site-n, .site-d» добавляем код «padding:0 0 0 60px», в котором «60px» задают удалённость названия сайта от левого края сайта. Меняя эту цифру, добиваемся гармоничного расположения названия сайта рядом с логотипом.
 
Проверяем отображение логотипа и названия не только на компьютере, но и с мобильных устройств. Можно проверить и в обычном браузере на компьютере, увеличивая масштаб до 500%.
 
Удостоверяемся, что логотип и название сайта не вылезают за фон сайта, и сохраняем.
 
Настройка текста в шапке.
 
 
Многих поначалу смущает текст приветствия в шапке нового шаблона «Lorem ipsum dolor sit amet» и так далее. Я видел сайты, на которых эта надпись оставалась без изменений ;-)
 
 
Однако этот текст меняется очень просто. В шаблоне 2011 заходим в «PROMO» и здесь вместо стандартной абракадабры вставляем свой текст.
 
 
Можно отформатировать свой текст, выстроив его справа, по центру или слева. Для этого в CSS в строках промо-текста вставляем соответственно коды выравнивания «text-align:right», «text-align:center» или «text-align:left».
 
 
Но бывают случаи, когда эта надпись мешает, например, при вставке праздничной шапки. Не торопитесь стирать код промо-текста из шаблона, а просто вставьте один небольшой код ;-)
 
 
Для этого в CSS в строке «.promo-caption» вставьте код «visibility:hidden». Этот код «выключит» показ промо-текста в шапке.
 
Вывод шапки на всех страницах сайта.
 
 
В новых шаблонах шапка выводится только на главной странице. И это, я считаю, при её немалых размерах очень удобно — картинка шапки не замыливается и не надоедает, остальные страницы быстрее загружаются. 
 
Но бывают дни, когда есть смысл вывести шапку на всех страницах — например, в праздники, чтобы создать на сайте праздничное настроение.
 
Для этого просто удаляем в «PROMO» выделенные на верхнем скрине коды-условия.
 
Вставка даты и времени.
 
 
Помимо значка RSS, в новом шаблоне отсутствует показ текущего времени, очень удобная функция, полюбившаяся мне в прежнем шаблоне.
 
 
Нет проблем — копирую с сайта-черновика код строки показа даты и вставляю в новый шаблон перед поисковой строкой.
 
Настройка расположения картинок на сайте.
 
 
В стандартном шаблоне 2011 жёстко зафиксировано отображение картинок слева. Я на своём сайте вставляю картинки по центру, поэтому ищу код с условием вывода картинок слева и просто удаляю его из CSS.
 
Кнопка «Вверх».
 
 
Вставляю на сайт кнопку «Вверх» для мгновенного перелистывания страниц. Такие кнопки, я считаю, должны быть на каждом сайте, так как очень облегчают пользование сайта его читателям.
 
Вариантов таких кнопок очень много, при их выборе нужно учесть то, чтобы такая кнопка не закрывалась соцбаром от uCoz и работала во всех браузерах. Намного подробнее о кнопках «Вверх» вы можете прочесть вот в этой статье.
 
У себя я установил кнопку «Вверх-вниз», которая хороша тем, что листает страницы сайта не только вверх, но и вниз, что очень удобно и мне самому при редактировании сайта. Об этой кнопке я напишу попозже отдельную статью.
 
Настройка рейтинга.
 
Меняю стандартный рейтинг на кнопки «Спасибо». Как показывает практика, на стандартные звёздочки никто не кликает, в отличие от кнопок типа «Мне нравится», на которые кликают намного охотнее.
 
 
О настройке и изменении рейтинга на сайте я очень подробно рассказал вот в этой статье. В новом шаблоне процесс абсолютно идентичен.
 
Настройка фотоальбома.
 
 
Помимо новых шаблонов для сайта, uCoz порадовал нас и новым видом фотоальбома. Но при изменении дизайна сайта фотоальбом может не обновиться, если мы вводили ранее в него свои изменения. Исправляем это — жмём на кнопочку справа «Восстановить стандартный шаблон».
 
Далее делаем некоторые изменения — в CSS Фотоальбома вставляем коды, улучшающие показ фото, в настройках модуля Фотоальбома изменяем размеры превью на 200х150, в управлении материалами Фотоальбома перестраиваем демо фотографий. Подробнее обо всём этом можно прочесть вот здесь.
 
Настройка футера.
 
Изменяем стандартную надпись в футере, проставляя дату создания своего сайта, и вставляя более чёткое и понятное предупреждение об обязательном указании ссылки на наш первоисточник.
 
 
Про настройку футера я очень подробно написал вот в этой статье.
 
 
Изменить надпись в футере можно как в самом коде, так и при включённом Конструкторе на сайте.
 
Настройка соцблока.
 
 
В новых шаблонах в футере встроены соцблоки со значками-ссылками на соцсети. По идее, владельцы сайта здесь обычно проставляют ссылки на свои аккаунты или каналы, в которые пересылаются новости с сайта, и, я так понимаю, эти кнопки предназначены для «запасной» связи с создателем сайта на тот случай, если будет недоступен сам сайт, либо для того, чтобы пользователь соцсетей смог сам присоединиться к подписчикам на новости сайта.
 
В стандарте вставлены иконки на Вконтакте, Фейсбук, Твиттер и Одноклассники. Из всех этих соцсетей я лично пользуюсь только первой, поэтому меняю значки и ссылки соцбокса на свои.
 
Как скачать и изменить картинки соцбокса, вы можете подробно прочесть в статье про изменение значков рейтинга — принцип тот же самый.
 
 
Заливаем изменённую картинку соцблока в Файловый менеджер, копируем ссылку на картинку и вставляем эту ссылку на место ссылки стандартной картинки.
 
 
Затем в коде самого соцблока подменяем ссылки соцсетей на свои. Имена «классов» я менять не стал, так как и так понятно, что где стоит.
 
Замечу лишь, что вместо ненужных мне Фейсбука, Твиттера и Одноклассников я вставил ссылку на свой Живой Журнал, RSS своего сайта, отсутствующую в новом шаблоне, и почтовую форму для отправки писем мне с сайта.
 
То есть, мой соцблок настроен и для связи со мной, и для получения новостей сайта с ЖЖ, Вконтакте и RSS.
 
И напоследок мои общие впечатления от нового адаптивного шаблона:
 
Плюсы: сайтом стало пользоваться намного приятнее и удобнее; стало намного легче делать свои картинки шапки благодаря её большим размерам; на сайт стали заходить намного чаще с мобильных устройств; на сайте стала намного лучше отображаться реклама, повысилась её эффективность.
 
Минусы: не работают некоторые скрипты, например, переключатель страниц; при просмотре с мобильных устройств невозможно отредактировать форум, так как исчезают кнопки модерации — удобство админа принесено в жертву удобству посетителя; текст, выводимый на страницах сайта после основного контента (например, «Похожие материалы») нужно оформлять в блоки, иначе текст незаметен на фоне.
 
Если в процессе пользования новым шаблоном я выявлю новые нюансы, обязательно напишу о них здесь.
 
 
 
Вы можете отблагодарить меня за эту статью, положив денюжку на Яндекс.Деньги — 41001946245208; Webmoney — RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; моб.тел. 8-985-301-51-80 (МТС).
 
 
 
Опубликована: 20.02.2014
Просмотров 6223


Оценка(17)
Оценить статью:  

Комментарии

Гости не могут добавлять комментарии, войдите или зарегистрируйтесь.
Goulevard  06.03.2014 02:59  
я незнаю где вы берете ссылки я толбко шапку нашел и все там в основном прописано какой цвет
Antonij  06.03.2014 03:21  
Я просто просматриваю весь код в поисках кодов png, jpg, gif — эти расширения свойственны ссылкам на картинки. Ну и потом проверяю, что это за картинки.
ludsz  07.05.2014 09:56  
Спасибо за статью. При тестировании нового шаблона несколько раз читала Ваши разъяснения. Но вопрос: Вы сохранилисвои   вертикальное и горизонтальное меню. Как так получилось? Я тоже хотела бы сохранить вертикальное меню, т.к. оно более привычное и информативное. Если ответите, спасибо! Очень надеюсь.
Antonij  10.05.2014 18:29  
Я вставил код вертикального меню в блок с помощью Конструктора. Пример такой вставки Вы можете увидеть вот в этой статье.
ludsz  11.05.2014 08:43  
Спасибо, не знала, что в новых шаблоных так можно делать.
grishagovor  27.01.2015 09:45  
Здравствуйте! У вас так много всего написано про Юкоз. Очень интересно. Но я толькоь начинаю работать с сайтом. И вот столкнулся с такой проблемой. При добавлении новости на сайт она сразу же улетает в архив записей. а на главной странице ее нет. Только одна новость. Настройки раздела новости сайта просмотрел количество видимых на главной странице новостей стоит 10 шт. менял разные вариации. но все никак. Может я конечно не по адресу обратился. Может подскажите где спросить. Уже задавал на новом сайте ответы Юкоза но там мне не отвечают. Спасибо.
Antonij  01.02.2015 16:52  
Здравствуйте! Так наобум трудно что-либо сказать. Есть подозрение на дизайн — возможно, в процессе изменения шаблона с главной страницы был удален код $LAST_NEWS$, из-за чего новости у вас не выводятся на главную, а доступны лишь в архиве новостей.
grishagovor  11.02.2015 08:34  
спасибо за ответ! Действительно дело было в коде!
Oksana666  10.06.2015 18:22  
Добрый день! Подскажите, пожалуйста, что вы изменили в коде шаблона, который у Вас на сайте сейчас установлен, чтобы он распознавался Гуглом, как адаптивный? Я установила себе такой же шаблон, с целью переделать его под свои вкусы, но проверяю страницы тут https://www.google.com/webmasters/tools/mobile-friendly/ и сервис отмечает их не оптимизированными под мобильные устройства.
Oksana666  10.06.2015 19:11  
Нашла причину. Была активирована мобильная версия сайта. Если ее отключить, то шаблон проходит проверку Гугла.
Oksana666  10.06.2015 19:39  
Сейчас возник другой вопрос: как исправить некорректное отображение шаблона? Его подвал находится посредине сайта, а боковая колонка съехала вниз. Не подскажете, как это исправить?
Antonij  11.06.2015 00:03  
Здравствуйте! Рад, что у вас решилась проблема с Гуглом  Насчет шаблона, он мог исказиться из-за вставки вами какого-нибудь стороннего скрипта или блока на сайт, либо из-за вставки контента (новости, статьи) с длинным кодом внутри. Попробуйте восстановить шаблон обратно (в ПУ — «Восстановить стандартный шаблон»), сохранив на всякий случай нынешний. В стандартном шаблоне таких проблем не должно быть.
Oksana666  11.06.2015 15:13  
Добрый день! Спасибо за ответ! Проверила свою главную страницу и нашла, что тег центрирования <DIV ALIGN="CENTER"> искажает внешний вид страницы. На Вордпрессе я его всегда использую и шаблоны не разваливаются. А тут... Вы не в курсе, какой тег можно использовать для центрирования в этих шаблонах? Я сейчас выбрала похожий на Ваш 2012.
Oksana666  11.06.2015 15:22  
Нашла тег, который не ломает страницу <center>Этот текст будет в центре.</center> Может, кому пригодится.