Как использовать параметры положения Divi для создания пакетов изображений

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

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

Давайте начнем.

Sneak Peek

Вот краткий обзор дизайнов, которые мы создадим в этом уроке.

Дизайн пакета изображений №1

Начать проектирование здания №1

Дизайн пакета изображений №2

Начать проектирование здания №2

Дизайн пакета изображений №3

Начать проектирование здания # 3

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

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

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

СКАЧАТЬ

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Создание пакета изображений №1

Для этого первого дизайна пакета изображений мы собираемся расположить два (слегка повернутых) изображения с каждой стороны от центрального изображения.

Начните с добавления строки из одного столбца в обычный раздел.

Добавить среднее изображение

Внутри столбца добавьте модуль изображения.

Затем загрузите изображение в модуль.

Для этих изображений мы собираемся использовать скриншоты из пакета Fitness Coach Layout Pack. Каждый из них должен иметь размер 880 на 1200 пикселей.

Откройте настройки изображения и обновите следующее:

• Ширина: 50%
• Выравнивание модуля: по центру

Добавьте тень блока следующим образом:

• box Shadow: см. снимок экрана
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 38 пикселей
• Сила распространения тени коробки: 5 пикселей
• Цвет тени: rgba (0,0,0,0.2)

Затем установите индекс Z на 1, чтобы он оставался над другими изображениями в пакете.

• Индекс Z: 1

Добавить левое изображение

Чтобы создать левое изображение в связке, добавьте новое изображение под средним изображением.

Обновите изображение, добавив новое (для достижения наилучших результатов убедитесь, что все они одного размера).

На вкладке дизайна обновите ширину следующим образом:

• ширина: 30%

Затем добавьте тень блока следующим образом:

• Box Shadow: см. Снимок экрана
• Цвет тени: rgba (0,0,0,0.2)

Затем придайте изображению абсолютное положение в левом центральном месте, чтобы оно располагалось рядом со средним изображением с левой стороны.

• позиция: абсолютная
• Расположение: левый центр

Чтобы придать изображению небольшой поворот, обновите параметр поворота при преобразовании следующим образом:

Трансформировать поворот оси Z: -10deg

Добавьте правильное изображение

Чтобы создать правое изображение, откройте окно «Слои» и продублируйте левое изображение.

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

• расположение: справа в центре

Затем настройте параметр поворота при преобразовании следующим образом:

• Преобразование поворота по оси Z: 10 градусов

Не забудьте заменить дубликат изображения новым.

Теперь посмотрим на результат.

Добавление набора изображений в несколько столбцов

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

Чтобы добавить набор изображений в несколько столбцов, продублируйте строку, содержащую текущий набор изображений.

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

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

Конечный результат

Вот окончательный дизайн для пакета изображений №1.

Создание пакета изображений №2

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

Для начала создайте новый обычный раздел со строкой столбца из одной четвертой, половины, одной четвертой.

Добавить изображение центра

В средний столбец добавьте модуль изображения.

Затем загрузите изображение в модуль. Мы используем изображения из пакета «Макет мебельного магазина» (каждое 800 на 1200 пикселей).

На вкладке дизайна обновите следующее:

• Цвет фона: # f7f3ec

• Ширина: 55%
• Выравнивание модуля: по центру

• Маржа: 0 пикселей
• Заполнение: 5% сверху, 5% снизу, 5% слева, 5% справа.

На вкладке «Дополнительно» увеличьте Z-индекс на 1, чтобы изображение оставалось над другими изображениями в Z-пространстве.

• Индекс Z: 1

Добавить верхнее левое изображение

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

Загрузите новое изображение в модуль.

Затем обновите настройки дизайна следующим образом:

• Ширина: 40%
• Поля: низ 0 пикселей

Расстояние между столбцами

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

• Набивка (рабочий стол): 12% сверху, 12% снизу
• Набивка (планшет): 24% сверху, 24% снизу

Затем придайте верхнему левому изображению абсолютное положение следующим образом:

• Позиция: Абсолютная
• Расположение: вверху слева

Добавить изображение в правом верхнем углу

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

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

Откройте дубликат (вверху справа) изображения и обновите абсолютное местоположение:

• Расположение: вверху справа

Добавить нижнее левое изображение

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

Откройте настройки дубликата (внизу слева) изображения и обновите абсолютное местоположение:

• Расположение: внизу слева

Добавить нижнее правое изображение

Чтобы создать нижнее правое изображение, продублируйте нижнее левое изображение и при необходимости обновите этикетку. Затем обновите изображение и укажите новое местоположение:

• Расположение: внизу справа

Добавить дизайнерский акцент Box Shadow

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

• Box Shadow: см. Снимок экрана
• Горизонтальное положение тени блока: -170 пикселей
• Положение прямоугольной тени по вертикали: 170 пикселей
• Цвет тени: rgba (36,57,74,0.07)

Добавьте дополнительный акцент в виде теней к верхнему правому изображению следующим образом:

