Как создать липкие заголовки разделов с Divi

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

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

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

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

Рабочий стол

Мобильный

Скачать макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

1. Создать дизайн сечения

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

Интервал

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

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

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

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

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

Размеры

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

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

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

Добавить контент H2

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

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

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

• Шрифт заголовка 2: Poppins
• Толщина шрифта заголовка 2: полужирный
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2:
  • Рабочий стол: 20vw
  • Планшет и телефон: 28vw

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

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

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

Размеры

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

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

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

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

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

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

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

• Шрифт текста: Поппинс
• Цвет текста: # 000000
• Размер текста:
  • Рабочий стол: 2vw
  • Таблетка: 4vw
  • Телефон: 5vw
• Расстояние между буквами текста: -0,1vw
• Высота текстовой строки: 1,6 мкм

Размеры

Измените настройки размера для разных размеров экрана.

• Ширина:
  • Рабочий стол: 70%
  • Планшет и телефон: 90%
• Выравнивание модуля: по центру

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

Загрузить изображение

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

Размеры

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

• Принудительная полная ширина: Да

Интервал

Также добавьте немного верхнего поля.

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

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

Добавить копию

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

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

Соответственно измените настройки кнопок модуля:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки:
  • Рабочий стол: 1.5vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3.5vw
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # f6223e
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Поппинс
• Показать значок кнопки: Да
• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет

Интервал

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

• Верхняя обивка:
  • Компьютеры и планшеты: 3%
  • Телефон: 5%
• Нижняя обивка:
  • Компьютеры и планшеты: 3%
  • Телефон: 5%
• Левый отступ:
  • Рабочий стол: 5vw
  • Таблетка: 8vw
  • Телефон: 12vw
• Правый отступ:
  • Рабочий стол: 5vw
  • Таблетка: 8vw
  • Телефон: 12vw

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

Добавить содержимое маркированного списка

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

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

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

• Шрифт текста: Поппинс
• Цвет текста: # 000000
• Размер текста:
  • Рабочий стол: 2vw
  • Таблетка: 4vw
  • Телефон: 5vw
• Расстояние между буквами текста: -0,1vw
• Высота текстовой строки: 1,6 мкм

Настройки текста упорядоченного списка

Также внесите некоторые изменения в настройки текста упорядоченного списка.

• Цвет текста упорядоченного списка: # ff2340
• Высота строки упорядоченного списка: 1,6 мкм
• Тип стиля упорядоченного списка: верхний римский
• Положение стиля упорядоченного списка: снаружи

Добавить черный цвет текста к элементам списка по отдельности в поле содержимого

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

Размеры

Затем мы изменим настройки размера для разных размеров экрана.

• Ширина:
  • Рабочий стол: 70%
  • Планшет и телефон: 90%
• Выравнивание модуля: по центру

Интервал

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

• Верхнее поле: 50 пикселей
• Левый отступ: 5%
• Правое заполнение: 5%

2. Примените эффект липкости к заголовку раздела.

Добавить эффект липкости к строке

Теперь, когда мы создали основу нашего дизайна, пришло время реализовать эффект, который вы могли видеть в превью этого поста. Для этого мы сделаем всю нашу первую строку «липкой», открыв настройки строки, перейдя на вкладку «Дополнительно» и применив следующие настройки:

• Липкая позиция: придерживаться верха
• Нижний предел липкости: раздел
• Смещение от окружающих липких элементов: Да
• Переходные стили по умолчанию и закрепленные стили

Изменить индекс строки Z

Чтобы убедиться, что липкая строка остается ниже второй в нашем дизайне, мы присвоим нашей липкой строке индекс z, равный «1». При прокрутке вы увидите, что закрепленная строка и ее текстовый модуль находятся под модулями второй строки.

• Индекс Z: 1

Добавить режим наложения столбца 2 (строка # 2)

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

• Режим наложения: Умножение

Изменить настройки липкого текста H2

Мы также применим несколько липких стилей к нашему текстовому модулю в строке №1. Начните с изменения цвета текста H2 в липком состоянии и также примените собственную тень текста.

• Цвет текста липкого H2: #ffffff
• Тень текста заголовка 2: второй вариант (см. Экран печати ниже)
• Цвет тени текста заголовка 2:
  • По умолчанию: rgba (0,0,0,0)
  • Липкий: rgba (0,0,0,0.08)

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

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

• Прилипающая левая маржа: -35%

Увеличить продолжительность перехода текстового модуля

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

• Продолжительность перехода: 500 мс

3. Раздел повторного использования

Раздел клонирования

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

Изменить содержание заголовка

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

Соответствие размера текста длине символа

В зависимости от того, сколько символов имеет ваш новый заголовок H2, вы можете изменить размер текста заголовка 2.

Изменить весь другой контент и изображения

И, конечно же, вам нужно будет изменить весь другой контент в дублированном разделе. Вот и все!

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

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

Рабочий стол

Мобильный

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

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

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