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

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

Оформление

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

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

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

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

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

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

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

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

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

Здравствуйте, уважаемые друзья и гости блога! Сегодня пойдет речь о создании сайта, вернее сказать о его одной составляющей — Подвал сайта , по научному Footer HTML или просто footer. Не смотря на то, что это самая мало видимая часть сайта и мало кто на нее обращает внимание, это на первый взгляд так кажется и многие так думают. И вот из-за этого многие частенько пренебрегают оформлением подвала сайта, что в корне не верно и не правильно!

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

И так, начнем с самого начала...

Что такое подвал сайта или Footer HTML?

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

И не прав тот, кто думает, что в подвал сайта заходит мало посетителей, в корне не прав!

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

Как правильно оформить подвал сайта?

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

Это первый подвал сайта :

Это второй подвал для сайта :

Это третий подвал для сайта :

Это четвертый подвал для сайта :

Это пятый подвал сайта :

Это шестой подвал сайта :

Ну, как Вам эти Footer HTML? Понравился хотя бы один из них? Я надеюсь, что да?!

Если они вам понравились, тогда я предлагаю скачать их совершенно бесплатно прямо сейчас и использовать в своих целях!

В папке, которую Вы скачали содержится шесть файлов с Footer HTML. И вам остается только исправить в текстовом редакторе содержание под свой сайт и все!

К стати о текстовом редакторе! Я например пользуюсь,и вам советую, только . Так как он самый удобный и безопасный!

Вот теперь все. Спасибо за внимание!

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

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

Какие проблемы возникли с нашим макетом сайта

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

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

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

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

Заголовок Шапка Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы Подвал

А в файле Style.css были прописаны следующие CSS свойства:

Body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }

Ну, а сам макет выглядел примерно так:

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

Как прижать футер к низу макета сайта

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

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

Body, html { margin:0px; padding:0px; height: 100%; }

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

Основные свойства CSS, при желании, вы можете посмотреть . Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

Еще я хочу его подсветить (div с id="maket"). Для этого задам ему рамку с помощью соответствующего свойства Border ():

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

Заголовок Шапка Левая колонка Меню Меню Меню Меню Правая колонка Меню Меню Меню Меню Содержимое страницы Содержимое страницы Содержимое Подвал

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

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

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

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

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

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

#footer{ background-color:#FFC0FF; clear:both; height: 50px; }

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

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

Вставляем распорку и боремся с Internet Explorer

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

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

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

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки ) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID () с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

Заголовок Шапка Левая колонка Меню Меню Меню Меню Правая колонка Меню Меню Меню Меню Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы Подвал

А в Style.css пропишем для этого ( , задающее высоту этому контейнеру-распорке равную высоте подвала:

#rasporka { height: 50px; }

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

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

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

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

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

#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; }

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

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

Все это происходит из-за того, что ( не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:

* html #maket { height: 100%; }

Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

Body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }

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

Можете также посмотреть видео «Работа с Html тегом div»:

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
DiV верстка - Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS

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

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

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

Конечно, приоритет стоит отдать разделу хедера и дизайну над линией сгиба (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, к примеру, существуют множество готовых макетов и бесплатных шаблонов посадочных страниц высокого качества, которые вы можете и настроить под себя:

Вот и все!

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

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

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

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

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

Для начала покажу Вам результат сегодняшнего поста. Футер будет небольшим, и будет иметь лишь одну строчку текста

Проблемы при реализации футера

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

Вот схематично изображенный браузер

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

Но что будет если высота сайта не такая большая, что бы создать вертикальный скролл?

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

Есть два варианта:

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

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

Теория реализации футера

Что я предлагаю? Я предлагаю использовать jquery . С помощью нее мы можем узнать высоту браузера, или любого другого объекта на нашем сайте. Для чего это нужно? Так как футер будет являться абсолютно позиционированным объектом (иметь стиль position:absolute;) то высота рабочей области, или же высота главной таблицы, позволит нам узнать на сколько сдвинуть, по верху (стиль top), нашу футер область!

Думаю ясно как мы будем реализовывать наш подвал

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

Создаем футер >Редактируем стиль таблицы

Для начала нам необходимо подправить стиль нашей главной таблицы.

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

Открываем пользовательский style.css, находим класс table (.table{...}) и правим вот так

Table
{
position:absolute;
top:0px;
left:50%;
margin-left:-390px;
padding-bottom:50px;
z-index: 1;
}

Я добавил стиль padding-bottom:50px;, то есть сделал пространство, между концом таблицы и концом окна браузера, размером в 50 пикселей. Для подвала который я задумал (скрин на результат в начале поста) этого места будет предостаточно, если Вы задумали футер куда больше чем мой, то ставьте столько пикселей сколько Вам надо!

>Редактируем главный шаблон

Открываем пользовательский index.html и перед

вставляем наш футер

Работает на RS-BLOG v2 | При копирование материал с даного блога не забывайте выкладывать ссылку на источник - rsblog.ru

Поясню некоторые стили которые тут используются

• display:none; - Наш подвал будет появляться пользователю только после того как загрузится вся страница, до этого момента футер видно не будет!
• left:50%;margin-left:-390px; - Эти два стиля позволяют позиционировать футер ровно в центре браузера.
• text-align:center; - позволяют разместить текст, содержащийся в блоке, по центру.

>Подключаем jquery и js.js

Для начала ее необходимо скачать. Заходим вот по этой ссылке и жмем сюда

Откроется код, выделяем его весь и копируем в блокнот. В блокноте жмем Файл -> Сохранить как

Вводим имя (jquery.js) файла обязательно с.js

и сохраняем в пользовательской папке templates. Теперь у нас в папке с движком есть необходимый нам файл. Так же стоит создать файл js.js (пока пустой файл). В нем мы будем скоро писать функцию отображение футера. Вот как выглядит сейчас содержимое папки templates

Я, если мне память не изменяет, записывал видео урок где подключал jquery немного другим способом, если интересно, то можете посмотрите

Теперь осталось подключить js файлы к нашему блогу. Для этого открываем пользовательский index.html и после сточки