7 методов создания ярких и ярких веб-сайтов с Divi

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

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

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

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

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

Подпишитесь на наш канал Youtube

1. "Превратите" строки в разделы со столбцами

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

2. Градиенты + фоновые текстуры

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

3. Полупрозрачные градиентные цвета + разделители под ними.

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

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

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

5. Разделение копии для идеального совмещения

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

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

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

7. Избегайте теней сверху или снизу, чтобы объединить секции.

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

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

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

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

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

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

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

• Стиль разделителя: найти в списке
• Цвет разделителя: rgba (0,0,0,0.13)
• Высота разделителя: 900 пикселей
• Переворот разделителя: вертикальный
• Расположение разделителей: содержание под разделом

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

Продолжите, добавив аналогичный нижний разделитель.

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

Интервал

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

• Верхнее и нижнее поля: 50 пикселей
• Левое и правое поле: 50 пикселей
• Отступ сверху и снизу: 0 пикселей
• Отступ слева и справа: 0 пикселей

Закругленные углы

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

• Вверху слева: 20 пикселей
• Вверху справа: 20 пикселей

Коробка Тень

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

• Вертикальное положение тени блока: -23 пикс.
• Сила размытия тени коробки: 37 пикселей
• Сила распространения тени коробки: -29 пикселей
• Цвет тени: rgba (0,0,0,0.22)
• Положение тени коробки: внешняя тень

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

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

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

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

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

• Цвет 1: rgba (255,191,0,0,76)
• Цвет 2: rgba (153,0,255,0,87)

Фоновое изображение текстуры столбца 1

Мы объединим этот градиентный фон с текстурированным фоном. Изображение, которое я использую, является частью пакета макетов встречи Divi. Сохраните следующее изображение на рабочий стол, щелкнув правой кнопкой мыши и сохранив его (это файл png с белыми текстурами, вы не сможете увидеть, как оно выглядит, пока не откроете его на своем компьютере и / или не используете на своем веб-сайте. ):

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

Цвет фона столбца 2

Затем придайте второму столбцу цвет фона "# F7F7F7".

Размеры

Мы собираемся «превратить» нашу строку в секцию, заставив ее занимать всю ширину секции.

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

Интервал

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

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

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

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

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

Интервал

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

• Верхний отступ: 200 пикселей (компьютер и планшет), 150 пикселей (телефон)
• Нижний отступ: 200 пикселей (настольный компьютер и планшет), 150 пикселей (телефон)

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

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

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

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

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

• Толщина шрифта текста: Ультра полужирный
• Стиль шрифта текста: прописные.
• Цвет текста: # 000000
• Размер текста: 250 пикселей (рабочий стол), 200 пикселей (планшет), 100 пикселей (телефон)
• Высота текстовой строки: 0,75 мкм

Интервал

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

• Верхнее поле: 200 пикселей (рабочий стол), -250 пикселей (планшет), -120 пикселей (телефон)
• Левое поле: -279 пикселей (рабочий стол), 5% (планшет и телефон)

Клонировать текстовый модуль дважды

Клон №1

Изменить текст

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

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

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

• Левое поле: -360,7 пикселей (рабочий стол), 5% (планшет и телефон)

Клон # 2

Изменить текст

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

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

И чтобы сделать дизайн еще более заметным, мы собираемся изменить цвет текста этого модуля на «rgba (0,0,0,0.19)».

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

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

• Нижнее поле: 200 пикселей
• Левое поле: -410 пикселей (рабочий стол), 5% (планшет и телефон)

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

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

Интервал

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

• Верхнее и нижнее поля: 50 пикселей
• Левое и правое поле: 50 пикселей
• Отступ сверху и снизу: 0 пикселей
• Отступ слева и справа: 0 пикселей

Закругленные углы

Продолжите, добавив несколько нижних закругленных углов:

• Внизу слева: 20 пикселей
• Внизу справа: 20 пикселей

Коробка Тень

Также добавьте тень коробки в нижнюю часть раздела.

• Положение прямоугольной тени по вертикали: 47 пикселей
• Сила размытия тени коробки: 37 пикселей
• Сила распространения тени коробки: -29 пикселей
• Цвет тени: rgba (0,0,0,0.22)
• Положение тени коробки: внешняя тень

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

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

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

Размеры

Мы также «превращаем» эту строку в раздел:

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

Интервал

И мы удалим отступы по умолчанию сверху и снизу.

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

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

Выберите значок

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

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

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

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: # A21DF9
• Стартовая позиция: 20%
• Конечная позиция: 20%

Текстура Фоновое Изображение

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

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

Затем измените настройки значка:

• Цвет значка: # 000000
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 85 пикселей

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

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

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

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

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

• Плотность шрифта заголовка: Ультра полужирный
• Стиль шрифта текста: прописные.
• Размер текста заголовка: 46 пикселей

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

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

• Толщина основного шрифта: Light
• Размер основного текста: 18 пикселей

Интервал

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

• Верхний отступ: 50 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева и справа: 50 пикселей

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

Клон №1

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

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

Изменить градиентный фон

Продолжите, изменив второй цвет фона градиента на «# D47A9A».

Клон # 2

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

Сделайте то же самое для модуля Blurb из последнего столбца.

Изменить градиентный фон

Для этого модуля мы используем '# F3BF3E' в качестве второго цвета фона градиента.

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

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

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

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