Como transferir um novo estilo de design para outra página usando os recursos de eficiência da Divi

Esta semana, como parte de nossa iniciativa de design Divi em andamento, mostraremos como transferir um novo estilo de design para outra página usando o Pacote de Layout de Loja de Móveis da Divi. Com todos os novos pacotes de layout que estão sendo lançados, você pode querer alterar o estilo de uma página existente usando o estilo do novo pacote de layout. Em vez de substituir a página inteira, você também pode transferir o estilo de design usando os recursos de eficiência do Divi. Uma das opções mais recentes incluídas no Visual Builder é o recurso de copiar e colar entre páginas. Isso permitirá que você faça muitas alterações em todo o layout sem tocar nas configurações de um elemento de design.

Mas é claro que cada layout é único, o que significa que você também terá que aplicar algumas alterações manuais. A boa notícia é que você pode estender essas configurações manuais a elementos semelhantes na página com um clique. Esperamos que esta postagem o ajude a seguir uma certa estrutura ao transferir um estilo de design.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado.

Abordagem

As estruturas das páginas são diferentes umas das outras, por isso é difícil transferir completamente um estilo de design com um clique. Mas com Divi, você pode usar os recursos de eficiência para acelerar o processo. Vamos combinar o recurso copiar e colar de página cruzada, o recurso estender estilos e o recurso localizar e substituir para economizar tempo na transferência de um estilo de design para uma página existente, sem ter que alterar a estrutura da página.

Parte 1: abrindo duas páginas próximas uma da outra

Começaremos abrindo duas páginas uma ao lado da outra. A página existente e a nova página contendo o estilo de design que queremos aplicar. Vamos pegar a página inicial do Pacote de layout da loja de móveis (o estilo de design que queremos aplicar à página existente) e a página inicial do Pacote de layout da empresa de hospedagem (a página que queremos alterar).

Parte 2: redefinindo certas configurações de seção

A segunda parte será sobre como redefinir certas configurações de seção. As configurações que você precisa redefinir variam de layout para layout, mas geralmente incluem as configurações de fundo e as configurações do divisor.

Parte 3: Usando os recursos de copiar-colar e estender estilos entre páginas da Divi para a seção Hero

Então, podemos começar a usar o recurso de copiar e colar de página cruzada do Divi para começar a mudar as coisas. A coisa natural a fazer é começar com as seções de heróis. Mudaremos cada elemento de design na seção do herói para o novo estilo de design, copiando as configurações do novo estilo de design e colando-as na página existente. Depois de fazer isso, estenderemos esses estilos a elementos semelhantes na página.

Parte 4: Faça alterações manuais (de acordo com o layout) e use recursos de eficiência

Conforme mencionado antes, cada layout é único. É por isso que fazer alterações manuais na página existente também é necessário. Depois de fazer algumas alterações, você pode estender o estilo ou usar localizar e substituir para aplicá-lo a elementos semelhantes na página.

Parte 5: Adicionar Características de Design

Por último, mas não menos importante, você também pode adicionar certas características de design à página existente.

Parte 1: abrindo duas páginas próximas uma da outra

Criar nova página usando layout usando a página inicial do pacote de layout de loja de móveis

Agora que passamos pela parte da abordagem deste post, vamos começar a usar o Divi! Adicione uma nova página usando a página inicial do Pacote de layout de loja de móveis.

Crie uma nova página usando a página inicial do pacote de layout da empresa de hospedagem

Crie outra página usando também a página de destino do Pacote de layout da empresa de hospedagem. Vamos substituir o estilo de design desse layout pelo design da página de destino do Pacote de layout para loja de móveis.

Parte 2: redefinindo certas configurações de seção

Redefinir as configurações específicas da seção da página inicial da empresa de hospedagem

Seção Open Hero

Depois de ter os dois layouts próximos, continue abrindo as configurações da seção hero da página de destino da empresa de hospedagem.

Redefinir o plano de fundo da seção e estender para todas as seções

Vá para as configurações de plano de fundo e redefina as opções clicando com o botão direito e clicando em Redefinir plano de fundo. Depois de fazer isso, você pode estender esses estilos de plano de fundo a todas as seções da página para garantir que nenhuma seção da página contenha elementos de plano de fundo.

Redefinir divisores e estender para todas as seções

Faça o mesmo para os divisores de seção para certificar-se de que todos os divisores de seção da página sumiram.

Parte 3: Usando os recursos de copiar-colar e estender estilos entre páginas da Divi para a seção Hero

Elementos da seção Hero de copiar e colar de página cruzada

Configurações da seção

É hora de começar a usar a opção copiar-colar de página cruzada! Modificaremos cada elemento de design na seção do herói. Comece copiando os estilos da seção hero na página de destino da loja de móveis. Em seguida, volte para a página de destino da empresa de hospedagem e cole os estilos de seção copiados.

Configurações de linha

Faça a mesma coisa para a linha.

Módulo de Título de Texto

Copie também os estilos de módulo do Título do Módulo de texto e aplique-os ao título da página de destino da empresa de hospedagem.

