Делаем красивый футер сайта

Делаем красивый футер сайта

Все шаблоны wordpress состоят из нескольких файлов, которые отвечают за обработку и вывод той или иной части блога – шапка, основной контент, сайдбар и футер. Сегодня мы поговорим о последнем. Футер (подвал сайта) – это его нижняя часть со всем содержимым. Наиболее часто он используется веб-мастером для представления такой информации как  дата создания, защита авторских прав, название и т.п. Но, не во всех темах wordpress реализовать это легко, некоторые просто не имею простых опций добавления информации в футер.

Что размещать в футере сайта?

Для начала давайте определимся, какому типу сайта, что можно размещать в подвале  для улучшения поведенческих факторов.

Контактная информация больше всего подходит для веб-магазинов. Размещение в подвале адреса карты проезда, телефона, адреса почты магазина или организации и т.п., позволяет человеку быстрее совершить заказ или покупку.

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

Социальные закладки, если контент вашего сайта предполагает массовое обсуждение, либо вы выкладываете обзоры событий, причисляющихся к развитию темы, то в подвале можно расположить ссылки на социальные сети в которых вы продвигаете ресурс. Облако тегов также как и дополнительный блок навигации подойдет всем видам сайтов. Расположение в футере 3D облака тегов, это будет не только удобно пользователям, но и красиво с стороны дизайна.

Необходимо обратить внимание, что шанс перехода по ссылкам футера, если он не является красивым и информативным близится к нулю по причине неприметности подобного подвала.

Примеры красиво оформленных подвалов сайта

Для того чтобы создать красивый и информативный футер предлагаем вашему вниманию наиболее известные работы дизайнерских веб-студий:

1. Дизайнерское решение Французской веб-студия KDIGIT:

Делаем красивый футер сайта

2. Оформление футера дизайнерской веб-студии SNOWDEN industries:

Делаем красивый футер сайта

3. Дизайнерское решение в оформлении футера шведской компании  Uforia CMS:

Делаем красивый футер сайта

4. Изящное оформление футера компании Tapbots:

Делаем красивый футер сайта

5. Футер дизайнерской веб-студии Ready made designs:

Делаем красивый футер сайта

6. Оформление футера компании Mecannical:

Делаем красивый футер сайта

7. Красивое оформление футера:

Делаем красивый футер сайта

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

Добавление в футер блоков информации

Самым простым способом добавления в футер блоков информации будет добавление в админку вордпресс, блока виджетов подвала. Для создания, такого блока виджетов необходимо открыть админ меню—>редактор и в колонке справа, выбрать файл functions.php, в котором добавляем код:

Это код регистрации нового блока виджетов в админке, где ‘name’ — задается имя виджета,  ‘before_widget’ — отображаемый HTML код до виджета, и ‘after_widget’ — отображаемый HTML код после виджета , а также код до и после заголовка title. Добавляется он как правило в самое начало файла functions.php.

Сохраняете содержимое functions.php и заходим в раздел «Виджеты». Если все было сделано без ошибок, то вы найдете там новый блок:

Делаем красивый футер сайта

Итак, в админ меню отображение нового блока виджетов мы сделали, теперь нам нужно вывести виджеты этого блока на сайте. Для этого открываем админ меню —>редактор и справа выбираем файл footer.php, кстати такие блоки виджетов, можно выводить не только в футере, но и в любом другом месте сайта.

В файле footer.php добавляем следующий код:

Размещаем этот код после строк <div id=»footer»>, то есть после кода подключения футера к сайту. Для визуального оформления виджетов подвала (места расположения в футере, задания цвета отображения ссылок, вывода фонового изображения и.т.д), можно описать только что созданный нами класс #footer-sidebar в файле styly.css Для описания стилей виджетов, можете воспользоваться мощным ресурсом посвященного CSS и HTML — HtmlBook.

Актуальная версия справочника CSS теперь находится на сайте WebReference.ru.

Статья взята из открытых источников: http://goldserfer.ru/delaem-krasivyj-futer-sajta/

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