• Box Shadow: см. Снимок экрана
• Горизонтальное положение тени блока: 170 пикселей
• Положение прямоугольной тени по вертикали: 170 пикселей
• Цвет тени: rgba (36,57,74,0.07)

Добавить текст в левый столбец

Чтобы добавить текст в дизайн, добавьте новый текстовый модуль в левый столбец.

Содержание

Затем обновите содержимое следующим образом:

<h2>Image Bundle</h2>

Текстовый Дизайн

На вкладке дизайна обновите следующее:

• Шрифт заголовка 2: Montserrat
• Стиль шрифта заголовка 2: TT
• Выравнивание текста заголовка 2: справа
• Цвет текста заголовка 2: # 24394a
• Размер текста заголовка 2: 34 пикселя
• Заголовок 2 Расстояние между буквами: 4 пикселя
• Высота строки заголовка 2: 1,3 м

Заполнение левого столбца

Чтобы немного уменьшить текст, откройте настройки для левого столбца и обновите следующие отступы:

• Заполнение: осталось 20%

Добавить текст в правый столбец

Чтобы создать текст в правом столбце, скопируйте текстовый модуль в левый столбец и вставьте его в правый столбец. Затем откройте настройки текста и обновите следующее:

• Выравнивание текста заголовка 2: по левому краю

Отступ правого столбца

Так же, как мы сделали для левого столбца, добавьте следующий отступ в правый столбец (столбец 3), чтобы отключить текстовый модуль.

• Набивка: 33% верх

Фон раздела

Чтобы закончить дизайн, откройте настройки раздела и добавьте следующий цвет фона:

• Цвет фона: # f7f3ec

Вот результат.

Добавление набора изображений в несколько столбцов

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

Используя множественный выбор, выберите верхнее левое изображение и верхнее правое изображение. Откройте настройки и вытащите box-shadow.

Затем продублируйте столбец один или два раза, чтобы создать несколько столбцов с включенными пакетами изображений.

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

• обивка: 8% сверху, 8% снизу

Конечный результат

Вот окончательный результат.

И вот он на мобильном телефоне.

Дизайн пакета изображений №3

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

Добавить ряд

Для начала добавьте строку из одного столбца в обычный раздел.

Добавить среднее изображение

Внутри строки добавьте модуль изображения.

Затем загрузите изображение в модуль изображений. Мы используем те же скриншоты размером 880 на 1200 пикселей из пакета макетов фитнес-тренера, которые мы использовали для дизайна №1.

На вкладке дизайна обновите параметры размера следующим образом:

• Ширина: 30%
• Выравнивание модуля: по центру

Затем придайте изображению тонкую тень коробки:

• Box Shadow: см. Снимок экрана
• Вертикальное положение тени блока: -12 пикселей
• Сила размытия тени коробки: 28 пикселей
• Цвет тени: rgba (0,0,0,0.11)

Затем удалите нижнее поле по умолчанию, установив для него значение 0 пикселей.

• Поля: низ 0 пикселей

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

• Индекс Z: 2

Добавить перспективу столбца

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

Добавить среднее левое изображение

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

Чтобы создать среднее левое изображение, продублируйте среднее изображение.

При необходимости обновите метки изображений в поле «Слои», а затем обновите модуль дублирования изображения, добавив новое изображение.

Откройте настройки изображения и обновите положение абсолютного положения и индекс Z следующим образом:

• Расположение: внизу слева
• Индекс Z: 1

Затем добавьте следующие параметры преобразования, чтобы расположить и повернуть изображение.

• Преобразовать преобразовать ось X: 75%
• Преобразование, поворот оси X: 30 градусов

Добавить левое изображение

Чтобы создать левое изображение, продублируйте только что созданное среднее левое изображение.

Откройте настройки нового изображения и обновите ширину:

• Ширина: 20%

Затем настройте параметр преобразования преобразования следующим образом:

• Преобразовать преобразовать ось X: 0 пикселей

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

• Индекс Z: 0

Добавить среднее правое изображение

Затем мы собираемся добавить среднее правое изображение в набор изображений.

Чтобы создать изображение, откройте всплывающее окно «Слои». Затем продублируйте среднее левое изображение, перетащите дубликат под левое изображение и затем пометьте его соответствующим образом (например, «среднее правое изображение»).

Откройте настройки для среднего правого изображения и измените местоположение абсолютного положения следующим образом:

• Расположение: внизу справа

Затем настройте параметры преобразования следующим образом:

• Преобразовать преобразовать ось X: -75%
• Преобразование, поворот оси X: -30 градусов

Добавить правое изображение

Чтобы создать правое изображение (последнее), мы можем продублировать левое изображение. Затем перетащите дубликат изображения под среднее правое изображение и назовите его «правое изображение».

Откройте правильные настройки изображения и обновите абсолютное местоположение следующим образом:

• Расположение: внизу справа

Затем настройте поворот преобразования.

• Преобразование, поворот оси X: -30 градусов

Проверьте результат на данный момент.

А вот тот же набор изображений, добавленный в несколько столбцов.

Последние мысли

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!