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

Обзор результатов

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

1. Создать страницу карьеры

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

Начните с создания новой страницы, присвойте ей название и перейдите в Visual Builder.

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

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

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

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

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

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

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

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

расстояние

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

• Нижняя обивка: 200px

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

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

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

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

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

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

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

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

• Название шрифта: Монтсеррат
• Вес шрифта заголовка: тяжелый
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 8rem (настольный), 4rem (планшет), 2.5 rem (телефон)

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

видимость

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

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

Линия

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

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

калибровка

И заполните параметры модуля, изменив параметры размеров.

• Вес делителя: 8px
• Ширина: 30%

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

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

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

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

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

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

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

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

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

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

• Название 2 Полиция: Монтсеррат
• Пункт 2 Вес полиса: тяжелый
• Цвет текста элемента 2: # ffa500
• Название 2 Размер текста: 2.3рем

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

видимость

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

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

Линия

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

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

калибровка

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

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

Добавить модуль блога в колонку

Содержание

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

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

Элементы

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

• Показать больше кнопки: Да
• Отрывок из шоу: Да

Предоставление

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

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

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

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

• Уровень заголовка: H3
• Название шрифта: Монтсеррат
• Размер текста заголовка: 1.5 мм

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

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

• Тело полиции: Raleway
• Размер текста: 1.1рем
• Высота линии тела: 2.1em

Узнать больше Настройки текста

С настройками текста узнай больше.

• Читать далее Полиция: Монтсеррат
• Узнать больше Стиль шрифта: Capital
• Узнать больше Цвет текста: #ffffff
• Читать дальше Размер текста: 1rem

расстояние

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

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

Узнать больше 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;

Клонируйте линию столько раз, сколько необходимо

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

Редактировать содержимое текстового модуля

Не забудьте отредактировать содержание 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. Не стесняйтесь оставлять комментарии в разделе комментариев ниже.