6 техник Divi для создания плоского веб-дизайна с Divi

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

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

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

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

1. Держите раздел "Герой" чистым и понятным.

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

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

2. Подчеркните прямоугольные структуры

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

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

3. Выберите 3 ярких цвета.

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

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

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

5. Объедините один стандарт с одним элегантным семейством шрифтов.

Обычно многие веб-сайты используют более элегантное семейство шрифтов для заголовков и стандартное для основного текста. Почему бы не поменять местами? Это обязательно внесет изменения. Кроме того, люди часто пропускают описания и читают только заголовки. Если это так, вы хотите, чтобы ваши заголовки были максимально удобочитаемыми, верно? Отличное сочетание семейств шрифтов - использование Arial для заголовков и Georgia для основного текста. Грузия по-прежнему очень удобочитаема, только немного интереснее, и это придает необходимый контраст вашему сайту.

6. Играйте с высотой

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

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

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

Приступим к созданию: добавим стандартный раздел №1

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

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

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

• Цвет 1: # 5214ff
• Цвет 2: # 420fc1
• Тип градиента: линейный
• Направление градиента: 146 градусов
• Стартовая позиция: 30%

Интервал

Мы также добавляем верхний и нижний отступы в наш раздел:

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

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

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

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

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

Размеры

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

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

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

Нам нужно будет добавить только один текстовый модуль H1 в эту строку. После того, как вы добавили свой контент (и убедились, что это H1), откройте настройки текста H1 и примените следующие изменения:

• Шрифт заголовка: Arial
• Выравнивание текста заголовка: по левому краю
• Цвет текста заголовка: #FFFFFF
• Размер текста заголовка: 86 пикселей (рабочий стол), 65 пикселей (планшет), 45 пикселей (телефон)
• Высота строки заголовка: 1,2 м

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

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

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

Переходим к следующему ряду. Мы снова используем строку только с одним столбцом.

Размеры

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

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

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

Цвет

Продолжите, добавив модуль разделителя в свой столбец. Мы используем "# edf000" в качестве цвета разделителя.

Размеры

Далее мы собираемся настроить параметры размера нашего модуля разделителя:

• Вес разделителя: 10 пикселей
• Ширина: 64%
• Выравнивание модуля: справа

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

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

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

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

Размеры

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

Интервал

Удалите пользовательское заполнение строки, добавив «0px» к верхнему и нижнему отступу.

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

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

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

• Шрифт текста: Грузия
• Цвет текста: #FFFFFF
• Размер текста: 27 пикселей (рабочий стол), 22 пикселя (планшет), 18 пикселей (телефон)
• Высота текстовой строки: 1.9em
• Выравнивание текста: вправо

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 27 пикселей
• Цвет текста кнопки: # 303030
• Цвет фона кнопки: # edf000
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Грузия

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

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

Интервал

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

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

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

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

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

Первая добавляемая строка будет содержать наш красный кружок. Выберите следующую структуру столбцов для своей строки:

Столбец 1 градиентный фон

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

• Цвет 1: # ff3233
• Цвет 2: rgba (255,255,255,0)
• Столбец 1 Тип градиента: радиальный
• Столбец 1 Начальная позиция: 45%
• Конечное положение в столбце 1: 45%

Размеры

Продолжите, изменив настройки размера:

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

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

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

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

Интервал

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

• Сверху: 150 пикселей (рабочий стол), 200 пикселей (планшет и телефон)
• Внизу: 150 пикселей (рабочий стол), 200 пикселей (планшет и телефон)

Вернуться к настройкам строки

Добавить интервал

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

• Верхнее поле: -350 пикселей (рабочий стол), -400 пикселей (планшет и телефон)
• Левое поле: -250 пикселей (компьютер и телефон), -400 пикселей (планшет)

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

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

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

Перейдем ко второму ряду. Эта строка будет содержать заголовок Текстовый модуль и разделитель. Выберите следующую структуру столбцов:

Интервал

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

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

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

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

• Шрифт заголовка 2: Arial
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка: # 303030
• Размер текста заголовка 2: 50 пикселей (рабочий стол), 45 пикселей (планшет), 32 пикселя (телефон)
• Высота строки заголовка 2: 1,3 м

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

Цвет

Прямо под текстовым модулем добавьте модуль разделителя. На этот раз мы хотим, чтобы разделитель отображался. Присвойте ему цветовой код # 5214ff.

Размеры

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

• Вес разделителя: 10 пикселей
• Ширина: 30%
• Выравнивание модуля: по центру

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

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

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

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

Копировать раздел градиентный фон

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

Вставить градиентный фон в столбцы 1 и 3

И вставьте их в первый и третий столбцы.

Размеры

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

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

Интервал

Мы также изменим настройки Spacing:

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

Добавить модуль Blurb

Выбрать значок

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

Настройки значков

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

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

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

• Ориентация текста: по центру
• Цвет текста: светлый

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

Затем откройте настройки текста заголовка и внесите некоторые изменения:

• Шрифт заголовка: Arial
• Размер текста заголовка: 31 пикс.
• Высота строки заголовка: 2.6em

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

Точно так же мы собираемся привести основной текст в соответствие с макетом, который мы создаем:

• Шрифт: Грузия
• Размер основного текста: 18 пикселей
• Высота линии корпуса: 2.2em

Интервал

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

• Отступ сверху и снизу: 50 пикселей
• Отступ слева и справа: 20 пикселей

Клонировать и изменить модуль Blurb

Клонировать модуль Blurb и поместить в столбец 2

Клонируйте только что созданный модуль Blurb и поместите дубликат во второй столбец.

Изменить значок

Первое, что вам нужно изменить, - это значок.

Изменить цвет значка

Также измените цвет значка на '# ff3233'.

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

Поскольку мы имеем дело с белым цветом фона, вам нужно изменить цвет текста на «Темный» в настройках текста.

Интервал

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

• Верхнее поле: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон)

Коробка Тень

В довершение всего, мы также добавим очень тонкую тень:

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

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

Клонировать модули

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

Поместите в столбцы 3 и 4

Поместите повторяющиеся модули Blurb в соответствующий столбец, и все готово!

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

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

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

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