Renascer um site em 5 minutos com atributos de extensão

A rebraça que seu site não exige uma reconstrução completa, embora muitas vezes pareça assim. As fontes estão presas em peças separadas, as cores são espalhadas pelas seções e o espaçamento está oculto em ambientes individuais. E depois de atualizar a página inicial, você encontra outras páginas que precisam das mesmas alterações. É a rotina usual, mas há uma maneira mais rápida.

Com atributos de extensão no Divi 5, você pode estilizar um único elemento e aplicar instantaneamente essa aparência a todos os módulos semelhantes entre linhas, seções e até a página inteira. Vamos percorrer como usá -lo para renomear um site completo em minutos, não horas.

O que são atributos estendidos no divi 5

Extend Atributes é um recurso Divi 5 que permite levar o design de um módulo e aplicá -lo a outros elementos ou módulos ao seu redor. Isso significa que, se você tem um botão, um título ou um bloco de texto, não precisa recriar esses estilos do zero, porque você pode estendê -los a outros elementos.

Veja como funciona na prática. Você começa editando qualquer módulo no Visual Builder. Em seguida, em vez de repetir essas alterações no módulo por módulo, clique com o botão direito do mouse no módulo e escolha estender atributos.

Divi perguntará para onde você deseja que esses estilos vam. Depois de confirmar, todos os módulos correspondentes adotam os mesmos estilos. Os atributos de extensão não procuram quais correspondências, mas copia a aparência atual e a aplica ao seu alvo de escolha.

Isso o torna uma das maneiras mais rápidas de lançar mudanças de design sem microgerenciar cada bloco. Ajuda você a transformar um estilo repetitivo em uma única ação, não importa se você está construindo do zero ou renomeando um layout inteiro.

Como os atributos de extensão ajudam a rebrand um site mais rápido

Vamos percorrer como você pode usar os atributos estendidos sozinhos e também com predefinições de grupo de opções para acelerar o processo de rebranding do seu site.

Usando atributos de extensão no divi 5

O processo é simples: estilo um módulo, clique com o botão direito do mouse para escolher atributos de extensão e estender essas opções de design a todos os módulos semelhantes, sem abrir um único painel de configuração duas vezes. Vamos passar por ele usando um exemplo real.

Digamos que você deseja renomear todos os seus botões de chamada para ação. Comece estilizando um módulo de botão dentro do Visual Builder.

Depois de terminar, clique com o botão direito do mouse e selecione estender atributos. (Selecionamos atributos de design de botões Extend, pois queremos estender apenas os estilos, não o conteúdo. Você também notará muitas opções, que ajudam a micro-selecionar propriedades específicas.)

O painel de atributos de extensão será aberto e você poderá escolher entre várias opções diferentes para decidir como e onde suas alterações no design devem ser aplicadas.

• (1) Estenda -se do elemento: o módulo da qual você se estende, como o botão, no nosso caso. Isso é preenchido automaticamente com base no que você clicou com o botão direito do mouse.
• (2) Estenda -se ao local: escolha até que ponto o design deve ir. Selecionamos a página inteira , pois queremos que todos os botões da página alterem.
• (3) Estenda -se ao tipo de elemento: escolha quais tipos de módulo devem receber os novos estilos. Por exemplo, apenas módulos de botão ou todos os módulos semelhantes.
• (4) Tipo de atributo para estender: Especifique o que você deseja copiar. Escolhemos atributos de design e deixamos os outros de fora.
• (5) Grupo de opções para estender: Decida qual (s) grupo (s) opção (s) aplicar: texto, botão, borda, espaçamento, etc.
• (6) Campos modificados para estender: Você também pode limitar sua seleção a apenas uma propriedade de estilo ou escolher todos os campos modificados para estender todas as alterações que você fez.

Após selecionar suas preferências, clique em Extender atributos e os novos estilos serão aplicados a todos os outros botões da página.

Você notou como não havia necessidade de procurar valores correspondentes? Isso ocorre porque os atributos de extensão não se importam com os estilos originais. Ele copia a aparência atual do módulo selecionado e cola diretamente em todos os módulos semelhantes em seu local escolhido.

