Как сделать подвал сайта


Как прижать footer (подвал сайта) к низу окна браузера

Приветствую всех посетителей моего блога! В данной заметке затронем тему верстки и разберем как прижать footer (подвал) сайта к низу окна браузера.

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

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

Вот как выглядит подвал по умолчанию, т.е. когда на странице мало контента:

А вот как должно быть по сути:

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

Для реализации задуманного создается общий блок «page» в который кладутся все остальные: шапка сайта (header), правая и левая колонки (left, right) и еще какие либо, а вот подвал (footer) остается за пределами данного блока «page».

Теперь перейдем к стилям. Задаем «html» и «body» высоту в 100%, а блоку «page» минимальную высоту также 100%. Таким образом у нас блок «footer» выталкивается за пределы окна браузера и его не будет видно совсем. Чтобы исправить ситуацию мы создаем еще один блок (substrate-footer) равный по высоте блоку подвала, но помещаем его в общий блок  «page», т.е. на то место, где по идее должен был находиться блок footer. Далее отрицательным отступом смещаем блок подвала (footer) вверх. Величина отступа равна высоте блока подвала и блока substrate-footer. После данных манипуляций наш подвал сайта встанет на свое место и будет постоянно находится внизу.

Также хотел отметить, что выше блока substrate-footer добавляется очищающий блок «clear». Это необходимо для того, чтобы отменить обтекание блокам «footer» и «substrate-footer», т.к. блокам «left» и «right» задаются свойства float:left и float:right соответственно.

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

HTML:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Подвал по умолчанию</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div><!-- Основной блок PAGE --> <div><h4>Шапка сайта</h4></div> <div><h4>Левая колонка</h4></div> <div><h4>Правая колонка</h4></div> <div> <h4>Основная колонка с контентом</h4> <p> Pellentesque vel est id massa varius interdum. Nunc nibh lectus, fringilla quis scelerisque a, eleifend vitae nibh. Sed hendrerit mauris quis tortor auctor ut luctus odio malesuada. Praesent facilisis felis nisi, sed tincidunt erat. Phasellus ornare dignissim orci in pellentesque. Aliquam dictum diam nec ipsum adipiscing vitae bibendum tellus faucibus.</p> <p>Praesent facilisis felis nisi, sed tincidunt erat. Phasellus ornare dignissim orci in pellentesque. Aliquam dictum diam nec ipsum adipiscing vitae bibendum tellus faucibus. </p> </div> <div></div><!-- очищающий блок --> <div></div><!-- блок подложка подвала сайта --> </div><!-- конец блока PAGE --> <div><!-- подвал сайта --> <h4>Подвал сайта</h4> </div> </body> </html>


CSS:

html,body { margin:0; padding:0; text-align:center; height:100% } #page { text-align:left; margin:0 auto; min-height:100%; width:960px; } #page h4 {text-align:center; margin:0} #header { background-color:#06F; height:150px; margin:0 0 3px } #left { background-color:#C93; float:left; height:100px; width:180px; } #right { background-color:#C93; float:right; height:100px; width:180px; } #content { margin:0 180px; padding:10px } .clear { clear:both; height:0px; } #substrate-footer { height:100px; margin:20px 0 0 } #footer { background-color:#6C9; height:100px; margin:-100px auto 0; width:960px; }

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

А на этом все. Встретимся в следующих постах. Пока…

10 лучших примеров дизайна нижнего колонтитула веб-сайта

Введение

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

Почему нижние колонтитулы важны для вашего сайта?

1. Они подчеркивают ваш контент

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

2. Они помогают привлекать потенциальных клиентов

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

3. Они предоставляют вашим пользователям полезную информацию

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

4. Они направляют ваших читателей

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

5. Привлекают внимание посетителей

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

10 замечательных нижних колонтитулов на наш выбор

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

1. Минимализм

Источник: www.awwwards.com

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

2. Карта сайта

Источник: www.furrion.com

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

3. Контактная форма / информационный бюллетень

Источник: valaire.mu

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

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

4. Навигация

Источник: travel.by

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

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

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

Источник: www.awwwards.com

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

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

6. Призыв к действию

Источник: www.behance.net

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

7. Контактные данные, телефон, адрес

Источник: www.behance.net

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

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

8. Карта

Источник: Bootstrap

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

9. Пользовательский нижний колонтитул

Источник: www.thespruce.com

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

10. Нет нижнего колонтитула

Источник: justdiggit.org

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

Шаги по созданию хорошего нижнего колонтитула:

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

1. Определитесь с основами

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

2. Создайте макет нижнего колонтитула

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

3. Дополните его пользовательскими элементами

  • Вставьте социальные сети: виджеты Twitter с временной шкалой или кнопкой «Подписаться» на Facebook.
  • Добавить рекламный плагин.
  • Вставьте Google Maps или другую карту по вашему выбору.
  • Поддерживайте стиль: выберите шаблон начальной загрузки / нижнего колонтитула WordPress или создайте собственный шаблон с нуля, сопоставив цвета и стили с веб-сайтом.

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

.

15 советов по созданию отличного нижнего колонтитула

15 советов по созданию отличного нижнего колонтитула | Дизайн-Хижина

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

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

.

