Presetões de elementos e predefinições de grupo de opções: a diferença explicada

E se você pudesse estilizar todo o seu site Divi com a flexibilidade das classes CSS? O sistema predefinido da Divi permite que você misture energia e facilidade, o que mudará a maneira como você cria sites. Seja construindo uma única página de destino ou um site de várias páginas, as predefinições permitem criar estilos reutilizáveis ​​que reduzem o tempo de design, mantendo tudo consistente.

No Divi 5, as predefinições de elementos e as predefinições de grupo de opções se unem para fornecer um fluxo de trabalho poderoso e eficiente. As predefinições de elementos permitem criar pacotes de design pré-estilo para elementos específicos, enquanto as predefinições de grupo de opções oferecem estilos de mixagem e correspondência que funcionam em seu site. Eles economizam tempo, garantem coesão e desbloqueiam novas possibilidades criativas.

Neste post, exploraremos como eles funcionam, como diferem e como combiná -los para um design mais inteligente e rápido. No final, você verá por que o sistema predefinido da Divi é essencial para o seu próximo projeto de design.

O que são predefinições de elementos?

Predefinições de elementos ajudam você a criar consistência em vários elementos do Divi. No Divi, existem quatro tipos de elementos recorrentes que você pode encontrar em todo o produto: seções, linhas, colunas e módulos. Introduzido no Divi 4 e transportado para o Divi 5, eles permitem criar um pacote de estilo completo para um elemento e reutilizá -lo com um único clique, não importa onde você esteja trabalhando no seu site.

Predefinições de elementos Capture todas as configurações que você aplicou a um único tipo de elemento - como a tipografia, cores, espaçamento e muito mais. Por exemplo, se você criou um módulo Blurb com tamanhos de fontes específicos, uma aparência estilizada para o ícone e as cores, um elemento predefinir trava todos esses detalhes em uma predefinição reutilizável.

O elemento Prests pode ser definido como padrão; portanto, todas as novas instâncias desse elemento herdam automaticamente o estilo da predefinição. Eles são modificáveis ​​globalmente, o que significa que um ajuste para o Prest atualiza todas as instâncias vinculadas em seu site instantaneamente. Se você precisar alterar uma predefinição, poderá substituir a predefinição no nível do elemento, oferecendo flexibilidade sem quebrar o sistema. Você também pode modificar a predefinição globalmente, para que ele efetiva todas as instâncias em que foi usado.

As predefinições de elementos são perfeitas para salvar e reutilizar projetos completos e polidos para elementos recorrentes. Por exemplo, ao criar um módulo CTA, você pode fazer um elemento predefinido e aplicá -lo em várias páginas. Com uma predefinição de elemento, ele é denominado uma vez, salvo e pronto para usar onde você precisar, garantindo a consistência do design sem muito esforço.

O que são predefinições de grupo de opções?

Novo no Divi 5, as predefinições do grupo de opções mudam o foco de elementos de design inteiros para propriedades de design reutilizáveis ​​- como tipografia, sombras, bordas, espaçamento ou efeitos de rolagem. São blocos de estilo modular que você pode aplicar em diferentes elementos, desde sombras de botão até fontes de direção. Eles não estão ligados a um tipo de elemento, tornando -os incrivelmente versáteis.

Uma das grandes coisas sobre as predefinições de grupo de opções da Divi, que a diferencia fortemente dos concorrentes, é que ele não está apenas focado no CSS. Ele também inclui efeitos construídos usando scripts. Você pode observar isso nos recursos mais interativos da Divi, como opções de condição, vídeos em segundo plano HTML, efeitos de rolagem e muito mais.

Predefinições de grupo de opções podem ser aplicadas em todos os tipos de elementos. Uma seção, linha, coluna e módulo podem compartilhar a mesma predefinição de borda. Os módulos com configurações de botão interno podem compartilhar a mesma predefinição do botão.

Predefinições de elementos vs Opção Presefets: As principais diferenças

