Вид подвала сайта Zegeberg

Грамотно оформленный футер – это дополнительные плюшки для сайта, ведь в этом случае улучшается юзабилити, пользователь (клиент) видит, что попал не на помойку и с большей вероятностью проводит активные действия (покупки, подписки и т д.). Ниже я расскажу, как оформить подвал сайта на CMS Joomla, то есть внести в футер нужный текст и изменить его цвет и размер.

Картинка подвала

В 99% шаблонов картинка в подвале уже есть, но она не всегда адекватна с учётом целей сайта или же требует корректировки при изменении дизайна. Усложнять задачу я не буду, для начала мы поменяем картинку подвала без изменения её размера.

Поиск картинки футера

Для этого заходим в папку шаблона templates/шаблон/images через Ftp-соединение и ищем там картинку футера. Можно открывать все подряд пока не увидите нужную, но проще поставить на Mozilla плагин Firebug, включить его и посмотреть данные об элементе.

Ещё проще открыть исходный код web-документа и найти название image там.

Теперь нужно:

  1. - Выгрузить image footer с хостинга,
  2. - Внести в неё корректировки (создать новую),
  3. - Загрузить фото назад с заменой.

После выгрузки картинки через фоторедактор Paint смотрим размер фото в пикселях – это поможет без лишней рихтовки не вылезти ей из рамок шаблона при обратной загрузке. Также важно сохранить формат.

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

  1. - Подвал гармонирует по цвету с фоном сайта,
  2. - Футер всегда светлее шапки и больше её по высоте (закон природы – небо светлее и больше земли).

Редактируете файл под нужды сайта (можете вставить в него новые элементы или просто обрамить рамками или изменить цвет) и загружаете его обратно.

Размер

Изменяем размер подвала через CSS

Изменение размера опишу коротко, так как тут придётся вносить правки в файл CSS шаблона. Для изменения размера подвала (высоты и ширины) сначала делается под этот размер картинка, потом ставите её в папку images шаблона, после этого идёте в файл шаблон/CSS и указываете новые вводные для футера. Они должны точно совпадать с размерами нового футера.

В работе Firebug обязателен. Проблема в том, что править (изменять размер и CSS) придётся и другие элементы шаблона сайта – шапку, сайтбар и пр.

Текст футера

Теперь остаётся добавить в footer нужный вам текст. Писать в подвале научные трактаты не надо, а вот указать год старта сайта, напомнить про запрет на копирование без ссылки и вставить ссылку на морду для удобства навигации не помешает.

Оформление текста в футер

Здесь нам поможет модуль «Произвольный HTML-код» и немного хитрости. Открываем модуль, называем его, например, копирайт и вставляем текст подвала, в котором не забываем указать ссылку на морду. Указываем показ на всех страницах кроме главной и жмём сохранить.

Теперь отмечаем «копирайт» галочкой и нажимаем копировать. Заходим в «Копирайт 2», делаем ссылку неактивной и указываем показ только на морде. Теперь в футере главная не будет ссылаться сама на себя, а на внутряке будет навигационная ссылка.

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

Добавить комментарий


Защитный код
Обновить