Создание впечатляющей панели навигации с новой структурой столбцов Divi

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

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

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

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

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

Цветовые палитры

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

Свет

• Цвет # 1: # f6f6f6 (фон раздела)
• Цвет # 2: #ffffff (фон столбца)
• Цвет # 3: # 333333 (цвет текста заголовка)
• Цвет # 4: # 000000 (цвет разделителя)
• Цвет # 5: # 6F6B68 (рекламное объявление о цвете основного текста)
• Цвет # 6: # e5e5e5 (фон столбца 2)
• Цвет # 7: #ffffff (цвет фона аннотации)

Темный

• Цвет # 1: # 141414.
• Цвет # 2: # 212121.
• Цвет # 3: #ffffff
• Цвет # 4: #ffffff
• Цвет # 5: #dddddd
• Цвет # 6: # 212121.
• Цвет # 7: # 333333.

Взаимные цвета

• Цвет # 7: # 0457ff
• Цвет # 8: # cc0432
• Цвет # 9: # 839e00.
• Цвет # 10: # c68e00.

Приступим к созданию

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

Фоновый цвет

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

• Цвет фона: цвет # 1 (найти в цветовой палитре)

Интервал

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

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

Добавить строку №1

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

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

Цвет фона столбца 1

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона столбца 1:

• Цвет фона столбца 1: цвет №2 (найти в цветовой палитре)

Размеры

Затем перейдите на вкладку «Дизайн» и измените настройки размера вашей строки:

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

Интервал

Наконец, добавьте отступ к строке и первому столбцу:

• Нижний отступ: 100 пикселей
• Отступ сверху столбца 1: 100 пикселей.
• Отступ нижнего столбца 1: 100 пикселей
• Колонка 1, отступ слева: 50 пикселей.
• Колонка 1, отступ справа: 50 пикселей.

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

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

Пора начинать добавлять модули! Начнем с добавления заголовка «Текстовый модуль». После того, как вы добавили копию H1, измените настройки текста заголовка вашего модуля:

• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по левому краю
• Цвет текста заголовка: цвет № 3 (найти в цветовой палитре)
• Размер текста заголовка: 75 пикселей (рабочий стол), 55 пикселей (планшет), 36 пикселей (телефон)

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

Цвет разделителя

Прямо под заголовком Текстовый модуль добавьте модуль разделителя следующего цвета:

• Цвет разделителя: цвет # 4 (найти в цветовой палитре)

Размеры

Затем откройте настройки размера и отрегулируйте ширину разделителя:

• Ширина: 27%

Интервал

Также добавьте немного места в верхней части разделителя:

• Верхнее поле: 50 пикселей

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

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

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

• Ориентация текста: по ширине

Размеры

Измените также настройки размера этого модуля:

• Ширина: 80% (рабочий стол), 100% (планшет и телефон)

Интервал

И добавьте немного места в верхней части вашего модуля, используя настраиваемое поле:

• Верхнее поле: 50 пикселей

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

Значок

Теперь мы можем перейти ко второму столбцу. Мы начнем с создания одного из модулей Blurb. После этого мы можем клонировать этот модуль и соответствующим образом изменить его. После добавления модуля Blurb и изменения содержимого выберите нужный значок.

Фоновый цвет

Продолжите, добавив цвет фона к вашему модулю Blurb:

• Цвет фона: цвет # 7 (найти в цветовой палитре)

Фоновый узор

Сохраните следующий небольшой шаблон на свой компьютер:

Загрузите его в качестве фонового изображения со следующими настройками:

• Размер фонового изображения: фактический размер
• Положение фонового изображения: по центру
• Повтор фонового изображения: повтор

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

Перейдите на вкладку Дизайн, откройте настройки изображения и значков и измените настройки соответствующим образом:

• Цвет значка: цвет # 7 (найти в цветовой палитре)
• Значок Круга: Да
• Цвет круга: #FFFFFF
• Размер шрифта значка: 33 пикс.

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

Затем откройте настройки текста и внесите некоторые изменения:

• Ориентация текста: по центру
• Цвет текста: светлый

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

Название нашего модуля Blurb также нуждается в некоторых дополнительных изменениях:

• Плотность шрифта заголовка: Ультра полужирный
• Стиль шрифта заголовка: прописные

Интервал

