27 макетов портфолио
Сетки и masonry. Стили фильтрации и подгрузки. Плюс макеты отдельных проектов, которые лежат в их основе.
Обновлено
Сетки 5
Каждая сетка на этой странице — один блок Canvas Posts с параметром Layout, установленным в значение Portfolio. Параметр Columns задаёт, сколько проектов умещается в ряд, а Portfolio Gutter — расстояние между ними, вплоть до нуля. В варианте с одной колонкой включается Alternating Split Cards: каждый проект стоит рядом со своим описанием, и изображение меняет сторону у каждой второй карточки.
- 1 колонка (откроется в новой вкладке)
- 2 колонки (откроется в новой вкладке)
- 3 колонки (откроется в новой вкладке)
- 5 колонок (откроется в новой вкладке)
- 6 колонок (откроется в новой вкладке)
Masonry 6
Тот же блок, другой Grid Engine. Выберите режим masonry, и карточки сохранят собственную высоту, выстраиваясь в колонки без строк, которые нужно выравнивать. Ритм задаёт Card Shape: обрежьте все изображения до одной формы или дайте каждому проекту сохранить свою. Смешанный вариант также переносит заголовок внутрь оверлея при наведении.
- Смешанные колонки (откроется в новой вкладке)
- 2 колонки (откроется в новой вкладке)
- 3 колонки (откроется в новой вкладке)
- 4 колонки (откроется в новой вкладке)
- 5 колонок (откроется в новой вкладке)
- 6 колонок (откроется в новой вкладке)
Загрузка стилей 5
Эти настройки определяют, как посетитель переходит к остальным вашим работам. «Стиль пагинации» предлагает среди вариантов клиентский пагинатор и бесконечную прокрутку. «Открывать проекты на странице» загружает проект над сеткой, не покидая страницу, а «Открывать проект в» может показывать его в модальном окне-лайтбоксе. «Стили фильтра» задают вид блока Canvas Grid Filter, строки кнопок категорий, во всех его стилях, с кнопкой Shuffle и без неё.
- Пагинация jQuery (откроется в новой вкладке)
- Бесконечная прокрутка (откроется в новой вкладке)
- AJAX на странице (откроется в новой вкладке)
- AJAX в модальном окне (откроется в новой вкладке)
- Стили фильтров (откроется в новой вкладке)
Одиночный проект 5
Страница проекта берёт макет из шаблона, который вы выбираете в настройке «Шаблон» во время редактирования проекта. Шаблоны охватывают четыре типа медиа: большое изображение, слайдер галереи, сетку миниатюр и видео. Каждый вариант предлагает сайдбар слева, справа или с обеих сторон, полную ширину либо расположение под полноэкранным баннером. Страницы, на которые ведут ссылки здесь, — выборка из этого набора.
- Parallax Image (откроется в новой вкладке)
- Галерея Slider (откроется в новой вкладке)
- Видео HTML5 (откроется в новой вкладке)
- Миниатюры Masonry (откроется в новой вкладке)
- Встраивание видео (откроется в новой вкладке)
Макетов 6
Положение сетки на странице. В версиях с боковой колонкой тот же блок выводится в основной колонке рядом с боковой колонкой виджетов, например с последними записями и быстрой контактной формой. 100% по ширине растягивает сетку от края до края без отступов. Параметр Parallax включает Parallax Cards: каждое изображение становится фоновым слоем, который движется при прокрутке страницы.
- По умолчанию (откроется в новой вкладке)
- Правый сайдбар (откроется в новой вкладке)
- Левый сайдбар (откроется в новой вкладке)
- Сайдбары с обеих сторон (откроется в новой вкладке)
- Ширина 100% (откроется в новой вкладке)
- Параллакс (откроется в новой вкладке)
Каждая ссылка открывает настоящую страницу на живой витрине, созданную той же темой и теми же блоками, которые вы установите.
Соберите любой из этих вариантов из одного блока
Витрина нужна для просмотра. Блоки и шаблоны, на которых она построена, входят в состав Canvas, поэтому любой макет выше можно воссоздать на вашем сайте.
Проекты — это записи
Ваши работы хранятся в типе записей портфолио, по одной записи на проект, с категориями, на основе которых Grid Filter строит свои кнопки. Добавьте проект, и его подхватит каждая сетка на сайте, где выводится эта категория. Сама страница никогда не требует правок.
Сетка задаётся настройками
Вставьте Canvas Posts, выберите макет Portfolio, затем настройте панели Layout и Pagination, ориентируясь на названия на этой странице. Что касается самой страницы проекта, Canvas добавляет 8 блоков портфолио: от заголовка и списка метаданных до связанных проектов.
Или импортируйте готовое демо
21 из 88 демо-сайтов можно импортировать с уже готовыми проектами портфолио, оформленными для агентства, фотографа или иллюстратора. Начните с одного из них и редактируйте проекты, а не макет.
Все тарифы, все макеты
Отдельного дополнения для портфолио нет. Сетки, фильтр, стили загрузки и шаблоны отдельных проектов есть и в тарифе «Ежегодно», и в тарифе «Пожизненно», потому что каждый тариф включает все блоки.
Какой макет портфолио подходит вашей работе
Начинайте с изображений, ведь макет существует, чтобы их показывать. Фотографии в одной ориентации хорошо смотрятся в выровненной сетке, где ряды совпадают. Смесь портретных и альбомных изображений лучше разместить в сетке masonry, где каждая карточка сохраняет форму своего изображения.
Кейсы читаются по-разному. Когда каждому проекту нужен абзац контекста, сетка из одной колонки с разделёнными карточками даёт для этого место, а вариант с боковой колонкой подойдёт агентству, которое хочет показать контакты рядом с работами.
Учитывайте и количество проектов. Небольшая коллекция работ помещается на одном экране, если над ней есть фильтр. Когда строк становится больше нескольких, выберите стиль загрузки, чтобы страница быстро открывалась: постраничная навигация для посетителей, которым важно понимать, где они находятся, или бесконечная прокрутка для тех, кто просматривает работы. Для одного проекта сначала выбирайте шаблон по его медиа: слайдер галереи для фотосессии или видео для фильма, а решение о боковых колонках принимайте в последнюю очередь.
Остальная библиотека
Начните с готовой страницы
Все 141 макет входят в каждый тариф вместе с каждым блоком и каждым демо.
