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

Сохраняем файл 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) - это нижняя часть сайта, подвал. Является противоположностью (шапки), правильное оформление футера играет огромную роль в успехе продвижения сайта и улучшения его юзабилити.

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Что такое футер сайта на примере

“Именно обувь делает женщину женщиной”, - говорит секретарша в известном фильме. И она права! Если на вас надеты валенки - вы гуляете по заснеженному лесу. Если туфли на шпильке - то вам предстоит незабываемый вечер. Если кроссовки - то вы собираетесь заняться спортом или же много ходить. Не так ли?

Многие думают, что если футер размещается в самом низу - у пользователя не хватает терпения “долистать” до него, и поэтому его оформление менее важно, чем оформление шапки. Но это не так.

Что должно быть в футере сайта

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

• Карта сайта.

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

• Контакты.

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

• Форма обратной связи.

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

• Стрелка “Вверх”.

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

• Форма заказа обратного звонка.

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

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

Если вы активно общаетесь с посетителями в соцсетях - разместите ссылки на ваши группы и страницы внизу. Соцсети - важные инструменты для связи с клиентами и роста их лояльности.

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

• Ссылка на разработчика

Какую роль играет футер

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

Мы дадим основные советы, как сделать функциональный футер для сайта.

Обращайте внимание на:

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

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

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

Интересным подвалом можно также привлечь внимание пользователя.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы уже слышим, как вы говорите: «Да кому есть дело до какого-то футера?! Все равно до конца мало кто прокручивает». Но мы бы не были в этом так уверены.

Конечно, приоритет стоит отдать разделу хедера и дизайну над линией сгиба (Above The Fold), потому что именно посетители проводят большую часть своего времени. Однако нижняя часть страницы, в частности, нижний колонтитул вашего лендинга, также заслуживает внимания.

В своем весьма любопытном тематическом исследовании компания Chartbeat, занимающаяся анализом контента сайтов, обнаружила, что 65% вовлеченности на их страницах происходит сразу за линией сгиба (Below The Fold).

Так что люди все-таки скролят! И если вы не оптимизируете нижнюю половину посадочной страницы и, в том числе, футера, то вы можете упустить уникальные возможности, такие как:

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

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

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

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

Футер (Footer) — это самая нижняя часть сайта или лендинга. Они бывают всех форм и размеров. Некоторые сайты имеют маленькие зоны футера, другие, наоборот, очень большие, включающие несколько колонок и нижние колонтитулы. У одних сайтов нет футера вообще, в то время как на других интегрирована особая функция, называемая (Infinite Scrolling). Это означает, что в нижней части сайта нет футера, нет конца страницы как такового. Данную тему мы сегодня освещать не будем.

В футерах, как правило, размещается контактная информация, окно поиска и навигационные ссылки на важные страницы, значки профилей социальных сетей. Нижний колонтитул также может использоваться для предоставления другой значимой информации о бизнесе, например, включать заявление о миссии компании, информацию о местоположении офиса (карту), статистику сайта, социальное доказательство (Social Proof), форму подписки на электронную рассылку, детали для регистрации или входа в аккаунт, другие типы (Call-To-Action, CTA) и пр.

Почему вам нужно заняться дизайном футера

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

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

Было доказано, что, помимо улучшения навигационного потока сайта (Navigational Flow), а также опыта пользователей, стратегический дизайн футера влияет на конверсии.

Примеры красивых футеров

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

Лендинг, продающий воздухоочиститель A803 AirEngine бренда Bork, имеет привлекательный дизайн футера, включающий навигационные ссылки (причем оформлены они в двух разных стилях: в виде кликабельных изображений и в форме колонок со списками), форму подписки на рассылку и значки соцсетей.

Страница иллюзиониста Игоря Завьялова также выглядит весьма приятно. Дизайн состоит из контактной информации, ссылок на социальные профили и простой симпатичной формы для связи.

Перед футером лендинга Битрикс24 располагается «предфутерный» раздел, имеющий целью конверсию (потенциальному клиенту предлагается оставить контакты для общения с менеджерами). Далее следует основная область нижнего колонтитула с картой, ссылками навигации, конверсионной ссылкой «Обратный звонок» и номером телефона.

Сайт strip-lenta.com имеет оригинальный футер с конвертом, на котором присутствуют контакты и форма для связи:

Футеру предшествует предфутерная зона с социальным доказательством — логотипами известных клиентов:

Но и этим они не ограничились! Присутствует еще постфутерная зона, предполагающая совершение конверсионного действия:

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

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

Базовые элементы футера

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

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

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

3. Политика конфиденциальности. Законы о конфиденциальности в Интернете становятся все более строгими, и поэтому наличие ссылки на такую страницу весьма важно.

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

5. Обратная связь / отзывы. Необязательная часть, но, если у вас есть отдельная посвященная этому страница, полезно будет включить здесь ссылку на нее.

6. Карта. Если ваш лендинг представляет собой визитку для размещения информации о бизнесе, чья основная деятельность происходит оффлайн (скажем, вы владеете гостевым домом, рестораном или помещением для проведения мероприятий), то обязательно подумайте над добавлением данных о местоположении в футер. Это может быть простой текст с адресом или локальная интеграция с Яндекс Картами, Google Maps или 2GIS.

Вот как можно добавить карту на лендинг при помощи конструктора секций в :

Необязательные элементы футера

Теперь рассмотрим другие, менее существенные, элементы дизайна футера.

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

9. Карта сайта (SiteMap) помогает поисковым системам лучше понимать структуру вашего сайта и контента. Многие сайты помещают ссылку на SiteMap рядом с информацией об авторских правах, в постфутере.

11. Простая форма для ввода электронной почты — отличный способ повысить Opt-In-конверсии. В качестве альтернативы, если в футере нет места для размещения формы регистрации, предлагаем поместить CTA-кнопку или ссылку на основную страницу, где вы планируете генерировать лиды.

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

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

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

15. «Обо мне» / «Биография». Когда речь идет о сайте персонального бренда или блоге, можно также добавить короткую биографию о себе, включая фотографию — она добавит сайту живой, «человеческий» элемент. Добавление ссылки на страницу «Обо мне (О нас)» даст посетителям возможность узнать о вас больше.

16. Конверсионные ссылки или призывы к действию. У вас есть товарные страницы, разделы с бестселлерами или партнерские страницы, которые вам нужно продвигать? Как насчет внедрения ссылок на них в якорный текст (Anchor Text) футера?

Что не следует добавлять в футер

Вот, чего нужно избегать:

• Счетчиков просмотров страницы и виджетов, отражающих статистику по трафику.
• Прямых партнерских ссылок.
• Встроенных фидов социальных сетей.
• Рекламы.

Какие инструменты использовать при работе над дизайном?

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

Вот и все!

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

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

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

Независимо от того, что вы решите сделать, не позволяйте своему футеру «провисать». Пора ответить на следующие вопросы:

• Есть ли на вашем сайте или в блоге футер?
• Максимально ли вы его используете?
• Что находится в нижнем колонтитуле прямо сейчас? Как это можно улучшить?

Все шаблоны 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" => "

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

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

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

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