Como usar Divi para criar maquetes de esquemas de cores diferentes para suas páginas

Criar maquetes de esquema de cores para seus clientes é uma etapa importante no processo de design da web. Às vezes, o cliente pode já ter uma paleta de cores da marca da empresa que você pode usar para o site. Mas, muitas vezes, você precisará oferecer alguns esquemas de cores sugeridos que você acha que se encaixam na marca da empresa e têm uma ótima aparência em seu site.

Com o Divi, você pode alterar facilmente o esquema de cores de qualquer layout de página usando recursos de design como Localizar e substituir e sugestões de cores no construtor visual. E você também pode criar várias versões de uma página (com diferentes esquemas de cores) para o seu cliente.

Neste tutorial, vou orientá-lo no processo de uso do Divi para criar novas maquetes de esquema de cores para uma página inicial. Esperançosamente, você aprenderá alguns truques ao longo do caminho.

Vamos começar!

Configure sua nova página

Vou usar o layout da página inicial do Business Coach para este tutorial. Portanto, se ainda não o fez, crie uma nova página e implante o construtor visual. Em seguida, selecione “Choose Premade Layout”. No pop-up Incluir da Biblioteca, selecione o layout da página inicial do Business Coach.

Assim que o layout for carregado na página, não se esqueça de publicá-lo.

Usaremos este layout de página inicial para criar modelos de esquemas de cores diferentes. Mas, por enquanto, precisamos escolher um novo esquema de cores.

Escolhendo seu esquema de cores

Você pode já ter um esquema de cores em mente, mas se não tiver, você pode usar as sugestões de cores do Divi ou um gerador de esquema de cores de terceiros. Para obter mais inspiração, você pode navegar na web em busca de esquemas de cores que funcionem bem para o seu setor.

Usando geradores de esquema de cores de terceiros para criar seu esquema de cores

Existem excelentes geradores de esquemas de cores de terceiros (e gratuitos) na web para ajudá-lo a escolher o esquema de cores perfeito para o seu site. Alguns dos meus geradores de paleta de cores favoritos são da Coolers.co, Canva e Adobe.

A maioria desses geradores de esquema de cores gerará pelo menos cinco cores. Certifique-se de salvar todas as cores necessárias para criar seu novo esquema de cores.

Criando um esquema de cores usando as sugestões de cores integradas do Divi

Desde o lançamento do novo gerenciador de cores e sugestões de cores mágicas do Divi, o Divi rastreia automaticamente suas cores salvas e usadas recentemente, que podem ser acessadas ao alterar uma opção de cor no Divi Builder. Você pode visualizar cada paleta clicando na guia “Salvo” ou “Recentes”.

Divi também tem uma ferramenta de sugestão de cores simples e inteligente integrada no construtor visual. Não vou entrar em todos os detalhes do algoritmo usado (não tenho certeza se poderia de qualquer maneira), mas em termos gerais, Divi irá gerar uma paleta de cores complementares (e análogas) com base na cor base atual (a cor selecionado na opção). Isso ajudará você a escolher combinações de cores harmoniosas para o seu design.

Para visualizar as sugestões de cores (ou escala de cores), basta clicar no ícone de escala de cores (aquele com três pontos) diretamente sob a opção de cor selecionada. Lá você encontrará paletas que são geradas a partir de cores complementares e análogas de suas cores salvas e usadas recentemente. Cada linha tem um novo esquema de cores expandido para cada cor em sua paleta de cores recente ou salva.

Embora essa ferramenta de sugestão de cores seja projetada para ajudar na seleção de cores no nível de seção, linha e módulo, você pode usar facilmente a paleta de cores sugerida como um novo esquema de cores para cada página.

Criação de um esquema de cores para o layout da página inicial do Business Coach

Agora vamos começar a criar novos modelos de esquema de cores para o layout da página inicial do Business Coach que adicionamos à nossa nova página anteriormente. Este layout predefinido atualmente tem um esquema de cores básico. A cor principal é obviamente o azul escuro que está sendo usado por toda parte. Ele também tem alguns tons diferentes de cinza como cores de destaque também. Também é uma cor branca padrão para fundos de conteúdo e uma cor preta usada para texto. Portanto, você pode imaginar que, se substituir todas as ocorrências dessa cor azul-escura primária por outra cor, terá um esquema de cores completamente novo.

