6 новых галерей изображений, построенные с вложенными рядами Divi 5 (скачать бесплатно)

Если вы когда -нибудь пробовали создать галерею изображений вручную, вы знаете, как быстро все станет грязным. Неровные изображения, смещенные ряды и невосприимчивые дизайны превращают простую галерею в кошмар макета.

Даже в Divi 4 сложные структуры изображений часто означали укладку нескольких строк и специальных разделов, настройки интервала и часам ручной настройки. Но с Divi 5 вы можете пропустить все это.

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

Divi 5 готов к использованию на новых веб -сайтах, но подождите немного, прежде чем переносить существующие.

Использование вложенных рядов для создания сложных макетов

Divi 4 уже имел все, что вам нужно, чтобы создать галереи изображений, но создание сложных макетов часто казалось неуклюжим. Divi 5 представляет вложенные ряды , которые дают вам более быстрый и более чистый способ создания расширенных макетов галереи визуально, без взломов.

Подписаться на наш канал на YouTube

Что такое вложенные ряды?

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

Гнездование ряда - это все равно, что добавить еще один модуль. Вам нужно только зависать над элементом, где вы хотите разместить свою строку, и нажать кнопку Plus, чтобы выбрать новую строку. Тогда вы можете выбрать из всех этих макетов строк, которые идеально подходят для различных структур галереи.

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

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

Узнайте все о вложенных рядах Divi 5

Что отличает вложенные ряды?

В Divi 4 создание макетов галереи изображений на заказ вовлечено творчески, используя строки, специальные разделы и макеты для достижения более продвинутых дизайнов. Это означало, что было бы сложно, если бы у вас не было ноу-хау дизайна. И даже если у вас был опыт, вы были ограничены несколькими структурами макета.

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

6 макетов галереи изображений, которые вы можете построить с помощью вложенных рядов

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

Макет 1: встроенная галерея CTA

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

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

Как это построить

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

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

Макет 2: галерея сплит -фокус

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

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

Как это построить

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

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

Макет 3: галерея проекта Spotlight

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

Короткий двухколонный ряд следует за каждым изображением. Левая сторона содержит быстрое описание или имя проекта, а правая сторона имеет кнопку, приглашающая пользователя принять меры, например, заказ сейчас . Макет галереи Project Spotlight привносит больше цели и взаимодействия в вашу галерею.

Как это построить

Под каждым изображением мы добавили вложенную строку с двумя столбцами. Мы использовали левый столбец для краткого описания и правого столбца для кнопки вызовов к действию. Затем мы стилизовали кнопку, используя глобальные стили, и повторили эту структуру для каждого элемента галереи, чтобы поддерживать последовательность. Чтобы сделать наложение ряда изображением, мы установили позицию для абсолютного с вертикальным смещением 40px и z index 1000.

Мы также добавили предварительную установку тени ко всем изображениям, который не только придавал галереи отполированный вид, но и сохранила меня время, позволив мне применить последовательный брендинг на несколько модулей всего за несколько кликов.

Планировка 4: Свитка раскрыть галерею

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

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

Как это построить

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

Ключевым игроком этого макета является левая секция, которая придерживается. Чтобы сделать ваш фиксированный раздел, вам нужно создать группу модулей и включить настройки эффектов прокрутки . Нажмите на группу модулей и перейдите к настройкам> Advanced> Effects Scroll.

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

Макет 5: Галерея шахмальных продуктов

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

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

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

Как это построить

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

Чтобы создать перекрывающийся эффект сумочки (как в разделе ручной работы) , добавьте модуль изображения в его строке и используйте абсолютное позиционирование (Advanced> Position> Absolute ). Затем используйте ползунки смещения и z-индекс, чтобы сложить его между двумя секциями. Это позволяет создавать макеты в стиле журнала, где изображения разбивают сетку для дополнительного визуального интереса.

Макет 6: Асимметричная портфельная сетка

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

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

Как это построить

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

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

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

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

Лучшие советы по созданию интерактивных галерей изображений

После того, как ваш макет будет на месте, посыпьте несколько дополнительных деталей, чтобы сделать ваши галереи более отполированными. Вот как:

1. Создать эффекты наклонения

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

В Divi 5 добавить эффекты наказания к вашим изображениям легко. При редактировании вы можете легко переключиться на пари (и отзывчивые режимы) и настроить свои настройки.

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

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

2. Используйте атрибуты копирования/вставки для быстрого применения стилей к изображениям

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

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

Например, настройте один элемент и скопируйте и вставьте его атрибуты в другие элементы, чтобы повторить стиль.

Divi 5 также допускает больше гранулированного контроля. Например, вы можете скопировать и вставить определенные группы атрибутов, например, только настройки дизайна или только эффекты наказания. Это делает ваш рабочий процесс эффективным и сплоченным.

3. Используйте зажим для создания жидкости и отзывчивых изображений

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

Divi 5 поддерживает Clamp () и многие другие передовые подразделения, которые позволяют вам вручную вводить значения размера в любом месте, включая ширину изображений, прокладки и поля маржи. Clamp () идеально подходит для отзывчивости. Это позволяет вам установить минимальное, идеальное и максимальное значение, все в одной строке.

Например, зажим (1200px, 30 ВВт, 1400px) говорит Divi никогда не опускаться ниже 1200 пикселей, масштабируйте до 30% ширины видового порта, но ограничивает его при 1400px.

Это особенно полезно для полосок изображения или ошеломленных макетов, где вы хотите более жидкую сетку без точек отдыха. В сочетании с вложенными рядами Clamp () помогает каждому блоку адаптироваться естественным образом, не требуя отдельных мобильных корректировок.

4. Предварительный просмотр и настройка для разных устройств

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

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

Скачать макеты галереи бесплатно

Хотите начать использовать макеты галереи внутри Divi 5? Подпишитесь ниже, чтобы получить доступ к файлам JSON. Вы можете загрузить их в свою библиотеку Divi и импортировать их на свои страницы.

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить свою подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Создайте вложенные галереи изображений (и больше) с Divi 5

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

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

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

Если вы строили галереи трудный путь, сейчас самое время попробовать Divi 5 и познакомиться с тем, как вложенные строки и инструменты для визуальной макеты могут упростить все.

Divi 5 готов к использованию на новых веб -сайтах, но подождите немного, прежде чем переносить существующие.