Как красиво сложить элементы портфолио с помощью параметров преобразования Divi

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

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

Давайте приступим к делу!

Предварительный просмотр

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

Начнем воссоздавать!

Добавить новый раздел

Градиентный фон

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

• Цвет 1: # f4f4f4
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 30%
• Конечная позиция: 30%

Интервал

Затем перейдите на вкладку «Дизайн» и измените значения пользовательского отступа в настройках интервала.

• Верхнее заполнение: 0px (рабочий стол), 18vw (планшет), 40vw (телефон)
• Нижний отступ: 0px (рабочий стол), 18vw (планшет), 40vw (телефон)

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Затем перейдите к настройкам интервала и удалите верхнее и нижнее отступы по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Отображать

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

display: flex;

Добавить модуль изображения №1 в столбец 1

Загрузить изображение

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

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

Размеры

Затем перейдите на вкладку дизайна и включите параметр «Force Fullwidth». Как только вы это сделаете, изображение займет всю ширину столбца.

• Принудительная полная ширина: Да

Интервал

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

• Верхняя маржа: -10vw
• Левый отступ: 11vw
• Правое заполнение: 11vw

Граница

Затем добавьте «2vw» к каждому из углов в настройках границы.

Коробка Тень

Вместе с тенью коробки.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Преобразовать Перевести

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

• Внизу: -26vw
• Справа: -2vw

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

Преобразовать Повернуть

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

• Слева: 24 град.
• Центр: 46 градусов
• Вправо: -7град.

Перевести Skew

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

• Внизу: -4 град.
• Справа: 24 град.

Добавить модуль изображения №2 в столбец 1

Загрузить изображение

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

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

Размеры

Затем перейдите к настройкам размеров и включите параметр «Force Fullwidth».

• Принудительная полная ширина: Да

Интервал

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

• Верхняя маржа: -81vw (настольный компьютер), -50vw (планшет и телефон)
• Левое поле: 11vw
• Правое поле: 11vw

Граница

Далее мы добавим «2vw» к каждому из углов в настройках границы.

Коробка Тень

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

• Сила размытия тени коробки: 150 пикселей
• Цвет тени: rgba (0,0,0,0.6)

Преобразовать Перевести

Затем перейдите к настройкам преобразования и измените значения преобразования преобразования:

• Внизу: -8vw
• Справа: 0 пикселей

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

Преобразовать Повернуть

Перейдите на вкладку преобразования поворота и поиграйте со всеми тремя значениями.

• Слева: 24 град.
• Центр: 46 градусов
• Вправо: -7град.

Перевести Skew

И последнее, но не менее важное: измените значения перекоса перевода:

• Внизу: -4 град.
• Справа: 24 град.

Добавить модуль изображения № 3 в столбец 1

Загрузить изображение

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

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

Размеры

Затем перейдите к настройкам размеров и включите параметр «Force Fullwidth».

• Принудительная полная ширина: Да

Интервал

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

• Верхняя маржа: -107vw
• Левое поле: 19vw
• Правое поле: 19vw

Граница

Продолжайте, добавляя «2vw» в каждый из углов модуля изображения.

Коробка Тень

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

• Сила размытия тени коробки: 200 пикселей
• Цвет тени: rgba (0,0,0,0.82)

Преобразовать Перевести

Затем перейдите к настройкам преобразования и измените значения преобразования преобразования:

• Внизу: -42vw
• Справа: 11vw

Преобразовать Повернуть

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

• Слева: 24 град.
• Центр: 46 градусов
• Вправо: -7град.

Перевести Skew

И последнее, но не менее важное: измените значения трансляции перекоса.

• Внизу: -4 град.
• Справа: 24 град.

Добавить модуль текста заголовка в столбец 2

Добавить копию H2

Переходим ко второй колонке! Добавьте текстовый модуль с некоторым содержанием H2 по вашему выбору.

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

Затем перейдите к настройкам текста H2 и внесите некоторые изменения.

• Шрифт заголовка 2: Roboto
• Толщина шрифта заголовка 2: тонкий
• Выравнивание текста заголовка 2: по левому краю
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 5vw (рабочий стол), 6vw (планшет), 7vw (телефон)
• Интервал между буквами заголовка 2: -1px

Интервал

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

• Верхнее поле: 35vw (рабочий стол), 10vw (планшет), 0vw (телефон)
• Левое поле: -4vw
• Правое поле: 4vw

Добавить модуль разделителя в столбец 2

Видимость

Следующий модуль, который нам нужен в столбце 2, - это модуль разделения. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

Затем перейдите на вкладку дизайна и измените цвет разделителя.

• Цвет: # 8193fa

Размеры

Измените также настройки размера.

• Вес разделителя: 8 пикселей
• Ширина: 28%

Интервал

И добавьте несколько значений нестандартной маржи.

• Верхняя маржа: 1vw
• Левое поле: -4vw
• Правое поле: 4vw

Добавить текстовый модуль описания в столбец 2

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

Следующий модуль, который нам нужен в столбце 2, - это еще один текстовый модуль. Добавьте содержание абзаца по вашему выбору.

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.6vw (рабочий стол), 1.2vw (планшет), 1.8vw (телефон)
• Высота текстовой строки: 3,1 м (рабочий стол), 2,7 м (планшет), 2,6 м (телефон)
• Ориентация текста: влево

Интервал

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

• Верхняя маржа: 1vw
• Левое поле: -4vw
• Правое поле: 4vw

Добавить модуль кнопок в столбец 2

Добавить копию

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

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

Затем перейдите на вкладку дизайна и измените настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет 1: # 5627ba
• Цвет 2: # 8fb5fc
• Направление градиента: 122 град.
• Ширина границы кнопки: 0 пикселей
• Толщина шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

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

• Верхнее поле: 2vw (рабочий стол), 3vw (планшет), 5vw (телефон)
• Нижнее поле: 6vw (планшет), 8vw (телефон)
• Левое поле: -4vw
• Правое поле: 4vw
• Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижняя прокладка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Левое заполнение: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
• Правая прокладка: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)

Коробка Тень

И последнее, но не менее важное: добавьте тонкую тень от коробки, и все готово!

• Сила размытия тени коробки: 40 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Предварительный просмотр

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

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

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