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

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

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

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

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

Рабочий стол

Мобильный

Скачать The Column FAQ Design БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Начнем воссоздавать

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

Фон

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

• Фон: Градиент
• Первый цвет: Dark Aqua # 50aebf
• Цвет второй: Light Aqua # 6bf2ff
• Направление: 180 градусов
• Стартовая позиция: 21%

Интервал

Измените также значения заполнения раздела.

• Верхняя обивка:
  • Рабочий стол: 4vw
  • Таблетка: 15vw
  • Телефон: 24vw
• Нижняя обивка: 2vw

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

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

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

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

Интервал

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

• Отступ слева и справа:
  • Рабочий стол: 1vw
  • Планшет + Телефон: 3vw

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

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

Пора начинать добавлять модули! Добавьте новый текстовый модуль с некоторым содержанием H2 и абзацем по вашему выбору.

Текст

Перейдите на вкладку «Дизайн» и задайте стиль для текста абзаца.

• Шрифт текста: Актер
• Цвет текста: не совсем белый ## f6f6f6
• Размер текста:
  • Настольный компьютер + планшет: 1,5 ВВт
  • Телефон: 3.8vw
• Расстояние между буквами текста: 1 пикс.
• Выравнивание текста: по центру

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

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

• Уровень текста заголовка: H2
• Шрифт H2: Verdana
• Плотность шрифта H2: полужирный
• Цвет шрифта H2: Не совсем белый: # f6f6f6
• Размер шрифта H2:
  • Рабочий стол: 3vw
  • Таблетка: 5vw
  • Телефон: 6vw
• Расстояние между буквами H2: 7 пикселей
• Высота линии H2:
  • Рабочий стол: 1.8em
  • Таблетка: 1.6em
  • Телефон: 1,5 см

Размеры

Кроме того, отрегулируйте размер.

• Ширина: 100%

Интервал

Наконец, отрегулируйте интервал.

• Верхнее поле:
  • Настольный компьютер + планшет: 1,5 ВВт
• Нижняя маржа:
  • Телефон: -5vw
• Нижняя обивка: 0vw
• Левый + правый отступ: 7vw

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

Линия

Под текстом добавьте разделитель и сделайте его желтым.

• Цвет линии: желтый # ffe100

Размеры

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

• Вес разделителя: 4 пикселя
• Ширина: 12%
• Выравнивание модуля: по центру

Интервал

Наконец, отрегулируйте интервал.

• Верхнее поле:
  • Рабочий стол + планшет: -1vw
  • Телефон: 10vw

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

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

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

Размеры

Прежде всего, отрегулируйте размер.

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

Интервал

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

• Верхняя маржа: 3vw
• Нижняя маржа: 11vw
• Левое и правое поле: авто
• Верхняя обивка: 0vw
• Нижняя обивка: 11vw
• Левый и правый отступ: 5vw

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

Фон при наведении

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

• Фон при наведении: градиент
• Первый цвет: желтый # ffe100
• Цвет два: прозрачный
• Тип градиента: радиальный
• Радиальное направление: вверху слева
• Начальная и конечная позиция: 19%

Интервал

Добавьте несколько значений интервала в следующий столбец.

• Нижняя обивка:
  • Рабочий стол + планшет: 0vw
  • Телефон: 4vw
• Отступ слева и справа:
  • Рабочий стол: 1vw
  • Планшет + Телефон: 3vw

Граница

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

• Закругленные углы: 1vw все четыре угла

Преобразовать

Наконец, примените к столбцу настраиваемое значение преобразования преобразования.

• Transform Translate: 4vw ось Y (рабочий стол), 0vw (при наведении курсора, планшет и телефон)

Дублировать столбец 1 четыре раза

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

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

Преобразовать

Затем настройте значения трансформации. Сначала столбец 2.

• Transform Translate: 2vw по оси Y (рабочий стол), 0vw (при наведении курсора, планшет и телефон)

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

Преобразовать

Затем сбросьте значение преобразования в столбце 3.

• Преобразовать Перевести: Сброс

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

Преобразовать

Также настройте значение преобразования в столбце 4.

• Transform Translate: 2vw по оси Y (рабочий стол), 0vw (при наведении курсора, планшет и телефон)

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

Преобразовать

Наконец, просмотрите значения преобразования в столбце 5.

• Transform Translate: 4vw ось Y (рабочий стол), 0vw (при наведении курсора, планшет и телефон)

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

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

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

• Заголовок
• Тело

Состояние

Затем выберите «Закрыть» в качестве состояния модуля.

• Состояние: Закрыто

Фон

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

• Фоновая картинка
• Смешивание фонового изображения: мягкий свет

Значок

На вкладке «Дизайн» задайте стиль значку.

• Цвет значка: желтый # ffe100
• Размер значка:
  • Рабочий стол: 34px
  • Планшет + телефон: 20 пикселей

Переключать

Затем измените стиль фона переключателя на статичность и наведение.

• Цвет фона открытого переключателя: бирюзовый # 0092af
• Цвет фона при закрытом переключателе: Off White: # f7f7f7
  • При наведении: бирюзовый # 0092af

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

Продолжайте стилизовать текст заголовка.

• Цвет текста открытого заголовка: Не совсем белый: # f7f7f7
• Цвет текста заголовка: очень темно-серый # 3a3a3a
  • Наведите курсор: Off White: # f7f7f7
• Заголовок уровня заголовка: H5
• Шрифт H5: Актер
• Выравнивание H5: влево
• Размер текста H5:
  • Рабочий стол: 1.5 vw
  • Таблетка: 3 vw
  • Телефон: 4.5 vw

Закрытый текст заголовка

Также стилизуйте закрытый текст.

• Цвет текста закрытого заголовка: очень темно-серый # 3a3a3a
• Шрифт закрытого названия: Актер
• Выравнивание: по левому краю
• Размер закрытого текста:
  • Рабочий стол: 1.5vw
  • Таблетка: 3vw
  • Телефон: 4.5vw

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

Не забывайте основной текст.

• Шрифт тела: Актер
• Выравнивание основного текста: по левому краю
• Цвет основного текста: Не совсем белый: # f7f7f7
• Размер основного текста:
  • Рабочий стол: 0.9vw
  • Таблетка: 2vw
  • Телефон: 3vw
• Высота линии корпуса: 1,8 м

Интервал

После стилизации текста добавьте несколько значений интервала.

• Верхнее поле:
  • Рабочий стол + планшет: 1vw
• Верх + нижняя обивка:
  • Рабочий стол: 2vw
  • Таблетка: 3vw
  • Телефон: 5vw
• Левый отступ:
  • Рабочий стол: 2vw
  • Таблетка: 4vw
  • Телефон: 5vw
• Правый отступ:
  • Рабочий стол: 2vw
  • Таблетка: 3vw
  • Телефон: 4vw

Граница

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

• Закругленные углы: 1vw все четыре угла
• Граница: 0 пикселей

Коробка Тень

Наконец, добавьте тень внутреннего блока.

• Тень коробки: 6-й вариант
• Сила размытия тени коробки:
  • Рабочий стол + планшет: 18 пикселей
  • Телефон: 9px
• Сила распространения тени коробки: -4px
• Цвет тени: rgba (0,0,0,0.21)

Дублировать модуль переключения 4 раза

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

Редактировать контент

Отредактируйте вопросы и ответы в дублированных модулях переключения, и все готово!

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

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

Рабочий стол

Мобильный

Заключение

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