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

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

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

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

Sneak Peek

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

Загрузите БЕСПЛАТНО примеры дизайна из этого руководства

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

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

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

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

СКАЧАТЬ

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

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

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

Начало работы

Для начала убедитесь, что у вас установлена ​​и активна тема Divi. Затем создайте новую страницу и разверните Divi Builder во внешнем интерфейсе. Выберите вариант «Строить с нуля».

Теперь вы готовы к дизайну!

Размещение изображений частично за пределами области просмотра (вправо или влево)

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

Вот как это сделать.

Создайте и стилизуйте текстовый модуль

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

Если вы еще этого не сделали, создайте обычный раздел со строкой из одного столбца. Затем добавьте текстовый модуль в строку.

Обновите содержимое, включив в него следующее:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

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

Шрифт текста: Raleway
Шрифт заголовка 2: Raleway
заголовок 2 Толщина шрифта: полужирный
Размер текста заголовка 2: 44 пикселя (рабочий стол), 24 пикселя (телефон)
Ширина: 680 пикселей (рабочий стол), 60% (планшет), 80% (телефон)
Пользовательские отступы: 10% сверху, 10% снизу, 10% слева, 5% справа

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

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

Затем загрузите свое изображение в модуль изображений. Убедитесь, что изображение достаточно велико, чтобы не потерять качество при увеличении изображения с помощью свойства преобразования. Я использую изображение размером 400 на 580 пикселей.

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

Ширина: 5%
Выравнивание модуля: слева

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

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

Масштаб трансформации по оси X: 416%
Масштаб преобразования по оси Y: 416%

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

Преобразовать преобразовать ось X: -36%
Преобразовать преобразовать ось Y: 41%

Наконец, вы можете повернуть изображение, используя преобразование поворота:

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

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

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

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

Ширина: 10%
Выравнивание модуля: слева

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

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

Масштаб трансформации по оси X: 464%
Масштаб преобразования по оси Y: 464%

Преобразовать преобразовать ось X: 7%
Преобразовать преобразовать ось Y: -80%

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

Затем добавьте тень блока для дополнительного элемента дизайна.

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -20 пикселей
Вертикальное положение тени блока: -7 пикселей

Убедитесь, что текстовый модуль остается наверху

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

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

Основной элемент CSS:

position: relative;

Затем установите Z-index равным 1.

Скрытие переполнения раздела

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

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

overflow: hidden;

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

Создание абстрактного фонового изображения-коллажа для заголовка

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

Вот как это сделать.

Разработка модуля текста заголовка

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

<h1>Interior Design</h1>
<p>This is some content</p>

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

Цвет фона: rgba (0,0,0,0.07)
Цвет текста текста: #ffffff
Ориентация текста: по центру
Шрифт заголовка: Raleway
Толщина шрифта заголовка: полужирный
Выравнивание текста заголовка: вправо
Цвет текста заголовка: #ffffff
Размер текста заголовка: 44 пикселя (рабочий стол), 34 пикселя (планшет), 24 пикселя (телефон).
Ширина: 500 пикселей (рабочий стол), 60% (планшет), 80% (телефон)
Выравнивание модуля: по центру
Пользовательские отступы: 5vw сверху, 5vw снизу, 1vw справа

Настройки раздела

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

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

Цвет фона: # 4c606d
Пользовательский отступ (рабочий стол): 0 пикселей сверху, 0 пикселей снизу
Пользовательский отступ (планшет): нижняя часть 20 пикселей
Пользовательский отступ (телефон): 40 пикселей снизу

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: -80 пикселей
Цвет тени: #ffffff

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

overflow: hidden;

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

Теперь нам нужно добавить отступ к строке, содержащей наш текстовый модуль. Нам также нужно добавить z-index, чтобы раздел оставался поверх изображений, которые мы будем добавлять в наш раздел. По умолчанию каждый раздел имеет значение z-index, равное 9. Итак, все, что нам нужно сделать, это добавить z-index, равный 10, к строке, которую мы хотим оставить наверху.

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

Пользовательская обивка: верх 10vw
Индекс Z: 10

Создание коллажа с абстрактным изображением

На этом этапе раздел готов к добавлению наших изображений.

Чтобы создать коллаж абстрактного изображения, мы собираемся добавить 5 изображений в строку из одного столбца, а затем использовать «display: flex» для выравнивания всех этих изображений по горизонтали на странице. Это необходимо, чтобы изображения оставались на месте (по горизонтали) во всех размерах браузера. Если бы мы использовали традиционный макет из 5 столбцов, изображения разбивались бы на разные макеты столбцов на разных устройствах и нарушали дизайн.

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

Добавление ряда изображений

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

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

Специальная ширина: 50%
Ширина желоба: 1

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

display: flex;

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

Посмотрите, что происходит, когда я дублирую модуль изображения в строке с помощью display: flex add в столбец.

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

Размещение изображений с помощью Transform Translate

Пришло время начать позиционировать наши изображения для создания коллажа.

Изображение # 1

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

Масштаб трансформации по оси X: 266%
Масштаб преобразования по оси Y: 266%

Transform Translate: ось X: -68%
Transform Translate: ось Y: -54%

Изображение # 2

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

Масштаб преобразования по оси X: 184%
Масштаб преобразования по оси Y: 184%

Transform Translate: ось X: -36%
Transform Translate: ось Y: -66%

Изображение # 3

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

Масштаб трансформации по оси X: 206%
Масштаб преобразования по оси Y: 206%

Преобразовать Перевести: ось X: -51%
Transform Translate: ось Y: -27%

Изображение # 4

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

Масштаб преобразования по оси X: 180%
Масштаб преобразования по оси Y: 180%

Трансформировать Перевести: ось X: 20%
Трансформировать Перевести: ось Y: 42%

Изображение # 5

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

Масштаб трансформации по оси X: 290%
Масштаб преобразования по оси Y: 290%

Преобразовать Перевести: ось X: -50%
Трансформировать Перевести: ось Y: 72%

Добавление тени к изображениям

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

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -40 пикселей
Положение прямоугольной тени по вертикали: 40 пикселей
Цвет тени: rgba (255,255,255,0.13)

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

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

Рабочий стол

Планшет

Телефон

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

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

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

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