Создайте прокручиваемый список навигации портфолио с эффектами прокрутки Divi

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

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

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

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

Рабочий стол

Мобильный

Каркас

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

Скачать The Hero Sections БЕСПЛАТНО

Чтобы получить доступ к бесплатному прокручиваемому макету списка навигации портфолио, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

1. Создать новый раздел

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

Фон

Начните с обычного раздела на новой или существующей странице. Перед добавлением каких-либо строк или модулей добавьте в раздел цвет фона.

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

Интервал

Добавьте достаточно пространства в раздел, чтобы эффекты прокрутки тоже творили свое волшебство.

• Отступ сверху и снизу: 660 пикселей

2. Создайте прокручиваемый список навигации портфолио.

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

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

Добавьте первую строку и выберите следующую структуру столбцов:

Размеры

Далее отрегулируйте ширину ряда.

• Ширина: 90%
• Максимальная ширина: 2560 пикселей

Интервал

Затем отрегулируйте настройки интервала.

• Левый отступ
  • Рабочий стол: 130 пикселей
  • Планшет и телефон: 50 пикселей

Ярлык администратора

И пометьте строку.

• Ярлык администратора: строка 1

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

Содержание

Добавьте текстовый модуль для заголовка. Вставьте контент H1 по вашему выбору.

Текст заголовка

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

• Уровень заголовка: H1
• Шрифт: Alata
• Вес: жирный
• Цвет: # a3f7bf
• Размер
  • Рабочий стол: 190 пикселей
  • Таблетка: 120 пикселей
  • Телефон: 50 пикселей
• Межбуквенное расстояние
  • Рабочий стол и планшет: 7 пикселей
  • Телефон: 8px

Эффекты прокрутки

И последнее, но не менее важное: добавьте эффект постепенного появления и исчезновения прокрутки на вкладке «Дополнительно».

• Включить эффект: постепенное появление и исчезновение
• Вид снизу
  • Позиция: 100%
  • Начальная непрозрачность: 100%
• Средняя непрозрачность
  • Позиция: 50%
  • Середина: 100%
• Вверху области просмотра
  • Позиция: 80%
  • Конечная непрозрачность: 20%

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

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

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

Ярлык администратора

Обозначьте строку.

• Ярлык администратора: строка 2

Размеры

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

• Ширина желоба: 1
• Ширина: 80%
• Максимальная ширина: 1920 пикселей

Столбец 1 Настройки

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

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

• Основной элемент: ширина: 20%! Важно

width: 20% !important }

Столбец 2 Настройки

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

Сделайте то же самое для второго столбца.

• Основной элемент: ширина: 80%! Важно

width: 80% !important }

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

Содержание

Теперь добавьте модуль кнопок в столбец 1 с какой-нибудь копией по вашему выбору.

• Текст кнопки: Просмотр

Ссылка

Затем добавьте ссылку привязки к модулю. Мы добавим соответствующий CSS ID для этой якорной ссылки позже в руководстве.

• URL ссылки на кнопку: #VB

Выравнивание

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

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

Кнопка

Затем настройте кнопку соответствующим образом:

• Пользовательские стили для кнопки: Да
• Размер текста
  • Рабочий стол: 30 пикселей
  • Таблетка: 25 пикселей
  • Телефон: 20 пикселей
• Цвет: белый #ffffff
• Фон: темно-серый # 222831
• Ширина границы: 0 пикселей
• Радиус границы: 0 пикселей
• Расстояние между буквами: 1 пиксель
• Шрифт: Alata
• Показать значок кнопки: Нет

Интервал

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

• Верхняя обивка
  • Рабочий стол: 25 пикселей
  • Таблетка: 15 пикселей
  • Телефон: 5 пикселей

Эффекты прокрутки

И добавьте эффект постепенного появления и исчезновения прокрутки.

• Включить эффект: постепенное появление и исчезновение
• Нижняя часть окна просмотра
  • Позиция: 40%
  • Начальная непрозрачность: 0%
• Средняя непрозрачность
  • Внизу: 45%
  • Середина: 100%
  • Сверху: 55%
• Вверху области просмотра
  • Позиция: 60%
  • Конечная непрозрачность: 0%

Коробка Тень

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

• Тень коробки: 4-й вариант
• Горизонтальное положение: 0 пикселей
• Вертикальное положение
  • Наведение: 5 пикселей
• Сила размытия: 0 пикселей
• Сила распространения: 0 пикселей
• Цвет тени: Аква-зеленый # a3f7bf

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

Содержание

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

Текст заголовка

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

