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

В предыдущем руководстве по Divi мы показали вам, как создать полностью динамический шаблон открытой вакансии с помощью Divi Theme Builder и плагина Advanced Custom Fields. В сегодняшнем руководстве мы покажем вам, как можно динамически отображать открытые вакансии на странице карьеры. Это руководство является продолжением публикации с шаблоном открытой вакансии, поэтому не забудьте сначала воссоздать шаблон, а затем вернуться к этому руководству.

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

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

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

Рабочий стол

Мобильный

Загрузите макет списка вакансий Dynamic Careers БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Добавьте страницу карьеры

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

Начните с создания новой страницы, присвоив ей заголовок и переключившись на Visual Builder.

2. Начните строить страницу карьеры в веб-интерфейсе

Добавить раздел # 1

Градиентный фон

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

• Цвет 1: # ff6600
• Цвет 2: # fbff30
• Направление градиента: 126 градусов

Нижний разделитель

Также используйте разделитель нижней части.

• Стиль разделителя: найти в списке
• Высота разделителя: 8vw
• Повторение по горизонтали делителя: 3x
• Расположение разделителей: содержание под разделом

Интервал

Завершите настройки раздела, добавив нижний отступ.

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

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

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

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

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

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

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

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

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

• Шрифт заголовка: Montserrat
• Толщина шрифта заголовка: жирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 8 бэр (рабочий стол), 4 бэр (планшет), 2,5 бэр (телефон)

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

Видимость

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

• Показать разделитель: Да

Линия

Затем измените цвет линии модуля.

• Цвет линии: #ffffff

Размеры

И завершите настройки модуля, изменив настройки размеров.

• Вес разделителя: 8 пикселей
• Ширина: 30%

Добавить раздел # 2

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

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

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

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

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

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

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

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

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

• Шрифт заголовка 2: Montserrat
• Толщина шрифта заголовка 2: жирный
• Цвет текста заголовка 2: # ffa500
• Размер текста заголовка 2: 2,3 бэр

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

Видимость

Следующий модуль, который нам нужен в этом столбце, - это модуль разделения. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Затем измените цвет линии модуля.

• Цвет линии: # ffa500

Размеры

И завершите настройки модуля, изменив вес разделителя и максимальную ширину в настройках размеров.

• Вес разделителя: 6 пикселей
• Максимальная ширина: 80 пикселей

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

Содержание

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

• Тип сообщения: Сообщения
• Включить категории: маркетинг
• Длина отрывка: 150

Элементы

В настройках элементов мы включаем только две опции:

• Показать кнопку "Читать дальше": Да
• Показать выдержку: Да

Макет

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

• Макет: Полная ширина

Настройки текста заголовка

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

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Montserrat
• Размер текста заголовка: 1,5 бэр

Настройки основного текста

Затем измените настройки основного текста.

• Шрифт тела: Raleway
• Размер основного текста: 1,1 бэр
• Высота линии корпуса: 2,1 м

Прочитать больше настроек текста

Наряду с переводом настроек текста.

• Подробнее Шрифт: Montserrat
• Подробнее Стиль шрифта: прописные буквы
• Подробнее Цвет текста: #ffffff
• Подробнее Размер текста: 1 бэр

Интервал

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

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

Подробнее Button CSS

И завершите настройки модуля, добавив несколько кнопок CSS для чтения во вкладке «Дополнительно».

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Clone Row столько раз, сколько необходимо

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

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

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

Изменить категории модуля блога

Наряду с категориями модуля блога.

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

Вставьте CSS-код для индивидуального оформления открытых вакансий

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

<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>

3. Сохранить дизайн страницы и просмотреть результат

Завершив дизайн страницы, вы можете сохранить все изменения, выйти из Visual Builder и просмотреть результат!

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

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

Рабочий стол

Мобильный

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

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

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