Divi Presets: Mais produtividade e possibilidade de criar Style Guide

Divi Presets, ou predefinições na tradução é o novo sistema de design baseado em classe que mudará a maneira como você cria sites com Divi para sempre. O mais novo recurso da atualização do Divi 4.5 disponível em 09/07/2020. 

Cada módulo Divi vem com uma ampla gama de configurações de design para utilizar. Você pode usar um módulo de botão Divi padrão e adicionar uma nova cor de fundo, cantos arredondados, texto maior e uma fonte personalizada… Essa é a beleza do Divi ???? – controle total do design!

Com essa novidade agora você pode salvar essas configurações de design personalizado, como se fosse uma classe CSS, um exemplo é como é utilizado em botão com a classe btn-primary do Bootstrap.

Style Guide

Com esse recurso do Divi Presets, podemos aplicar estilo à elementos em todo o site, para que todos compartilhem o mesmo design personalizado.

Assim, controlando melhor o seu guia de estilo “Style Guide” e criando uma coleção de presets para ser utilizadas posteriormente. Sendo facilmente aplicadas, você pode navegar pelas presets salvas e aplicá-las rapidamente. Além disso, você economizará horas adicionando novos módulos à sua página, já que não precisará projetar cada novo módulo a partir do zero.

Quando você modifica uma preset, todos os itens que usam ela serão alterados. Essa é uma grande mudança no sistema de design do Divi  e um dos recursos de produtividade mais importantes que lançaram em anos.

Diferença do Divi Biblioteca e Global Defaults

Antes algumas das estratégias para tentar reproduzir esses estilos na construção do site seria utilizando o recurso de salvar elementos na biblioteca do Divi com um design definido ou criando Padrão global no início da criação do site, 

Estratégia de Salvar na Biblioteca

Nessa estratégia para criar um padrão em um módulo podíamos personalizar o módulo, salvar na biblioteca de forma global e desabilitar a sincronização do conteúdo. Então, gerando design predefinidos para mais de um módulo, a grande desvantagem é que salvar seções e linhas de forma global não permitem desabilitar a parte do conteúdo, ou seja, não podendo ser alterado, e gerenciar isso não era o ideal na biblioteca do divi.

Estratégia do Editor Padrão Global

O Global Defaults Editor veio depois permitindo criar meio que um style guide para os elementos, exemplo criar um botão padrão para o site todo, a grande desvantagem era que não permitido criar mais de 1 padrão para um módulo, linha ou sessão. Nesse caso um solução seria mesclar essa estratégia com a de salvar módulos global.

Agora, você pode criar qualquer número de estilos globais e aplicar-los aos módulos do seu site. Você não está mais limitado a um único estilo global.

Vantagens do Divi Presets

Se você é um web designer do WordPress, provavelmente está familiarizado com HTML e CSS. Agora imagine, ter que criar um site inteiro do zero usando HTML e CSS, mas sem o uso de classes CSS. 

Você precisará adicionar o CSS inline em cada elemento individualmente. Ou seja, se você quisesse atualizar um estilo compartilhado em seu site, teria que fazer isso centenas ou milhares de vezes, pois nenhum desses elementos estava usando uma classe CSS definida. Chato né ?????

Acredite ou não, esse é o modelo atual da maioria dos page builder como Elementor, Thrive Architect, Visual Composer entre outros. Agora as classes são para CSS, o que Presets são para Divi.

Agora, um site usando o Divi Presets pode ser gerenciado com muito mais facilidade do que nunca, pois os estilos do site são consolidados em uma coleção de presets definidos e facilmente alterados.

Como Utilizar Divi Presets?

Divi Presets podem ser gerenciadas no novo menu suspenso “Presets”, localizado abaixo dos títulos na parte superior de todos os painéis de configurações. Clique no botão “Add New Preset” e dê um nome ao seu estilo (exemplo: “Botão Vermelho”) para criar um novo preset. Em seguida, personalize o estilo usando as configurações de design disponíveis do módulo.

Depois de salvar, você notará que ela está disponível no menu suspenso Presets. Na próxima vez que você adicionar um módulo a uma página, poderá selecionar esse Preset e o design do módulo será atualizado automaticamente para refletir a aparência personalizada criada.

Novos Presets a partir de elementos existentes

Você também pode transformar elementos já personalizados em presets, salve essa aparência personalizada como uma presets usando a opção “Create New Preset From Current Styles”.

Como Editar um Preset?

Você sempre pode alterar o design de uma preset salva. Quando editado uma preset, a aparência de todos os módulos usando essa preset serão atualizadas em todo o site. Então, para editar basta clicar no ícone de lápis no menu suspenso conforme o vídeo abaixo:

Quais as Opções do Divi Presets?

Vamos conhecer a interface um pouco melhor

1. Menu Dropdown Preset – Aqui você pode ver a preset ativa do seu módulo. Clique no menu suspenso para gerenciar sua biblioteca de preset.
2. Default Preset  – esta é a sua preset. Selecione para ativar a aparência padrão do módulo.
3. Assigned Default Preset – Esta estrela significa qual preset está atualmente atribuída como predefinição padrão. Todos os módulos básicos usarão essa preset como aparência padrão. Clique neste ícone de estrela em qualquer preset para torná-la padrão.
4. Selected Preset – a marca de seleção verde indica qual está atualmente atribuída ao módulo que você está editando. Os estilos base do módulo são controlados pela opção selecionada.
5. Edit A Preset – Clique neste ícone de lápis para editar o design de uma preset. Quando você edita o design de uma predefinição, todos os módulos que usam essa preset assumem a nova aparência.
6. Manage Preset Settings – Aqui você pode alterar o nome da preset para organizá-la melhor na sua biblioteca predefinida.
7. Update Preset With Current Styles – Isso atualiza a preset para corresponder ao design atual do módulo que você está editando.
8. Duplicate Preset – Você pode duplicar qualquer uma existente. Essa é uma ótima maneira de criar variações diferentes sem precisar começar do zero.
9. Delete Preset – excluir uma preset a removerá da sua biblioteca. Todos os módulos que usam ela mudam para default.
10. Create New Preset From Current Styles – Isso criará uma nova preset para corresponder ao design do módulo que você está editando no momento. Se você tiver elementos pré-projetados que gostaria de reutilizar em todo o site, poderá transformá-los rapidamente em preset.
11. Add New Preset  – Isso adiciona um preset em branco. Você pode personaliza-la usando as configurações de design disponíveis do módulo.

Eai? será que cola?

O novo sistema Presets do Divi é uma ótima ferramenta para economizar tempo, além de garantir consistência do design em todo o site.

O sistema tem uma curva de aprendizagem para se acostumar, normal como qualquer novidade, mas seu tempo gasto aprendendo serão recompensado com muita produtividade ????????‍????. As Presets economizarão tempo a longo prazo e são definitivamente algo com o qual você deve brincar para poder ver os benefícios que elas podem oferecer.

Concluindo, com essa novidade é provável que abra um leque no mercado de terceiros para compartilhar e vender presets como style guide, o que é muito interessante.

Você já usou o sistema Presets? o que achou? Deixe um comentário abaixo.

Links úteis:

Site Oficial
Documentação
Referências: Elegant Themes, UXDivi