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

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

Сегодня я покажу вам, как вы можете использовать Divi Builder для создания адаптивной фиксированной (или липкой) боковой панели с плавной прокруткой якорных ссылок (или ссылок перехода). Поскольку боковая панель остается видимой, а ссылки привязки плавно переходят к различным разделам страницы, боковая панель остается связанной с контентом, что делает ее полезной функцией UX. Подобно структуре документа, эта комбинация делает содержимое вашей веб-страницы более доступным и легким для чтения. Это отличное решение для долгих прокручиваемых страниц.

Проверьте это!

Sneak Peek

Вот краткий обзор того, что мы будем строить вместе.

Концепция

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

Что вам нужно для начала

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

Добавление макета на страницу

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

Для начала создайте новую страницу и разверните Divi Builder. Выберите вариант «Выбрать готовый макет». Во всплывающем окне «Загрузить из библиотеки» выберите «Пакет макетов рецептов еды», а затем щелкните, чтобы использовать страницу рецептов.

После загрузки макета щелкните, чтобы создать интерфейс.

Создание нового раздела

В интерфейсе Divi Builder создайте новый раздел и перетащите его в самый верх макета.

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

Откройте настройки кнопки и добавьте следующий настраиваемый CSS-код в основной элемент на вкладке «Дополнительно»:

display: block !important;

Это просто позволяет кнопке занимать всю ширину столбца.

Измените текст кнопки на «Введение». А затем добавьте следующее для URL-адреса ссылки кнопки:

#вступление

Вот как вы создаете якорную ссылку. Хэштег (#) сообщает браузеру, что вы собираетесь делать ссылку на идентификатор CSS. Следующий текст «введение» будет соответствовать имени идентификатора CSS, который мы добавим в один из разделов макета. Имя идентификатора CSS может быть любым. Просто убедитесь, что он соответствует идентификатору CSS, который вы дадите в разделе позже.

Дублируйте кнопку, а затем повторите процесс присвоения кнопке нового текста кнопки и нового URL-адреса ссылки кнопки. Поскольку это будет якорная ссылка, которая переходит в другой раздел страницы, убедитесь, что идентификатор CSS (текст после «#») уникален и соответствует имени, которое вы дадите своему разделу позже.

Для этой кнопки измените текст кнопки на «Ингредиенты» и URL-адрес ссылки кнопки на «#ingredients».

Снова продублируйте кнопку, а затем дайте новой кнопке текст кнопки «Питание» и измените URL-адрес ссылки кнопки на «# Nutrition».

Дублируйте кнопку еще раз, а затем дайте новой кнопке текст «Instructions» и измените URL-адрес ссылки кнопки на «#instructions».

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

Добавление идентификаторов CSS в разделы и строки

Теперь, когда у нас есть вся наша кнопка, созданная с привязанными ссылками, мы готовы добавить соответствующие имена идентификаторов CSS в наши разделы и строки.

Якорные ссылки будут автоматически переходить к любому элементу на странице с соответствующим идентификатором CSS. CSS ID можно применять к встроенному тексту, модулям, строкам или разделам. Если вы хотите добавить CSS ID к заголовку с помощью HTML, это будет выглядеть примерно так:

<h2 id="introduction">Introduction</h2>

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

Как мы уже говорили ранее, каждый из созданных нами URL-адресов кнопок должен соответствовать CSS-идентификаторам разделов, к которым они должны перейти.

Для кнопки «Введение» нам нужно добавить идентификатор CSS в раздел страницы, содержащий вводный контент. Для этого откройте настройки третьего раздела страницы (раздел прямо под заголовком) и добавьте следующий CSS ID под расширенной вкладкой:

CSS ID: введение

Это будет соответствовать кнопке привязки ссылки Введение, которую мы создали ранее.

Теперь в том же разделе найдите строку с заголовком «Ингредиенты». Затем откройте настройки строки и добавьте следующий идентификатор CSS:

CSS ID: ингредиенты

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

Прокрутите вниз до следующего раздела с заголовком «Питание» и откройте настройки раздела. Затем добавьте следующий идентификатор CSS:

CSS ID: питание

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

Наконец, прокрутите вниз до следующего раздела макета с заголовком «Пошаговые инструкции». Затем откройте настройки раздела и добавьте следующий идентификатор CSS на вкладке «Дополнительно»:

CSS ID: инструкции

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

Сохраните изменения.

Сейчас хорошее время, чтобы проверить, работают ли ваши якорные ссылки. Откройте страницу в новой вкладке и нажмите кнопки в верхнем разделе, чтобы убедиться, что они переходят / прокручиваются в соответствующие места на странице.

Если они не работают, обязательно вернитесь и проверьте правильность идентификаторов CSS и их соответствие.

Создание фиксированного макета боковой панели

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

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

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

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

Откройте настройки второго раздела (тот, который находится прямо под нашими кнопками ссылки привязки) и добавьте следующее настраиваемое поле:

Специальная маржа: осталось 20%

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

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

Это даст 20% левого поля для всех ваших разделов, кроме самого верхнего раздела, содержащего кнопки привязки.

Создание фиксированной боковой панели

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

На вкладке «Дизайн» обновите высоту и ширину…

Ширина: 20%
Высота: 100%

На вкладке «Дополнительно» обновите позицию…

Позиция: фиксированная
Вертикальное смещение: 80 пикселей

Это дает разделу фиксированное положение с шириной 20% страницы. Он также размещает раздел слева от страницы и на 80 пикселей от верха страницы, чтобы учесть высоту навигации заголовка. 100% высота гарантирует, что раздел занимает всю высоту страницы.

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

Исправление перекрытия нижнего колонтитула

Вы могли заметить, что раздел перекрывает нижнюю панель нижнего колонтитула внизу страницы.

Есть несколько способов решить эту проблему. Например, я мог бы убрать «высоту: 100%» из раздела, или вы могли бы добавить некоторый CSS в настройки страницы, чтобы отрегулировать ширину полосы нижнего колонтитула. Но если вы хотите сохранить высоту раздела на уровне 100%, простое решение - убрать цвет фона раздела. Откройте настройки раздела, который мы используем для боковой панели, и добавьте следующий цвет фона:

Цвет фона: rgba (255,255,255,0)

Если вы хотите изменить цвет боковой панели, вы можете открыть настройки страницы и изменить цвет фона области содержимого.

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

Внесение корректировок для мобильных устройств

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

Специальная ширина: 100
Пользовательские отступы (рабочий стол): 10% слева, 10% справа
Пользовательское заполнение (планшет): 0% слева, 0% справа

Теперь все, что нам нужно сделать, это скрыть (или отключить) раздел на смартфоне. Для этого откройте настройки раздела, перейдите на вкладку «Дополнительно» и установите флажок, чтобы отключить его на смартфоне.

Вот и все. Теперь у вас есть адаптивное фиксированное меню боковой панели с плавной прокруткой якорных ссылок!

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

Теперь проверим окончательный результат.

А вот как выглядит раскладка на планшете.

Узнать больше о фиксированных элементах и ​​якорных ссылках

Если вы нашли это руководство полезным, ознакомьтесь с некоторыми из наших связанных руководств ниже:

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

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

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

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

Ваше здоровье!