Como mudar para um layout escuro em 5 etapas usando os recursos de eficiência do Divi

Ao projetar um site, uma das primeiras decisões que você toma, consciente ou inconscientemente, é o estilo de cor que vai dar ao seu site. Os mais corajosos entre nós ousariam escolher uma paleta de cores vibrantes completa, mas, vamos ser honestos, isso é incrivelmente difícil de conseguir. É por isso que geralmente é mais seguro escolher um layout claro ou escuro. Na seção Premade Layouts da Divi Library, você pode encontrar uma tonelada de layouts claros e escuros que você pode usar gratuitamente ao construir qualquer tipo de site. Mas e se você gostar do layout, mas preferir uma paleta de cores mais escura ou vice-versa?

Com os recursos de eficiência do Divi, passar de um pacote de layout claro para escuro e vice-versa é mais fácil do que nunca. Neste post, vamos mostrar como você pode transformar um layout claro em escuro em apenas 5 etapas. A quantidade de tempo necessária para fazer essa transição é extremamente baixa se você estiver usando as técnicas corretas. Saiba que o número de etapas que você precisa seguir sempre dependerá do layout em que está trabalhando, mas assim que obtiver a abordagem geral, poderá fazê-lo funcionar para qualquer layout com o qual esteja lidando.

Vamos lá!

Antevisão

Em apenas 5 etapas, vamos mudar a página de destino clara do Web Freelancer Layout Pack para uma página escura.

Carregar página inicial do Web Freelancer

Adicionar uma nova página e habilitar o Visual Builder

Comece adicionando uma nova página, dando um título à sua página e mudando para o Visual Builder.

Carregar Pacote de Layout do Web Freelancer

Das três opções que aparecem na tela, escolha fazer o upload de um layout predefinido.

Encontre a página de destino do Web Freelancer Layout Pack na lista de pacotes de layout gratuitos e carregue-a clicando no botão verde que diz 'Use This Layout'.

Etapa 1: alterar a cor geral do plano de fundo

Alterar a cor de fundo da seção da primeira seção

É hora de começar! A primeira etapa que recomendamos é alterar a cor de fundo de todas as seções da sua página. Depois de fazer isso, você poderá notar rapidamente quais elementos de design precisam ser alterados para combinar com a cor de fundo escura. Abra a primeira seção da página e escolha '# 0c0c0c' como a cor de fundo da seção.

Estenda o estilo a todas as seções

Assim que você adicionar a cor de fundo, clique com o botão direito sobre ela e clique na opção 'Extend Background Color'.

Depois de fazer isso, escolha estender a cor de fundo para todas as seções da página.

Etapa 2: alterar as cores do texto

Abra o módulo do cabeçalho Fullwidth e altere a cor do texto

A próxima etapa que você precisa realizar é alterar as cores do texto que estão sendo usadas. Como você pode ou não saber, existe uma opção padrão no Divi que permite que você escolha uma paleta de cores claras ou escuras para o texto em sua página. Depois de escolher uma cor personalizada, no entanto, essa opção é substituída pela cor personalizada que você escolheu. Em vez de verificar cada um dos elementos para ver se há uma cor personalizada lá, vá em frente e escolha 'Light' como a cor do texto no Módulo de cabeçalho Fullwidth.

Estender estilo a todos os módulos

Em seguida, estenda a cor clara do texto clicando com o botão direito e selecionando a opção 'Estender cor do texto'.

Estenda essa nova cor a todos os módulos em toda a página.

Alterar cores personalizadas usando o recurso de seleção múltipla

Como mencionado antes, a etapa anterior não se aplica às cores que foram escolhidas com antecedência. Os Módulos de Alternância, por exemplo, têm uma cor de texto de título personalizada. Em vez de modificar cada um dos seletores individualmente, selecione todos eles de uma vez usando a tecla de controle / comando do teclado e clicando em cada um dos módulos individualmente. Depois de selecionar todos eles, clique no ícone de configurações.

