10 шагов к использованию нового пакета макетов Divi для вашего следующего проекта

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

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

Наслаждаться!

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

10 шагов к использованию нового пакета макетов Divi для вашего следующего проекта

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

# 1 Сначала импортируйте макеты в свою библиотеку Divi

Лучший способ добавить новые макеты в вашу тему Divi - сначала импортировать их в библиотеку Divi. Затем при создании новой страницы вы можете добавить новый макет из своей библиотеки.

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

На панели инструментов WordPress перейдите в Divi> Divi Library и нажмите кнопку «Импорт и экспорт» в левом верхнем углу страницы. В появившемся модальном окне переносимости выберите вкладку импорта и нажмите «Выбрать файл». Найдите распакованную папку пакета макетов и выберите файл json со словом «Все» в имени файла. Это загрузит все макеты в вашу библиотеку сразу, вместо того, чтобы делать каждый из них по отдельности. Например, если вы хотите загрузить пакет макета моды, вы должны выбрать файл с именем Fashion_All.json из папки макета. Затем нажмите «Импортировать макеты Divi Builder».

# 2 Добавление макетов на новые страницы

Этот процесс довольно прост. На панели управления WordPress перейдите на Страницы> Добавить новый. Введите заголовок страницы, которую необходимо создать. Щелкните, чтобы использовать Divi Builder и развернуть Visual Builder. Откройте меню настроек внизу страницы и щелкните значок «Загрузить из библиотеки» с плюсом слева. В появившемся модальном окне «Загрузить из библиотеки» щелкните вкладку «Добавить из библиотеки» и выберите новый макет из списка, чтобы загрузить новый макет.

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

# 3 Создайте свое основное меню

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

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

1. Перейдите в «Внешний вид»> «Меню».
2. Выберите ссылку «Создать новое меню» вверху страницы.
3. Введите название меню.
4. Выберите элементы меню в левом переключателе под страницами.
5. Нажмите "Добавить в меню".
6. Организуйте элементы меню, перетаскивая их на место.
7. В меню «Настройки» внизу страницы выберите «основное меню» в качестве места отображения.
8. Меню "Сохранить".

# 4 Установите цветовую палитру по умолчанию

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

Вы можете установить цветовую палитру по умолчанию, перейдя на панель управления WordPress и выбрав Divi> Параметры темы. И прямо там, на вкладке «Общие», вы найдете перечисленные параметры. Добавьте туда нужные вам цвета. Всегда рекомендуется использовать белый цвет (#ffffff) и пару темных цветов (например, # 333333 или любой другой цвет, который вы установили для темного цвета шрифта), чтобы их можно было легко использовать для стилизации фона и текста.

# 5 Установите свой глобальный цвет акцента

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

Чтобы изменить свой глобальный цвет акцента, перейдите в настройщик темы, перейдите в Общие настройки> Настройки макета и найдите параметр Цвет акцента внизу.

Обратите внимание на новые цвета, доступные вам в цветовой палитре, так как вы обновили цветовую палитру по умолчанию в параметрах темы.

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

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

Некоторые из элементов, которые обновляются автоматически, включают:

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

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

# 6 Стиль заголовка

Вы можете стилизовать свой заголовок с помощью настройщика тем. Просто перейдите в свою панель управления WordPress и перейдите в Divi> Theme Customizer> Header & Navigation.

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

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

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

# 7 Создайте стиль для нижней панели

Вы также можете стилизовать нижнюю панель с помощью настройщика тем. Просто перейдите в свою панель управления WordPress и выберите Divi> Theme Customizer> Footer> Bottom Bar.

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

# 8 Используйте ярлыки, чтобы вносить изменения в макет страницы

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

Использование параметров правой кнопки мыши

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

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

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

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

Используйте поле поиска, чтобы найти настройки, которые вы хотите изменить

Легко определить, что установлено по умолчанию

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

Восстановите все настройки дизайна по умолчанию одним щелчком мыши

Для тех из вас, кто любит визуальный конструктор так же сильно, как и я, вы, вероятно, еще не открыли для себя этот полезный трюк. Если вы находитесь в бэкэнд-компоновщике, щелкните, чтобы изменить настройки модуля, а затем выберите вкладку «Дизайн». Заметили что-нибудь? Это маленькая иконка / кнопка «Восстановить по умолчанию», расположенная на вкладке.

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

# 9 Сохранение ключевых элементов для создания новых страниц или сообщений

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

Заголовок страницы

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

Заголовки разделов

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

Раздел содержимого

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

Кнопки (как светлые, так и темные)

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

Нижний колонтитул

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

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

# 10 Установить глобальные предметы

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

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

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