Создание диагональной структуры дизайна с помощью параметров преобразования Divi (бесплатная загрузка!)

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

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

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

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

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

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

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

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

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

• Цвет 1: # ffd633
• Цвет 2: #efefef
• Направление градиента: 217 градусов
• Стартовая позиция: 45%
• Конечная позиция: 45%

Интервал

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

• Верхняя обивка: 4vw
• Нижняя обивка: 12vw

Переполнение

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

overflow: hidden;

Добавить строку №1

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

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

Размеры

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

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

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Левое заполнение: 25vw (рабочий стол), 16vw (планшет), 7vw (телефон)
• Правая прокладка: 25vw (настольный компьютер и планшет), 27vw (телефон)

Отображать

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

display: flex;

Добавить модуль Blurb в столбец 1

Добавить заголовок

Пора начинать добавлять модули! Добавьте модуль Blurb в столбец 1 и введите название по вашему выбору.

Загрузить иллюстрацию

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

Фон

Затем добавьте полностью белый цвет фона к модулю Blurb.

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

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

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

• Шрифт заголовка: Poppins
• Плотность шрифта заголовка: полужирный
• Стиль шрифта заголовка: прописные
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 0.5vw (рабочий стол), 1.6vw (планшет), 2.4vw (телефон)
• Интервал между заглавными буквами: 1 пиксель
• Высота строки заголовка: 1,6 мкм

Интервал

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

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

Граница

Продолжите, добавив «1vw» в верхний левый и верхний правый углы модуля Blurb.

Коробка Тень

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

• Положение прямоугольной тени по вертикали: 10 пикселей
• Сила размытия тени коробки: 60 пикселей
• Цвет тени: rgba (39,39,52,0.37)

Клонировать модуль Blurb дважды и размещать дубликаты в оставшихся столбцах

После того, как вы настроили модуль Blurb, вы можете дважды клонировать его. Поместите дубликаты в два оставшихся столбца строки.

Изменить дубликат №1

Изменить копию и иллюстрацию

Измените копию и иллюстрацию первого дубликата.

Изменить интервал

Вместе с настройками интервалов.

• Верхняя маржа: -3vw
• Верхняя прокладка: 2.7vw (рабочий стол), 8vw (планшет), 11vw (телефон)
• Нижняя прокладка: 2.7vw (рабочий стол), 8vw (планшет), 11vw (телефон)

Заменить дубликат №2

Изменить копию и иллюстрацию

Также измените копию и иллюстрацию второго дубликата.

Добавить строку №2

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

К следующему ряду! Используйте следующую структуру столбцов:

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

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

• Цвет 1: # fff20a
• Цвет 2: # ffb200
• Направление градиента: 165 градусов

Размеры

Затем перейдите на вкладку «Дизайн» и включите параметр «Сделать эту строку полной шириной».

• Сделать эту строку полной шириной: Да

Коробка Тень

И последнее, но не менее важное: добавьте к строке тень блока.

• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 100 пикселей
• Цвет тени: rgba (0,0,0,0.39)

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

Видимость

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

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

Применить параметры преобразования к строкам

Ряд # 1

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

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

• Внизу: 30vw
• Справа: 6vw

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

Затем измените значение поворота левого преобразования.

• Слева: 37 градусов

Ряд # 2

Масштаб преобразования

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

• Внизу: 133% (компьютер), 171% (планшет), 176% (телефон)
• Справа: 133% (компьютер), 171% (планшет), 176% (телефон)

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

Наряду с преобразованием значений translate.

• Внизу: 12vw (рабочий стол), 1vw (планшет), 3vw (телефон)
• Справа: -2vw (рабочий стол), -6vw (планшет), -4vw (телефон)

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

И поверните строку в настройках поворота.

• Слева: 37 градусов

Добавить строку №3

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

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

Размеры

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

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

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

Добавить контент H1

Пора начинать добавлять модули! Начнем с заголовка "Текстовый модуль". Введите контент H1 по вашему выбору.

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

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

• Шрифт заголовка: Poppins
• Размер текста заголовка: 3vw (рабочий стол), 5vw (планшет), 6vw (телефон)
• Расстояние между буквами заголовка: -2 пикселя

Интервал

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

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

Добавить текстовый модуль №2 в столбец 1

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

Второй необходимый нам модуль - это еще один текстовый модуль. Добавьте контент по вашему выбору.

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.8vw (рабочий стол), 1.5vw (планшет), 2.2vw (телефон)
• Высота текстовой строки: 2.6em

Интервал

Также измените значения интервала.

• Верхняя маржа: 3vw (телефон), 5vw (телефон)
• Левое поле: 10vw
• Правое поле: 28vw (планшет), 20vw (телефон)

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.9vw (рабочий стол), 2.5vw (планшет), 3.5vw (телефон)
• Цвет текста кнопки: # 000000
• Ширина границы кнопки: 1 пиксель
• Цвет границы кнопки: # 000000
• Радиус границы кнопки: 1px
• Шрифт кнопки: Поппинс
• Толщина шрифта: легкий

Интервал

И последнее, но не менее важное: сформируйте свой модуль, используя некоторые настраиваемые значения интервалов, и все готово!

• Верхняя маржа: 2vw (рабочий стол), 5vw (планшет и телефон)
• Левое поле: 10vw
• Верхняя обивка: 1vw
• Нижняя обивка: 1vw
• Левый отступ: 3vw
• Правое заполнение: 3vw

Загрузите раздел «Диагональный дизайн» БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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