As predefinições de elementos servem como kits de design all-in-one, construídos para otimizar o fluxo de trabalho da Divi, bloqueando em todos os detalhes de um único tipo de elemento-como um módulo de cabeçalho de largura total totalmente com estilo ou sinopse com sua tipografia, cores, espaçamento e efeitos agrupados em um plano estático. O foco deles é estreito, vinculado exclusivamente a um elemento, tornando -os designs de duplicação de complexos e polidos em seu site com um único clique.

Eles são perfeitos para acelerar o processo quando você precisa de uma seção consistente do CTA em cinco páginas - estilizá -lo uma vez, salve -o e implantá -lo sem esforço. Enquanto eles oferecem atualizações globais e configurações padrão, seu escopo é limitado, fornecendo um pacote fixo e pronto para uso que prioriza a consistência do elemento inteiro.

Predefinições de grupo de opções

Predefinições de grupo de opções, por outro lado, amplie os estilos ou comportamentos reutilizáveis-como a sombra de um botão, os estilos de tipografia de um título ou um efeito de rolagem-oferecendo uma abordagem dinâmica de elementos cruzados que se liberta do molde de elemento único. Essas camadas de design empilháveis ​​podem adicionar um estilo consistente aos botões em qualquer módulo que contenha um, como uma sinopse, formulário de contato ou módulo de operação de email, aplicando o estilo onde quer que se encaixe, com a flexibilidade de misturar e combinar.

Eles brilham cortando redundância em um ambiente compartilhado. Eles permitem definir um estilo de cabeçalho ou sombra de caixa uma vez e aplicá-lo em todo o site, enquanto suporta edições globais em tempo real e substituições no nível de elementos. Diferentemente da natureza estática e tudo o ou nada, as predefinições de grupo de opções predefinidas oferecem um estilo e adaptabilidade precisos em todo o seu design.

Como usar predefinições de elementos e predefinições de grupo de opções no divi 5

Combinar predefinições de elementos e predefinições de grupo de opções no Divi 5 é como emparelhar um chef mestre com um chef sous - um lida com o quadro geral e o outro mergulha nos detalhes. Aqui está um guia passo a passo para fazê-los funcionar em harmonia:

Etapa 1: Comece com predefinições de grupo de opções para estilos fundamentais

Comece definindo as regras principais de design do seu site, como tipografia, esquemas de cores, sombras ou efeitos dinâmicos, como animações de rolagem. Salve esses elementos como predefinições de grupo de opções e defina -os como padrões. Ao iniciar um design, as predefinições do grupo de opções podem ajudar a criar a base do design do seu site. Por exemplo, ao criar um layout de cabeçalho no construtor de temas, você pode fazer um grupo de opções predefinido para estilizar um botão no menu para repetir facilmente o estilo desse botão em todo o site ao criar suas páginas da web.

Cada novo elemento que você adiciona e atribui a predefinição para herdar esses estilos automaticamente, dando ao seu site uma aparência unificada sem aprimorá -lo constantemente.

Etapa 2: construir predefinições de elementos

Depois de criar predefinições de grupo de opções para estilizar elementos, você pode desenvolver sua base de design criando predefinições de elementos para seus layouts. Por exemplo, se você deseja ter vários módulos Blurb na sua página inicial, só precisará estilizar um e criar uma predefinição de elemento. A partir daí, você pode adicionar mais borradas e aplicar o elemento predefinido a cada um deles, economizando uma tonelada de tempo de design.

Etapa 3: Tune com edições predefinidas

Às vezes, você pode alterar uma predefinição sem alterar as outras instâncias do seu site. Felizmente, as predefinições de elementos e as predefinições de grupo de opções permitem isso. Por exemplo, você criou predefinições de grupo de opções para seus títulos - H1 a H6 - mas deseja alterar a cor do cabeçalho que planeja usar em um plano de fundo de imagem. Nossos títulos são estilizados como #000000 , que não funcionarão para este aplicativo. Você pode editar uma única instância desta predefinição sem alterar a própria predefinição. Vá para a guia Design do módulo de título e altere a cor.

