Variables de diseño ACF vs Divi: cuándo usar lo que

Con el último lanzamiento de Alpha de Divi 5, las variables de diseño han ingresado al ecosistema Divi como un nuevo enfoque para administrar los valores de diseño y contenido en sus sitios web. Esto ha entusiasmado a nuestros usuarios, especialmente a aquellos que han confiado en campos personalizados avanzados (ACF) durante años. ¿Debería quedarse con ACF o cambiar a las variables de Divi? ¿O puedes usar ambos simultáneamente?

Esta publicación explica la diferencia y cuándo debe usar qué. ¡Vamos a hacerlo!

Divi 5 está listo para ser utilizado para nuevas compilaciones de sitios web.

¿Qué son las variables de diseño de divi?

Al construir un sitio web, a menudo reutilizará la misma información en muchas páginas, desde colores hasta estilos de fuente, datos de contacto y más. Las variables de diseño lo ayudan a administrar esos elementos compartidos desde un lugar central. A diferencia de los campos ACF estándar, las variables de diseño no están vinculadas al contenido postpecífico, actúan como valores globales de diseño y contenido, no campos de contenido dinámico.

En lugar de cavar en cada página para realizar una actualización menor, como cambiar un número de teléfono o ajustar un color de fondo, actualiza una variable una vez, y ese cambio fluye en todo su sitio automáticamente.

¿Quieres cambiar los colores de tu marca para una promoción estacional? Cambiar una sola variable. ¿Necesita actualizar el texto de su pie de página o un logotipo? Uno Editar actualiza cada instancia al instante. Con las variables de diseño de Divi, no solo estás diseñando más rápido sino construyendo más inteligente.

Construyendo un sitio web más inteligente y más fácil de actualizar

Los campos ACF estándar mejoran la forma en que los usuarios de WordPress estructuran el diseño y el contenido mediante la creación de campos personalizados vinculados a publicaciones específicas. Las variables de diseño de Divi toman una ruta completamente diferente. Son valores de diseño accesibles a nivel mundial que se actualizan en todas partes a la vez. La diferencia puede parecer inicialmente sutil, pero cambia cómo construye y mantiene los sitios de WordPress.

Lo que ACF trae a la mesa

Advanced Custom Fields (ACF) le permite agregar campos de datos adicionales a sus páginas y publicaciones en su versión principal. Obtienes más que solo el título básico y los cuadros de contenido. ACF le ofrece campos especiales para imágenes, bloques de texto, archivos, menús desplegables y mucho más.

Puede agrupar campos relacionados en grupos lógicos para sus proyectos. Por ejemplo, puede hacer un grupo miembro del personal con lugares para el título de trabajo, el departamento, la foto y la biografía. O cree detalles del producto con campos para especificaciones, precios y listas de funciones.

Estos grupos de campo funcionan muy bien con los tipos de publicaciones personalizadas. Cuando los combina, puede crear secciones especiales de contenido como directorios de equipo, listados de servicios o catálogos de propiedades, cada una con exactamente los campos correctos para ese contenido.

A la gente le encanta ACF porque se ajusta suavemente al área de administración regular de WordPress. Sus campos personalizados aparecen justo en las pantallas de edición normales, lo que facilita a los clientes que no son expertos en tecnología actualizar contenido.

Páginas de opción: su panel de control en todo el sitio

Las páginas de opciones ACF, disponibles en ACF Pro, le permiten crear un lugar central para la información de todo el sitio, a diferencia de los campos ACF regulares que se adjuntan al contenido específico. Esta característica es ideal para:

• Información del contacto
• Enlaces importantes
• Horario comercial y ubicaciones
• Imágenes y logotipos predeterminados

Cuando algo cambia, como su número de teléfono, solo necesita actualizarlo una vez en la sección de administración. El cambio aparecerá en todas partes en su sitio de inmediato. Vale la pena señalar que necesitará el ACF Pro para usar páginas de opciones.

Integración profunda con divi

Los campos ACF estándar se combinan muy bien con Divi a través del sistema de contenido dinámico de Divi. Cuando está haciendo páginas en Divi Builder, puede extraer información de sus campos personalizados ACF. Este trabajo en equipo le permite utilizar las herramientas de diseño de Divi junto con la administración de contenido de ACF.