No construtor visual, abra a configuração do cabeçalho de largura total na seção superior do layout e localize a cor de texto do botão um. Esta é a cor azul primária que este layout está usando. Agora clique no ícone de escala de cores para ver as sugestões de cores para a cor azul atual. Eles serão encontrados na paleta de cores da linha superior.

Neste ponto, você pode selecionar qualquer cor da paleta para ver os novos esquemas de cores, mas, para este exemplo, vou ficar com o primeiro gerado.

Salvando seu esquema de cores na paleta de cores padrão

Para tornar as coisas muito mais convenientes no futuro, você desejará atualizar as novas cores da paleta de cores para substituir a paleta padrão dos seletores de cores nas opções de tema. Dessa forma, suas cores estarão disponíveis na paleta de cores salva no Visual Builder durante o restante das alterações de cor.

Em uma nova guia, navegue até Divi> Opções de tema. Você verá a opção de paleta de cores padrão na guia Geral. Não existe uma maneira realmente fácil de copiar a paleta de cores gerada a partir das sugestões de cores para a nossa cor azul. Eu sugiro abrir sua página com o construtor visual ativo em uma janela e as opções do Divi Theme em outra janela. Em seguida, copie cada código de cor para a paleta de cores padrão.

Salvar configurações.

Dica: Você pode não querer substituir as duas primeiras cores padrão (preto e branco) para a conveniência de editar texto e planos de fundo posteriormente, mas se precisar de todos os slots de cores, sinta-se à vontade para usá-los.

A paleta de cores padrão não será atualizada na página atual, pois ela já herdou a paleta de cores padrão anterior. Você precisará criar uma nova página com o layout novamente para ver a nova paleta de cores salva em suas configurações.

Se isso for muito inconveniente, você pode optar por atualizar a paleta de cores padrão apenas para a página atual. Para fazer isso, abra o menu de configurações e clique no ícone Configurações da página. Em seguida, atualize a paleta na guia de design.

Isso atualizará a paleta de cores de toda a página sem ter que criar outra página.

O motivo pelo qual escolhi atualizar a paleta de cores padrão para o tema (em vez de apenas a página) foi para evitar a necessidade de adicionar novas paletas de cores a cada nova maquete de página que vou criar.

Usando Localizar e substituir para atualizar as cores da página

Agora volte para o layout da página inicial com seu construtor visual ativo e vá para a opção Button One Text Color nas configurações de cabeçalho de largura total (o mesmo lugar que você estava antes). Agora seu layout salvo não está aparecendo ainda, mas tudo bem. Certifique-se de que a cor azul escuro original esteja selecionada e, em seguida, clique no ícone de escala de cores para espalhar as sugestões de cores. Isso mostrará nosso mesmo esquema de cores na linha superior.