• Уровень заголовка: H3
• Шрифт: Alata
• Цвет
  • Рабочий стол: белый #ffffff
  • Наведите курсор: Aqua Green # a3f7bf
• Размер текста
  • Рабочий стол: 80 пикселей
  • Таблетка: 65 пикселей
  • Телефон: 38px

Эффекты прокрутки

И завершите настройки модуля, добавив эффект постепенного появления и исчезновения прокрутки на вкладке «Дополнительно».

• Включить эффект: постепенное появление и исчезновение
• Вид снизу
  • Позиция: 40%
  • Начальная непрозрачность: 15%
• Средняя непрозрачность
  • Внизу: 45%
  • Середина: 100%
  • Сверху: 55%
• Вверху области просмотра
  • Позиция: 60%
  • Конечная непрозрачность: 15%

Повторяющаяся строка 2

Чтобы заполнить список навигации, продублируйте эту строку три раза. Новые строки будут перенумерованы; 2, 3 и 4.

Отрегулируйте строку 3

Ярлык администратора строки

Измените метку администратора строки с 2 на 3.

• Ярлык администратора: строка 3

Кнопочный модуль

Измените ссылку привязки с #VB на #WEB.

• URL ссылки на кнопку: #WEB

Текстовый модуль

Измените также содержимое H3 в текстовом модуле.

• Основной текст: веб-сайты

Отрегулируйте строку 4

Ярлык администратора строки

Измените метку администратора строки с 2 на 4.

• Ярлык администратора: строка 4

Кнопочный модуль

Измените ссылку привязки с #VB на #MA.

• URL ссылки на кнопку: #MA

Текстовый модуль

Измените также и содержимое H3.

• Основной текст: мобильные приложения

Отрегулируйте строку 5

Ярлык администратора строки

Измените метку администратора строки с 2 на 5.

• Ярлык администратора: строка 5

Расстояние между рядами

Добавьте немного нижнего поля.

• Нижняя маржа
  • Рабочий стол 230px
  • Таблетка: 100 пикселей
  • Телефон: 60 пикселей

Кнопочный модуль

Измените ссылку привязки с #VB на #UX.

• URL ссылки на кнопку: #UX

Текстовый модуль

И здесь также измените содержимое H3.

• Основной текст: UX-дизайн

3. Создайте элементы портфолио

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

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

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

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

Ярлык администратора

Не забудьте пометить новую строку.

• Ярлык администратора: строка 6

CSS ID и классы

Вставьте соответствующий идентификатор CSS в расширенную вкладку.

• Идентификатор CSS: VB

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

Видимость

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

• Показать разделитель: Нет

Повторяющийся ряд 6

Продублируйте этот ряд три раза. Новые строки будут перенумерованы; 8, 10 и 12.

Отрегулируйте строку 8

Ярлык администратора

Измените метку администратора с 6 на 8.

• Ярлык администратора: строка 8

CSS ID и классы

Измените идентификатор CSS с VB на WEB.

• CSS ID: WEB

Отрегулируйте строку 10

Ярлык администратора

Измените метку администратора с 6 на 10.

• Ярлык администратора: строка 10

CSS ID и классы

Измените идентификатор CSS с VB на MA.

• Идентификатор CSS: MA

Отрегулируйте строку 12

Ярлык администратора

Измените метку администратора с 6 на 12.

• Ярлык администратора: строка 12

CSS ID и классы

Ярлык администратора

Измените идентификатор CSS с VB на UX.

• Идентификатор CSS: UX

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

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

Оставьте четыре ряда с разделителями на месте. Добавьте новую строку с одним столбцом.

Фон

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

• Фоновое изображение: фото
  • Смешивание изображений: умножение
• Фоновый градиент
  • Цвет 1: темно-серый # 222831
  • Цвет 2: прозрачный
  • Тип: линейный
  • Направление: 90 градусов
  • Стартовая позиция: 50%
  • Конечное положение: 100%
  • Поместите градиент над фоновым изображением: Да

Ярлык администратора

Обозначьте строку.

• Ярлык администратора: строка 7

Размеры

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

• Ширина: 80%
• Максимальная ширина: 2560 пикселей
• Выравнивание: по центру

Граница

Также добавьте закругленные углы.

• Закругленные углы: 25 пикселей

Эффекты прокрутки

И включите эффект постепенного появления и исчезновения прокрутки.

• Включить эффекты: постепенное появление и исчезновение
  • Начальная непрозрачность: 0%
  • Средняя непрозрачность: 100%
    • Позиция: 80%
  • Конечная непрозрачность: 20%

Добавить модуль призыва к действию в строку 7

Содержание

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

• Название: Визуальный брендинг
• Кнопка: Узнать больше
• Тело: описательный текст

Фон

Удалите цвет фона по умолчанию.

• Справочная информация: Нет

Ссылка

Добавьте ссылку на соответствующую страницу. Сейчас мы вставим #.

• Ссылка: #

Текст заголовка

Затем стилизуйте текст заголовка.

• Уровень заголовка: H2
• Шрифт: Alata
• Цвет: белый #ffffff
• Размер
  • Рабочий стол: 70 пикселей
  • Таблетка: 60 ​​пикселей
  • Телефон: 48px
• Расстояние между буквами: 1 пиксель

Основной текст

Также стилизуйте основной текст.

• Шрифт: Lato
• Цвет: белый #ffffff
• Размер
  • Рабочий стол: 19 пикселей
  • Таблетка: 20 пикселей
  • Телефон: 18px
• Высота линии: 1,8 м

Кнопка

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

• Пользовательские стили: Да
• Размер текста: 20 пикселей
• Цвет текста: темно-серый # 222831
• Фон: Aqua Green # a3f7bf
• Радиус границы: 9 пикселей
• Расстояние между буквами: 1 пиксель
• Шрифт кнопки: Alata
• Верхнее поле: 35 пикселей

Размеры

Также отрегулируйте размер модуля.

• Ширина: 50%
• Максимальная ширина
  • Рабочий стол: 50%
  • Планшет и телефон: 100%
• Выравнивание: по левому краю

Интервал

Также добавьте отступы к модулю.

• Левый отступ:
  • Рабочий стол: 90 пикселей
• Отступ слева и справа:
  • Таблетка: 50 пикселей
  • Телефон: 40 пикселей

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

И последнее, но не менее важное: добавьте одну строку кода CSS в заголовок промо на вкладке «Дополнительно».

• Название промо: padding-bottom: 30px;

padding-bottom: 30px; }

Повторяющийся ряд 7

Трижды продублировать ряд 7. Новые строки будут перенумерованы; 9, 11 и 13.

Отрегулируйте строку 9

Фон

Измените фоновое изображение и переключите направление градиента.

• Фоновое изображение: Новое фото
• Фоновый градиент
  • Цвет 1: прозрачный
  • Цвет 2: темно-серый # 222831
  • Стартовая позиция: 0%
  • Конечная позиция: 50%

Ярлык администратора

Обновите метку администратора строки с 7 до 9.

• Ярлык администратора: строка 9

Отрегулируйте модуль призыва к действию в строке 9

Содержание

Обновите содержимое модуля.

• Название: Сайты
• Тело: новый описательный текст

Ссылка

Также обновите ссылку.

• Ссылка: Новая ссылка

Размеры

Измените выравнивание модуля слева направо.

• Выравнивание модуля: справа

Интервал

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

• Правый отступ
  • Рабочий стол: 90 пикселей

Отрегулируйте строку 11

Фон

Измените фоновое изображение в новой строке.

• Фоновое изображение: другое фото

Ярлык администратора

Обновите метку администратора строки с 7 до 11.

• Ярлык администратора: строка 11.

Измените модуль призыва к действию в строке 11

Содержание

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

Ссылка

Измените и ссылку.

• Ссылка: Новая ссылка

Отрегулируйте строку 13

Фон

Измените фоновое изображение и переключите направление градиента.

• Фоновое изображение: Новое фото
• Фоновый градиент
  • Цвет 1: прозрачный
  • Цвет 2: темно-серый # 222831
  • Стартовая позиция: 0%
  • Конечная позиция: 50%

Ярлык администратора

Откройте вкладку метки администратора и обновите номер строки до 13.

Измените модуль призыва к действию в строке 13

Содержание

Обновите содержимое модуля.

• Название: UX Design
• Тело: новый описательный текст

Ссылка

Также обновите ссылку.

• Ссылка: Новая ссылка

Размеры

Измените выравнивание модуля слева направо.

• Выравнивание модуля: справа

Интервал

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

• Правый отступ
  • Рабочий стол: 90 пикселей

Переупорядочить строки

Переместите ряды 7, 9 и 11.

Размещайте строки в правильном порядке в соответствии с их административной меткой.

Сравните свой каркас

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

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

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

Рабочий стол

Мобильный

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

В этом пошаговом руководстве мы воссоздали прокручиваемый список навигации портфолио с эффектами прокрутки Divi. Кроме того, мы добавили элементы портфолио. Навигация контролируется якорными ссылками и идентификаторами CSS. Это отличный способ интерактивного отображения элементов портфолио. Оставьте нам комментарий, если он вам понравился или у вас есть вопросы!