Настройка глобального руководства по стилю предустановок для вашего следующего веб-сайта Divi (скачать БЕСПЛАТНО!)

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

Загрузить The Global Presets Style Guide Framework

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

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

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

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

СКАЧАТЬ

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

Настройка руководства по стилю глобальных пресетов для вашего следующего веб-сайта Divi

Что такое руководство по стилю глобальных пресетов?

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

1. Цветовая палитра

2. Стили текста

3. Модульные стили

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

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

Когда создавать / использовать руководство по стилю глобальных пресетов

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

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

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

Как использовать руководство по стилю глобальных пресетов

Загрузите и загрузите макет фреймворка в свою библиотеку Divi

Начните с загрузки бесплатного глобального руководства по стилю макета в этом посте. Затем, разархивировав папку для загрузки, перейдите в свою библиотеку Divi внутри серверной части вашего веб-сайта и нажмите «Импорт / экспорт» вверху. Оказавшись там, переключитесь на вкладку «Импорт» и загрузите макет структуры руководства по стилю, который вы можете найти в папке для загрузки.

Создайте новую черновую страницу для макета и загрузите макет фреймворка

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

Настроить цветовую палитру

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

Создайте собственную цветовую палитру с цветовыми кодами внутри вашего конструктора тем Divi

Перейти к параметрам темы Divi

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

Настройка цветовой палитры с помощью шестнадцатеричных кодов в руководстве по стилю

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

Добавить стили текста

Затем вы сможете стилизовать различные типы текста внутри своей структуры руководства по стилю. Сколько альтернатив вы предоставите для каждого типа текста, полностью зависит от вас, просто потому, что там есть «первичный», «вторичный» и «третичный» вариант, не означает, что у вас должно быть 3 варианта для каждого типа текста. Не стесняйтесь удалять или добавлять дополнительные возможности.

Модули стилей

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

Превратите модули в глобальные пресеты (один за другим и с выбранным именем)

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

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

• Основная кнопка
• Дополнительная кнопка
• Третичная кнопка

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

Вложенные модули: превращайте вложенные элементы в глобальные пресеты

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

Экспорт и импорт макета руководства по стилю (с предустановками) на другом веб-сайте

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

Перейдите на веб-сайт, на который хотите загрузить новое руководство по стилю, перейдите в библиотеку Divi и загрузите файл JSON с предустановками, чтобы начать процесс сборки Divi!

Совет: держите руководство по стилям на отдельной вкладке, чтобы копировать / вставлять определенные стили (градиенты / тень блока / граница /…)

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

Новые глобальные руководства по стилям каждую неделю!

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