Maneiras mais rápidas de atualizar o design da sua página com o Divi 5

O Divi 5 apresenta um punhado de novas ferramentas inteligentes para ajudá -lo a trabalhar mais rapidamente e projetar mais livremente. Mas com tanta energia na ponta dos dedos, é fácil sentir -se inseguro sobre por onde começar, especialmente ao atualizar um layout existente.

Você provavelmente já sabe como ajustar o espaçamento, ajustar as cores e limpar layouts, então este post não é reaprender o básico. Trata -se de fazê -los mais rapidamente com o Divi 5. Nas etapas abaixo, passamos por um fluxo de trabalho de atualização prático que você pode seguir em qualquer página existente. E se mudanças recentes se sentiram impressionantes, comece aqui. Você entrará com clareza e confiança.

8 etapas para atualizar o design da sua página com o Divi 5

Para este tutorial, estamos usando a página de destino do Business CV na biblioteca do Divi Layout Pack.

Inscreva -se no nosso canal do YouTube

Avançaremos como atualizar a página usando as novas ferramentas do Divi 5, como encontrar e substituir, projetar variáveis e estender atributos, para acelerar seu fluxo de trabalho e reduzir edições repetitivas. Vamos começar.

1. Otimize seu painel para edição sem distração

Até pequenas interrupções podem quebrar seu foco ao atualizar um layout. Você pode pular entre as seções, abrindo repetidamente as configurações e perdendo a noção de onde parou. Esses tipos de atrasos aumentam rapidamente, especialmente em páginas mais longas ou mais complexas.

O Divi 5 ajuda a reduzir esse atrito com um ambiente de edição mais flexível. Você pode encaixar os painéis para manter as configurações das chaves visíveis, abrir vários módulos nas guias e usar o painel de camadas para navegar no layout sem rolagem interminável. Em vez de clicar e sair dos módulos, você pode manter tudo aberto e acessível à medida que se move.

O painel de camadas fornece uma visão geral completa do layout, para que você possa pular instantaneamente para qualquer seção, linha ou módulo apenas clicando. É especialmente útil para pular em grandes páginas sem rolar.

Anteriormente, o fluxo de trabalho geralmente significava abrir um módulo, salvá -lo, rolar novamente, abrir o próximo e repetir esse ciclo. Divi 5 pula tudo isso. Você pode abrir vários módulos de costas; Cada um permanece visível como uma guia em seu painel de edição. Isso facilita a comparação de configurações ou alternância entre os elementos sem fechar e reabrir as configurações de elementos repetidamente.

Pode levar algum ajuste para se acostumar com o novo fluxo de trabalho. Como os painéis se comportam de maneira diferente, a alternância entre os módulos não parecerá uma segunda natureza imediatamente. Mas dê um pouco de prática, e essas pequenas mudanças começam a aumentar.

Enquanto você segue as etapas abaixo, tente trabalhar com painéis de maneira diferente, atracar alguns, empilhe algumas guias ou mantenha o painel de camadas aberto. Você começará a sentir o que funciona melhor para o seu fluxo.

2. Defina suas variáveis de design global primeiro

Quando você está gerenciando um layout completo, a última coisa que você deseja é se repetir. Mas é exatamente isso que acontece quando todo estilo é definido manualmente dentro de cada módulo. Pode funcionar no início, mas com o tempo, sua página se transforma em uma retalhos de opções desconectadas. Eventualmente, algo sempre é perdido.

As variáveis de design ajudam você a evitar isso. Eles lhe dão um lugar central para definir sua linguagem de design. Você define valores reutilizáveis para fontes, cores, espaçamento, imagens, URLs ou links. Uma vez aplicado, esses valores permanecem vinculados a todos os módulos que os utilizam.

Aqui está um exemplo simples. Digamos que você queira que todos os seus títulos usem a fonte Lato. Em vez de escolher o LATO em todos os módulos, você cria uma variável de fonte . Dê um nome, selecione Lato e salve -o. Qualquer cabeçalho que você está ligado a essa variável agora permanecerá sincronizado.

Se você deseja mudar para uma fonte diferente posteriormente, basta atualizar a variável. Todo módulo conectado refletirá automaticamente a alteração.

E isso é apenas um caso de uso. Você também pode definir variáveis para preenchimento de seção consistente, estilos de botões, cores de fundo ou qualquer outra coisa que você use repetidamente. Você não precisa definir tudo de uma vez, se parecer impressionante demais. Comece com os estilos que você sabe que você reutiliza e expanda seu sistema de design a partir daí.

3. Substitua os valores estáticos por variáveis de design