Você pode editar com precisão as predefinições de elementos, como o exemplo de Blurb de antes. Um ícone não é perfeitamente quadrado, parecendo mais largo que outros. Ao aplicar CSS na guia Avançado, a alteração permanece isolada. Outros módulos de sinopse com a mesma predefinição permanecem inalterados. Isso aumenta a flexibilidade do projeto, permitindo ajustes para elementos individuais sem alterar o sistema mais amplo.

Você obterá o melhor dos dois mundos, incorporando predefinições de elementos e predefinições de grupo de opções em seu próximo projeto de design da web: consistência em todo o site com espaço para liberdade criativa.

Por que eles trabalham melhor juntos

• Eficiência aumentada de projeto: as predefinições do grupo de opções lidam com os detalhes da êxito (como tipografia ou sombras), enquanto as predefinições de elementos permitem que você seja lançado em seções, linhas, colunas ou módulos totalmente com estilo.
• Um design mais consistente: os estilos compartilhados permanecem sincronizados através de predefinições de grupo de opções e as predefinições de elementos garantem que os layouts pareçam idênticos onde quer que sejam usados.
• Incentiva a escalabilidade: altere a predefinição de um grupo de opções (como o tamanho da fonte) e cada predefinição vinculada será atualizada instantaneamente - perfeita para o cultivo de sites onde são necessárias páginas adicionais.
• É provas futuras: o Roteiro do Divi 5 sugere predefinições de grupo de opções de ninho dentro de predefinições de elementos, prometendo uma integração ainda mais apertada.

O futuro dos elementos e predefinições de grupo de opções no divi 5

O Divi 5 já oferece um poderoso sistema predefinido, mas o futuro promete uma integração ainda mais apertada que pode redefinir como você constrói sistemas de design: predefinições de grupo de opções de nidificação internas de elementos. Embora ainda em desenvolvimento, esse recurso permitirá que você crie predefinições de elementos quase inteiramente a partir de predefinições de grupo de opções modulares, desbloqueando um novo nível de controle global de design.

Imagine criando sem esforço, sem esforço, brotbos, CTAs e muito mais usando predefinições de grupo de opções que você já projetou. Ele economizará tempo, facilitará a criação de uma aparência coesa para seus sites e permitirá que você crie sites mais rapidamente. Com os dois grupos predefinidos trabalhando juntos, você pode atualizar elementos de design em todo o seu site uma vez e cada elemento vinculado será ajustado instantaneamente. Esta não é apenas uma atualização incremental; É um salto em direção a um verdadeiro sistema de design do tipo CSS no construtor visual de arrastar e soltar da Divi.

Embora ainda não possamos aninhar predefinições, o Roteiro do Divi 5 os inclui. Quando eles chegarem, eles serão a melhor maneira de criar um sistema de design: comece com as predefinições do grupo de opções enquanto seus blocos de construção, montam -os em predefinições de elementos para implantação rápida e mantenha o controle global com o mínimo esforço.

Projete inteligente com predefinições de grupo de opções

O sistema predefinido da Divi 5 não é apenas um recurso - é uma revolução para os designers da web. Predefinições de elementos e predefinições de grupo de opções podem parecer pequenas ferramentas, mas elas dão um soco. As predefinições de elementos permitem salvar e reutilizar designs inteiros com barulho zero, enquanto as predefinições do grupo de opções trazem flexibilidade e consistência aos estilos e comportamentos que você usa em todos os lugares. Usados ​​juntos, eles criam um fluxo de trabalho rápido, coesivo e adaptável-esteja você construindo um site de comércio eletrônico de uma ou várias páginas.

A verdadeira mágica acontece quando você os usa juntos. As predefinições do grupo de opções ajudam você a estabelecer uma base sólida e construir projetos polidos e reutilizáveis ​​com predefinições de elementos. O resultado é um site consistente sem rigidez, escalável sem esmagamento e eficiente sem cortar cantos. Este sistema de design baseado em predefinição é um divisor de águas para usuários do DIVI, desbloqueando o poder do tipo CSS com simplicidade de apontar e clicar.

Antes de mergulhar em seu próximo projeto, faça o download do mais recente Divi 5 Alpha, experimente predefinições e veja como eles transformam como você cria sites Divi.