A flexibilidade de se estender a diferentes tipos de elementos no divi 5

Fazer atualizações de design não deve ter como verificação de caixas. Mas com muita frequência, mesmo algo simples, como alterar um estilo de botão ou atualizar uma fonte, significa editar cada módulo manualmente. É lento, repetitivo e fácil de estragar.

O Divi 5 corrige que, com atributos de extensão, uma versão atualizada dos estilos de extensão do Divi 4. Permite aplicar uma alteração uma vez e estendê -la em qualquer lugar, mesmo em diferentes tipos de elementos e módulos. Nesta postagem, veremos como essa flexibilidade pode economizar tempo e limpar seu fluxo de trabalho.

O que é estender atributos no Divi 5?

Extender atributos permite estender estilos, conteúdo ou predefinições de um elemento para outros com apenas alguns cliques sem a necessidade de editar cada módulo manualmente.

Inscreva -se no nosso canal do YouTube

Mas não é o seu fluxo de trabalho típico de cópia e cola (também temos isso, se você estiver interessado). Os atributos estendidos funcionam em diferentes tipos de elementos e módulos, não apenas os idênticos. Por exemplo, você pode estilizar um cabeçalho uma vez e aplicar a mesma fonte a um título de alternância, um nome de um módulo de pessoa ou um título de sinopse. Desde que compartilhem o mesmo grupo de estilo, como o texto, eles seguirão.

E isso não para por aí. Você pode estender praticamente qualquer coisa, em qualquer lugar. Copie uma cor de fundo de uma seção e aplique -a em todas as linhas, seções, coluna ou módulo na sua página.

Ou reutilizar estilos de botão em diferentes módulos; Você pode estender os estilos de uma frase de chamariz para um formulário de contato. Depois de começar a usá -lo, você mudará como pensa sobre atualizações. Você não ficará mais preso fazendo as mesmas coisas repetidamente. Com os atributos de extensão, você permanecerá consistente, economizará tempo e passará pelas mudanças de layout mais rapidamente e com mais controle.

Usando atributos de extensão no divi 5

Os atributos de extensão é simples de usar e oferecem muita flexibilidade. Para começar, clique com o botão direito do mouse no elemento que você já estilizou. Pode ser um módulo, coluna, linha ou até uma seção inteira. No menu que aparece, selecione estender atributos.

(Você também pode clicar com o botão direito do mouse diretamente em um grupo de configuração específico, como fonte ou espaçamento. Isso abre o painel de atributos de extensão com esse grupo já selecionado, o que torna o processo mais rápido e preciso quando você sabe exatamente o que está segmentando.)

Depois que o painel de atributos de extensão é aberto, você decide o que estender e onde aplicá -lo.

Você verá algumas opções claras:

• (1.) Estenda -se do elemento: o item que você tem denominado e deseja copiar.
• (2.) Estender -se ao local: Escolha até que ponto as alterações devem ir. Apenas a seção atual, a linha pai ou a página inteira.
• (3.) Estenda -se ao tipo de elemento: Escolha o tipo de elemento que você deseja segmentar, como apenas módulos de texto ou todos os módulos.
• (4.) Tipo de atributo para estender: Escolha o que copiar: design, conteúdo, predefinições ou qualquer mistura dessas.
• (5.) Grupo de opções para estender: Concentre -se em um grupo específico de configurações, como texto, borda ou estilos de botão.
• (6.) Campos modificados para estender: Você pode aplicar apenas os campos que mudou ou incluir tudo.

Aqui está um exemplo rápido. Digamos que você tenha um título dentro de um módulo de texto e deseja a mesma fonte aplicada a outros títulos na mesma seção. Você definiria o local para a seção pai , o tipo de elemento a texto e, em seguida, escolheria o grupo de opções do corpo (já que queremos transferir estilos corporais).

Uma vez aplicado, todos os módulos de texto correspondentes nessa seção são atualizados com o mesmo estilo de fonte.

É isso que torna os atributos estendidos especialmente úteis. Você não está preso copiando designs inteiros. Você pode escolher exatamente o que deseja estender, apenas um grupo ou várias propriedades de uma só vez. Você pode até transportar conteúdo e design em um módulo completamente diferente.

Mas se as configurações parecem muito a princípio, entenda que é completamente normal. Pode ser necessário testar algumas combinações para entender como escopos, tipos de elementos e grupos de configuração funcionam juntos. Depois de clicar, ele se torna uma das ferramentas mais eficientes no seu fluxo de trabalho do Divi.

Na seção Após a próxima, passaremos por exemplos práticos para mostrar como tudo se reúne. Depois de entender como cada configuração funciona, estender os atributos se torna uma ferramenta poderosa para criar designs consistentes sem repetir o mesmo trabalho.

Aprenda tudo sobre os atributos de extensão do divi 5

Como os atributos de extensão do Divi 5 superam os estilos de extensão do divi 4

Se você usou o Divi 4, provavelmente está familiarizado com os estilos de extensão. Ele permite copiar as configurações de design de um elemento para outro, mas apenas dentro do mesmo tipo de elemento. Isso tornou útil para correções rápidas, mas limitando para atualizações mais complexas.