Así es como funciona el proceso:

• Configurar campos personalizados con ACF
• Llene estos campos con contenido en WordPress
• Diseñe el diseño de su página en Divi
• Conecte su contenido ACF a sus módulos Divi

Esta combinación de divi y ACF crea una separación útil. Los editores de contenido pueden actualizar la información en una interfaz limpia y organizada, mientras que los diseñadores pueden construir diseños sin empantanarse en los detalles de gestión de contenido.

Enfoque flexible

Los campos ACF estándar funcionan para sus habilidades, ya sea que codifique o me gusten las herramientas visuales. Los desarrolladores pueden usar funciones de plantilla para mostrar valores de campo en temas personalizados. Si no codifica, aún puede usar campos ACF con constructores como Divi sin conocer PHP.

Esta flexibilidad hace que los campos ACF estándar sean adecuados para sitios web de negocios básicos y proyectos complejos. Puede comenzar con características simples y usar las más avanzadas a medida que aprende y su sitio crece.

La flexibilidad de las variables de diseño de Divi

Las variables de diseño Divi 5 simplifican la gestión del sitio web. Almacenan opciones de diseño y contenido reutilizable que puede usar en cualquier lugar de su sitio. Cuando actualiza una variable, cambia en todas partes.

El Administrador de variables se encuentra haciendo clic en el icono de variables en la barra lateral Visual Builder de Divi 5. Le permite administrar todos sus elementos de diseño en un solo lugar.

Seis tipos de variables de diseño

Divi 5 incluye seis tipos diferentes de variables para ayudar con varios aspectos de su sitio web:

• Variables de color: sostenga los colores de su marca, los colores de texto y los fondos
  • Puedes nombrarlos claramente como "Coral Blush" o "Champagne Gold"
  • Úselos para botones, texto, fondos y bordes
  • Entonces, puede cambiar todo su esquema de color actualizando estas pocas variables
• Variables de fuentes: Establecer opciones de tipografía más allá del personalizador del tema
  • Puede crear configuraciones de fuentes separadas para encabezados, texto del cuerpo o áreas especiales.
  • Esto mantiene una tipografía consistente en su sitio web
  • Cuando sea necesario, puede actualizar todas las fuentes a la vez
• Variables de número: Medidas de almacenamiento utilizadas en su diseño
  • Ideal para espaciar, bordes, tamaños y dimensiones de texto
  • Trabajar con unidades CSS como Clamp () para diseños receptivos
  • Estos te ayudan a seguir espaciando y dimensionando de manera consistente en todas partes

Las variables Divi 5 también manejan contenido que aparece en todo su sitio:

• Variables de imagen: almacenar imágenes utilizadas en múltiples lugares
  • Perfecto para logotipos, patrones de fondo y fotos.
  • Actualizar imágenes una vez en lugar de en cada página
  • Hacer actualizaciones estacionales o cambiar el nombre mucho más rápido
• Variables de texto: Guardar contenido escrito que aparezca en muchos puntos
  • Útil para información de contacto, lemas y horario comercial
  • Cambie el texto una vez para actualizarlo en todas partes
  • Mantenga la información consistente cuando cambien los detalles
• Variables de enlace: almacene URL para botones y menús
  • Uso para botones de acción, enlaces de redes sociales y navegación
  • Evite los enlaces rotos cuando cambien las direcciones web
  • Actualice todos los botones relacionados a la vez al agregar nuevas páginas

Beneficios del mundo real

Las variables de diseño ahorran tiempo y reducen los errores porque es visual. Cuando un cliente quiere cambiar los colores de su sitio web, puede actualizar solo las variables de color, y todo con ese color (botones, fondos y texto) cambia inmediatamente en el sitio.

Estas variables funcionan bien con el sistema preestablecido de Divi. Agregue variables a su módulo preestablecidos y cuando actualice una variable, cada módulo con esa variable cambia.

