Как создать раздел с красивым героем для вашего личного сайта с Divi

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

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

Результат на рабочем столе

Результат на рабочем столе выглядит так:

Результат на мобильном

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

Как создать раздел с красивым героем для вашего личного сайта с Divi

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

Создать раздел

Начните с создания новой страницы на своем веб-сайте WordPress, включения Divi Builder, переключения на Visual Builder и добавления к нему нового раздела.

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

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

• Первый цвет: # c2c6f3
• Второй цвет: # cea5b9
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 45%
• Конечная позиция: 45%

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

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

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

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

Размеры

Перейдите на вкладку «Дизайн» в настройках строки и используйте следующие настройки для подкатегории «Размер»:

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

Текстовый модуль

Как упоминалось ранее, для этой строки потребуется только текстовый модуль.

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

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

• Шрифт текста: Аризония
• Толщина шрифта текста: Обычный
• Размер текста: 150 (рабочий стол), 80 (планшет), 70 (телефон)
• Цвет текста: rgba (255,255,255,0,39)
• Ориентация текста: по центру

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

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

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

Как и в предыдущей строке, в этой строке также будет только один столбец.

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

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

Размеры

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

• Использовать нестандартную ширину: Да
• Настраиваемая ширина: 557 пикселей

Интервал

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

Коробка Тень

Наконец, примените следующую тень окна:

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 2 пикселя
• Сила размытия тени коробки: 53px
• Сила распространения тени коробки: 10 пикселей
• Цвет тени: rgba (0,0,0,0.3)
• Позиция тени: внешняя тень

Текстовый модуль

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

Фоновый цвет

Прежде всего, этому текстовому модулю потребуется цвет фона с цветом rgba (0,0,0,0.66).

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

Затем перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Текст»:

• Шрифт текста: Andika
• Толщина шрифта текста: полужирный
• Стиль шрифта текста: прописные.
• Размер текста: 78 пикселей (рабочий стол), 70 пикселей (планшет), 50 пикселей (телефон)
• Цвет текста: # c2c6f3
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Граница

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

• Использовать границу: Да
• Цвет границы: # c2c6f3
• Ширина границы: 8 пикселей
• Стиль границы: сплошной

Интервал

Двигаясь дальше, добавьте следующие поля и отступы:

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

Коробка Тень

Наконец, используйте следующую тень окна для текстового модуля:

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 50 пикселей
• Цвет тени: rgba (206,165,185,0.41)
• Положение тени коробки: внешняя тень

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

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

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

Выберите два столбца для этой строки.

Размеры

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

Интервал

Наконец, добавьте верхнее и нижнее поле 50 пикселей.

Первый текстовый модуль

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

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

Затем перейдите на вкладку «Дизайн», используйте «Andika» в качестве шрифта текста и «Обычный» в качестве толщины шрифта текста.

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

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

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

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

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

В этой новой строке также есть два столбца.

Размеры

Откройте настройки строки и примените следующие настройки к подкатегории «Размер»:

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

Интервал

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

Первый модуль изображения

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

Коробка Тень

И добавьте к нему следующую Box Shadow:

• Горизонтальное положение тени блока: -6 пикселей
• Вертикальное положение тени блока: 2 пикселя
• Сила размытия тени коробки: 53px
• Сила распространения тени коробки: 10 пикселей
• Цвет тени: rgba (0,0,0,0.3)
• Положение тени коробки: внешняя тень

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

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

Результат

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

На рабочем столе

На мобильном

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!