Os atributos de extensão do Divi 5 levam essa idéia muito mais longe. Ele não apenas copia o design, também funciona com conteúdo e predefinições , fornecendo controle total sobre o que é aplicado e onde. Você pode até escolher propriedades específicas para estender , como apenas a cor do fundo ou o raio da borda, sem afetar mais nada.

Você não está mais bloqueado nos tipos de módulos correspondentes ou repetindo as mesmas alterações em um layout. Os atributos de estender permitem escolher exatamente o que reutilizar e até onde deve ir, seja entre seções ou uma página inteira. Ele é construído para se adaptar ao seu fluxo de trabalho e tornar o estilo mais rápido, mais inteligente e mais consistente.

Os atributos de extensão estão disponíveis no Divi 5 - faça o download da versão mais recente para experimentá -lo agora.

5 exemplos práticos do que você pode estender (e como)

Até agora, conversamos sobre o que os atributos de extensão podem fazer. Agora vamos ver como você pode realmente usá -lo. Esses exemplos passam por diferentes combinações de configuração que você pode tentar economizar tempo e aplicar atualizações com mais eficiência.

1. Estenda os estilos em diferentes tipos de elementos

Os atributos de extensão não o travam em uma hierarquia fixa. Você pode aplicar estilos em diferentes níveis de layout, estejam passando de uma seção para um módulo ou de uma linha para uma coluna.

Isso facilita a criação de conexões visuais em seu layout. Um módulo de testemunho pode corresponder à seção em que se senta. Um módulo de chamada à ação pode capturar estilos na linha acima. Você não está limitado a estender estilos entre elementos semelhantes, desde que eles compartilhem um grupo de estilo. Dependendo das suas necessidades de design, você pode ir de amplo para específico ou vice -versa.

Estendendo -se de uma seção para uma coluna

Digamos que você tenha adicionado um raio sutil de borda à seção para suavizar as bordas do layout. Dentro dessa seção, você tem uma coluna com uma imagem de fundo e deseja que ela espelhe os mesmos cantos arredondados para consistência visual.

Em vez de reaplicar manualmente o raio, clique com o botão direito do mouse na seção, escolha atributos estendidos , defina o tipo de elemento na coluna e selecione a borda entre os grupos de opções.

A coluna herdará o mesmo raio da borda, para que sua imagem de fundo ou layout aninhado não quebre o fluxo visual.

Estendendo -se de uma seção para uma linha

Outro exemplo é estender o preenchimento de uma seção para linhas ou outras seções para manter um espaço branco consistente. Clique com o botão direito do mouse na seção, escolha atributos estendidos , defina o tipo de elemento para linha e selecione espaçamento entre os grupos de opções.

Todas as linhas agora herdam os mesmos valores de preenchimento, dando à página espaçamento consistente.

Estendendo -se de uma seção para um módulo

Digamos que uma seção já tenha experiência, borda ou espaçamento que você deseja. Em vez de recriar esses estilos em outros lugares, você pode passá -los diretamente para outro elemento, mesmo que seja aninhado dentro ou colocado fora dessa seção.

Por exemplo, se uma seção tiver o plano de fundo desejado em um depoimento, basta usar atributos de extensão. Escolha o depoimento como o tipo de elemento, defina o escopo para a página inteira e verifique se os atributos de segundo plano estão selecionados.

Uma vez aplicado, o depoimento herda esse plano de fundo sem precisar de edições manuais.

No design da web, detalhes visuais consistentes, como cores de fundo, bordas e espaçamento, ajudam a unir tudo. Com os atributos de extensão, você pode transportar facilmente essa consistência no layout e criar uma experiência polida e na marca sem começar do zero a cada vez.

Estendendo -se de uma coluna para uma linha

Você também pode seguir uma abordagem reversa, por exemplo, se estender de uma coluna para uma linha. Digamos que você tenha adicionado uma linha limpa e sólida para enquadrar suas colunas. Se você deseja que a linha faça parte do mesmo estilo de fronteira para consistência visual, você pode reutilizar esses estilos instantaneamente. Basta estender o grupo de opções de fronteira para a linha dos pais.

A linha capta as mesmas configurações de borda, criando uma conexão visual clara entre os dois. Isso funciona especialmente bem ao criar seções em camadas ou layouts em caixa que dependem de contornos ou separadores consistentes.

Essas são apenas algumas combinações, que também podem ser revertidas . Na prática, você pode estender os estilos em praticamente qualquer nível de layout. Os atributos de extensão oferecem total flexibilidade, desde a aplicação do espaçamento da coluna a módulos dentro dele até o transporte das sombras da seção em linhas ou botões. Você também pode:

• Copie um radiato de fronteira de uma linha e aplique-o a um módulo
• Reutilizar uma animação de transformação de um módulo em colunas
• Estender o alinhamento da fonte de uma seção para todos os módulos de texto dentro dela
• Aplique filtros de imagem de uma coluna para outra para um estilo consistente
• Se dois elementos compartilharem um grupo e um contexto de estilo, os atributos de extensão provavelmente podem lidar com isso.

