Дно CSS шаблоны

Креативные нижние CSS-шаблоны для строк сетки, контактных полос и футеров

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

Колонки, которые перестраиваются в одну на смартфонах

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

Документация Nicepage по элементу Grid Element описывает настройки колонок, строк и отступов внутри блока. В шаблонах на базе Grid Repeater стилизация одной ячейки автоматически меняет остальные, а число колонок может различаться в разных адаптивных режимах.

Каждый исходный вариант верстки подходит для определенного типа нижнего контента:

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

Внутренние отступы и контраст на границе контента

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

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

Крупная типографика, мелкий шрифт

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

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