Футер (англ. Footer - заголовок) - важный структурный элемент любого сайта, его часто называют «подвалом». Он размещается в нижней части веб-страницы и является элементом, противоположным хедеру (шапке сайта) , которая находится наверху.

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

Что разместить в футере

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

• Блок перелинковки

Такой перелинковкой может быть дублирование основного меню, в котором выносятся важные и популярные разделы. Если разделы имеют многоуровневую структуру, они разбиваются на столбики с поясняющими заголовками.

источник sima-land.ru

Перелинковкой может служить также облако тегов. Это могут быть популярные рубрики у информационного сайта, важные новости или статьи.

источник vesti.ru

• Авторские права

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

источник vesti-ural.ru

• О партнерах

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

источник ekb.rbc.ru

• Контакты

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

источник uniland.ru

• Социальные сети

источник e1.ru

• Лид-формы

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

источник afisha.yandex.ru

• Карта

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

(footer - производная от foot (англ.) - нога) - это самый нижний раздел сайта, противоположный шапке - верхней части. Безусловно, голова сайта - шапка - самый важный элемент, но футер - это как земля под ногами: она должна быть прочной и функциональной. Хоть и не все пользователи пролистывают веб-страницы до конца, оставлять без внимания дынный раздел сайта не стоит.

Что принято размещать в футере?

Стандартными элементами футера являются:

1. Кнопки социальных сетей и виджеты групп с социальных сетях
2. Ссылки на основные разделы сайта
3. Ссылки на сторонние ресурсы
4. Копирайт
5. Контактная информация
6. Поиск

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

Оригинальный футер - место, где можно удивить посетителя

Футер - это как раз то самое место, где можно реализовать очень интересные дизайнерские задумки, даже если это сайт серьезной официальной компании. Вот пара интересных примеров:

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

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

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

Дополнительное меню в футере

Распространенной практикой является дублировать меню сайта в подвале или помещать немного измененное меню. При этом часто его публикуют в развернутом виде, если меню имеет многоуровневую структуру. Это очень полезно в качестве альтернативной навигации : в нижней части основное меню, как правило, не заметно, зато пользователю не придется совершать дополнительных усилий и он может сразу перейти в нужный ему раздел. Это легко проследить по карте кликов пользователей по кнопкам на сайте из Яндекс Метрики или Google Analytics .

Например, это может выглядеть так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