É isso que o torna tão útil para pacotes de layout e sites existentes. Os atributos de extensão fornecem controle total com um módulo com estilo e um clique, estejam ajustando os tamanhos das fontes, atualizando cores ou espaços de ajustes.

Aprenda tudo sobre os atributos estendidos

Usando predefinições de grupo de opções com atributos de extensão

Quando você está trabalhando em um site com várias páginas, não é suficiente apenas copiar os estilos visualmente. Você quer um sistema que grude, e é aí que entra predefinições.

As predefinições permitem salvar um grupo de estilos dentro de qualquer módulo e reutilizá -los em seu site. Combine isso com atributos de extensão e você terá uma maneira rápida e flexível de renomear não apenas uma página, mas todo o seu site. Essa combinação também ajuda você à prova de futuro do seu site, de modo que, se você precisar de rebra-se novamente, poderá modificar facilmente as predefinições e todos os módulos onde eles são usados ​​também serão atualizados.

Vamos voltar ao exemplo do botão para entender como isso funciona.

Tínhamos um botão denominado com um visual novo. Agora, em vez de estender as configurações como valores estáticos, os salvaremos como predefinições.

Aqui é onde entra os atributos de extensão. Quando você clica em atributos de extensão, verá as predefinições que salvaram aparecer. Selecione individualmente se desejar estender apenas predefinições selecionadas ou escolha as predefinições de botão Extender para transportar tudo.

Quando você se estende, o Divi não apenas copia a aparência; Aplica sua predefinição salva nos bastidores. Portanto, qualquer outro botão que toque agora usa a mesma predefinição.

Por que adicionar outra etapa? É aqui que à prova de futuro o seu site se beneficia. Suponha que nos próximos meses você decida ajustar o estilo do botão mais tarde. Você gostaria de estender os estilos novamente? Não, certo?

Bem, você nem precisa, porque só precisa atualizar a predefinição uma vez. Como todos os seus módulos de botão foram construídos com a mesma predefinição, todas as instâncias que o utilizam atualizam automaticamente.

Além disso, uma vez salvo, as predefinições de grupo de opções também estão disponíveis em outras páginas. Então, quando terminar de renomear sua página inicial e se mudar para outras pessoas, basta aplicar suas predefinições salvas e estendê -las em minutos.

É por isso que o uso de predefinições de grupo de opções com atributos de extensão é uma maneira mais inovadora de renomear. Você obtém consistência visual e um sistema fácil de atualizar sem refazer seu trabalho.

Aprenda tudo sobre predefinições de grupo de opções

Quer experimentar isso você mesmo? Você precisará do Divi 5, que traz atributos estendidos, predefinições de grupo de opções e muitos outros recursos para o novo construtor. Foi redesenhado desde o início para velocidade, controle e um fluxo de trabalho de design mais suave.

Como renomear um site com atributos de extensão

Agora que você viu como os atributos do Extrender funcionam e como ele combina com predefinições de grupo de opções, é hora de aplicá -lo a um site real.

Para este passo a passo, usaremos o pacote de layout de software da AI. É um site completo com páginas como casa, sobre contato e preços. Não estamos buscando uma revisão completa aqui. É apenas uma marca leve, do tipo que normalmente faríamos em nossas atualizações mensais.

Para começar, observe os elementos que definem a identidade visual do seu site, como botões, títulos, brigas e texto corporal. Esses módulos aparecem em várias páginas e carregam a maior parte da personalidade da marca. Depois de restabelecer apenas alguns deles, estender atributos permite empurrar essas mudanças em todos os lugares que aparecem.

Vamos percorrer exatamente o que atualizar.

Módulos de chave visualmente renomeados em todo o layout

Começaremos com a página inicial, pois ela define o tom para o restante do site. A maioria dos sites repita os mesmos padrões de design em várias páginas; portanto, depois de atualizar a página inicial, você terá a base para todo o resto.

Depois de digitalizar o layout, identificamos os elementos mais visíveis que moldam a aparência e a sensação da marca. São botões, títulos, bolhos, texto corporal e imagens. Como já renomeamos nossos botões, começaremos com os títulos.

