Как создать фиксированную навигацию с четырьмя углами с помощью Divi

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

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

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

Давайте начнем.

Превью

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

Стиль # 1

Стиль # 2

Подпишитесь на наш канал Youtube

Создать новую пустую страницу

Откройте новую страницу и перед редактированием с помощью Divi выберите «Пустая страница» в атрибутах страницы. После этого включите Divi Builder.

Загрузить макет целевой страницы криптовалюты

Оказавшись в Divi Visual Builder, загрузите целевую страницу пакета макетов криптовалюты со вкладки «Готовые макеты».

2. Создайте новый раздел с строкой из 4 столбцов.

Добавить новую регулярную секцию с строкой из 4 столбцов

Чтобы создать 4 элемента навигации, нам нужен новый раздел со строкой из 4 столбцов. Прокрутите страницу до конца и добавьте новый обычный раздел. Затем выберите строку с 4 столбцами одинакового размера.

Удалить заполнение раздела по умолчанию

Перед добавлением модулей обязательно удалите отступы раздела, добавив «0px» вверху и внизу. Кроме того, дважды проверьте, что у раздела нет цвета фона или градиентного фона.

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

Увеличить индекс Z

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

• Индекс Z: 10

3. Отрегулируйте размер ряда.

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Нет
• Ширина: 100%
• Максимальная ширина: 100%

Удалить заполнение строки по умолчанию

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

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

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

• Столбец №1: Изображение.
• Столбец №2: кнопка.
• Колонка № 3: Подписка в социальных сетях
• Столбец 4: кнопка.

4. Стиль каждого столбца

Столбец №1 - Модуль изображения

Добавить логотип компании

Откройте модуль изображения в столбце №1. Загрузите свой логотип (ширина 220 пикселей и высота 100 пикселей). Убедитесь, что это прозрачное изображение по центру логотипа.

Выровняйте модуль

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

• Выравнивание: левое

Добавьте собственный CSS, чтобы исправить положение модуля

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

position: fixed;
top: 0;
left: 0;

Столбец №2 - Кнопка

Добавить кнопку

Теперь в столбце № 2 добавьте модуль кнопки.

Стиль кнопки

На вкладке «Содержимое» добавьте текст для кнопки.

• Content-Text: Mine для биткойнов

Затем на вкладке «Дизайн» выберите «Выравнивание левой кнопки».

• Выравнивание: левое

После этого сдвиньте пользовательские стили кнопок в положение «Да» и настройте значения соответствующим образом:

• Пользовательские стили кнопок: Да
  • Размер текста кнопки: рабочий стол; 25 пикселей, планшет: 20 пикселей, телефон: 20 пикселей
  • Цвет текста кнопки: белый, #ffffff
  • Цвет фона кнопки: градиент
    • Цвет верха: # 1c076d, Цвет низа: # 185475
    • Тип градиента: линейный
  • Радиус границы кнопки: 7 пикселей
  • Шрифт кнопки: Tantillium Web (такой же, как макет)
  • Показать значок кнопки: Да
  • Значок кнопки: дорожный конус
  • Цвет значка кнопки: Белый, #ffffff
  • Расположение значка кнопки: справа

Добавьте собственный CSS, чтобы исправить положение модуля

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

position: fixed;
bottom: 0;
left: 0;

Колонка № 3 - Подписка в социальных сетях

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

Переходим к третьему столбцу. На этот раз нам понадобится модуль слежения за социальными сетями. Добавьте три социальные сети по вашему выбору.

Затем на вкладке «Дизайн» выберите «Выравнивание модуля».

• Выравнивание: Правое

Стиль иконок социальных сетей

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

• Цвет значка: белый #ffffff
• Использовать нестандартный размер значка: Да
  • Размер шрифта значка: рабочий стол; 25 пикселей, планшет: 20 пикселей, телефон: 20 пикселей
• Справочная информация: Нет

Скопируйте и вставьте стили элементов

Вернитесь в главное окно подписки в социальных сетях, щелкните правой кнопкой мыши первый элемент и выберите «Копировать стили элементов». Затем щелкните правой кнопкой мыши две оставшиеся социальные сети и вставьте стили.

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

Наконец, на вкладке Advanced добавьте следующий код CSS, чтобы модуль прилипал к правому верхнему углу страницы:

position: fixed; 
top: 0; 
right: 0;

Столбец №4 - Кнопка

Скопируйте стили модуля из модуля №2 и отрегулируйте

Чтобы кнопка в Модуле №4 выглядела точно так же, как кнопка в Модуле №2, мы будем использовать опцию «Копировать стили модуля». Сначала щелкните правой кнопкой мыши модуль кнопки в столбце 2, выберите «Копировать стили модуля» и затем вставьте его в модуль кнопки в столбце 4.

Пришло время изменить настройки на вкладке «Содержимое». Сначала измените текстовое содержимое.

• Текст: от «Mine for Bitcoin» к «Читать наш блог»

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

• Выравнивание: слева направо

Наконец, измените код Custom CSS на вкладке Advanced:

• Измените код на:

position: fixed; 
bottom: 0; 
right: 0;

Исход

5. Измените собственный CSS, чтобы получить второй пример стиля.

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

Просто настройте собственный CSS на вкладке «Дополнительно» во всех четырех модулях.

Модуль # 1

position: fixed; 
top: 1vw; 
left: 1vw;

Модуль # 2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Модуль # 3

position: fixed; 
top: 3vw; 
left: 2vw;

Модуль # 4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Конечный результат

Заключение

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