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

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

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО дизайн часто задаваемых вопросов.

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

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

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

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

СКАЧАТЬ

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

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

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

Начните с добавления новой страницы. Введите заголовок страницы, опубликуйте страницу и включите Divi Builder.

Загрузить макет страницы контактов библиотеки

Перейдите к готовым макетам и выберите макет страницы контактов в пакете макетов библиотеки.

2. Удалить текущий раздел часто задаваемых вопросов.

Найдите и удалите раздел часто задаваемых вопросов

Найдите и удалите следующий раздел на странице, который уже содержит дизайн часто задаваемых вопросов:

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

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

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

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

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

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

Размеры

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

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

Интервал

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

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

Столбец 1

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

Цвет фона по умолчанию

Добавьте цвет фона по умолчанию.

• Цвет фона: rgba (224,216,200,0,15)

Цвет фона при наведении

И измените этот цвет фона при наведении курсора.

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

Колонка 2

Далее откройте настройки второго столбца.

Интервал

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

• Верхний отступ: 100 пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Нижний отступ: 100 пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Отступ слева: 100 пикселей (рабочий стол), 50 пикселей (планшет), 30 пикселей (телефон)
• Отступ справа: 100 пикселей (рабочий стол), 50 пикселей (планшет), 30 пикселей (телефон)

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

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

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

Фоновый цвет

Затем добавьте цвет фона в текстовый модуль.

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

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

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

• Шрифт заголовка 3: Open Sans
• Толщина шрифта заголовка 3: полужирный
• Стиль шрифта заголовка 3: прописные
• Выравнивание текста заголовка 3: по центру
• Размер текста заголовка 3: 20 пикселей
• Расстояние между заголовками 3 букв: 1 пиксель
• Высота строки заголовка 3: 1,5 м

Интервал

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

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

CSS-класс

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

• Класс CSS: липкий

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

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

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

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

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

• Шрифт текста: Open Sans
• Высота текстовой строки: 2em (настольный компьютер и планшет), 1.6em (телефон)

Интервал

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

• Нижнее поле: 50 пикселей

Клонировать текстовый модуль в столбце 2 и изменить содержимое

Клонируйте весь текстовый модуль в столбце 2 и измените его содержимое.

Удалить нижнюю маржу

Удалите также нижнее поле.

Клонировать всю строку столько раз, сколько нужно

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

Изменить вопросы и ответы

Конечно, вам придется изменить всю копию.

Изменить цвета фона столбца 1 по умолчанию

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

• Цвет 1: # f2ece1
• Цвет 2: rgba (0,0,0,0.2)
• Цвет 3: rgba (0,0,0,0.64)
• Цвет 4: # 000000

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

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

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

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

Вставить CSS-код липкого вопроса

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

<style>
.sticky {
position: sticky;
position: -webkit-sticky;
top: 200px !important;
}
</style>

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

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

Рабочий стол

Мобильный

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

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

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