Примеры Портфолио

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

Пример 1: Travel Blog

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

Пример 2: Video Production

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

Пример 3: Web Designer

Покажите весь спектр своих работ из разных областей. Меню по категориям позволит сделать такое портфолио удобным для просмотра. Все проекты будут распределены по категориям, и пользователи смогут с легкостью найти нужный. Вы можете загрузить обложку проекта, которая будет отражать его суть. Если выбрать тип оформления Bottom overlay, то описание проекта будет появляться только при наведении мыши. Шапка виджета помимо прочего помогает в продвижении автора - она демонстрирует контактную информацию и имеет кнопку переадресации.

Пример 4: Photo Shoots

С помощью раскладки Grid вы можете создать стильную минималистичную галерею своих фотографий. В этом примере шапка виджета скрыта, описания проектов видны только при наведении, что делает интерфейс сдержанным. Все проекты собраны в сетку 3х5, с единым размером и квадратной формой карточек проектов, это помогает создать единообразие. Черно-белый эффект при наведении придает стильности. По клику проект открывает все работы без лишних тестовых деталей.
Перейти к созданию виджета
Перейти к созданию виджета
Быстро. Легко. Ни строчки кода.
Создать виджет

Пример 5: Makeup Artist

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

Пример 6: Hair Stylist

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

Пример 7: Fashion Photographer

Когда важно показать фотографии в реальном размере и пропорциях, воспользуйтесь раскладкой Masonry. Она оптимально подберет расположение фотографии, сохранив их размер и параметры сторон. В этом примере интервал между фото специально уменьшен, что вкупе с черным фоном создает контрастный геометричный вид. Фотограф может добавить в шапку виджета свое имя и контактную информацию. A самые важные элементы - имя и CTA кнопка остаются на виду даже в попапе.

Пример 8: Product Photographer

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

Пример 9: Architecture

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

Пример 10: Tattoo Artist

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

Пример 11: Illustration

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

Пример 12: Wedding Photographer

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

Станьте одним из 305,165 клиентов Elfsight Apps

Get the taste of 50+ powerful apps by Elfsight. No credit card. Joining is free!
Начать
Получите скидку 20% прямо сейчас!