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

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

Давайте погрузимся.

Что такое нижний колонтитул веб -сайта?

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

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

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

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

Основные элементы нижнего колонтитула

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

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

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

2. Авторские права и юридическая информация

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

3. Навигация

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

4. Призыв к действию (CTA)

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

Принципы дизайна для эффективных нижних колонтитулов

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

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

Как спроектировать нижний колонтитул для вашего сайта

Есть много способов разработать нижний колонтитул для вашего сайта. Инструменты веб-дизайна, такие как Figma, Framer или Sketch, отлично подходят для гладки прототипа для ваших дизайнов, или вы можете погрузиться с таким инструментом, как Divi, и проектировать нижний колонтитул в режиме реального времени. Для этого урока мы будем использовать Divi, чтобы показать вам, как легко спроектировать нижний колонтитул с логотипом, значками социальных сетей, выборки электронной почты и некоторыми важными ссылками-все за несколько минут.

Что такое Диви?

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

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

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

Получите диви

Как спроектировать нижний колонтитул с нуля

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

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

Войдите на свой веб -сайт WordPress и перейдите к Divi> Builder .

Затем нажмите «Добавить глобальный нижний колонтитул», а затем создайте глобальный нижний колонтитул , чтобы запустить строитель темы.

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

Далее выберите макет с тремя столбцами из доступных параметров.

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

Нажмите + Добавить цвет фона , чтобы выбрать цвет фона для нашего раздела.

Используйте #406171 в качестве цвета. Чтобы сохранить цвет как глобальный, нажмите значок +, чтобы добавить его. После того, как вы добавили цвет фона, нажмите зеленую кнопку , чтобы сохранить ее.

Добавить логотип

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

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

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

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

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

Добавить значки в социальных сетях

Нажмите на значок Grey + под логотипом, чтобы добавить новый модуль и выберите модуль «Социальные сети» .

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

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

Используйте #EE8B22 для цвета фона. Повторите эти шаги, чтобы отредактировать значки для X и Instagram.

Затем поменяйте на вкладку дизайна и добавьте следующие настройки:

• Выравнивание модуля: слева (настольный компьютер), центр (таблицы и мобильные)
• Цвет значков: #ffffff
• Используйте пользовательский размер значка: да
• Пользовательский размер значков: 20px
• Граница округленных углов: 100px

После завершения ваши значки должны выглядеть как изображение ниже.

Добавить модуль заголовка

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

Нажмите на вкладку «Дизайн» и добавьте следующие настройки:

• Уровень направления: H3
• Направляющий шрифт: самый удачный парень
• Заголовок
• Заголовок текста цвет: #ffffff
• Заголовок
• Заголовок интервалы букв: 1px

Как только все настройки на месте, ваш заголовок должен выглядеть как изображение ниже.

Добавить текстовый модуль

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

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

С вашими ссылками нажмите на вкладку «Дизайн» и добавьте следующие настройки в меню текстовых ссылок :

• Текстовый шрифт: Интер
• Выравнивание текста ссылки: слева (настольный компьютер), центр (планшет и мобильный)
• Цвет текста ссылки: #EE8B22
• Размер текста ссылки: 16px
• Высота линии ссылки: 1.3EM

Добавить модуль выбора электронной почты

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

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

• Название: Зарегистрируйтесь в отличных предложениях!
• Кнопка: Зарегистрируйтесь сейчас!
• Тело: Присоединяйтесь к нашему пакету! Подпишитесь на нашу рассылку и получите эксклюзивные скидки, ранний доступ к новым продуктам и обновления о предстоящих продажах. Кроме того, получите специальное приветственное предложение только для подписки!
• Учетная запись электронной почты: выберите один из 20+ поставщиков электронной почты, включая MailChimp, ActiveCampaign, Hubspot и многое другое. Если вам нужна помощь в настройке вашего выбора, ознакомьтесь с этим сообщением.
• Поля: переключить поле для одного имени на да
• Действие успеха: выберите отображение сообщения или перенаправить на другой URL.
• Фон: прозрачный

На вкладке «Дизайн» добавьте следующие настройки макета:

• График: тело сверху, форма сверху
• Название полной трубопровода: переключиться на да
• Электронная почта полная трубка: переключиться на да

Настройки поля:

• Поля Цвет фона: #ffffff
• Цвет текста поля: #406171
• Полевой фокус цвет фона: #EE8B22
• Полевой фокус цвет текста: #ffffff
• Fields Font: Inter
• Поля округлые углы: 5px
• Поля ширина границы: 2PX
• Поля Цвет границы: #EE8B22

Настройки текста заголовка:

• Титул шрифт: самый удачный парень
• Выравнивание текста заголовка: слева
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 24px
• Расстояние между заголовком букв: 1px

Настройки текста тела:

• Шрифт тела: Интер
• Выравнивание текста тела: слева
• Цвет текста тела: #ffffff
• Высота линии тела: 1,3 эма

Настройки кнопки:

• Используйте индивидуальные стили для кнопки: переключить на да
• Размер текста кнопки: 16px
• Кнопка текста: #ffffff
• Кнопка фона: #EE8B22
• Кнопка ширины границы: 0PX
• Радиус границы пуговиц: 5px
• Кнопка шрифта: интер
• Кнопка шрифта веса: полуболд
• Показать значок кнопки: нет
• Заполнение кнопки: 12px (вверху и внизу)

Добавить новый раздел

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

Выберите строку столбца 1/3 +/2/3 .

Установите цвет фона в разделе на #38A2DB и расстояние (на вкладке дизайна) на 10PX вверху и снизу, а затем сохраните изменения.

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

Когда появляется диалоговое окно, выберите текущую дату в списке параметров.

Когда появляется диалоговое окно текста, введите следующие настройки:

• Перед: Символ авторского права (опция + g на клавиатуре)
• После: название вашего бизнеса. Обязательно оставьте место перед входом в текст!
• Формат даты: пользовательский
• Пользовательский формат даты: y

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

Добавить модуль меню

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

С активными параметрами модуля меню выберите следующие параметры:

• Меню: выберите меню юридической информации
• Фон: прозрачный

В настройках дизайна выберите следующие настройки:

Макет:

• Стиль: оставленный выровнен

Текст меню:

• Активная ссылка цвет: #ffffff
• Меню шрифт: Интер
• Цвет текста меню: #ffffff
• Выравнивание текста: верно

Настройки раскрывающегося меню:

Здесь есть только несколько вещей, так как в вашем меню нет ссылок подменю. Эти настройки будут применяться только к мобильной версии вашего меню, когда люди просматривают ваш сайт со смартфона или планшета:

• Мобильный меню цвет фона: #38A2DB
• Мобильный меню цвет текста: #ffffff

Наконец, измените цвет значка меню гамбургера на вкладке значков на #ffffff .

Добавление последних штрихов

Теперь, когда наш дизайн нижнего колонтитула завершен, есть несколько бездомных исправлений, которые нам нужно сделать. Как вы заметите, заголовок модуля Opt-In Email не совсем соответствует меню услуг, направляющимся в соседнем столбце. Это потому, что Divi добавляет к нему немного набивки по умолчанию. Чтобы исправить это, откройте настройки модуля опции электронной почты и перейдите на вкладку Design. В раскрывающемся меню расстояния добавьте накладку 0PX вверх и внизу и влево и вправо, чтобы удалить неловкое расстояние.

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

Чтобы исправить это, нажмите на вкладку «Дополнительно» для строки. В соответствии с пользовательским CSS выберите основной элемент и перейдите к адаптивным настройкам. В поле CSS добавьте следующее для планшета:

display:flex;

После завершения изменений нажмите кнопку «Зеленое сохранение», чтобы сохранить нижний колонтитул.

Нажмите на x в правом верхнем углу, чтобы выйти из строя.

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

Как видите, Divi позволяет легко проектировать нижний колонтитул веб -сайта через несколько минут.

Поднять нижний колонтитул вашего сайта Divi

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

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