Selecione a cor marrom escura (# 54381c).

Em seguida, abra o seletor de cores para visualizar o código de cores e copie o código de cores para a área de transferência, destacando-o e pressionando ctrl + C (ou Cmd + C).

Como não queremos fazer a alteração ainda, clique no botão desfazer roxo na parte inferior do modal de configurações para trazer de volta a cor azul original que precisamos substituir.

Agora clique com o botão direito na cor azul original e clique na opção Localizar e Substituir.

No pop-up Localizar e substituir, cole a cor marrom em “Substituir por”. Como queremos substituir a cor em toda a página, você pode manter a opção “Dentro” como “Esta página”. Certifique-se e selecione a opção “Substituir tudo” para que o escopo da mudança de cor não se limite apenas às cores de texto do botão um. Em seguida, clique em Substituir.

Não se esqueça de salvar suas configurações.

Agora verifique o novo esquema de cores.

Agora vá em frente e salve o layout em sua biblioteca Divi abrindo o menu de configurações e clicando no ícone Salvar na biblioteca. Dê ao layout um nome como “Marrom” e clique em Salvar na Biblioteca.

Isso permitirá que você implante essa versão do seu layout em uma nova página.

Adicione seu novo layout de esquema de cores a uma nova página

Para adicionar seu layout salvo com seu novo esquema de cor marrom a uma nova página, primeiro você precisará criar uma nova página. Em seguida, dê um título à sua página (algo como “Marrom”) e implemente o construtor visual. Em seguida, selecione Escolher um layout predefinido. No pop-up Carregar da biblioteca, clique na guia “Seus layouts salvos” e selecione o novo layout que você acabou de salvar em sua biblioteca.

Não se esqueça de publicar sua página.

Agora repita o mesmo processo de criar uma nova página e adicionar o layout salvo à página. Desta vez, nomeie sua página “Roxo”.

Depois que o layout for adicionado à página, certifique-se de publicá-lo. Em seguida, abra o construtor visual e abra as configurações Fullwidth Header e encontre a cor de texto do botão uma (como antes). Agora você deve ver que a paleta de cores do tema salva foi atualizada com suas novas cores. Isto virá a calhar. Clique com o botão direito na opção de cor (atualmente o marrom escuro) e clique em localizar e substituir. Abra o seletor de cores em “Substituir por” para selecionar uma nova cor na paleta de cores salva. Desta vez, selecione a cor roxa (# 5a5ae2). Em seguida, selecione a opção substituir tudo. E não se esqueça de salvar suas configurações.

E como mágica, você tem um esquema de cores roxas para sua página!

Criação de um modelo de página de esquema de cores avançado

Com seu novo esquema de cores disponível, você pode experimentar várias cores em sua página. Por exemplo, você pode escolher uma cor diferente para cada seção de sua página. Isso também pode ser feito facilmente com o recurso “Localizar e substituir”.

Para esta próxima maquete, crie uma nova página e nomeie sua página com algo como “Multicolor”. Em seguida, implemente o construtor visual, selecione “Escolha um layout predefinido” e importe o mesmo layout salvo (marrom) para a página (exatamente como você fez antes). No construtor visual, abra as configurações Fullwidth Header e encontre a cor de texto do botão um (como antes). Clique com o botão direito no botão One Text Color e selecione “Find & Replace”. Em seguida, atualize o seguinte:

Dentro de: Esta seção
Substituir por: # 0f1f2e
Selecione Substituir Tudo

Em seguida, clique no botão Substituir.

Não se esqueça de salvar as configurações.

Isso é atualizado na seção de cabeçalho superior com o esquema de cores azul escuro.

Agora pule a segunda seção (pode manter o esquema de cores marrom) e vá para a terceira seção. Encontre o botão na parte inferior da seção com o título “Ainda não tem certeza? Entrar em contato". Abra as configurações do botão, clique com o botão direito na cor de fundo do botão e selecione “Localizar e substituir”.

Em seguida, atualize o Find & Replace da seguinte forma:

Dentro de: Esta seção
Substitua por: # 366ba2
Selecione Substituir Tudo

Em seguida, clique no botão substituir. E não se esqueça de salvar as configurações.

Pule a quinta seção. Em seguida, repita o mesmo processo para substituir a cor marrom na seção 6 (aquele com “Empresas e pessoas com quem trabalhei”) pela mesma cor azul escuro na primeira seção. Você pode fazer isso abrindo o módulo de texto com aspas grandes na opção Cor do texto do texto.

Na última seção, encontre o módulo de texto na coluna da direita e abra as configurações do módulo de texto. Clique com o botão direito na cor de fundo e selecione a opção Pesquisar e substituir. Atualize o seguinte:

Dentro de: Esta seção
Substituir por: # 5a5ae2 (a cor roxa)
Selecione Substituir Tudo

Em seguida, clique no botão Substituir e salve as configurações.

Agora você tem uma maquete de página inicial com várias cores em cada seção.

Criando um menu para visualizar cada modelo de esquema de cores

A última etapa é criar um novo menu principal para facilitar aos clientes a visualização de cada modelo de esquema de cores. No painel do WordPress, navegue até Aparência> Menus. Em seguida, dê a você um título para o menu, clique em criar menu e adicione as páginas que você criou ao novo menu. Em seguida, certifique-se de selecionar Menu principal como seu local de exibição. E clique em Salvar menu.

Agora você tem um site pronto para mostrar suas maquetes de esquema de cores.

Pensamentos finais

Com as opções de design do Divi, você pode implantar facilmente esquemas de cores totalmente novos para seus layouts de página usando sugestões de cores integradas e a opção “Localizar e substituir” com o Construtor Visual. Isso o tornará conveniente para exibir modelos de esquemas de cores diferentes para seus clientes. Espero que este tutorial ajude você a encontrar o esquema de cores perfeito para seu próximo projeto. Estou ansioso para ouvir de você nos comentários.

Saúde!