ACF против Divi Design Переменные: когда использовать что

Благодаря последнему выпуску Divi 5 Alpha переменные дизайна вошли в экосистему Divi как новый подход к управлению ценностями дизайна и контента на ваших веб -сайтах. Это взволновало наших пользователей, особенно тех, кто полагался на продвинутые пользовательские поля (ACF) в течение многих лет. Следует ли придерживаться ACF или переключиться на переменные Divi? Или вы можете использовать оба одновременно?

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

Divi 5 готов к использованию для новых сборки веб -сайта.

Что такое переменные дизайна Divi?

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

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

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

Создание более разумного и легкого для обновления веб-сайта

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

Что приносит ACF на стол

Advanced Custom Fields (ACF) позволяет добавлять дополнительные поля данных на ваши страницы и посты в своей основной версии. Вы получаете больше, чем просто основные коробки и контент. ACF дает вам специальные поля для изображений, текстовых блоков, файлов, выпадающих меню и многого другого.

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

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

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

Страницы с опциями: ваша панель управления по всему сайту

Страницы опций ACF, доступные в ACF Pro, позволяйте вам создать центральное место для информации для всего сайта, в отличие от обычных полей ACF, которые прикрепляются к конкретному контенту. Эта функция отлично подходит для:

• Контактная информация
• Важные ссылки
• Рабочие часы и местоположения
• Изображения и логотипы по умолчанию

Когда что -то меняется, например, ваш номер телефона, вам нужно обновить его только один раз в разделе администратора. Изменение сразу же появится на вашем сайте. Стоит отметить, что вам понадобится ACF Pro для использования страниц опций.

Глубокая интеграция с Divi

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

Вот как обычно работает процесс:

• Настроить пользовательские поля с ACF
• Заполните эти поля контентом в WordPress
• Создайте макет страницы в Divi
• Подключите контент ACF к модулям Divi

Эта комбинация Divi и ACF создает полезное разделение. Редакторы контента могут обновлять информацию в чистом, организованном интерфейсе, в то время как дизайнеры могут создавать макеты, не увязая в деталях управления контентом.

Гибкий подход

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

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

Гибкость переменных дизайна Диви

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

Диспетчер переменных обнаруживается, нажав значок переменных в боковой панели Divi 5 Visual Builder. Это позволяет вам управлять всеми вашими элементами дизайна в одном месте.

Шесть типов переменных дизайна

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

• Цветовые переменные: удерживайте цвета вашего бренда, цвета текста и фон
  • Вы можете назвать их явно как «коралловый румянец» или «золото шампанского»
  • Используйте их для кнопок, текста, фонов и границ
  • Затем вы можете изменить всю свою цветовую схему, обновив эти несколько переменных
• Переменные шрифта: установить параметры типографии за пределами тематического настройщика
  • Вы можете создать отдельные настройки шрифта для заголовков, текста тела или особых областей
  • Это сохраняет типографику в соответствии с вашим сайтом
  • При необходимости вы можете обновить все шрифты одновременно
• Номерные переменные: хранить измерения, используемые в вашем дизайне
  • Отлично подходит для расстояния, границ, размеров и текстовых размеров
  • Работать с такими единицами CSS, как Clamp () для адаптивных дизайнов
  • Они помогают вам поддерживать расстояние и размеры последовательными везде

Переменные Divi 5 также обрабатывают контент, который отображается на вашем сайте:

• Переменные изображения: хранить изображения, используемые в нескольких местах
  • Идеально подходит для логотипов, фоновых узоров и фотографий
  • Обновить изображения один раз вместо каждой страницы
  • Сделайте сезонные обновления или ребрендинг намного быстрее
• Текстовые переменные: Сохраните письменный контент, который появляется во многих местах
  • Полезно для контактной информации, слоганов и рабочих часов
  • Измените текст один раз, чтобы обновить его везде
  • Сохраняйте информацию, когда подробности меняются
• Переменные ссылки: хранить URL -адреса для кнопок и меню
  • Используйте кнопки действий, ссылки на социальные сети и навигацию
  • Избегайте сломанных ссылок при изменении веб -адресов
  • Обновите все связанные кнопки одновременно при добавлении новых страниц

Реальные преимущества

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

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

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

Как они сравнивают

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

Стандартные поля ACF сияют, когда вам нужен структурированный контент, который меняется между постами и страницами, в то время как переменные дизайна DIVI сохраняют согласованность дизайна в целом. Есть некоторые аспекты, на которых страницы опции ACF (доступны в ACF Pro) и переменные дизайна Divi аналогичны:

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

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

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

Могут ли переменные ACF и DIVI работать вместе?

Да. На самом деле вы можете использовать как стандартные поля ACF, так и переменные дизайна DIVI на одном и том же веб -сайте. Они хорошо работают вместе, потому что они обрабатывают разные части вашего сайта. Когда вы их объедините, стандартные поля ACF могут обрабатывать сложные отношения данных, такие как сайт недвижимости с типом списков недвижимости, который подключается к агентам, соседству и ценам на пользовательские поля.

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

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

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

Использование вариантов № 1 - сайт местного бизнеса с сезонными изменениями

Местный веб -сайт пекарни нуждается в структурированном контенте и сезонных обновлениях дизайна. Мы совместили стандартные поля ACF и переменные проектирования Divi на практике для этого сайта.

Стандартные поля ACF обрабатывают каталог продуктов пекарни с пользовательскими типами и полями для:

• Предметы
• Описания предметов
• Ингредиенты и информация об аллергене
• Ценовые уровни
• Статус доступности

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

Между тем, переменные дизайна Divi управляют элементами сезонного дизайна:

• Цветовые схемы, которые меняются с сезонами
• Текст рекламного баннера для праздников
• Изображения продуктов на домашней странице
• Фоновые узоры, которые обновляют ежемесячно

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

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

Эта настройка дает пекарне лучшие из обоих миров: структурированные данные продукта через стандартные поля ACF и быстрое сезонное обновления через переменные дизайна Divi.

Использование варианта № 2 - веб -сайт портфеля фотографии

На веб -сайте Photography Business необходимо сбалансировать организованные клиентские галереи с последовательным визуальным брендом. Вот как стандартные поля ACF и переменные дизайна DIVI решают эту проблему. Стандартные поля ACF управляют структурированными аспектами контента:

• Клиентские проектные галереи как пользовательский тип поста
• Пользовательские поля для:
  • Сервисные пакеты с подробными областями ценообразования
  • Сборник отзывов с именами клиентов
  • Типы проектов
  • Технические характеристики оборудования

Фотограф обновляет каждую галерею клиентов через интерфейс ACF, добавляя:

• Дата и местонахождение проекта
• Основная информация
• Сортировка и категоризация изображений

Между тем, переменные дизайна Divi обрабатывают последовательность бренда:

• Система типографии для всех заголовков и текста тела
• Цветовая палитра бренда применяется на всех страницах
• Значения расстояния для постоянного ритма макета
• Настройки сетки галереи для унифицированной презентации

Нужен бренд обновление? Фотограф обновляет несколько переменных дизайна, и весь сайт меняется. Галереи сохраняют расстояние из -за количества переменных, и каждый проект сохраняет свои данные благодаря ACF.

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

Сделать правильный выбор для вашего проекта

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

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

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

Начните строить умнее

Суть в том, что проектные переменные Divi 5 и стандартные поля ACF решают различные проблемы, имея некоторое перекрытие (особенно на страницах опций). Нужны быстрые обновления дизайна на вашем сайте? Проектные переменные сияют. Хотите мощное управление контентом с условной логикой? Стандартные поля ACF доставляют.

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

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

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