И последнее, но не менее важное: добавьте пользовательские отступы, чтобы придать модулю Blurb желаемый внешний вид:

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

Клонировать модуль Blurb три раза и поместить 2 в оставшийся столбец

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

Изменить новые модули Blurb

Изменить значок

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

Изменить цвет фона

Точно так же вам нужно будет изменить цвет фона на цвет по выбору или один из цветов в цветовой палитре (цвет № 8, № 9 или № 10).

Изменить цвет значка

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

Добавить строку №2

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

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

Размеры

Откройте настройки строки, перейдите в настройки размера и увеличьте ширину вашей строки:

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

Интервал

Затем откройте настройки Spacing и добавьте пользовательские отступы вверху и внизу вашей строки:

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

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

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

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

• Толщина шрифта заголовка 2: полужирный
• Выравнивание текста заголовка 2: по левому краю
• Цвет текста заголовка 2: цвет №3 (найти в цветовой палитре)
• Размер текста заголовка: 32 пикселя

Добавить модуль разделителя

Цвет разделителя

Сразу под заголовком Text Module добавьте Divider Module следующего цвета:

• Цвет: цвет # 4 (найти в цветовой палитре)

Размеры

Измените ширину разделителя следующим образом:

• Ширина: 9%

Интервал

Наконец, добавьте немного места в верхнюю часть разделителя:

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

Добавить строку №3

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

Чтобы поделиться выделенными функциями, выберите следующую структуру столбцов для новой строки:

Цвет фона столбца

Откройте настройки строки и добавьте следующий цвет фона в каждый из ваших столбцов:

• Цвет фона столбца: цвет # 6 (найти в цветовой палитре)

Размеры

Увеличьте ширину вашего ряда следующим образом:

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

Интервал

И также добавьте отступы:

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

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

Значок

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

Фоновый цвет

Придайте вашему модулю Blurb цвет фона следующим образом:

• Цвет фона: цвет # 7 (найти в цветовой палитре)

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

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

• Цвет значка: #ffffff
• Значок Круга: Да
• Цвет круга: цвет № 7 (найти в цветовой палитре)
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 33 пикс.

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

Также измените ориентацию текста в модуле Blurb:

• Ориентация текста: по центру

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

Затем перейдите к настройкам текста заголовка и внесите некоторые изменения:

• Плотность шрифта заголовка: Ультра полужирный
• Стиль шрифта заголовка: прописные
• Цвет текста заголовка: цвет № 3 (найти в цветовой палитре)

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

Основной текст модуля Blurb также нуждается в другом цвете:

• Цвет основного текста: цвет № 5 (найти в цветовой палитре)

Интервал

Наконец, добавьте несколько пользовательских настроек Spacing в свой модуль Blurb:

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

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

Выравнивание кнопок

Прямо под модулем Blurb добавьте модуль кнопок. Откройте его настройки и измените выравнивание кнопок:

• Расположение кнопок: по центру

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

Затем измените внешний вид кнопки:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 15 пикселей
• Цвет текста кнопки: цвет # 3
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Плотность шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

Также добавьте немного поля в нижней части модуля кнопок:

• Нижнее поле: 30 пикселей

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

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

Изменить новые модули Blurb

Изменить значок

Измените значок каждого дублирующего модуля Blurb на новый значок по выбору.

Изменить цвет значка

Также измените цвет значка. Не стесняйтесь использовать номера 8, 9 и 10 цветовой палитры.

Clone Row

Найти и клонировать строку

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

Разместить строку

Затем мы разместим его прямо под последней созданной строкой.

Clone Row

Найти и клонировать строку

Сделайте то же самое со строкой, содержащей выделенные модули Blurb.

Разместить строку

И поместите его под своим новым заголовком.

Изменить структуру столбца

Чтобы в этой строке отображалось больше функций, мы собираемся изменить структуру столбцов на 5 столбцов вместо 4:

Добавить столбец 5 Цвет фона столбца

Также добавьте цвет фона столбца в новый столбец:

• Цвет фона столбца: цвет №6 (найти в цветовой палитре)

Клонировать модули Blurb и Button и поместить в столбец 5

Клонируйте один из модулей Blurb в своей строке и заполните пространство, поместив дубликат в столбец 5. Также измените значок и цвет значка.

Клонировать 5-колоночный ряд

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

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

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

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

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