O objetivo não é memorizar todas as combinações, mas experimentar e descobrir o que funciona para o seu layout. Depois de começar a pensar em movimentos de design reutilizáveis em vez de edições pontuais, seu fluxo de trabalho naturalmente se torna mais rápido, mais limpo e mais consistente.

2. Estenda os estilos em diferentes tipos de módulos

Os atributos de extensão reconhecem grupos de estilo compartilhado, como o botão, para que você possa aplicar o mesmo estilo em diferentes módulos em apenas algumas etapas.

Por exemplo, digamos que você projetou um botão que você ama e deseja usá -lo em um formulário de contato. Em vez de restabelecê-lo manualmente, clique com o botão direito do mouse no botão original, selecione estender atributos , escolha o grupo de opções de botão e defina o tipo de elemento para entrar em contato com o formulário . Em seguida, defina o escopo para a página inteira .

O design levará instantaneamente para o botão Enviar o Formulário de contato sem ajustes manuais.

Você também pode repetir o processo para outros módulos. Se você deseja estender o mesmo estilo de botão a um email optin, basta alterar o tipo de elemento para o email optin e o botão corresponderá automaticamente.

Esse tipo de estilo de módulo cruzado economiza horas ao trabalhar com layouts pesados. Como o Divi trata os botões como parte de um grupo compartilhado, você pode estilizar uma vez e reutilizar em qualquer lugar sem quebrar a consistência.

3. Salvar e estender predefinições de grupo de opções

Os atributos de extensão também funcionam com predefinições, permitindo que você reutilize estilos salvos em seu layout.

Por exemplo, imagine que você projetou uma coluna com cantos arredondados, uma borda sutil e uma sombra suave. Você economiza isso como predefinição de fronteira para usá -lo novamente mais tarde.

A opção Extend Border Predeft aparece apenas se o elemento tiver predefinições salvas.

Agora, em vez de aplicar manualmente a predefinição a outras colunas, você pode estendê -lo em uma etapa. Basta clicar com o botão direito do mouse na coluna original, escolha estender atributos e selecionar estender a predefinição da borda do painel.

Depois de selecionado, defina seu tipo de elemento na coluna e o escopo na seção pai ou página inteira , dependendo de onde você deseja que ele seja aplicado. O estilo predefinido é transportado instantaneamente para as outras colunas sem configurá -lo novamente.

Isso facilita manter seu layout consistente, especialmente quando se trabalha com estilos de fronteira, sombras ou qualquer outro design agrupado sob predefinição.

4. Estilo uma vez e depois estenda apenas o que você mudou

Ao construir um layout do zero, o estilo de todos os elementos individualmente pode parecer infinito. Estendendo os estilos de uma propriedade de cada vez, como a First Shadow, depois a fronteira e depois o espaçamento, apenas diminui você.

É aí que entra a opção All Modified Fields . Em vez de selecionar cada configuração manualmente, você pode estilizar um elemento e aplicar apenas as alterações que fez no restante.

Por exemplo, digamos que você tenha adicionado uma borda macia e uma sombra leve a uma imagem em uma galeria.

Para aplicar a mesma aparência a todas as outras imagens, clique com o botão direito do mouse na imagem estilizada, escolha estender atributos e selecione todos os campos modificados nos campos modificados para estender a coluna.

Somente as propriedades que você alterou será transferida. Tudo o resto permanece intocado. Isso mantém seu design consistente sem substituir outras configurações, e é uma das maneiras mais fáceis de acelerar o estilo em massa sem perder o controle.

5. Estenda os estilos dentro de um único módulo

Estender atributos funciona não apenas entre os módulos, mas também dentro deles. Veja o módulo de acordeão, por exemplo. Se você já estilizou um item e, em seguida, teve que repetir essas mudanças mais cinco vezes, sabe como isso pode ser entediante.

Agora, você só precisa estilizar o primeiro item e estender os estilos ainda mais.

Depois de aplicar seu design, basta abrir o painel de atributos de extensão, escolher o módulo acordeão e selecionar os campos modificados específicos que você deseja aplicar ao restante.

Ao confirmar, todos os outros itens dentro da mesma atualização do módulo atualizam automaticamente. É uma maneira rápida de manter seu estilo consistente e aplicar alterações em todos os itens com uma única ação.

Estender atributos desbloqueia a verdadeira flexibilidade do design

Os atributos de extensão do Divi 5 oferecem uma maneira mais rápida e focada de fazer alterações no design. De botões e títulos a fronteiras, conteúdo e até elementos aninhados, você tem controle total sobre o que é copiado e para onde vai.

Funciona em diferentes módulos, seções de layout e níveis de design, mantendo seu fluxo de trabalho suave e eficiente. Mas você só pode acreditar se tentar por si mesmo. Portanto, experimente os atributos de extensão no Divi 5 hoje e compartilhe sua experiência conosco abaixo!