10 сайтов Divi с потрясающими страницами проектов

Страницы проектов отлично подходят для демонстрации потенциальным клиентам того, чем вы занимаетесь. Они часто включают тематические исследования, которые помогают продемонстрировать ваш опыт и дают им реалистичное представление о том, чего ожидать. Есть несколько способов создания страниц проекта с помощью Divi. В этой статье мы рассмотрим 10 сайтов Divi со страницами замечательных услуг, которые вдохновят вас на создание следующего сайта Divi.

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

1. BCBD

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

См. Веб-сайт

2. Джуппер

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

См. Веб-сайт (Веб-сайт не работает.)

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

Здесь показан полноразмерный заголовок с фоновым изображением, логотипом, меню, слоганом, разделителем и описанием компании. Прокрутка показывает 2/3, 1/3 строки с большим изображением проекта в большем столбце и описанием в меньшем столбце. Описание включает в себя разбивку проекта, включая заголовок, имя клиента, краткое описание, решения и ссылки для загрузки проекта в формате PDF, на контактную форму и обратно на страницу портфолио. Набор изображений из проекта вместе со стилизованным текстом используется как CTA.

См. Веб-сайт

4. Кубик Фокс

На этой странице проекта отображается изображение проекта на экране компьютера на столе. Текст размещается рядом с изображением и показывает название проекта, клиента, год, CMS, предоставляемые услуги и ссылку для просмотра веб-сайта. Ниже приведены три примера скриншотов проекта. Щелчок по любому из изображений открывает их в лайтбоксе. Мне нравится снимок экрана, потому что это реальный пример.

См. Веб-сайт

5. Ким Вестергаард

На этом сайте есть небольшой раздел черного цвета со ссылками на различные разделы сайта. При прокрутке изображения из проекта отображаются в одном столбце. Изображения показывают используемый шрифт, цветовую палитру, дизайн проекта (который является логотипом), а затем множество примеров того, как он используется. В примерах логотип показан поверх разных цветов, в качестве фона рабочего стола, в заголовке, на веб-сайте с использованием различных устройств, в примерах рекламных плакатов и в социальных сетях.

См. Веб-сайт

6. Обучение

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

См. Веб-сайт

7. Патти Хьюстон

На нем показаны название и описание проекта, за которыми следуют изображения проекта в многоколоночном макете, чередующимся от двухколоночного к одноколоночному, а также коротких и высоких изображений. Один раздел включает текст рядом с изображением, чтобы предоставить дополнительную информацию о проекте. Навигация по сообщениям предоставляет ссылки на предыдущий и следующий проекты. Разделитель отделяет проект от призыва к действию, состоящего из текста и кнопки. Мне нравится этот макет.

См. Веб-сайт

8. Строители Голубой воды

На этой странице проекта отображается полноразмерный заголовок с фоновым изображением с наложением и заголовком. Информация о проекте представлена ​​внутри полноразмерного раздела в виде текста, разделенного вертикальными разделителями. Две колонки показывают галерею изображений проекта и детали с текстом. Далее следует раздел с логотипами компаний для просмотра других проектов, карта для просмотра проекта лично и навигация по сообщениям к следующему и предыдущему проекту.

См. Веб-сайт

9. Кенни Пайеро

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

См. Веб-сайт

10. Группа Циммермана

Это один из самых сложных в списке. Он использует полноэкранный заголовок с фоновым изображением, градиентом и именем клиента в качестве заголовка проекта. При прокрутке рядом с изображением появляются две колонки с информацией о клиенте и аннотации предоставляемых услуг. Далее следует видео о клиенте, изображения проекта, включая веб-сайт и рекламные кампании (включая классную временную шкалу), обзор проекта с использованием фонового градиента и CTA.

См. Веб-сайт

Конечные мысли

Это наш взгляд на 10 веб-сайтов Divi со страницами интересных услуг, которые помогут вдохновить вас на ваш следующий дизайн Divi.

В блоге ET есть множество статей по дизайну и практических рекомендаций, которые идеально подходят для создания страниц проекта. Страница проекта представляет собой настраиваемый тип записи, который можно создать с помощью Divi Builder, и они часто используют такие элементы, как галереи и дизайн страниц, такие как сообщения в блогах, для демонстрации работы. Я включил ссылки на руководства, которые охватывают как галереи, так и сообщения в блогах, а также общие макеты страниц.

• 3 бесплатных красивых макета страницы проекта (и как создать больше с помощью Divi Builder)
• Как использовать фильтруемое портфолио и навигацию по записям для организации тематических исследований с Divi
• Как создать планшет с прокручиваемым текстом для предварительного просмотра с помощью Divi
• Что 11 лучших веб-сайтов с портфолио могут научить нас демонстрировать нашу работу
• Как создать потрясающие отзывы из галереи с Divi
• Создание галереи от оттенков серого к цвету с помощью модуля Divi Gallery
• Бесплатный пакет макетов фотогалереи Divi: 5 потрясающих макетов страниц галереи в одной удобной загрузке
• Использование модуля Divi Gallery для создания мозаичной галереи с настраиваемым заполнением
• Бесплатный пакет макетов для публикации в блоге Divi поднимет ваши статьи на основе Builder на новый уровень
• Секрет создания макетов с разорванной сеткой в ​​Divi
• Как создать уникальный диагональный макет с помощью Divi

Ждем вашего ответа. Какие из этих веб-сайтов с классными страницами проектов вам больше всего нравятся? Дайте нам знать об этом в комментариях.

Лучшее изображение через PODIS / shutterstock.com