Para los sitios web que se ven bien en todos los dispositivos, las variables numéricas con funciones CSS como Clamp () ayudan a sus diseños a ajustar cualquier tamaño de pantalla sin necesidad de diseños separados. Cuando varias personas trabajan en un sitio web, las variables de diseño mantienen a todos utilizando las mismas reglas de diseño. Esto ayuda al sitio a mantenerse consistente y profesional sin importar quién haga cambios.

Cómo se comparan

Al comparar los campos ACF estándar y las variables de diseño de Divi, estamos buscando dos enfoques diferentes para hacer que los sitios web sean más manejables. Desglosemos sus diferencias centrales:

Los campos ACF estándar brillan cuando necesita contenido estructurado que cambie entre publicaciones y páginas, mientras que las variables de diseño Divi mantienen la consistencia del diseño en todo el sitio. Hay algunos aspectos en los que las páginas de opciones ACF (disponibles en ACF Pro) y las variables de diseño Divi son similares:

Es importante comprender que las variables de diseño de Divi no intentan hacer todo lo que hace ACF Pro. Le dan otra forma de almacenar y usar la misma información en su sitio web. ACF todavía puede hacer muchas cosas que las variables Divi no pueden:

Las variables Divi funcionan muy bien para trabajos simples como cambiar la información de contacto, intercambiar fotos con las estaciones o actualizar los colores de su marca. ACF es ideal para sitios web que necesitan gestión de contenido especializado más allá de los elementos de diseño, como la creación de campos personalizados y tipos de publicaciones. Del mismo modo, las páginas de opciones ACF, disponibles con ACF Pro, son una versión más madura de las variables de diseño Divi.

Sin embargo, las variables de diseño de Divi están integradas en Divi 5 sin costo adicional. Puede configurar colores, fuentes, texto e imágenes directamente en el constructor que ya usa. No hay necesidad de complementos adicionales o aprender nuevos sistemas. Los requisitos de su proyecto deben guiar qué sistema toma el papel principal en su flujo de trabajo, pero recuerde que estas herramientas resuelven problemas fundamentalmente diferentes a pesar de sus similitudes superficiales.

¿Pueden las variables ACF y Divi funcionar juntas?

Sí. En realidad, puede usar tanto los campos ACF estándar como las variables de diseño Divi en el mismo sitio web. Funcionan bien juntos porque manejan diferentes partes de su sitio. Cuando los combina, los campos ACF estándar pueden manejar relaciones de datos complejas como un sitio de bienes raíces con un tipo de publicación de listados de propiedades que se conecta con agentes, vecindarios y fijación de precios de campos personalizados.

Mientras tanto, las variables de diseño mantienen los colores de su marca, la tipografía y el espacio de manera consistente en cada página y plantilla de publicación. Esto significa que su sitio web tiene una gestión de datos potente y consistencia visual.

Sus editores de contenido pueden trabajar con los campos familiares de ACF para actualizar los detalles o los precios de la propiedad, mientras que su sitio mantiene su mirada profesional a través del sistema de diseño de Divi. Esta combinación le brinda un mejor control de lo que cualquiera de las herramientas podría proporcionar sola.

La clave es saber qué herramienta usar para cada trabajo. Al comprender sus fortalezas, puede crear sitios web con estructuras de contenido sofisticadas que aún mantienen una identidad visual cohesiva. Veamos ejemplos reales de cómo estas herramientas resuelven los problemas comunes del sitio web juntos.

Caso de uso #1 - Sitio web de negocios local con cambios estacionales

Un sitio web de panadería local necesita contenido estructurado y actualizaciones de diseño de temporada. Combinamos campos ACF estándar y variables de diseño Divi de manera práctica para este sitio.

Los campos ACF estándar manejan el catálogo de productos de la panadería con tipos y campos personalizados para:

• Elementos
• Descripciones de artículos
• Ingredientes e información de alérgenos
• Niveles de precios
• Estado de disponibilidad

Estos detalles cambian para cada producto, por lo que el enfoque estructurado de ACF funciona perfectamente. El personal de Bakery actualiza la información del producto a través de la interfaz familiar de WordPress de ACF.

Mientras tanto, las variables de diseño de divi administran los elementos de diseño estacionales:

• Esquemas de color que cambian con las estaciones
• Texto de banner promocional para vacaciones
• Imágenes de productos destacados en la página de inicio
• Patrones de fondo que se actualizan mensualmente

