Footer html оформление. Все, что вам нужно знать о дизайне футера на лендинге

Сохраняем файл 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.

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

Но вот вам вопрос: как вы считаете, насколько большое значение для ресурса имеет футер (с англ. footer — нижний колонтитул, «подвал» web-страницы)? Казалось бы, он находится в самой неприметной части страницы и почти невидим… Но нет.

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

1. Креативный дизайн

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

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

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

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

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

2. Единая визуальная линия

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

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

Один из лучших образцов целостной визуальной структуры можно встретить на The Pixel Creative Blog.

3. Альтернативная навигация

Представим себя на месте online посетителя. Вы попадаете на страницу и следуете одним из предлагаемых маршрутов в попытке найти необходимую вам информацию. Наконец, вы проматываете одну из страниц до конца, надеясь все-таки найти хоть какие-то крупицы нужного вам материала, и… в футере натыкаетесь на альтернативный вариант навигации по сайту, который в доступной форме объясняет вам структуру ресурса.

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

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

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

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

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

5. Доверие

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

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

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

Вместо заключения

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

А что касается автономных целевых страниц, то рекомендация LPgenerator следующая:

• если лендинг имеет скроллинг (прокрутку) разместите в футере полезные пункты меню, например, услуги, кейсы, отзывы, с автоматической прокруткой к конкретному блоку вашей страницы;

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

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

Оформление

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

Навигация по сайту

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

Ссылки на страницы

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

Контактная информация

Чаще всего в футер добавляется контактная информация, ссылки на страницы в социальных сетях, иногда даже карта с отметкой расположения интернет-магазина (или пункта самовывоза). Такая информация повышает доверие посетителей.

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

Не стоит добавлять в подвал сайта лишней информации - например, реквизиты компании (ИНН, ОГРН и т.д.) лучше оставить для страниц «О компании» или «Контакты».

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

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

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

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

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

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

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

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

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

• Контакты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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