Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

расстояние

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

  • Нижняя обивка: 200px
Расстояние между секциями Divi снизу

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

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

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

Выберите макет divi

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

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

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

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

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

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

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

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

видимость

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

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

Линия

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

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

калибровка

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

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

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

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

динамичные карьеры

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

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

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

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

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

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

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

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

видимость

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

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

Линия

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

  • Цвет линии: # ffa500
Настроить разделитель цветов divi

калибровка

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

  • Вес делителя: 6px
  • Максимальная ширина: 80 пикселей
Конфигурация сепаратора

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

Содержание

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

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

Элементы

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

  • Показать больше кнопки: Да
  • Отрывок из шоу: Да
Конфигурация модуля блога Divi 1

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

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

  • Макет: полная ширина
Конфигурация макета модуля блога 1

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

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

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

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

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

  • Тело полиции: Raleway
  • Размер текста: 1.1рем
  • Высота линии тела: 2.1em
Настройка шрифта модуля блога

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

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

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

расстояние

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

  • Левое поле: 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 каждой дублирующейся строки.

Изменение содержимого текста divi

Редактировать категории блоговых модулей

С категориями модуля Блог.

динамичные карьеры

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

Вставьте код 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>

Добавить код css divi

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

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

Конечный результат

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

Заключительные мысли

В этом руководстве мы показали вам, как представить эти динамические и открытые статьи на вашей странице карьеры с помощью модуля Divi Blog. Пожалуйста, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Эта статья содержит 1 комментарий

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

    Bonne journée!

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация