Как создать интерактивный аккордеон, используя закрепленные заголовки страниц в Divi
Опубликовано: 2020-09-03Новые возможности фиксации положения Divi открывают двери для многих новых захватывающих возможностей дизайна. В этом уроке мы покажем вам, как комбинировать параметры закрепления позиции Divi с якорными ссылками с плавной прокруткой для создания аккордеонного способа индексирования и навигации по вашей странице. Создавать его очень легко с помощью встроенных опций Divi, поэтому нет необходимости в дополнительном CSS или другом коде. После этого у вас будет уникальный способ организовать свою страницу и повысить удобство работы пользователей на настольных и мобильных устройствах.
Давайте начнем!
Sneak Peek
Вот краткий обзор дизайна, который мы построим в этом уроке.
Здесь вы можете видеть, как прикрепленные заголовки страниц наклеиваются вверху и внизу окна браузера и складываются друг на друга, как гармошка.
Здесь вы можете видеть, что при нажатии на один из закрепленных заголовков выполняется переход (с использованием якорных ссылок с плавной прокруткой) в этот раздел страницы, также как аккордеон.
Вот и функциональность на мобильном телефоне.
Скачайте макет БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.
Щелкните кнопку Импорт.
Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.
Затем нажмите кнопку импорта.
После этого макет раздела будет доступен в Divi Builder.
Давайте перейдем к руководству, не так ли?
Что вам нужно для начала
Для начала вам необходимо сделать следующее:
- Если вы еще этого не сделали, установите и активируйте тему Divi.
- Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
- Выберите вариант «Строить с нуля».
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Создание липкой строки
Для начала создадим нашу липкую строку. Для этого добавьте строку из одного столбца в раздел по умолчанию.
Откройте настройки строки. На вкладке «Дополнительно» обновите закрепленную позицию следующим образом:
- Липкое положение: придерживаться верха и низа
Это приведет к тому, что строка будет оставаться в верхней части окна браузера, когда пользователь прокручивает вниз, а затем придерживаться нижней части окна браузера, когда пользователь прокручивает вверх.
Стилизация липкой строки
Теперь, когда закрепленная позиция на месте, мы можем начать стилизацию строки, используя встроенную опцию липкого стиля, которая позволяет вам придавать элементу определенный стиль всякий раз, когда липкая позиция действует (или застревает). Для строки мы хотим, чтобы фон менялся на темный цвет, когда он находится в застрявшем положении. Для этого откройте настройки строки и обновите следующее:
- Цвет фона (рабочий стол): #ffffff
- Цвет фона (липкий): # 051923
На вкладке дизайна обновите следующее:
- Использовать нестандартную ширину желоба: ДА
- Ширина желоба: 1
- Ширина (планшет и телефон): 100%
- Padding: 0px сверху, 0px снизу
Затем мы хотим дать строке нижнюю границу, которая будет служить разделительной линией между заголовком и содержимым ниже. И, как только строка окажется в липкой позиции, мы хотим вместо этого показать левую границу.
Под переключателем параметров границы обновите следующее:
- Цвет границы: # 6eeb83
- Ширина нижней границы (рабочий стол): 8 пикселей
- Ширина нижней границы (липкая): 0 пикселей
- Ширина левой границы (рабочий стол): 0 пикселей
- Ширина левой границы (липкая): 8 пикселей
Создание липкого текста заголовка
Чтобы создать текст заголовка страницы, добавьте в строку новый текстовый модуль.
Затем вставьте следующий HTML-код в основной текст.
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
И обновите цвет фона при наведении курсора…
- Цвет фона (при наведении): rgba (255,255,255,0.2)
Это сделает более очевидным, что заголовки доступны для пользователя.
Стилизация прикрепленного текста заголовка
На вкладке дизайна обновите следующее:
- Шрифт заголовка 2: Montserrat
- Выравнивание текста заголовка 2: по левому краю
- Цвет текста заголовка 2 (рабочий стол): по умолчанию (или черный)
- Цвет текста заголовка 2 (липкий): #ffffff
- Размер текста заголовка 2: 80 пикселей (рабочий стол), 22 пикселя (липкий), 28 пикселей (телефон)
- Высота строки заголовка 2: 1,3 м (рабочий стол), 1 м (липкая)
Затем обновите отступы следующим образом:
- Padding (рабочий стол): 15 пикселей сверху, 15 пикселей снизу.
- Отступ (липкий): 10 пикселей сверху, 0 пикселей снизу, 20 пикселей слева
- Отступ (планшет и телефон): 15 пикселей сверху, 15 пикселей снизу, 15 пикселей слева, 15 пикселей справа.
Создание макета содержимого страницы
Как только закрепленная строка будет на месте, мы можем добавить еще одну строку, которая будет содержать макет содержимого страницы под заголовком. Для этого создайте новую строку из одного столбца под закрепленной строкой.
Затем добавьте новый текстовый модуль в строку и вставьте имитацию содержимого.
Дублирование раздела по мере необходимости для более липких заголовков и содержимого страниц
На данный момент у вас есть базовый дизайн для создания дополнительных разделов страницы с липкими заголовками, просто дублируя раздел.
Дубликат раздела
Чтобы создать еще один раздел, продублируйте существующий раздел, содержащий закрепленную строку / заголовок и строку фиктивного содержимого. Это ускорит процесс разработки создания следующего раздела страницы.
Обновление текстового содержимого и цвета границы строки
В разделе дубликатов обновите текст внутри текстового модуля, а затем обновите цвет границы в настройках строки.
Повторите по мере необходимости
Продолжайте дублировать раздел и при необходимости обновляйте текстовое содержимое и цвет границы строки. В этом примере мы собираемся продублировать раздел еще два раза, чтобы получить в общей сложности четыре прикрепленных заголовка страниц, которые составят гармошку.
Добавление якорных ссылок к закрепленным заголовкам страниц
Прямо сейчас эта функциональность позволит пользователю прокручивать страницу вниз и прикреплять заголовки вверх и вниз, как гармошку. Теперь мы хотим сделать заголовки интерактивными, чтобы, когда пользователь нажимает на один из закрепленных заголовков, он попадает в этот раздел страницы. Это делается с помощью якорных ссылок.
Чтобы добавить ссылку привязки, нам сначала нужно добавить идентификатор CSS в раздел, в который мы хотим перейти по ссылке.
Добавить CSS ID раздела 1
Откройте настройки раздела и добавьте следующий CSS ID:
- CSS ID: один
Затем откройте настройки закрепленной строки и добавьте следующий URL-адрес ссылки на строку:
- URL ссылки на строку: #one
Теперь, когда пользователь щелкает строку / заголовок, страница переходит к этому первому разделу.
Добавить CSS ID раздела 2
Затем нам нужно добавить ссылку привязки для второго заголовка.
Откройте настройки второго раздела и добавьте следующий CSS ID:
- CSS ID: два
Добавить ссылку на прикрепленную строку раздела 1
Затем откройте настройки для закрепленной строки во втором разделе и добавьте URL-адрес ссылки на строку:
- URL ссылки на строку: #two
Добавить CSS ID раздела 3
Затем нам нужно добавить ссылку привязки для третьего заголовка.
Откройте настройки третьего раздела и добавьте следующий CSS ID:
- CSS ID: три
Добавить ссылку на прикрепленную строку раздела 1
Затем откройте настройки для закрепленной строки внутри третьего раздела и добавьте URL-адрес ссылки на строку:
- URL ссылки на строку: #three
Добавить CSS ID раздела 4
Наконец, нам нужно добавить ссылку привязки для четвертого заголовка.
Откройте настройки четвертого раздела и добавьте следующий CSS ID:
- CSS ID: четыре
Добавить ссылку на прикрепленную строку раздела 1
Затем откройте настройки для закрепленной строки внутри четвертого раздела и добавьте URL-адрес ссылки на строку:
- URL ссылки на строку: #four
Конечный результат
Здесь вы можете видеть, как прикрепленные заголовки страниц наклеиваются вверху и внизу окна браузера и складываются друг на друга, как гармошка.
Здесь вы можете видеть, что при нажатии на один из закрепленных заголовков выполняется переход (с использованием ссылок привязки с плавной прокруткой) к этому разделу страницы, также как гармошкой.
Вот и функциональность на мобильном телефоне.
Последние мысли
В этом дизайне уникальным образом используется опция залипания. Мало того, что заголовки страниц остаются видимыми при прокрутке пользователем, но каждый заголовок также является интерактивным, что позволяет пользователю перейти в этот конкретный раздел с помощью якорных ссылок. Результат очень похож на гармошку для всей вашей страницы. Такой дизайн определенно пригодится для индексирования длинного контента или для создания удобного одностраничного просмотра.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!