Às vezes, os layouts têm estilos codificados, portanto, atualizá-los manualmente torna o processo inconsistente. É por isso que substituímos os valores estáticos pelas variáveis globais que acabamos de definir.

Você não precisa caçá -los individualmente. A ferramenta de localização e substituição da Divi facilita a troca de valores estáticos para variáveis em apenas alguns cliques. Digamos que seus títulos usam fontes selecionadas manualmente. Abra qualquer módulo de cabeçalho, clique no campo da fonte e selecione Find & Substituir.

No painel de valores de substituição , passe o mouse sobre o campo e abra o gerenciador de variáveis . Selecione sua variável de fonte de títulos todos os títulos e confirme a alteração.

Você verá a mágica imediatamente: todas as instâncias dessa fonte no layout são substituídas imediatamente. Esse mesmo método funciona para cores, espaçamento, estilos de botões e qualquer coisa para a qual você definiu uma variável.

E você não precisa mudar tudo de uma vez. Inicie os estilos pequenos, escolha você mais reutiliza, como o preenchimento da seção ou os fundos dos botões, e trocam -os de primeiro. À medida que avança, o layout muda de uma retalhos de edições manuais para um sistema totalmente conectado. E quando esse sistema está em vigor, todas as mudanças futuras se tornam mais fáceis, mais rápidas e mais consistentes por padrão.

4. Use os atributos estendidos para aplicar atualizações em segundos

Uma vez que seus valores globais estiverem em vigor, o próximo passo é o refinamento. Muitas vezes, você se vê fazendo pequenos ajustes em seções individuais e desejando poder levar essas alterações para o restante do layout sem refazer o trabalho. É possível com atributos de extensão.

Ele permite copiar instantaneamente estilos, conteúdo ou predefinições de um elemento e aplicá -los a outros. Também funciona mesmo que os módulos não sejam do mesmo tipo. Por exemplo, se você projetou uma borda e sombra personalizadas para uma imagem, pode usá -la como referência para cada imagem da seção.

Clique com o botão direito do mouse na imagem estilizada e escolha estender atributos.

Quando o painel de extensão abrir, anche -o para o lado, pois você provavelmente voltará a ele. Nos suspensos, defina o escopo como seção pai e o tipo de elemento como imagem e depois confirme.

Essa ação aplica sua atualização a todas as imagens nessa seção, sem precisar tocá -las individualmente.

E é aí que os atributos de extensão realmente ganham seu lugar. É preciso o que teria sido uma série de edições manuais e repetitivas e as transforma em um movimento consistente. Você pode usá -lo para seções com várias colunas ou módulos semelhantes, como uma galeria de imagens ou bordados. É a maneira mais rápida de trazer uma sensação de polimento ao seu design sem queimar o tempo em todos os módulos.

5. Salvar edições reutilizáveis como predefinições de grupo de opções

Ao refinar seu layout, você provavelmente ajusta o espaçamento, as fronteiras ou as cores de fundo para acertar as coisas. Em vez de repetir esses ajustes todas as vezes, salve -os como predefinições de grupo de opções.

Digamos que você personalizou o espaçamento, a fronteira e o fundo de uma coluna. Você gosta da aparência e quer reutilizá -lo em outro lugar. Abra as configurações dessa coluna, role para o grupo de estilo que você modificou (como espaçamento ou borda) e clique no ícone Predefinir para salvá -lo.

Para aplicar a predefinição a outras colunas, clique com o botão direito do mouse no original e escolha estender atributos> estender predefinições de colunas . No painel, defina seu escopo para a linha dos pais, escolha a coluna como o tipo de elemento e pressione os atributos de extensão.

Essa predefinição agora se aplica a todas as colunas da linha em uma movimentação. É especialmente útil para layouts com elementos repetidos, como tabelas de preços, bogos, depoimentos ou em qualquer lugar que você queira consistência visual sem o esforço manual. E como as predefinições são salvas no pacote de layout, você também os terá prontos para usar em outras páginas.

6. Use cópia/pasta para alterações rápidas únicas

Depois de estender os estilos a uma seção ou linha completa, você ainda pode fazer pequenos ajustes direcionados. Talvez apenas uma coluna ou módulo precise de uma aparência um pouco diferente. Em vez de estender as predefinições novamente, use o recurso de gerenciamento de atributos.

Por exemplo, se você personalizou a fronteira e a sombra de uma coluna e deseja que apenas um ou dois outros correspondam, clique com o botão direito do mouse na coluna estilizada e escolha copiar estilos de itens . Em seguida, clique com o botão direito do mouse na coluna que você deseja atualizar e selecionar os estilos de itens de pasta .

