Variáveis ​​de design do ACF vs Divi: Quando usar o que

Com o último lançamento alfa do Divi 5, as variáveis ​​de design entraram no ecossistema Divi como uma nova abordagem para gerenciar valores de design e conteúdo em seus sites. Isso excitou nossos usuários, especialmente aqueles que confiam em campos personalizados Advanced (ACF) há anos. Você deve ficar com o ACF ou mudar para as variáveis ​​da Divi? Ou você pode usar os dois simultaneamente?

Esta postagem explica a diferença e quando você deve usar o quê. Vamos lá!

O Divi 5 está pronto para ser usado para novas construções de sites.

O que são variáveis ​​de design divi?

Ao criar um site, você geralmente reutiliza as mesmas informações em muitas páginas, de cores a estilos de fonte, detalhes de contato e muito mais. As variáveis ​​de design ajudam a gerenciar esses elementos compartilhados de um lugar central. Ao contrário dos campos padrão do ACF, as variáveis ​​de design não estão ligadas ao conteúdo pós-específico, elas atuam como valores globais de design e conteúdo, não campos de conteúdo dinâmico.

Em vez de cavar em todas as páginas para fazer uma atualização menor, como alterar um número de telefone ou ajustar uma cor de fundo, você atualiza uma variável uma vez e isso muda flui em todo o site automaticamente.

Deseja mudar as cores da sua marca para uma promoção sazonal? Altere uma única variável. Precisa atualizar o texto do seu rodapé ou um logotipo? Um edite atualiza cada instância instantaneamente. Com as variáveis ​​de design da Divi, você não está apenas estilizando mais rápido, mas construindo mais inteligente.

Construindo um site mais inteligente e mais fácil de fazer

Os campos padrão do ACF melhoram como os usuários do WordPress estruturam o design e o conteúdo, criando campos personalizados vinculados a postagens específicas. As variáveis ​​de design da Divi seguem uma rota completamente diferente. Eles são valores de design globalmente acessíveis que atualizam em todos os lugares de uma só vez. A diferença pode inicialmente parecer sutil, mas muda a maneira como você constrói e mantém sites do WordPress.

O que o ACF traz para a mesa

Os campos personalizados avançados (ACF) permitem adicionar campos de dados extras às suas páginas e postagens em sua versão principal. Você obtém mais do que apenas o título básico e as caixas de conteúdo. O ACF oferece campos especiais para fotos, blocos de texto, arquivos, menus suspensos e muito mais.

Você pode agrupar campos relacionados a grupos lógicos para seus projetos. Por exemplo, você pode fazer um grupo de funcionários com pontos de cargo, departamento, foto e biografia. Ou crie detalhes do produto com campos para especificações, preços e listas de recursos.

Esses grupos de campo funcionam muito bem com tipos de postagens personalizados. Ao combiná -los, você pode criar seções de conteúdo especiais, como diretórios de equipe, listagens de serviços ou catálogos de propriedade - cada um com exatamente os campos certos para esse conteúdo.

As pessoas adoram o ACF porque se encaixa suavemente na área de administrador regular do WordPress. Seus campos personalizados aparecem diretamente nas telas de edição normal, facilitando para os clientes que não têm conhecimento técnico atualizam o conteúdo.

Páginas de opção: seu painel de controle em todo o site

Páginas de opções ACF, disponíveis no ACF Pro, permitem criar um local central para informações em todo o local, diferentemente dos campos ACF regulares que se conectam a conteúdo específico. Este recurso é ótimo para:

• Informações de contato
• Links importantes
• Horário de negócios e locais
• Imagens e logotipos padrão

Quando algo muda, como seu número de telefone, você só precisa atualizá -lo uma vez na seção de administrador. A mudança aparecerá em todos os lugares do seu site imediatamente. Vale a pena notar que você precisará do ACF Pro para usar as páginas de opções.

Profunda integração com divi

Os campos padrão do ACF combinam muito bem com o Divi através do sistema de conteúdo dinâmico da Divi. Ao fazer páginas no Divi Builder, você pode extrair informações dos seus campos personalizados do ACF. Este trabalho em equipe permite usar as ferramentas de design da Divi juntamente com o gerenciamento de conteúdo da ACF.

