Как создать динамический шаблон сообщения о вакансии с помощью Divi Theme Builder и ACF

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон сообщения о вакансии БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Добавьте категории сообщений

Перейти к категориям сообщений

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

Добавить категории открытых вакансий

Добавьте родительскую категорию и отдельную категорию для каждого отдела.

• Открытие вакансии
  • Связь
  • Дизайн
  • Разработка
  • Маркетинг
  • …

2. Установите ACF и настройте поля проекта.

Установить и активировать ACF

Продолжите, установив и включив бесплатный плагин Advanced Custom Fields.

Настроить группу полей

Создайте новую группу полей, перейдя в панель управления WordPress> Пользовательские поля> Добавить новые .

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

• Тип сообщения равен сообщению и
• Категория публикации совпадает с открытием вакансии

Добавить поля

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

• Обязанности
  • Ярлык поля: обязанности
  • Тип поля: текстовая область
• Требуемый опыт
  • Ярлык поля: Требуемый опыт
  • Тип поля: Wysiwyg Editor
• Необходимые навыки
  • Ярлык поля: необходимые навыки
  • Тип поля: Wysiwyg Editor
• Бонусная квалификация
  • Ярлык поля: бонусные квалификации
  • Тип поля: Wysiwyg Editor
• Место нахождения
  • Ярлык поля: Местоположение
  • Тип поля: текст
• Тип задания
  • Ярлык поля: тип задания
  • Тип поля: флажок
  • Выбор: полный рабочий день + неполный рабочий день + внештатный сотрудник (новая строка для каждого выбора)
• Применить перенаправление
  • Метка поля: применить перенаправление
  • Тип поля: URL

3. Добавить новую запись в блог

Добавить название вакансии, краткое описание и категории

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

Заполните все настраиваемые поля

Продолжите, заполнив все настраиваемые поля.

4. Создать новый шаблон

Перейдите в конструктор тем Divi и добавьте новый шаблон

Как только ваш образец сообщения в блоге будет готов, самое время создать шаблон открытой вакансии! Для этого перейдите к Divi Theme Builder и нажмите «Добавить новый шаблон».

Использовать на

Используйте шаблон для сообщений в категории «Вакансии».

5. Начать создание тела шаблона.

Теперь начните создавать дизайн, нажав «Добавить пользовательское тело» и выбрав «Создать пользовательское тело». Это перенаправит вас в редактор шаблонов.

Секция 1

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

Внутри редактора шаблонов Divi вы заметите раздел. Откройте этот раздел и добавьте градиентный фон.

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

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

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

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

Интервал

И добавьте немного нижнего отступа.

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

Добавить строку №1

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

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

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

Динамический контент

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

• Название: Местоположение

Выбрать значок

Продолжите, выбрав значок.

Настройки значков

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

• Цвет значка: #ffffff
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 25 пикселей

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

Также измените настройки текста H3.

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Lato
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 1,4 бэр

Анимация

Наконец, удалите анимацию значков в настройках анимации.

• Анимация изображения / значка: без анимации

Клонировать модуль Blurb и поместить дубликат в столбец 2

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

Изменить динамический контент и значок

Убедитесь, что вы изменили динамическое содержимое заголовка вместе со значком.

• Название: Тип работы

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

Добавить копию

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

Динамическая ссылка

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

• URL ссылки кнопки: применить перенаправление
• Цель ссылки на кнопку: в новой вкладке

Выравнивание

Перейдите на вкладку дизайна модуля и измените выравнивание для разных размеров экрана.

• Расположение кнопок: вправо (рабочий стол), влево (планшет и телефон)

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1 бэр
• Цвет текста кнопки: # ff6600
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 100 пикселей
• Шрифт кнопки: Montserrat
• Стиль шрифта кнопок: прописные

Интервал

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

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

Добавить строку №2

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

К следующему ряду! Выберите следующую структуру столбцов:

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

Динамический контент

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

• Динамический контент: заголовок публикации / архива

• Раньше: <H1>
• После: </H1>

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

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

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

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

Видимость

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

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

Линия

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

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

Размеры

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

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

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

Интервал

Переходим к следующему разделу! Удалите все верхние отступы по умолчанию.

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

Добавить строку №1

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

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

Интервал

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

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

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

Фоновый цвет

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

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

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

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

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

Интервал

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

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

Граница

Также добавьте немного радиуса границы.

• Все углы: 20 пикселей

Коробка Тень

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

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.09)

Добавить строку №2

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

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

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

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

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

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

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

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

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

Видимость

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

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

Линия

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

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

Размеры

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

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

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

Динамический контент

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

• Динамический контент: необходимый опыт

Убедитесь, что вы включили необработанный HTML.

• Включить необработанный HTML: Да

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

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

• Шрифт текста: Raleway
• Размер текста: 1,1 бэр

Настройки текста неупорядоченного списка

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

• Высота строки неупорядоченного списка: 2.3em

Интервал

Затем перейдите к настройкам интервалов и добавьте несколько значений пользовательского отступа.

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

Граница

Также добавьте немного радиуса границы.

• Все углы: 20 пикселей

Коробка Тень

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

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.09)

Добавить строку №3

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

К последнему ряду! Используйте следующую структуру столбцов:

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

Клонируйте модули, которые вы добавили в предыдущую строку, дважды и поместите дубликаты в новую строку.

Изменить текстовый модуль №1 Копия

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

Изменить текстовый модуль № 2 динамического содержимого

Наряду с динамическим контентом.

• Динамический контент: необходимые навыки

• Динамический контент: бонусные квалификации

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

• Включить необработанный HTML: Да

6. Сохраните изменения в построителе тем и просмотрите результат.

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

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

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

Рабочий стол

Мобильный

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

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

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