Agora, você pode fazer alterações aplicadas a cada um dos módulos selecionados ao mesmo tempo. Nesse caso, estamos alterando a cor do texto do título para '# 848484'.

Etapa 3: botões de mudança

Abrir as configurações do botão um do cabeçalho Fullwidth

É importante certificar-se de que as frases de chamariz em sua página continuem correspondendo à paleta de cores do layout. Nesse caso, temos um Módulo de botão que fica bem em um layout claro e escuro. É por isso que vamos estendê-lo para os outros botões da página também. Vá em frente e abra o Módulo do cabeçalho Fullwidth e vá para as configurações do botão um.

Estender o estilo do botão a todos os botões da página

Em seguida, clique com o botão direito nas configurações do Button One e selecione a opção 'Estender estilos do Button One'.

Estenda o estilo do botão a todos os botões em toda a página.

Alterar a cor do texto do botão 2 na seção Hero

O recurso de extensão não alcança o segundo botão do Módulo do cabeçalho Fullwidth porque ele não é um módulo autônomo. É por isso que vamos abrir as configurações do Botão Dois e alterar a cor do texto para '#ffffff'.

Estenda estilos para todos os cabeçalhos de largura total na página

Para garantir que essa cor de texto seja aplicada a todos os Módulos de cabeçalho Fullwidth na página, vamos estendê-la também.

Depois de clicar com o botão direito na cor do texto e selecionar a opção 'Estender botão com duas cores de texto', vá em frente e aplique-a a todos os cabeçalhos de largura total em toda a página.

Etapa 4: remova a margem personalizada e substitua pelo preenchimento personalizado

Remover Margem Personalizada

Ao alternar para um layout escuro, também é importante remover todos os valores de margem personalizados que trazem espaços em branco para sua página.

Em vez disso, use preenchimento personalizado

No entanto, você pode manter a distância que existia antes, adicionando a margem personalizada como preenchimento personalizado.

Etapa 5: Pesquisar e alterar configurações de design especial

Determine as configurações de design especial

A última etapa que você precisará realizar é muito específica para cada um dos layouts. Os elementos de design exclusivos de um layout também precisam ser alterados. Isso pode incluir, mas não está limitado a, algumas das seguintes configurações:

• Sombras de caixa
• Fundos de coluna
• Cores do ícone
• Cores Divisórias
• …

Use Localizar e Substituir na Cor da Sombra da Caixa da Linha

Para este layout específico, uma das coisas que precisamos mudar é a cor da sombra da caixa de linha que está sendo usada. Abra as configurações de linha e clique com o botão direito na sombra da caixa sem alterá-la. Em seguida, selecione a opção 'Localizar e substituir'.

Usar o recurso Localizar e substituir é a melhor opção se você deseja alterar um código de cor específico em toda a página. Você pode substituí-lo facilmente por outro código de cor, neste caso '# 33302f'. Isso garantirá que você não precise explorar todos os elementos de design para ver exatamente onde uma cor foi usada.

Alterar configurações de ocorrência única manualmente

Existem, no entanto, configurações de design recorrentes únicas nos layouts também. Para alterá-los, você terá que fazer isso manualmente. A linha na tela de impressão abaixo, por exemplo, tem uma cor de sombra de caixa que não foi usada em nenhuma outra parte da página. É por isso que o estamos alterando manualmente para '# 33302f'.

Antevisão

Vamos dar uma olhada final no resultado final depois de passar pelas cinco etapas.

Pensamentos finais

Neste post, mostramos como transformar um pacote de layout claro em escuro em apenas 5 etapas. O número de etapas que você precisa seguir sempre dependerá do layout em que você está trabalhando, mas, no geral, a abordagem permanece a mesma. Se você tiver dúvidas ou sugestões, deixe-nos saber na seção de comentários abaixo!