Как создать фиксированные мобильные нижние колонтитулы с помощью Divi

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

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

Давайте приступим к делу!

Предварительный просмотр

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

Воссоздать пример №1

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

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

Интервал

Откройте настройки строки и удалите все настраиваемые верхние и нижние отступы в настройках интервала.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Видимость

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

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Удалите все стандартные верхние и нижние отступы следующей строки.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Пользовательские CSS

Наконец, мы добавляем в строку несколько настраиваемых строк CSS. Эти строки помогут превратить строку в фиксированную полосу нижнего колонтитула.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

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

Добавить содержимое

Пора начинать добавлять модули! Первый модуль, который нам нужен, - это текстовый модуль в столбце 1. Добавьте контент по выбору.

Фоновый цвет

Зайдите в настройки фона модуля и измените цвет фона.

• Цвет фона: # 5e89fb

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

Также измените настройки текста.

• Шрифт текста: Work Sans
• Толщина шрифта текста: легкий
• Цвет текста: #ffffff
• Размер текста: 16 пикселей
• Расстояние между буквами текста: -1px

Интервал

Затем добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 16 пикселей
• Нижний отступ: 16 пикселей
• Отступ слева: 15 пикселей
• Отступ справа: 15 пикселей

Граница

И закругленные углы тоже.

• Вверху слева: 10 пикселей
• Вверху справа: 10 пикселей

Коробка Тень

Завершите настройки модуля, добавив тонкую тень блока.

• Сила размытия тени коробки: 80 пикселей

Добавить модуль Blurb в столбец 2

Добавить содержимое

Добавьте модуль Blurb во второй столбец и добавьте заголовок по выбору.

Выбрать значок

Продолжите, выбрав значок для модуля Blurb.

Фоновый цвет

Также добавьте цвет фона к модулю.

• Цвет фона: # 62de9d

Настройки значков

Перейдите на вкладку дизайна и измените настройки значка.

• Цвет значка: #ffffff
• Расположение значков: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 19 пикселей

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

Продолжите, изменив настройки текста заголовка.

• Шрифт заголовка: Work Sans
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 16 пикселей
• Интервал между заголовками: -1px

Интервал

Также добавьте в модуль некоторые пользовательские отступы.

• Верхний отступ: 20 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Граница

И добавьте «10 пикселей» в верхний левый и верхний правый углы.

• Вверху слева: 10 пикселей
• Вверху справа: 10 пикселей

Коробка Тень

И последнее, но не менее важное: добавьте в модуль тонкую тень блока.

• Сила размытия тени коробки: 80 пикселей

Воссоздать пример №2

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

Переходим ко второму примеру! Снова откройте страницу по вашему выбору, прокрутите страницу до конца и добавьте новый раздел.

Интервал

Откройте настройки раздела и удалите отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Видимость

Скройте раздел на рабочем столе (и планшете, если хотите).

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Не добавляя никаких модулей, откройте настройки ряда и измените настройки размеров.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Удалите также верхнее и нижнее заполнение строки по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Пользовательские CSS

Добавьте несколько настраиваемых строк css в следующую строку. Эти строки кода CSS помогут создать фиксированную мобильную нижнюю панель.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Добавить модуль Blurb в столбец 1

Добавить содержимое

Продолжите, добавив модуль Blurb в первый столбец. Добавьте заголовок по выбору.

Выбрать значок

Затем выберите значок.

Фоновый цвет

Затем добавьте цвет фона к модулю.

• Цвет фона: # 62de9d

Настройки значков

Перейдите на вкладку дизайна и измените настройки значка модуля.

• Цвет значка: #ffffff
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 25 пикселей

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

Также измените настройки текста заголовка.

• Шрифт заголовка: Work Sans
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: #ffffff
• Интервал между заголовками: -1px

Интервал

И добавьте верхнюю и нижнюю прокладку, чтобы дать модулю немного пространства, чтобы дышать.

• Верхний отступ: 30 пикселей
• Нижний отступ: 30 пикселей

Граница

Мы также добавляем «15 пикселей» к верхней левой границе модуля.

• Вверху слева: 15 пикселей

Коробка Тень

И мы завершим модуль тонкой тенью блока.

• Сила размытия тени коробки: 80 пикселей

Клонировать модуль Blurb дважды и размещать дубликаты в оставшихся столбцах

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

Изменить цвет фона дубликата №1

Измените цвет фона первого дубликата.

• Цвет фона: # 3d3d3d

Изменить настройки интервала дубликата №1

Вместе с настройками интервалов.

• Верхнее поле: -20 пикселей
• Верхний отступ: 50 пикселей
• Нижний отступ: 30 пикселей

Изменить границу дубликата №1

И закругленные углы тоже.

Изменить цвет фона дубликата №2

Измените также цвет фона второго дубликата в третьем столбце.

• Цвет фона: # 000000

Изменить границу дубликата №2

Наряду с закругленными углами.

• Вверху справа: 15 пикселей

Воссоздать пример №3

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

Переходим к следующему и последнему примеру! Откройте одну из страниц, прокрутите страницу вниз и добавьте новый раздел.

Верхний разделитель

Откройте настройки раздела и добавьте верхний разделитель.

• Цвет разделителя: # 62de9d
• Высота разделителя: 110 пикселей

Интервал

Удалите также все стандартные верхние и нижние отступы раздела.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Коробка Тень

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

• Сила размытия тени коробки: 80 пикселей

Пользовательские CSS

И включите несколько настраиваемых строк CSS на вкладке «Дополнительно». Это поможет превратить раздел в фиксированную мобильную панель нижнего колонтитула.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Видимость

Наконец, отключите раздел на рабочем столе (и на планшете, если хотите).

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Затем добавьте пользовательские верхние и нижние отступы.

• Верхний отступ: 30 пикселей
• Нижний отступ: 20 пикселей

Пользовательские CSS

Чтобы убедиться, что все три столбца остаются на одинаковой высоте, мы также добавим строку кода CSS на расширенную вкладку строки.

display: flex;

Добавить модуль Blurb в столбец 1

Добавить содержимое

Теперь можно приступить к добавлению модулей! Добавьте модуль Blurb в первый столбец и дайте ему название.

Выбрать значок

Далее выберите значок.

Настройки значков

Перейдите на вкладку дизайна и измените настройки значка.

• Цвет значка: #ffffff
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 25 пикселей

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

Также измените настройки текста заголовка.

• Шрифт заголовка: Work Sans
• Ориентация текста заголовка: по центру
• Интервал между заголовками: -1px

Клонировать модуль Blurb Twice & Place

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

Изменить цвет значка дубликата №1

Не забудьте изменить цвет значка дубликата во втором столбце.

• Цвет значка: # 000000

Предварительный просмотр

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

Последние мысли

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