Добавить нижний колонтитул в WordPress

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

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

  1. Войдите в панель управления администратора WordPress.
  2. Нажмите на Внешний вид
  3. Нажмите на Виджеты
  4. Если вы посмотрите на страницу Widgets , вы увидите, что виджеты разделены на две группы: Available Widgets и Inactive Widgets .В зависимости от темы вы уже можете видеть нижние колонтитулы, перечисленные в правом столбце. В этом примере в качестве примера используется виджет Text . Вы можете выбрать виджет по вашему выбору из Доступные виджеты , если вы не следуете этому примеру. При щелчке по стрелке в виджете есть предустановленный выбор нижних колонтитулов, которые вы можете выбрать. На этом снимке экрана показан нижний колонтитул №1 как выбранный. Текст будет размещен в левой части страницы.
  5. После того, как позиция виджета выбрана, вы можете редактировать ее для добавления содержимого.Поскольку это текстовый виджет, вы будете добавлять к нему текст. Вы можете назвать текстовый виджет, а затем добавить к нему текст или другой носитель. По завершении редактирования нажмите синюю кнопку Сохранить .
  6. Вы можете просмотреть добавленный виджет, посетив сайт. На снимке экрана показан добавленный виджет нижнего колонтитула из панели управления администратора.
  1. Есть несколько способов войти в опцию Customize , чтобы внести изменения в тему. Чтобы внести изменения, вам необходимо войти в систему как администратор.Сначала войдите в систему с правами администратора. Вы можете найти опцию Customize в разделе Appearance главного меню, или вы можете нажать на доменное имя вашего сайта в верхнем левом углу. Вы увидите сайт, а в верхнем левом углу появится ссылка Customize . Щелкните Customize , чтобы продолжить.
  2. Щелкните Widgets в меню.
  3. Щелкните нижний колонтитул , который вы хотите использовать. Тема Twenty Twenty имеет два предустановленных нижних колонтитула.
  4. Нажмите кнопку Добавить нижний колонтитул .
  5. Вам будет предложено выбрать виджет, который вы хотите использовать для нижнего колонтитула. В этом руководстве используется виджет Text .
  6. Отредактируйте добавленный виджет. Текстовый виджет позволяет добавлять заголовок, текст или другие материалы. Если в нижнем колонтитуле есть несколько виджетов, вы также можете установить их порядок. Нажмите Done , когда закончите добавлять текст или редактировать виджет.
  7. Чтобы сохранить изменения, вам нужно будет нажать кнопку Опубликовать .Затем вы можете прокрутить страницу вниз, чтобы увидеть добавленный нижний колонтитул.

Поздравляем! Теперь вы знаете, как добавить нижний колонтитул в WordPress. Вы можете узнать больше о том, как использовать WordPress, перейдя в Руководство по продукту для хостинга WordPress.

.

Дизайн нижнего колонтитула веб-сайта: что включать и чего избегать

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

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

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

Почему нижний колонтитул важен?

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

Однако исследование Chartbeat показало, что посетители тратят больше времени, чем вы ожидаете, прокручивая средний веб-сайт, при этом многие просматривают контент, который находится примерно на 1200 пикселей вниз или примерно на 2 экрана вниз, если экран имеет высоту 700 пикселей.

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

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

Smart Insights зафиксировала рост дохода на одного клиента на 16%, когда они протестировали нижний колонтитул с более удобной навигацией.

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

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

Что включить в дизайн нижнего колонтитула вашего веб-сайта

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

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

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

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

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

Карта сайта

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

Политика конфиденциальности и условия использования

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

  • Что собрано
  • Как хранится
  • Как это можно использовать

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

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

Стандарты

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

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

  • Ссылки электронной почты - это магниты для спама
  • Отправку формы легко отслеживать как достижение цели в Google Analytics
  • Forms можно интегрировать со сторонним программным обеспечением, таким как CRM
  • Формы позволяют отправлять определенные вопросы определенным людям

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

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

    • Адрес или схема проезда к предприятию
  • Карта или ссылка на карту
  • Телефонный номер

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

Ссылки для навигации по сайту

Включение навигационных ссылок в нижний колонтитул может помочь клиентам, которые прокручивали страницу до конца, но еще не нашли то, что искали. «Толстый нижний колонтитул» относится к тенденции веб-сайта, когда нижние колонтитулы заполнены контентом, иногда даже с использованием выпадающего мегаменю, которое включает все ссылки / контент, которые вы можете найти в раскрывающемся меню навигации заголовка.Чтобы выяснить, что лучше всего подходит для вашей компании, может помочь A / B-тестирование различных версий навигационных ссылок в дизайне нижнего колонтитула вашего веб-сайта.

Социальные иконки или виджеты

Знаете ли вы, что 72% веб-сайтов имеют значки социальных сетей в нижнем колонтитуле? Это может быть связано с тем, что значки социальных сетей, безусловно, могут отвлекать от контента, если они представлены на ранней стадии. В любом случае, это тенденция, которой вы захотите воспользоваться. Если ваша компания особенно активна в Twitter, Facebook или Instagram, подумайте о добавлении виджета, который отображает ваши последние сообщения.

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

Форма входа

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

Информационный бюллетень или подписка по электронной почте

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

Пресс

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

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

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

О нас

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

Медиа: мини-галерея, видео или аудио

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

Ключевые слова SEO

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

Награды, сертификаты и членство в ассоциациях

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

Популярные и свежие статьи

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

Призыв к действию

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

Повесть без нижнего колонтитула

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

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

Чего следует избегать в дизайне нижнего колонтитула вашего веб-сайта

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

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

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

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

Советы по профессиональному дизайну нижнего колонтитула веб-сайта

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

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

Заключение: Дизайн нижнего колонтитула веб-сайта

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

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

Какие элементы дизайна нижнего колонтитула сайта наиболее важны для вашей компании? Отправляйте твиты на @ icons_8, и мы поделимся лучшими идеями!


Об авторе
Мэдди Осман любит WordPress и писать. Когда она не занята организацией WordCamp Denver, она делится своими лучшими советами по контент-маркетингу и поисковой оптимизации в своем блоге Blogsmith.

Попробуйте бесплатные инструменты для разработчиков от команды Icons8

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


Также получите списки бесплатных векторных программ и бесплатных программ для редактирования фотографий.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий