Футер на максимум: 3 хитрых приёма с минимумом кода

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

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

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

Базовый CSS для футера

В файл user.css необходимо добавить следующий код:

.footer .grid-child {
  flex-wrap: wrap;
}
@media (width <= 991.98px) {
  .footer .grid-child {
    flex-direction: unset;
  }
}
.footer h3 {
  font-size: 1.3rem;
}

Футер в Cassiopeia является flex-элементом (имеет определение display: flex;) без дополнительных спецификаций. Стандартное поведение flex-контейнера - распределение дочерних элементов в строку без переноса на новую строку (flex-flow: row nowrap; или flex-direction: row; flow-wrap: nowrap;). Поскольку мы хотим отображать несколько модулей в футере, первое правило гарантирует их перенос на несколько строк. Правило внутри медиа-запроса отменяет изменение направления flex на экранах меньше 992px, чтобы обеспечить большую гибкость при использовании классов Bootstrap. Третье правило не является обязательным, но добавлено из эстетических соображений, поскольку стандартный размер заголовка h3 кажется слишком большим для футера.

Футер 1: Классический с четырьмя модулями

В этом примере футер имеет оригинальный фон Cassiopeia (линейный градиент двух сине-фиолетовых цветов). Используются четыре модуля:

• О нас: пользовательский модуль с текстом
• Быстрые ссылки: модуль меню
• Мы в соцсетях: модуль меню
• Создано: пользовательский модуль с текстом (и эмодзи, поскольку в TinyMCE можно вставлять смайлики 😉)

Для всех модулей в разделе "Дополнительные настройки" необходимо установить "Стиль модуля" в значение html5. Это позволяет использовать CSS-классы и сделать заголовок модуля видимым (для первых трех модулей; в последнем заголовок скрыт). Это необходимо, поскольку стандартный стиль модуля для позиции футера в Cassiopeia - "none".

Для модуля "О нас" устанавливаем "Размер Bootstrap" равным 6. "Быстрые ссылки" и "Мы в соцсетях" получают размер 3, а "Создано" - 12. Параметр "Размер Bootstrap" добавляет соответствующие CSS-классы: col-md-6, col-md-3 или col-md-12, что обеспечивает правильное распределение модулей в футере.

Чтобы добавить пространство между тремя верхними модулями, в поле "Класс модуля" в "Дополнительных настройках" добавлен класс px-2. В модуле "Создано" использованы классы text-center pt-3 border-top border-light-subtle.

Для этого примера также требуется дополнительная строка CSS в user.css:

.footer .grid-child {
  align-items: flex-start;
  row-gap: 2rem;
}

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

Для корректного отображения футера на маленьких экранах ко всем модулям добавлен класс col-12, что заставляет модули занимать всю ширину на экранах меньше 768px.

Последний штрих: для горизонтального отображения иконок социальных сетей добавлен класс menu-horizontal в поле "Класс меню" и следующее правило в user.css:

footer .menu-horizontal {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

Футер 2: С измененным цветом фона

В этом примере мы также изменим цвет фона футера. Снова используются четыре модуля:

• Логотип: пользовательский модуль с изображением
• Магазин 1: пользовательский модуль с текстом
• Магазин 2: пользовательский модуль с текстом
• Создано: пользовательский модуль с текстом (аналогично Футеру 1)

Классы в поле "Класс модуля" те же, что и в первом примере: px-2 col-12. "Размер Bootstrap" для трех верхних модулей установлен в 4.

Потребуются три общих правила в user.css и дополнительно две строки кода для изменения цвета фона:

.footer {
  background-color: #1d4555;
  background-image: none;
}

Мы устанавливаем цвет фона и удаляем градиент, определенный в Cassiopeia (background-image: none;). И это все 😄

Футер 3: С фоновым изображением

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

• Логотип: пользовательский модуль с изображением или текстом
• Транспорт: модуль меню
• О нас: модуль меню
• Узнать больше: модуль меню
• Быстрые ссылки: модуль меню
• Мы в соцсетях: модуль меню

Четыре модуля в верхнем ряду получают те же параметры и классы, что и ранее. "Размер Bootstrap" установлен в 3.

Для двух других модулей используются классы col-12 px-2 pt-3 border-top border-light-subtle и "Размер Bootstrap" 6. Дополнительно в обоих добавляется "Класс меню" menu-horizontal, а в "Мы в соцсетях" также добавляется social.

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

.footer {
  background-color: #1d4555;
  background-image: url('../images/your-background-image.jpg');
}

и

.footer .menu-horizontal {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.social {
  justify-content: flex-end;
}

Фоновое изображение можно загрузить в папку images внутри шаблона (media/templates/site/cassiopeia/images). Это можно сделать в административной панели: Система → Шаблоны сайта → Cassiopeia Details and Files → Новая папка внутри папки images.

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

Чтобы добавить больше пространства в верхней части футера, можно использовать:

.footer .grid-child {
  padding-block-start: 5rem;
}

Конечно, можно экспериментировать с размерами для разных устройств: 3 колонки на компьютерах, 2 на планшетах и 1 на мобильных. Или любой другой вариант по вашему вкусу.

Бонус: Фиксация футера внизу страницы

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

С помощью flexbox можно прижать последний элемент к низу. Упрощенная версия структуры Cassiopeia выглядит так:

<body>
  <header></header>
  <div class="site-grid"></div>
  <footer></footer>
</body>

CSS для элемента body:

body {
  flex-direction: column;
  display: flex;
  min-height: 100vh;
  position: relative;
} 

Это означает, что header, site-grid (с основным содержимым) и footer будут отображаться один под другим, а минимальная высота body равна высоте вашего экрана (100vh).

У "site-grid" есть важное определение:

.site-grid {
  margin-bottom: auto;
}

Это в сочетании с min-height body всегда прижимает футер к низу, независимо от того, насколько короткое содержимое внутри site-grid. Того же эффекта можно достичь с помощью:

.footer {
  margin-top: auto;
}

---