Как создать индивидуальный дизайн с надписью «Back to Top» с помощью Divi

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

На этой неделе, в рамках нашей продолжающейся инициативы по дизайну Divi, мы собираемся показать вам, как создавать собственные «липкие» обратно вверху дизайны с помощью Divi и пакета Green Energy Layout Pack. Этот метод поможет вам улучшить взаимодействие с пользователем на ваших страницах, одновременно используя преимущества встроенных опций Divi на стороне дизайна. Мы надеемся, что это руководство вдохновит вас на создание собственной альтернативы дизайну, возвращающемуся к лучшему, и использование ее на своем следующем веб-сайте!

Давайте перейдем к этому.

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

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

Гифка

Пример # 1

Пример # 2

Пример # 3

1. Добавьте плавную прокрутку в HTML-код страницы.

Загрузите целевую страницу по зеленой энергии на новую страницу

Первое, что вам нужно сделать, это создать новую страницу и загрузить целевую страницу Green Energy Layout Pack.

Открыть настройки страницы

Откройте настройки страницы, щелкнув значок, отмеченный на экране печати ниже:

Добавить плавную прокрутку в настраиваемое поле CSS

Перейдите на вкладку Advanced и добавьте плавную прокрутку для всей страницы, добавив следующий код CSS в поле Custom CSS:

html {
scroll-behavior: smooth;
}

2. Добавьте CSS ID в раздел Hero.

Открыть раздел героев

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

Добавить CSS ID

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

• Идентификатор CSS: section-1

3. Добавьте новый раздел в конец страницы с дизайном «Сверху».

Общие шаги

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

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

Интервал

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

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

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

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

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

Добавить ссылку привязки

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

• URL-адрес ссылки на строку: yourwebsite.com/page/#section-1

Выравнивание строк

Мы также помещаем строку с правой стороны контейнера раздела.

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

Фиксированная позиция

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

• Позиция: фиксированная
• Вертикальное смещение: 30 пикселей
• Горизонтальное смещение: 30 пикселей
• Индекс Z: 99

Помимо фиксации строки, мы гарантируем, что строка перекрывает все содержимое страницы, увеличивая индекс z.

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

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

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

Теперь, когда мы выполнили все общие шаги, мы собираемся воссоздать три разных примера, которые вы видели в начале этого поста. Начнем с первого! Измените структуру столбца строки:

Фоновый цвет

Продолжите, открыв настройки строки и добавьте белый цвет фона.

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

Размеры

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

• Использовать нестандартную ширину желоба: 1
• Ширина: 9vw (рабочий стол), 23vw (планшет), 35vw (телефон)

Интервал

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

• Верхняя подкладка: 2,5 мм (рабочий стол), 6 мм (планшет), 10 мм (телефон)
• Нижняя обивка: 2,5 мм (рабочий стол), 6 мм (планшет), 10 мм (телефон)
• Левый отступ: 1vw (рабочий стол), 2vw (планшет), 4vw (телефон)
• Правое заполнение: 1vw (рабочий стол), 2vw (планшет), 4vw (телефон)

Граница

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

Коробка Тень

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

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Отображать

Чтобы столбцы оставались рядом друг с другом при всех размерах экрана, мы собираемся добавить дополнительную строку кода CSS к основному элементу строки.

display: flex;

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

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

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

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

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

• Шрифт текста: Arial
• Толщина шрифта текста: полужирный
• Выравнивание текста: вправо
• Цвет текста: # 000000
• Размер текста: 1.1vw (рабочий стол), 3vw (планшет), 4.4vw (телефон)
• Расстояние между буквами текста: -1px
• Высота текстовой строки: 1em

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

Добавить символ

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

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

И последнее, но не менее важное: перейдите на вкладку дизайна и измените настройки текста.

• Шрифт текста: Open Sans
• Выравнивание текста: по центру
• Цвет текста: # 000000
• Размер текста: 3vw (рабочий стол), 8vw (планшет), 12vw (телефон)
• Высота текстовой строки: 0,6 мкм

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

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

Размеры

Переходим ко второму примеру! Откройте настройки строки и измените ширину строки.

• Ширина: 7%

Интервал

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

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

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

Добавить символ

Продолжите, добавив текстовый модуль в строку и введите символ «↑».

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

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

• Шрифт текста: Open Sans
• Выравнивание текста: по центру
• Цвет текста: # 000000
• Размер текста: 56 пикселей
• Высота текстовой строки: 1em

Интервал

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

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

Граница

Перейдите на вкладку дизайна и добавьте «50vw» в каждый из углов. Также добавьте границу, используя следующие настройки:

• Ширина границы: 3 пикселя
• Цвет границы: # 000000

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

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

Размеры

Переходим к следующему и последнему примеру! Откройте настройки строки и измените ширину.

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

Интервал

Затем удалите верхнее и нижнее отступы по умолчанию.

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

Коробка Тень

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

• Сила распространения тени коробки: 4 пикселя
• Цвет тени: rgba (0,0,0,0.3)

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

Добавить символ

Единственный модуль, который нам нужен для этого примера дизайна, - это текстовый модуль. Добавьте '^' в поле содержимого.

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

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

• Шрифт текста: Open Sans
• Толщина шрифта текста: Ультра полужирный
• Выравнивание текста: по центру
• Цвет текста: # 4359e9
• Размер текста: 56 пикселей
• Высота текстовой строки: 1em

• Цвет тени текста: # 35d764

Интервал

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

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

Граница

И последнее, но не менее важное: добавьте рамку в текстовый модуль, и все готово!

• Ширина границы: 3 пикселя
• Цвет границы: # 4359e9

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

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

Гифка

Пример # 1

Пример # 2

Пример # 3

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

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

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