Использование элементов управления преобразованием Divi для создания уникальных макетов модуля Blurb

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

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

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

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

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

Теперь вы готовы к работе.

Создание макета рекламного объявления №1

В этом первом макете мы собираемся структурировать наши объявления, используя две разные строки. Затем мы собираемся использовать параметры Divi Transform, чтобы масштабировать и позиционировать модули рекламных объявлений, чтобы создать уникальный макет модуля рекламных объявлений.

Создайте первую строку

Для начала создайте обычный раздел, а затем добавьте следующий макет столбца для строки: 1/2 1/6 1/6 1/6

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

В столбце 1/2 слева добавьте текстовый модуль со следующим содержанием:

<h2>Our Services</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>

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

Цвет фона: #ffffff
Ширина: 500 пикселей
Пользовательское поле (рабочий стол): -70 пикселей слева
Пользовательское поле (планшет): 20 пикселей слева
Пользовательские отступы: 20 пикселей сверху, 20 пикселей снизу.

Обновить заполнение раздела

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

Пользовательская набивка: верх 20вВт

Обновить настройки для первой строки

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

Ширина желоба: 1
Пользовательские отступы: 10vw сверху, 0px снизу
Ширина границы: 5 пикселей
Цвет границы: #eeeeee

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

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

Создавайте и стилизуйте модули Blurb

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

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

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

Цвет значка: #ffffff
Значок круга: ДА
Цвет круга: # 5e89fb
Шрифт заголовка: Nunito
Выравнивание текста заголовка: по центру
Размер текста заголовка: 16 пикселей
Пользовательские отступы: 1vw сверху, 1vw снизу, 1vw слева, 1vw справа

Затем обновите поле по умолчанию под значком рекламного объявления, добавив следующий CSS-код в поле CSS для размытого изображения на вкладке «Дополнительно»:

margin-bottom: 5px

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

Добавьте эффекты трансформации для масштабирования и расположения размытия

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

Сначала откройте настройку рекламного объявления в столбце 2 верхней строки и обновите элементы управления преобразованием следующим образом:

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

Преобразовать преобразовать ось X: -96 пикселей
Преобразовать преобразовать ось Y: -44px

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

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

Преобразовать преобразовать ось X: -70 пикселей
Преобразовать преобразовать ось Y: -13 пикселей

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

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

Преобразовать преобразовать ось X: 33 пикселя
Преобразовать преобразовать ось Y: -13 пикселей

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

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

Преобразовать преобразовать ось X: 89 пикселей
Преобразовать преобразовать ось Y: 39 пикселей

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

Цвет фона: #ffffff

Вот и все!

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

Мобильные настройки

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

В модальном окне "Параметры элемента" обновите следующее:

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

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

Это восстановит исходное положение и масштаб размытых изображений на дисплеях планшетов и телефонов.

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

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

Создание макета модуля Blurb # 2

В следующем примере я собираюсь показать вам уникальный макет модуля рекламного объявления с использованием параметров преобразования Divi scale, translate и rotate. Я также добавлю бонусный фрагмент CSS, который добавляет перспективу каждому из объявлений. Вот как это сделать.

Создать заголовок

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

<h2>Our Process</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>

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

Шрифт заголовка 2: Nunito
Толщина шрифта заголовка 2: полужирный
Размер текста заголовка 2: 50 пикселей
Заголовок 2 Расстояние между буквами: 7 пикселей
Ширина: 500 пикселей

Создание макета рекламного объявления с шестигранной строкой

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

Стилизация модуля Blurb

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

Удалите основной текст в поле содержимого и обновите текст заголовка словом «Step».

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

Придайте размытию белый цвет фона следующим образом:

Цвет фона: #ffffff

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

Цвет значка: #ffffff
Значок круга: ДА
Цвет круга: # 3d0dad
Шрифт заголовка: Nunito
Толщина шрифта заголовка: полужирный
Стиль шрифта заголовка: TT
Выравнивание текста заголовка: по центру
Интервал между заглавными буквами: 4 пикселя

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

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

И, наконец, добавьте эффект преобразования поворота к модулю blurb:

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

Это касается нашего первого модуля аннотации.

Обновить настройки строки

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

Ширина желоба: 2
Пользовательские отступы: 11vw сверху, 0px снизу

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

Дублирование и стилизация остальных пятен

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

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

Цвет круга: # 62de9d

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

Преобразовать преобразовать ось Y: -10% (обязательно введите здесь процентное значение)

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

Цвет круга: # 5e89fb

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

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

Обновите модуль рекламного сообщения в столбце 4 следующим образом:

Цвет круга: # 2a3fc9

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

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

И, наконец, обновите модуль рекламного сообщения в столбце 5 следующим образом:

Цвет круга: # 62de9d

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

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

Как видите, размер каждого размытия увеличивается на 20% слева направо. А процентные значения Transform translate обеспечивают правильное выравнивание размытых изображений.

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

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

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

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

Столбец 1 Основной элемент:

perspective: 1000px

Столбец 2 Основной элемент:

perspective: 1000px

Столбец 3 Основной элемент:

perspective: 1000px

Столбец 4 Основной элемент:

perspective: 1000px

Столбец 5 Основной элемент:

perspective: 1000px

В данном случае изменение очень незначительное, но, на мой взгляд, оно стоит дополнительных усилий.

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

А вот и перспектива на месте.

Если вы хотите, чтобы размытые изображения были ближе к пользователю, вы можете уменьшить значение перспективы. Например, вот как будут выглядеть размытые изображения с добавлением «перспективы: 400 пикселей» в каждый столбец.

Добавление фона разделителя в раздел

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

Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: #dddddd
Высота нижнего разделителя: 27vw
Горизонтальное повторение нижнего делителя: 0,8x
Переворот нижнего разделителя: горизонтальный

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

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

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

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

Теперь давайте проверим окончательный результат макета модуля аннотации.

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

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

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

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

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