8 методов достижения чистого и абстрактного дизайна с Divi

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

1. Чистый и абстрактный
2. Минимальный
3. Плоский
4. Смелый и красочный

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

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

1. Избегайте ярких цветов фона основной части.

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

2. Вместо этого используйте тонкий фон с узором из рядов.

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

3. Разбейте узор с помощью белого модуля фонового цвета.

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

4. Создайте контраст с помощью размера шрифта.

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

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

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

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

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

7. Создайте глубину с помощью тонких теней коробки.

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

8. Перекрытие элементов дизайна с отрицательным полем.

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

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

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

Начнем творить!

Общие шаги

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

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

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

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

Затем добавьте в раздел строку, содержащую один столбец.

Фоновая картинка

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

• Размер фонового изображения: По размеру
• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора

Размеры

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

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

Фоновый цвет

Теперь приступим к добавлению модулей! Мы начнем с подзаголовка и, как упоминалось в методе № 2, мы собираемся разбить шаблон для этого модуля, используя белый цвет фона.

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

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

• Толщина шрифта текста: полужирный
• Стиль шрифта текста: прописные.
• Цвет текста: # 000000
• Размер текста: 18 пикселей
• Расстояние между буквами текста: 29 пикселей (планшет), 25 пикселей (планшет), 18 пикселей (телефон)
• Ориентация текста: по центру

Интервал

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

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

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

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

• Толщина шрифта текста: Ультра полужирный
• Цвет текста: # 000000
• Размер текста: 200 пикселей (рабочий стол), 130 пикселей (планшет), 100 пикселей (телефон)
• Расстояние между буквами текста: -6 пикселей
• Высота текстовой строки: 1em

Добавить модуль кнопок

Выравнивание кнопок

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: #FFFFFF
• Цвет градиента # 1: # fd5056
• Цвет градиента # 2: # bd3cb5
• Направление градиента: 153 град.
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 54px
• Плотность шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

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

• Верхнее и нижнее поля: 100 пикселей
• Отступ сверху и снизу: 15 пикселей
• Отступ слева и справа: 40 пикселей

Коробка Тень

И последнее, но не менее важное: мы собираемся создать глубину (как упоминалось в методе № 7), чтобы создать привлекательный дизайн:

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

Пример # 1: Дополнительные шаги

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

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

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

Размеры

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

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

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

Добавить и скрыть разделитель

Добавьте модуль разделителя в строку и отключите параметр «Показать разделитель» в настройках видимости на вкладке «Содержимое».

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

Вместо этого мы будем использовать градиентный фон для нашего разделителя:

• Цвет градиента # 1: # fd5056
• Цвет градиента # 2: # bd3cb5
• Направление градиента: 168 градусов

Интервал

Чтобы модуль Divider перекрывал нашу предыдущую строку и ее модули, мы собираемся использовать «-400px» для верхнего поля.

Непрозрачность

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

Коробка Тень

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

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

Пример # 2: Дополнительные шаги

Изменить интервал в текстовом модуле №1

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

• Нижнее поле: 150 пикселей (телефон)

Изменить интервал в текстовом модуле №2

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

• Нижнее поле: 150 пикселей (планшет и телефон)

Изменить цвет текста кнопки

Затем откройте модуль кнопок и измените его цвет текста на «# bd3cb5».

Удалить градиентный фон кнопки

Далее удалите градиентный фон вашего кнопочного модуля.

Добавить цвет фона кнопки

И вместо этого добавьте белый цвет фона.

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

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

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

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

Верхний разделитель

Продолжите, добавив верхний разделитель в свой раздел:

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff

Нижний разделитель

Используйте те же настройки для нижнего разделителя.

Интервал

Последнее, что вам нужно сделать для вашего нового раздела, - это изменить его настройки Spacing:

• Верхнее поле: -460 пикселей
• Нижнее поле: 100 пикселей
• Отступ сверху и снизу: 0 пикселей

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

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

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

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

Скрыть разделитель

Затем добавьте модуль разделителя и убедитесь, что вы отключили опцию «Показать разделитель» в настройках видимости, и все готово!

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

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

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

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