if (function_exists("register_sidebar")) register_sidebar(array("name" => "Footer Sidebar", "before_widget" => "", "after_widget" => "", "before_title" => "

",));

if (function_exists ("register_sidebar" ) ) register_sidebar (array ( "name" = > "Footer Sidebar" , "before_widget" = > "" , "after_widget" = > "" , "before_title" = > " " , "after_title" = > " " , ) ) ;

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

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

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

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

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

Что такое футер

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

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

Поэтому для начала предлагаю избавиться от стандартного содержимого футера. Открываем файл index.php стандартного шаблона Protostar и ищем код, который отвечает за вывод футера. За вывод футера отвечает код между строками 205 и 219, который выглядит следующим образом (в зависимости от версии Joomla и внесенных изменений в индексный файл строки кода могут отличаться):

А теперь удалим лишний код с 210 по 217 строку, в результате код для футера будет таким:

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

Сохраняем индексный файл, переходим на сайт и обновляем страницу. Содержимое футера исчезло, этого мы и добивались. Теперь можно добавлять в футер новую информацию по своему усмотрению, но прежде чем её добавить стоит ответить на вопрос - а что может находиться в футере сайта?

Какую информацию отображать в футере сайта

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

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

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

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

Создание футера для сайта

Теперь давайте отбросим теорию и приступим непосредственно к созданию футера. Способов формирования футера может быть несколько:

• Автоматический - подразумевает использование различных модулей для вывода определенной информации
• Ручной - модули не используются, все изменения вносятся вручную по средствам редактирования файлов шаблона
• Смешанный - в данном случае используются оба вышеперечисленных варианта совместно

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

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

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

Для начала создадим новые позиции для модулей в футере (как это сделать мы говорили на уроке по настройке и редактированию шаблонов) в количестве двух штук. Так как они будут располагаться в левой и правой части футера то и имя у них получилось соответствующее - footer-left и footer-right . Объявляем их в файле templateDetails.xml .

Теперь вносим изменения в индексный файл шаблона, мой код получился таким:

И для наглядности скриншот:

Как выводятся модули понятно, а вот на логотипе хочу остановиться подробнее. За вывод логотипа отвечает код:

baseurl . "templates/". $this->template . "/images/joom4all.png"?>" />

На первый взгляд обычный HTML тег для изображения, но вместо привычного пути расположения файла написан php код. Данный код на первый взгляд может показаться сложным и непонятным, но на самом деле если его разобрать, то становится понятно, что ничего сложного в нем нет:

• - начало php кода
• echo - отвечает за вывод строки
• $this->baseurl - данная строка возвращает имя сайта
• templates/ - тут мы указываем, что изображение хранится в папке templates
• $this->template - возвращает имя текущего шаблона
• /images/joom4all.png - путь до изображения внутри корневой папки шаблона и имя файла с изображением
• ?> - конец php кода

В результате использования данного php кода мы получаем относительный путь до файла с изображением. Другими словами не зависимо от того какое имя будет у сайта и какой используется шаблон изображение будет взято из папки images выбранного шаблона.

Сохраняем файл index.php, теперь его можно закрыть, он нам больше не пригодится.

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

На следующем этапе создаем модули - для меню с типом «Меню» и для текста с типом «HTML-код» (как создать модуль). В качестве позиций для них выбираем только что созданные позиции модулей:

Чтобы отличать наше меню для футера среди остального меню на сайте, в настройках модуля меню добавляем к нему суффикс класса «_footer»:

Для того чтобы не объяснять что за модуль с типом «HTML-код» я покажу принцип его действия на скриншоте:

Я заполнил данный модуль определенным текстом, который будет выведен в футер, кроме обычного текста я написал небольшой php код, который отображает текущий год:

Сохраняем модули и идем на сайт для проверки результата и вот что у меня получилось:

Результат хоть и есть, но не сильно впечатляет. Теперь нам необходимо более адекватно оформить элементы футера при помощи CSS.

Для начала оформим новые блоки футера:

Foot-left, .foot-center{float: left;} /*выравнивание блоков футера*/ .foot-left {width: 20%;} /*ширина левого блока*/ .foot-center {margin-left: -6px;} /*отступ центрального блока*/ .foot-right { /*правый блок*/ float: none; height: 60px; }

Следующий кандидат на оформление это меню, к которому я применил следующие стили:

Ul.nav.menu_footer {margin: 0;} /*нулевые отступы у меню*/ ul.nav.menu_footer li { /*оформление текста меню*/ font-family: "Lobster", cursive; font-size: 16px; line-height: 18px; } ul.nav.menu_footer li.item-179 a { /*пункт меню Карта сайта*/ margin-left: 15px; color: #fc8f30; } ul.nav.menu_footer li.item-180 a { /*Пункт меню О сайте*/ color: #5aa426; border-top: 3px solid #5aa426; } ul.nav.menu_footer li.item-181 a { /*Пункт меню Контакты*/ margin-left: 45px; border-bottom: 3px solid #0f70ad; color: #0f70ad; }

И в завершении отделяем футер от основной части контента:

Footer.footer hr {border-top: 3px solid #fc8f30;} /*отделяем футер от основного контента*/

Сохраняем файл стилей, переходим на сайт и смотрим на результат:

Вот мы и создали футер для нашего сайта, который смотрится гораздо веселее, чем стандартный. На этом данный урок считаю заершенным, а в следующем уроке мы проверим возможные ошибки адаптивного дизайна и исправим некоторые недочёты. Кроме того советую почитать статью о том как создать шаблон Joomla 3 и в частности футер с нуля быстро при помощи Bootstrap.

Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?

Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.

Делаем правильный футер для своего сайта

Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает «кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно (кружок «очумелые ручки» ) или начинающими веб-мастерами.

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

Для устранения этого «дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

Первый способ

Первый способ «привязать » подвал «к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { height: 100%; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; background-color: rgb(0,255,255); } #content { padding: 100px; height:400px; background-color: rgb(51,255,102); } #footer { width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); }

Для того чтобы приклеить подвал к низу страницы тег