Шаблоны

27 макетов портфолио

Сетки и masonry. Стили фильтрации и подгрузки. Плюс макеты отдельных проектов, которые лежат в их основе.

Обновлено

Сетки 5

Каждая сетка на этой странице — один блок Canvas Posts с параметром Layout, установленным в значение Portfolio. Параметр Columns задаёт, сколько проектов умещается в ряд, а Portfolio Gutter — расстояние между ними, вплоть до нуля. В варианте с одной колонкой включается Alternating Split Cards: каждый проект стоит рядом со своим описанием, и изображение меняет сторону у каждой второй карточки.

Masonry 6

Тот же блок, другой Grid Engine. Выберите режим masonry, и карточки сохранят собственную высоту, выстраиваясь в колонки без строк, которые нужно выравнивать. Ритм задаёт Card Shape: обрежьте все изображения до одной формы или дайте каждому проекту сохранить свою. Смешанный вариант также переносит заголовок внутрь оверлея при наведении.

Загрузка стилей 5

Эти настройки определяют, как посетитель переходит к остальным вашим работам. «Стиль пагинации» предлагает среди вариантов клиентский пагинатор и бесконечную прокрутку. «Открывать проекты на странице» загружает проект над сеткой, не покидая страницу, а «Открывать проект в» может показывать его в модальном окне-лайтбоксе. «Стили фильтра» задают вид блока Canvas Grid Filter, строки кнопок категорий, во всех его стилях, с кнопкой Shuffle и без неё.

Одиночный проект 5

Страница проекта берёт макет из шаблона, который вы выбираете в настройке «Шаблон» во время редактирования проекта. Шаблоны охватывают четыре типа медиа: большое изображение, слайдер галереи, сетку миниатюр и видео. Каждый вариант предлагает сайдбар слева, справа или с обеих сторон, полную ширину либо расположение под полноэкранным баннером. Страницы, на которые ведут ссылки здесь, — выборка из этого набора.

Макетов 6

Положение сетки на странице. В версиях с боковой колонкой тот же блок выводится в основной колонке рядом с боковой колонкой виджетов, например с последними записями и быстрой контактной формой. 100% по ширине растягивает сетку от края до края без отступов. Параметр Parallax включает Parallax Cards: каждое изображение становится фоновым слоем, который движется при прокрутке страницы.

Каждая ссылка открывает настоящую страницу на живой витрине, созданную той же темой и теми же блоками, которые вы установите.

На вашем сайте

Соберите любой из этих вариантов из одного блока

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

Проекты — это записи

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

Сетка задаётся настройками

Вставьте Canvas Posts, выберите макет Portfolio, затем настройте панели Layout и Pagination, ориентируясь на названия на этой странице. Что касается самой страницы проекта, Canvas добавляет 8 блоков портфолио: от заголовка и списка метаданных до связанных проектов.

Или импортируйте готовое демо

21 из 88 демо-сайтов можно импортировать с уже готовыми проектами портфолио, оформленными для агентства, фотографа или иллюстратора. Начните с одного из них и редактируйте проекты, а не макет.

Все тарифы, все макеты

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

Выбор

Какой макет портфолио подходит вашей работе

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

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

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

Начните с готовой страницы

Все 141 макет входят в каждый тариф вместе с каждым блоком и каждым демо.