Veja como o processo geralmente funciona:

• Configure campos personalizados com ACF
• Preencha esses campos com conteúdo no WordPress
• Projete o layout da sua página no divi
• Conecte seu conteúdo ACF aos seus módulos Divi

Essa combinação de Divi e ACF cria uma separação útil. Os editores de conteúdo podem atualizar as informações em uma interface limpa e organizada, enquanto os designers podem criar layouts sem ficar atolado nos detalhes de gerenciamento de conteúdo.

Abordagem flexível

Os campos padrão do ACF funcionam para suas habilidades, seja você codificando ou gosta de ferramentas visuais. Os desenvolvedores podem usar funções de modelo para exibir valores de campo em temas personalizados. Se você não codificar, ainda poderá usar campos ACF com construtores como o Divi sem conhecer o PHP.

Essa flexibilidade torna os campos ACF padrão adequados para sites de negócios básicos e projetos complexos. Você pode começar com recursos simples e usar os mais avançados à medida que aprende e seu site cresce.

A flexibilidade das variáveis ​​de design da divi

Variáveis ​​de design Divi 5 simplificam o gerenciamento de sites. Eles armazenam opções de design e conteúdo reutilizável que você pode usar em qualquer lugar do seu site. Quando você atualiza uma variável, ela muda em todos os lugares que você a usou.

O Variable Manager é encontrado clicando no ícone Variáveis ​​na barra lateral do Visual Builder da Divi 5. Ele permite que você gerencie todos os seus elementos de design em um só lugar.

Seis tipos de variáveis ​​de design

O Divi 5 inclui seis tipos diferentes de variáveis ​​para ajudar com vários aspectos do seu site:

• Variáveis ​​de cores: mantenha as cores da sua marca, cores de texto e fundos
  • Você pode nomeá -los claramente como "coral blush" ou "ouro de champanhe"
  • Use -os para botões, texto, fundos e fronteiras
  • Em seguida, você pode alterar todo o seu esquema de cores atualizando essas poucas variáveis
• Variáveis ​​de fonte: defina opções de tipografia além do personalizador de temas
  • Você pode criar configurações de fonte separadas para títulos, texto corporal ou áreas especiais
  • Isso mantém a tipografia consistente em todo o seu site
  • Quando necessário, você pode atualizar todas as fontes de uma vez
• Variáveis ​​de números: armazenar medições usadas em seu design
  • Ótimo para espaçamento, fronteiras, tamanhos e dimensões de texto
  • Trabalhe com unidades CSS como Clamp () para designs responsivos
  • Isso ajuda você a continuar espaçando e dimensionando consistente em todos os lugares

As variáveis ​​Divi 5 também lidam com o conteúdo que aparece em todo o site:

• Variáveis ​​de imagem: armazenar imagens usadas em vários lugares
  • Perfeito para logotipos, padrões de fundo e fotos
  • Atualize as imagens uma vez em vez de em todas as páginas
  • Faça atualizações sazonais ou rebranding muito mais rápido
• Variáveis ​​de texto: salvar conteúdo escrito que aparece em muitos pontos
  • Útil para informações de contato, slogans e horários comerciais
  • Altere o texto uma vez para atualizá -lo em todos os lugares
  • Mantenha as informações consistentes quando os detalhes mudarem
• Variáveis ​​de link: armazenar URLs para botões e menus
  • Use para botões de ação, links de mídia social e navegação
  • Evite links quebrados quando os endereços da web mudarem
  • Atualize todos os botões relacionados ao mesmo tempo ao adicionar novas páginas

Benefícios do mundo real

As variáveis ​​de design economizam tempo e reduzem os erros porque é visual. Quando um cliente deseja alterar as cores do site, você pode atualizar apenas as variáveis ​​de cores e tudo com essa cor (botões, fundos e texto) muda imediatamente em todo o site.

Essas variáveis ​​funcionam bem com o sistema predefinido da Divi. Adicione variáveis ​​às predefinições do seu módulo e, quando você atualiza uma variável, cada módulo com essa variável muda.

Para sites que ficam bem em todos os dispositivos, as variáveis ​​numéricas com funções CSS como Clamp () ajudam seus layouts a ajustar qualquer tamanho de tela sem precisar de designs separados. Quando várias pessoas trabalham em um site, as variáveis ​​de design mantêm todos usando as mesmas regras de design. Isso ajuda o site a permanecer consistente e profissional, não importa quem faça alterações.

Como eles se comparam

Ao comparar os campos padrão do ACF e as variáveis ​​de design da Divi, estamos analisando duas abordagens diferentes para tornar os sites mais gerenciáveis. Vamos dividir suas diferenças principais:

Os campos ACF padrão brilham quando você precisa de conteúdo estruturado que muda entre postagens e páginas, enquanto as variáveis ​​de design do Divi mantêm a consistência do design em todo o site. Existem alguns aspectos em que as páginas de opções do ACF (disponíveis no ACF Pro) e as variáveis ​​de design do Divi são semelhantes:

É importante entender que as variáveis ​​de design do Divi não tentam fazer tudo o que o ACF Pro faz. Eles oferecem outra maneira de armazenar e usar as mesmas informações em seu site. O ACF ainda pode fazer muitas coisas que as variáveis ​​divi não podem:

As variáveis ​​divi funcionam muito bem para trabalhos simples, como alterar informações de contato, trocar fotos com as estações ou atualizar as cores da sua marca. O ACF é ideal para sites que precisam de gerenciamento de conteúdo especializado além dos elementos de design, como criar campos e tipos de postagem personalizados. Da mesma forma, as páginas da opção ACF, disponíveis no ACF Pro, são uma versão mais madura das variáveis ​​de design do Divi.

No entanto, as variáveis ​​de design da Divi são incorporadas ao Divi 5, sem nenhum custo extra. Você pode configurar cores, fontes, texto e imagens diretamente no construtor que você já usa. Não há necessidade de plugins extras ou de aprender novos sistemas. Os requisitos do seu projeto devem orientar qual sistema assume o papel principal no seu fluxo de trabalho, mas lembre -se de que essas ferramentas resolvem problemas fundamentalmente diferentes, apesar de suas semelhanças na superfície.

As variáveis ​​ACF e Divi podem funcionar juntas?

Sim. Na verdade, você pode usar os campos ACF padrão e as variáveis ​​de design do Divi no mesmo site. Eles funcionam bem juntos porque lidam com diferentes partes do seu site. Quando você os combina, os campos ACF padrão podem lidar com relacionamentos de dados complexos, como um site imobiliário com um tipo de postagem de listagens de propriedades que se conecta a agentes, bairro e precificação de campos personalizados.

Enquanto isso, as variáveis ​​de design mantêm as cores da sua marca, a tipografia e o espaçamento consistente em todas as páginas e no modelo de postagem. Isso significa que seu site possui um poderoso gerenciamento de dados e consistência visual.

Seus editores de conteúdo podem trabalhar com os campos familiares da ACF para atualizar os detalhes ou preços da propriedade, enquanto seu site mantém sua aparência profissional no sistema de design da Divi. Essa combinação oferece um controle melhor do que qualquer uma das ferramentas poderia fornecer sozinho.

A chave é saber qual ferramenta usar para cada trabalho. Ao entender seus pontos fortes, você pode criar sites com estruturas sofisticadas de conteúdo que ainda mantêm uma identidade visual coesa. Vejamos exemplos reais de como essas ferramentas resolvem problemas comuns no site.

Use Caso 1 - site comercial local com mudanças sazonais

Um site de padaria local precisa de atualizações estruturadas de conteúdo e design sazonal. Combinamos campos ACF padrão e variáveis ​​de design de divi de maneira prática para este site.

Os campos ACF padrão lidam com o catálogo de produtos da padaria com tipos e campos de postagens personalizados para:

• Unid
• Descrições de itens
• Ingredientes e informações de alérgenos
• Camadas de preços
• Status de disponibilidade

Esses detalhes mudam para cada produto, portanto, a abordagem estruturada da ACF funciona perfeitamente. A equipe de padaria atualiza as informações do produto através da interface WordPress familiar da ACF.

Enquanto isso, as variáveis ​​Divi Design gerenciam os elementos de design sazonal:

• Esquemas de cores que mudam com as estações
• Texto de banner promocional para férias
• Imagens de produtos em destaque na página inicial
• Padrões de fundo que atualizam mensalmente

Quando o outono chega, o proprietário da padaria simplesmente atualiza as variáveis ​​de cores sazonais de pastéis de verão para tons de outono, e todo o site atualiza instantaneamente.

A imagem de fundo muda para mostrar decorações com temas de queda, sem precisar editar cada página individualmente usando variáveis ​​de imagem como seguintes:

Essa configuração oferece à padaria o melhor dos dois mundos: dados estruturados do produto através de campos ACF padrão e atualizações sazonais rápidas através das variáveis ​​de design da Divi.

Use Caso #2 - Site do portfólio de fotografia

Um site de negócios de fotografia precisa equilibrar galerias de clientes organizadas com uma marca visual consistente. Veja como os campos ACF padrão e as variáveis ​​de design do Divi resolvem esse desafio. Campos ACF padrão gerenciam os aspectos de conteúdo estruturado:

• Galerias do projeto do cliente como um tipo de postagem personalizado
• Campos personalizados para:
  • Pacotes de serviço com campos de preços detalhados
  • Coleção de depoimento com nomes de clientes
  • Tipos de projeto
  • Especificações do equipamento

O fotógrafo atualiza cada galeria de clientes através da interface do ACF, adicionando:

• Data e localização do projeto
• Informações básicas
• Classificação e categorização de imagens

Enquanto isso, as variáveis ​​Divi Design lidam com a consistência da marca:

• Sistema de tipografia para todos os títulos e texto do corpo
• Paleta de cores da marca aplicada em todas as páginas
• Valores de espaçamento para um ritmo de layout consistente
• Configurações da grade da galeria para apresentação uniforme

Precisa de uma atualização da marca? O fotógrafo atualiza algumas variáveis ​​de design e todo o site muda. As galerias mantêm seu espaçamento devido a variáveis ​​numéricas, e cada projeto mantém seus detalhes graças ao ACF.

Quando a temporada de casamento fica ocupada, o fotógrafo muda uma variável de texto para o status de reserva e atualiza em todos os lugares do site. Não há mais verificação de cada página para corrigir o mesmo texto. Essa combinação mantém as fotos e as informações do cliente (no ACF) separadas da aparência do site (com variáveis ​​de design) para que o fotógrafo possa acertar a estrutura e a aparência.

Fazendo a escolha certa para o seu projeto

Olhando para nossos exemplos de padaria e fotografia, podemos ver essas ferramentas enfrentar diferentes desafios do site. O proprietário da padaria atualiza as informações do produto enquanto trocava sem esforço as cores sazonais. O fotógrafo mantém as galerias organizadas, mas ainda pode atualizar a aparência do site com apenas alguns cliques.

Alguns sites precisam apenas de uma dessas ferramentas, enquanto outros funcionam melhor com ambos. Uma coisa é clara: a escolha entre os campos ACF padrão e as variáveis ​​de design do Divi não precisa ser uma decisão ou uma decisão.

O Divi 5 adicionou outra opção útil ao seu kit de ferramentas. Esteja você construindo algo simples ou complexo, agora você tem mais maneiras de criar sites que parecem bons e funcionam bem.

Comece a construir mais inteligente

A linha inferior é que as variáveis ​​de design do Divi 5 e os campos padrão do ACF resolvem problemas diferentes enquanto têm alguma sobreposição (especialmente nas páginas de opções). Precisa de atualizações rápidas de design em seu site? As variáveis ​​de design brilham. Deseja gerenciamento de conteúdo poderoso com lógica condicional? Os campos ACF padrão entregam.

Muitos sites funcionam bem com as duas ferramentas lado a lado. As páginas de opções ACF são melhores para gerenciar necessidades complexas de conteúdo. As variáveis ​​de design não devem substituir totalmente as páginas de opções, mas para a maioria dos usuários com requisitos simples, elas podem ser uma alternativa forte.

O recurso de variáveis ​​de design já está disponível com o Divi 5 - sem custo extra, sem necessidade de codificação e está pronto para o seu próximo projeto.

Lembre -se: o Divi 5 funciona melhor para novos sites. Ainda não recomendamos mover sites existentes para o divi 5 ainda.