Как создать шаблон проекта динамического портфолио с Divi и ACF

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон проекта динамического портфолио БЕСПЛАТНО

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

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

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

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

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

СКАЧАТЬ

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

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

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

Начните с установки бесплатного плагина Advanced Custom Fields на свой веб-сайт WordPress. После установки обязательно активируйте и его.

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

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

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

• Тип сообщения - равно - Проект

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

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

• Проблема
  • Ярлык поля: Проблема
  • Тип поля: текстовая область
• Решение
  • Метка поля: Решение
  • Тип поля: текстовая область
• Отзыв
  • Ярлык поля: Отзыв
  • Тип поля: текст
• Контактное лицо
  • Ярлык поля: Контактное лицо
  • Тип поля: текст
• Изображение контактного лица
  • Ярлык поля: Изображение контактного лица
  • Тип поля: изображение
• Должность контактного лица
  • Ярлык поля: Должность контактного лица
  • Тип поля: текст
• Логотип клиента
  • Ярлык поля: Логотип клиента
  • Тип поля: изображение
• Веб-сайт клиента
  • Ярлык поля: Веб-сайт клиента
  • Тип поля: URL
• Продолжительность проекта
  • Ярлык поля: Продолжительность проекта
  • Тип поля: Диапазон
  • Добавить: недели

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

2. Создать новый проект

Добавить название и описание проекта портфолио

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

Загрузить рекомендуемое изображение

Затем загрузите избранное изображение по вашему выбору.

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

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

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

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

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

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

Примените шаблон ко всем своим проектам.

• Использовать на: Все проекты

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

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

Секция 1

Фоновый цвет

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

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

Интервал

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

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

Граница

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

• Внизу слева: 8vw
• Внизу справа: 8vw

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

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

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

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

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

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

• Тело: Продолжительность проекта:

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

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

• Шрифт текста: Монтсеррат
• Цвет текста: # a0a0a0
• Размер текста: 1,2 бэр

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

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

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

• Динамическое содержимое: продолжительность проекта
• После: недели

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

Затем измените настройки текста модуля.

• Шрифт текста: Lora
• Цвет текста: #ffffff
• Размер текста: 1,5 бэр

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

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

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

• Динамический контент: заголовок публикации / архива
• Раньше: <H1>
• После: </H1>

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

Стилизуйте настройки текста H1 модуля.

• Шрифт заголовка: Montserrat
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 6 бэр (рабочий стол), 3 бэр (планшет и телефон)

Интервал

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

• Верхнее поле: 100 пикселей
• Нижнее поле: 100 пикселей

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

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

Следующий и последний модуль, который нам нужен в столбце, - это модуль содержимого публикации. Это покажет описание вашего проекта. Измените текстовые настройки модуля следующим образом:

• Шрифт текста: Lora
• Цвет текста: #ffffff
• Размер текста: 1,5 бэр (рабочий стол), 0,9 бэр
• Высота текстовой строки: 2em

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

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

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

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

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

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

• Динамическое содержимое: логотип клиента

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

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

Затем добавьте текстовый модуль в столбец 2 и введите любую копию по вашему выбору.

Связать динамический контент

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

• Динамическое содержимое: веб-сайт клиента

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

Затем измените настройки текста модуля.

• Шрифт текста: Монтсеррат
• Цвет текста: #ffffff
• Размер текста: 1,5 бэр
• Высота текстовой строки: 1em

Интервал

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

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

Граница

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

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # ffc300

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

Интервал

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

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

Добавить ряд

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

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

Интервал

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

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

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

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

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

• Динамический контент: избранное изображение

Граница

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

• Внизу слева: 8vw
• Внизу справа: 8vw

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

Интервал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Динамический контент: проблема

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

Затем измените текстовые настройки модуля:

• Шрифт текста: Lora
• Размер текста: 1.5rem (рабочий стол), 0.9vw (планшет и телефон)
• Высота текстовой строки: 2em

Clone Row

Как только вы закончите строку, продолжайте и полностью клонируйте ее.

Изменить копию текстового модуля в столбце 1

Измените копию текстового модуля столбца 1 повторяющейся строки.

Изменить динамическое содержимое текстового модуля в столбце 2

Измените также динамическое содержимое текстового модуля в столбце 2 повторяющейся строки.

• Динамический контент: решение

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

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

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

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

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

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

• Шрифт кнопки: Montserrat

Интервал

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

• Верхнее поле: 100 пикселей

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

Фоновый цвет

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

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

Граница

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

• Вверху слева: 8vw
• Вверху справа: 8vw

Добавить ряд

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

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

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

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

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

• Автор: Контактное лицо
• Должность: Должность контактного лица
• Тело: Отзыв
• Изображение: Изображение контактного лица

Элементы

Далее отключите значок цитаты.

• Показать значок цитаты: Нет

Фоновый цвет

Затем измените цвет фона модуля на черный.

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

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

Перейдите на вкладку дизайна модуля и измените цвет текста.

• Цвет текста: светлый

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

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

• Шрифт: Montserrat
• Размер основного текста: 2 бэр (рабочий стол), 1,5 бэр (планшет и телефон)

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

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

• Авторский шрифт: Lora
• Размер текста автора: 1.4rem (рабочий стол), 0.9rem (планшет и телефон)

Настройки положения текста

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

• Шрифт позиции: Lora
• Цвет текста позиции: # a8a8a8
• Размер текста позиции: 1,4 бэр (рабочий стол), 0,9 бэр (планшет и телефон)

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

После завершения шаблона сохраните все изменения Divi Theme Builder и просмотрите результат в своем проекте!

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

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

Рабочий стол

Мобильный

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

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

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