10 сайтов Divi с классными страницами портфолио

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

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

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

1. Boon Creative

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

См. Веб-сайт

2. круглый кончик

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

См. Веб-сайт

3. Лео Воу Тенг

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

См. Веб-сайт

4. Медиа-графика Studinger

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

См. Веб-сайт

5. Кэтрин Клифф

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

См. Веб-сайт

6. Супер божественный веб-дизайн

Он пронумеровывает каждый проект и отображает изображение, которое включает в себя логотип компании и предоставляемые услуги, название проекта с рукописным шрифтом, краткое описание проекта и кнопку для просмотра проекта вживую. Цвет текста заголовка, рамки и кнопки соответствует фирменному оформлению сайта. Далее следует CTA к приложению онлайн-бронирования.

См. Веб-сайт

7. Получить веб-дизайн

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

См. Веб-сайт

8. Капоральный маркетинг в цифровом формате

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

См. Веб-сайт

9. Могучий Лис

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

См. Веб-сайт

10. Вака

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

См. Веб-сайт

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

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

Здесь только несколько:

• Как использовать фильтруемое портфолио и навигацию по записям для организации тематических исследований с Divi
• 3 бесплатных красивых макета страницы проекта (и как создать больше с помощью Divi Builder)
• Как использовать Divi Leads для измерения эффективности вашего сайта-портфолио
• Как создать минимальную домашнюю страницу портфолио с Divi
• Использование фильтров, разделов героев и призывов к действию для расширения домашней страницы с минимальным портфолио
• Бесплатная загрузка Divi: макет домашней страницы портфолио
• Бесплатная загрузка Divi: набор макетов для творческого одностраничного портфолио
• Использование анимации складывания Divi для создания цветущих пятен
• Как добавить расширенные эффекты наведения в модуль Blurb Divi с помощью Hover.css
• 5 забавных способов стилизовать модуль Blurb от Divi
• Создание галереи от оттенков серого к цвету с помощью модуля Divi Gallery
• Как создать уникальный эффект перекрытия с фоновыми изображениями
• Как использовать новые параметры фильтра Divi для украшения ваших изображений

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

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