Módulo de Corpo de Texto

Abra a descrição do Módulo de Texto a seguir e copie os estilos de texto. Depois de fazer isso, aplique-os ao Módulo de Texto na página da empresa de hospedagem.

Estender Estilos

Depois de aplicar os novos estilos de texto, vá em frente e estenda esses estilos a todos os módulos da página.

Altere as orientações do texto de volta para o centro onde for necessário

Você notará que a orientação do texto à esquerda será aplicada a todos os elementos de design em toda a página. Você pode mantê-lo assim ou alterar a orientação do texto manualmente.

Configurações de botão

O último módulo na seção de herói ao qual você precisará aplicar novos estilos de módulo é o Módulo de Botão.

Estender estilos para configurações de botão

Em vez de estender todos os estilos do Módulo de botão, estenderemos as configurações específicas do botão.

Estenda estilos para espaçamento

Junto com as configurações de espaçamento.

Estender Estilos para Sombra de Caixa

E as configurações de sombra da caixa também.

Copiar e colar os elementos restantes uma vez + Estender estilo

Divisor

Também precisaremos copiar e colar os estilos do Módulo divisor e aplicá-los aos divisores na página de destino da empresa de hospedagem.

Estender Estilos

Novamente, estenda os estilos deste módulo por toda a página.

Parte 4: Faça alterações manuais (de acordo com o layout) e use recursos de eficiência

Alterações específicas de layout

Localizar e substituir a fonte do título

É hora de começar a fazer algumas alterações manuais! A primeira coisa que faremos é combinar a fonte. Abra um Módulo de Texto na página e encontre a fonte Rubik que é usada em toda a página. Em seguida, clique em Localizar e substituir e substitua a fonte por Montserrat.

Localizar e substituir o peso da fonte do título

Faça a mesma coisa para o peso da fonte. Em vez de usar Médio, selecione Claro.

Encontre e substitua cantos arredondados

Também estamos removendo as bordas dos cantos arredondados da página usando Localizar e substituir e aplicando '0px' a cada um dos cantos da página.

Redefinir as configurações de plano de fundo do CTA e estender o estilo na seção

Continue encontrando os Módulos de frase de chamariz na página e redefina as configurações de plano de fundo do primeiro módulo. Em seguida, estenda esses estilos a todas as frases de chamariz da seção.

Encontre e substitua a cor de fundo do CTA na seção

Depois de fazer isso, a cor de fundo padrão aparecerá. Encontre e substitua esta cor e mude-a para '# 1a2545' em toda a seção.

Encontre e substitua a cor do texto do CTA na seção

Substitua a cor do texto por 'Light' em toda a seção também.

Alterar as configurações do botão da tabela de preços

Em seguida, vá para as tabelas de preços na página e altere as configurações do botão:

• Cor de fundo do botão: # ef6f49
• Largura da borda do botão: 8 px
• Cor da borda do botão: # ef6f49
• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: 2 px (padrão), 1 px (pairar)
• Fonte do botão: Montserrat
• Peso da Fonte: Semi Negrito
• Estilo da fonte: maiúsculas
• Alinhamento do botão: Esquerda

Estenda estilos para tabelas de preços e módulos CTA

Estenda a nova configuração de botão para todas as tabelas de preços e Módulos de Chamada para Ação em toda a página.

Parte 5: Adicionar Características de Design

Cor de fundo da seção # 1

Na última parte deste tutorial, vamos adicionar manualmente algumas características de design. Isso inclui, mas não está limitado a, configurações de plano de fundo. Abra a seção marcada na tela de impressão abaixo e mude a cor de fundo.

• Cor de fundo: # f7f3ec

Cor de fundo da seção # 2

Faça o mesmo para a seção abaixo.

• Cor de fundo: # f7f3ec

Seção Gradiente de Fundo # 1

Em seguida, encontre a seção na tela de impressão abaixo e adicione um fundo gradiente.

• Cor 1: #ffffff
• Cor 2: # 1a2545
• Direção do gradiente: 90 graus
• Posição inicial: 55%
• Posição final: 55%

Fundo do gradiente da seção # 2

Use outro fundo gradiente para a seção abaixo:

• Cor 1: rgba (210.218.228,0.38)
• Cor 2: #ffffff
• Direção do gradiente: 90 graus
• Posição inicial: 45%
• Posição final: 45%

Seção Gradiente de Fundo # 3

Por último, mas não menos importante, adicione um fundo gradiente linear à última seção da página também.

• Cor 1: #ffffff
• Cor 2: # f7f3ec
• Posição inicial: 40%
• Posição final: 40%

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado.

Pensamentos finais

Neste post, mostramos como você pode transferir o estilo de design de um layout usando os recursos de eficiência do Divi. Este tutorial tira proveito do novo recurso copiar e colar de página cruzada que faz parte do novo Visual Builder. Este tutorial é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Se você tiver dúvidas ou sugestões, certifique-se de deixar uma seção de comentários abaixo!