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

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

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

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

Sneak Peek

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

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

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл JSON в Divi Builder.

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

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

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

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

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

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

Оптимизация строки и столбца

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

Настройки строки

Затем нам нужно обновить строку, чтобы у нас не было лишнего пространства между модулями (через ширину желоба), поэтому мы установим ширину желоба равной 1. Нам также необходимо убедиться, что строка охватывает всю ширину окна браузера. поэтому мы можем использовать единицы длины vw для размещения наших изображений (единица длины vw (ширина области просмотра) связана с шириной окна браузера). Установив ширину на 100%, мы можем использовать единицы длины vw для размещения наших изображений в строке / столбце, чтобы положение оставалось неизменным при любой ширине браузера для бесшовного адаптивного дизайна. И чтобы скрыть любое переполнение изображения за пределами строки, нам нужно установить переполнение как скрытое.

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

Установка высоты столбца

По умолчанию высота столбца определяется высотой содержимого (или модулей Divi), которое он содержит. Модули Divi (как и все div в HTML) по умолчанию будут иметь статическое положение, что означает, что они будут добавлять фактическое пространство / высоту в свой родительский столбец, потому что он расположен в обычном потоке страницы. Однако модули Divi, которые имеют абсолютное положение, выходят за рамки обычного потока и не создают фактического пространства / высоты для столбца. По этой причине нам нужно добавить указанную высоту для столбца, чтобы затем мы могли расположить изображения в пределах заранее определенного пространства.

Для этого откройте настройки строки и обновите настройки столбца, добавив следующий настраиваемый CSS к основному элементу.

height: 40vw;

На вкладке телефона восстановите высоту до состояния по умолчанию, так как мы также меняем изображения обратно в статическое положение на телефоне. Добавьте следующий настраиваемый CSS на вкладку телефона:

height: auto !important;

Добавление текста заголовка

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

Содержимое текстового модуля

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

<h2>Recent Work</h2>

Настройки текстового модуля

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

• Шрифт заголовка 2: Limelight
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 24005b
• Размер текста заголовка 2: 5vw (компьютер и планшет), 50px (телефон)
• Ширина: 100%
• Макс.ширина: 35vw (настольный компьютер и планшет), 100% (телефон)
• Позиция: Абсолютная (рабочий стол), По умолчанию (телефон)
• Горизонтальное смещение (рабочий стол): 35vw

Создание и размещение изображений

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

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

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

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

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

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

• Масштаб трансформации (при наведении): 115%

Абсолютное позиционирование с приоритетом индекса Z при наведении курсора

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

На компьютере (и планшете)

• Позиция: абсолютная
• Расположение: вверху слева
• Вертикальное смещение: 5vw
• Горизонтальное смещение: -2vw

На телефоне

• Должность: по умолчанию

При наведении

• Индекс Z: 2

Дизайн изображения и адаптивные настройки

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

• Выравнивание изображения: слева (рабочий стол), по центру (телефон)
• Ширина: 75% (телефон)
• Макс.ширина: 20vw (настольный компьютер и планшет), 100% (телефон)
• Поля (телефон): 30 пикселей снизу
• Box Shadow: см. Снимок экрана
• Насыщенность: 0% (рабочий стол), 100% (наведение)

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

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

Вот процесс ...

1. Дублируйте изображение, щелкнув значок дубликата. Дубликат изображения будет расположен абсолютно в том же месте, прямо поверх изображения, которое вы дублируете.
2. Перетащите изображение на место. Поскольку дублированное изображение наследует единицу длины vw предыдущего изображения, вы можете использовать значок перетаскивания, чтобы расположить изображение точно там, где вы хотите, в строке.
3. Обновите изображение новым.
4. Отрегулируйте размер изображения с помощью встроенных параметров размера.

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

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

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

Изображение № 2 Обновления

• Вертикальное смещение: 10.06 vw
• Горизонтальное смещение: 16,51 vw
• Максимальная ширина: 18 vw

Изображение № 3 Обновления

• Вертикальное смещение: 24.25vw
• Горизонтальное смещение: 7,13vw
• Максимальная ширина: 20vw

Изображение № 4 Обновления

• Вертикальное смещение: 17,69vw
• Горизонтальное смещение: 31.91vw
• Максимальная ширина: 18vw

Изображение № 5 Обновления

• Вертикальное смещение: 12vw
• Горизонтальное смещение: 46,82vw
• Максимальная ширина: 15vw

Изображение # 6 Обновления

• Вертикальное смещение: 19,13vw
• Горизонтальное смещение: 58,84vw
• Максимальная ширина: 12vw

Изображение № 7 Обновления

• Вертикальное смещение: 28.24vw
• Горизонтальное смещение: 54,2vw
• Максимальная ширина: 10vw

Изображение № 8 Обновления

• Вертикальное смещение: 32,5vw
• Горизонтальное смещение: 74.04vw
• Максимальная ширина: 8vw

Изображение № 9 Обновления

• Вертикальное смещение: 1.01vw
• Горизонтальное смещение: 75,5vw
• Ширина: 27vw
• Максимальная ширина: 27vw

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

В качестве последнего штриха добавьте фоновое изображение в раздел, и все готово!

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

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

Вот дизайн дисплея телефона.

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

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

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

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

Расположение в правом верхнем углу

Расположение в нижнем левом углу

Расположение в правом нижнем углу

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

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

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

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