Загрузите и используйте 6 БЕСПЛАТНЫХ модулей разделителей для Divi

К настоящему времени мы все привыкли к разделителям разделов, которые есть в Divi. В прошлых руководствах мы также показали вам, как можно применить эти разделители разделов к модулям и строкам. Но если вы хотите использовать разделители модулей, которые подключаются только к модулям, а не к другим элементам дизайна, этот пост для вас. Мы собираемся поделиться 6 БЕСПЛАТНЫМИ разделителями модулей, которые вы можете использовать для любого типа веб-сайта Divi, который вы создаете. Эти разделители модулей будут включены в файл иллюстратора, который вы сможете скачать ниже в этом посте. Это руководство также поможет вам создать собственный тип разделителей модулей.

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

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

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

Рабочий стол

Телефон

Скачать The Module Dividers БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Давайте начнем!

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

Изменить цвета разделителя в Illustrator

Открыть файл Illustrator в загруженной папке

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

Выберите стиль разделителя модуля, разблокируйте слой и включите видимость

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

Нажмите на разделитель модуля и измените цвет

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

• Цвет разделителя: #ffffff

Экспорт разделителя модуля PNG для Интернета

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

Повторите шаги для каждого необходимого цвета (x4)

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

• Цвет 1: #ffffff
• Цвет 2: # 2759f6
• Цвет 3: # 97adf4
• Цвет 4: # b2ceff

Создать дизайн Divi

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

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

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

Добавьте новую страницу или откройте существующую и добавьте к ней обычный раздел.

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

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

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

Размеры

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

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

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

Загрузить разделитель белого модуля

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

Фоновый цвет

Затем добавьте цвет фона в модуль изображения. Этот цвет должен соответствовать цвету фона любого модуля.

• Цвет фона: # 2759f6

Размеры

Затем перейдите к настройкам размеров и включите параметр «Force Fullwidth».

• Принудительная полная ширина: Да

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

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

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

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

Затем выберите нужный значок.

Фоновый цвет

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

• Цвет фона: # 2759f6

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

Затем перейдите в настройки значка и внесите некоторые изменения.

• Цвет значка: #ffffff
• Размещение изображения / значка: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 50 пикселей

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

Также измените настройки текста.

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

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

Измените также внешний вид текста заголовка.

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

Интервал

И создайте немного места для модуля, используя пользовательские отступы.

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

Модуль клонирования изображения 3 раза и модуль Blurb дважды

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

Размещайте дубликаты в правильном порядке

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

Изменение цвета фона дубликатов модуля Blurb

Затем измените цвета фона модулей Blurb.

• Рекламный модуль № 2: # 97adf4
• Рекламный модуль № 3: # b2ceff

Изменить разделитель модуля в модуле изображения

Откройте первый дубликат модуля изображения и загрузите созданный вами второй разделитель модуля (или выберите тот, который вы можете найти в папке загрузки).

Изменить цвет фона модуля изображения разделителя модуля (сопоставить с цветом фона следующего модуля размытия)

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

• Разделитель модуля # 2: # 2759f6

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

Повторите предыдущие шаги для двух оставшихся разделителей модулей в столбце, и все готово!

• Цвет фона разделителя модуля # 3: # 97adf4
• Цвет фона разделителя модуля # 4: # b2ceff

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

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

Рабочий стол

Телефон

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

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