Módulos de título de rebranding

Primeiro, personalize qualquer módulo de cabeçalho para refletir sua nova marca. Vou começar com o H4S.

Depois de ficar feliz com o estilo, clique com o botão direito do mouse no módulo e escolha estender atributos . Selecione o escopo para a página inteira e o tipo de módulo para texto . Aplique a alteração a todos os módulos H4 na página.

Da mesma forma, você renomeará o H1, o H2 e o H4S para unificar a tipografia e dar ao seu site uma voz consistente em apenas alguns cliques sem restabelecer cada módulo de título manualmente.

Renascer o texto corporal para melhor legibilidade

Agora vamos atualizar o texto do corpo. Comece escolhendo qualquer módulo de texto com um parágrafo. Personalize para combinar o tom da sua marca. Quando você estiver satisfeito com as alterações, clique com o botão direito do mouse no módulo e selecione Extend Atritutes . Escolha aplicar a atualização em todos os módulos de texto na página.

Isso dá aos seus parágrafos um estilo consistente em toda a página em segundos e elimina a necessidade de editar cada um individualmente.

Rebranding Blurb Borders

Em seguida, quero adicionar uma borda para otimizar todos os meus módulos Blurb. Então, vou estilizar uma coluna e clicar com o botão direito do mouse na coluna na guia Design da linha e selecionar estilos de cópia . Em seguida, cole os estilos na próxima coluna e assim por diante.

Você notará que eu mudei o layout da linha para flexionar e o Divi equalize automaticamente as alturas da coluna, mantendo os bostados alinhados, independentemente do conteúdo que eles contenham. Isso funciona porque o Divi agora suporta recursos do FlexBox, que ajudam a criar layouts responsivos e inteligentes mais rapidamente.

Rebrand outras páginas usando predefinições salvas

Agora que a página inicial é atualizada, você não precisa repetir o processo do zero. Você pode duplicar seções ou linhas em outras páginas ou, como você salvou seus novos estilos como predefinições de grupo de opções, já está definido.

Suas predefinições salvas aparecerão em todas as páginas.

Tudo o que você precisa fazer é aplicá -los quando necessário e usar atributos para empurrar os estilos instantaneamente. Não há edições manuais nem um trabalho de design repetido.

Você pode seguir o mesmo processo para renomear outras páginas em seu site.

Os atributos de estender oferecem a flexibilidade de desfrutar de rebranding novamente. Eles são ótimos quando você deseja reestar visualmente os módulos em uma página.

Mas se você precisar trocar um valor específico, como um código hexadecimal, tamanho da fonte ou unidade de espaçamento, em diferentes módulos, você deseja tentar encontrar e substituir. Funciona especialmente bem para pacotes de layout que usam valores codificados. Você pode usar o Find and Substituir para trocar aqueles com variáveis ​​de design salvas para obter mais flexibilidade para atualizações futuras.

Dica Pro: Use estender atributos com variáveis ​​de design

Extender atributos não apenas copiar estilos estáticos; Também pode transportar suas variáveis ​​de design salvas. Por exemplo, se você atribuiu uma variável de fonte de título a um módulo de texto, pode estender as configurações desse módulo a todos os outros módulos de texto na página. Em vez de cada cabeçalho transportar valores codificados, todos eles herdam a mesma variável.

Isso significa que as atualizações futuras são ainda mais fáceis: ajuste a variável uma vez no Variable Manager e todas as atualizações estendidas do módulo automaticamente. É uma maneira poderosa de combinar atributos de extensão com o sistema variável do Divi 5 para controle escalável e em toda a marca.

Estender atributos permite renomear sem reconstruir

O rebranding não precisa significar reconstruir. Com os atributos de extensão, você estilo um módulo e aplica essa aparência ao resto, cortando horas de edições até segundos.

Esteja você trabalhando com um pacote de layout ou atualizando um site ao vivo, o Divi 5 oferece a maneira mais rápida de atualizar seu design sem tocar em todos os elementos.