Cuando llega el otoño, el propietario de la panadería simplemente actualiza las variables de color estacionales de pasteles de verano a tonos de otoño, y todo el sitio se actualiza al instante.

La imagen de fondo cambia para mostrar decoraciones con temas de otoño, sin necesidad de editar cada página individualmente utilizando variables de imagen a continuación:

Esta configuración le da a la panadería lo mejor de ambos mundos: datos de productos estructurados a través de campos ACF estándar y actualizaciones rápidas de temporada a través de las variables de diseño de Divi.

Caso de uso #2 - Sitio web de la cartera de fotografía

Un sitio web comercial de fotografía necesita equilibrar las galerías de clientes organizadas con una marca visual consistente. Así es como las variables estándar de diseño de ACF y las variables de diseño Divi resuelven este desafío. Los campos ACF estándar administran los aspectos de contenido estructurado:

• Galerías de proyectos de cliente como tipo de publicación personalizada
• Campos personalizados para:
  • Paquetes de servicio con campos de precios detallados
  • Colección testimonial con nombres de clientes
  • Tipos de proyectos
  • Especificaciones de equipos

El fotógrafo actualiza cada galería de clientes a través de la interfaz de ACF, agregando:

• Fecha y ubicación del proyecto
• Información básica
• Clasificación y categorización de imágenes

Mientras tanto, las variables de diseño Divi manejan la consistencia de la marca:

• Sistema de tipografía para todos los encabezados y texto del cuerpo
• Paleta de colores de marca aplicada en todas las páginas
• Valores de separación para un ritmo de diseño consistente
• Configuración de la cuadrícula de la galería para una presentación uniforme

¿Necesita una actualización de la marca? El fotógrafo actualiza algunas variables de diseño, y todo el sitio cambia. Las galerías mantienen su espacio debido a variables numéricas, y cada proyecto mantiene sus detalles gracias a ACF.

Cuando la temporada de bodas se ocupa, el fotógrafo cambia una variable de texto para el estado de la reserva, y se actualiza en todas partes del sitio. No más verificación de cada página para arreglar el mismo texto. Esta combinación mantiene las fotos y la información del cliente (en ACF) separada de cómo se ve el sitio (con variables de diseño) para que el fotógrafo pueda obtener la estructura y la apariencia correctas.

Tomar la decisión correcta para su proyecto

Mirando nuestros ejemplos de panadería y fotografía, podemos ver que estas herramientas aborden diferentes desafíos del sitio web. El propietario de la panadería actualiza la información del producto mientras cambia sin esfuerzo los colores de temporada. El fotógrafo mantiene las galerías organizadas, pero aún puede actualizar el aspecto de su sitio con solo unos pocos clics.

Algunos sitios solo necesitan una de estas herramientas, mientras que otros funcionan mejor con ambas. Una cosa es clara: elegir entre los campos ACF estándar y las variables de diseño de divi no tiene que ser una decisión o una decisión.

Divi 5 ha agregado otra opción útil a su kit de herramientas. Ya sea que esté construyendo algo simple o complejo, ahora tiene más formas de crear sitios que se vean bien y funcionen bien.

Comience a construir más inteligente

La conclusión es que las variables de diseño de Divi 5 y los campos ACF estándar resuelven diferentes problemas mientras tienen una superposición (especialmente con páginas de opciones). ¿Necesita actualizaciones rápidas de diseño en su sitio? Las variables de diseño brillan. ¿Quiere una gestión de contenido poderosa con lógica condicional? Los campos ACF estándar entregan.

Muchos sitios funcionan bien con ambas herramientas lado a lado. Las páginas de opciones ACF son mejores para administrar necesidades de contenido complejas. Las variables de diseño no están destinadas a reemplazar completamente las páginas de opciones, pero para la mayoría de los usuarios con requisitos simples, pueden ser una alternativa sólida.

La función de variables de diseño ahora está disponible con Divi 5, sin costo adicional, no se necesita codificación, y está lista para su próximo proyecto.

Recuerde: Divi 5 funciona mejor para nuevos sitios web. No recomendamos mover los sitios existentes a Divi 5 todavía.