Isso não substituirá outras configurações e funciona instantaneamente, tornando -o ideal para situações em que você deseja se manter flexível. Você pode copiar e colar estilos de quase qualquer elemento e decidir exatamente o que copiar, seja espaçamento, cores, bordas ou outros ajustes de design.

A estender atributos lida com as edições em massa e copiar/colar lida com os detalhes. É perfeito para ajustar um layout que é feito principalmente, mas ainda precisa de alguns toques pessoais.

7. alterne entre pontos de interrupção personalizados para aperfeiçoar a visão responsiva

Verifique se o layout da sua área de trabalho fica ótimo em cada tamanho de tela. Os pontos de interrupção personalizáveis do Divi 5 facilitam isso, permitindo alternar entre tablet, telefone e até larguras de tela personalizadas com um único clique. Os ícones do dispositivo estão dentro do construtor, para que você possa visualizar rapidamente como suas seções se comportam em telas menores.

Se necessário, você também pode definir seus próprios pontos de interrupção para obter mais controle.

Este é o momento perfeito para verificar o espaçamento, os tamanhos das fontes e o alinhamento da imagem. Leva apenas alguns minutos, mas o salva de problemas maiores de layout posteriormente, especialmente em páginas pesadas de conteúdo ou conversão. E você não precisa alterar seu fluxo de trabalho. As ferramentas Divi funcionam tão bem na visão responsiva; portanto, faça seus ajustes, visualize o layout e siga em frente.

8. Atualize suas variáveis de design para atualizar todo o layout instantaneamente

Anteriormente, configuramos suas variáveis de design global e substituímos os valores estáticos usando o encontro e a substituição. E agora seu layout está totalmente conectado a um sistema de design centralizado.

As variáveis de design tornam extremamente fáceis as atualizações em todo o site. Digamos que sua marca atualize sua tipografia ou cor principal. Em vez de cavar cada módulo para fazer as mesmas alterações repetidamente, basta atualizar a variável salva. Essa alteração se aplica instantaneamente em todo o seu layout.

Para ver isso em ação, dê uma olhada nesta comparação lado a lado. A estrutura do layout permanece a mesma, mas o processo por trás dela se torna dramaticamente mais simples e mais rápido.

Agora pense em como isso escala. Imagine todo o seu site, todas as páginas e seções, construídas no mesmo sistema. Você não está mais refazendo suas etapas para cada alteração. Um único ajuste em uma variável atualiza tudo. Você está gerenciando toda a sua marca, gerenciando valores por meio do Variable Manager.

Esse tipo de flexibilidade é exatamente para o que o Divi 5 foi projetado. Não se trata apenas de edições mais rápidas, mas de reduzir a repetição, aumentar a precisão e dar mais controle com menos esforço.

Personalize seu fluxo de trabalho Divi 5

Até agora, você já viu como ferramentas como variáveis de design, atributos de extensão e predefinições de grupo de opções podem remodelar como você atualiza os layouts. Mas não há uma maneira única de usá -los.

Este passo a passo é apenas uma versão do processo. Você pode seguir as etapas em uma ordem diferente, pular alguns ou misturá -las em sua própria rotina. E tudo bem, pois o objetivo não é seguir uma fórmula, mas encontrar um ritmo que parece natural e se encaixa na maneira como você gosta de trabalhar.

Experimente um pouco. Quanto mais você brinca com as ferramentas, mais começará a reconhecer o que funciona melhor para o seu fluxo. Se as coisas parecem mais suaves, suas atualizações são mais rápidas e seu design permanece consistente, esse é o seu sinal de que está funcionando.

E se você está se perguntando se essas ferramentas podem acompanhar à medida que seu fluxo de trabalho evolui, elas absolutamente podem porque ...

Divi 5 foi projetado para se adaptar à sua maneira de trabalhar

Esse é o pensamento por trás de todos os recursos que cobrimos. Se você gosta de definir todos os estilos antecipadamente ou fazer alterações à medida que constrói, as ferramentas se adaptam à forma como você prefere funcionar.

Você pode se mover rapidamente ou levar seu tempo. Comece a partir de uma página em branco ou refine um layout existente. O construtor não o force a um fluxo de trabalho rígido. É construído para reduzir o trabalho ocupado, ignorar edições repetitivas e ajudá -lo a se concentrar no que realmente importa: projetar com clareza, velocidade e confiança.

Por fim, trata -se de construir um processo que se parece com o seu e o acompanha à medida que seus projetos e idéias crescem. Você está pronto para criar um fluxo de trabalho de design que melhora com você?