10 etapas para usar um novo pacote de layout Divi para seu próximo projeto

Como parte da Iniciativa de Design Divi de Elegant Themes, Kenny e a equipe de design têm nos oferecido pacotes de layout Divi GRATUITOS todas as semanas. Os pacotes de layout podem ser baixados da postagem do blog que apresenta o pacote de layout todas as segundas-feiras. Muitos de vocês usaram os pacotes de layout para construir novos sites em uma fração muito pequena do tempo que normalmente levariam.

No post de hoje, vou mostrar como tirar o máximo proveito desses layouts, oferecendo 10 etapas principais a serem seguidas ao usar um novo pacote Divi Layout para seu próximo projeto. Também incluí algumas dicas não tão conhecidas para lidar com esses layouts como um profissional.

Aproveitar!

Nota: Como todas as etapas, essas devem ser realizadas na ordem em que estão listadas. Por exemplo, se você não definir a paleta de cores padrão primeiro, ela não estará disponível quando você alterar a cor de destaque padrão.

10 etapas para usar um novo pacote de layout Divi para seu próximo projeto

Inscreva-se no nosso canal no Youtube

# 1 Importe os layouts para sua biblioteca Divi primeiro

A melhor maneira de adicionar novos layouts ao seu Tema Divi é importá-los primeiro para a Biblioteca Divi. Então, ao criar uma nova página, você pode adicionar o novo layout de sua biblioteca.

Antes de adicionar os layouts ao seu site, você precisa fazer o download do pacote de layout da postagem do blog e descompactar o arquivo.

No painel do WordPress, vá para Divi> Divi Library e clique no botão Import & Export no canto superior esquerdo da página. No modal de portabilidade que aparece, selecione a guia de importação e clique em escolher arquivo. Encontre a pasta do pacote de layout descompactado e selecione o arquivo json com “All” no nome do arquivo. Isso fará o upload de todos os layouts para sua biblioteca de uma vez, em vez de ter que fazer cada um deles individualmente. Por exemplo, se você deseja fazer upload do pacote de layout de moda, escolha o arquivo denominado Fashion_All.json na pasta de layout. Em seguida, clique em Importar layouts do Divi Builder.

# 2 Adicionar layouts a novas páginas

Este processo é bastante direto. No painel do WordPress, vá para Pages> Add New. Digite o título da página que você precisa criar. Clique para usar o Divi Builder e implantar o Visual Builder. Abra o menu de configurações na parte inferior da página e clique no ícone de adição “Carregar da biblioteca” à esquerda. No modal Carregar da Biblioteca que aparece, clique na guia “Adicionar da Biblioteca” e selecione o novo layout da lista para carregar o novo layout.

Repita esse processo para cada nova página, adicionando um novo layout a cada uma.

# 3 Crie seu menu principal

Se esta for uma nova instalação, você começará a ver essas novas páginas em sua barra de menu principal no cabeçalho superior. Isso ocorre porque você ainda não criou um menu principal, portanto, por padrão, seu menu será preenchido por todas as páginas e postagens que você adicionar ao seu site.

Para criar seu menu principal, vá para o painel do WordPress e faça o seguinte:

1. Navegue até Aparência> Menus.
2. Selecione o link “Criar um novo menu” na parte superior da página.
3. Insira um nome de menu.
4. Selecione seus itens de menu no botão esquerdo em Páginas.
5. Clique em Adicionar ao Menu
6. Organize seus itens de menu arrastando-os para o lugar.
7. Em Configurações do menu na parte inferior da página, selecione “menu principal” como o local de exibição.
8. Salvar menu

# 4 Defina sua paleta de cores padrão

Muitas vezes me esqueço de fazer essa etapa e me arrependo todas as vezes. Definir sua paleta de cores padrão torna realmente conveniente editar cores usando o Divi builder. Eu não posso te dizer quantas vezes eu tenho que voltar para outro módulo para encontrar um código de cor, ou inspecionar um item usando ferramentas de desenvolvedor, ou usar minha extensão do navegador de conta-gotas apenas para encontrar a mesma cor que usei e mais uma vez. Não faça isso consigo mesmo!

Você pode definir a paleta de cores padrão acessando o painel do WordPress e navegando até Divi> Opções de tema. E ali mesmo, na guia geral, você encontrará a opção listada. Adicione as cores de que você precisa. É sempre uma boa ideia manter a cor branca (#ffffff) e algumas cores escuras (como # 333333 ou o que você definiu para a cor de fonte escura) para serem usadas para definir o estilo de fundos e texto facilmente.

Nº 5 Defina sua cor de destaque global

Provavelmente, você encontrará o Customizador de Tema bem no início do processo de personalização de seu novo site. Ao fazer isso, você deve alterar a cor de destaque global primeiro.

Para alterar sua cor de destaque global, vá para o Customizador de tema e navegue até Configurações gerais> Configurações de layout e encontre a opção Cor de destaque do tema na parte inferior.

Observe as novas cores disponíveis para você na paleta de cores desde que você atualizou a paleta de cores padrão em suas Opções de Tema.

Então, depois de alterá-lo, salve e publique suas configurações e atualize sua página.

A cor de destaque do tema atualizada será aplicada a cerca de 20 outros elementos automaticamente, por isso é importante atualizá-la primeiro.

Alguns dos elementos que são atualizados automaticamente incluem:

Cor do Link do Corpo
Cor do cabeçalho do widget
Cor do marcador do widget
Cor flutuante dos ícones sociais do rodapé
Cor padrão para ícones
Cor do link ativo do menu do rodapé
Cor de fundo do menu secundário
Slide In e cor de fundo do estilo do cabeçalho em tela cheia
Ícone de menu de hambúrguer para a cor do menu móvel
Cor do link ativo do menu principal
Cor da linha do menu suspenso
Cor de fundo do menu secundário
Cor de fundo do menu suspenso secundário
Cor de fundo do menu secundário
Cor do link do menu principal ativo
Cor do link ativo do menu do rodapé

Se você não vir que as alterações entram em vigor nesses elementos imediatamente, pode ser necessário salvar e sair do personalizador, atualizar a página e voltar para o personalizador.

# 6 Estilize seu cabeçalho

Você pode estilizar seu cabeçalho no Customizador de Tema. Basta ir para o painel do WordPress e navegar até Divi> Personalizador de temas> Cabeçalho e navegação.

Definitivamente, você precisará estilizar seu cabeçalho para combinar com seus novos layouts. Primeiro, eu decidiria sobre o estilo de cabeçalho que você deseja primeiro (padrão, largura total, centralizado, etc ...), mas o que você escolher, certifique-se de combinar o estilo de seu cabeçalho com seus novos layouts. E certifique-se de que os itens do menu sejam fáceis de ler e navegar.

Você tem opções para os menus de navegação principal, secundário e fixo. Reserve um tempo para definir o estilo de tudo o que se aplica ao seu site.

Se você definir sua cor de destaque global, algumas das configurações de cores do cabeçalho serão alteradas para você. É por isso que é importante definir essa cor primeiro.

# 7 Estilize sua barra inferior

Você pode estilizar sua barra inferior também no Customizador de Tema. Basta ir para o painel do WordPress e navegar até Divi> Personalizador de temas> Rodapé> Barra inferior.

A barra inferior não deve ser negligenciada. Combinado com a barra de navegação na parte superior da página, torna-se um suporte de livro necessário que enquadra a página inteira. Claro, o fundo preto padrão pode muito bem "funcionar" em qualquer site, mas eu faria experiências com ele um pouco mais. Às vezes, gosto de dar à barra inferior uma cor de fundo que é um tom ligeiramente mais escuro da cor de fundo da seção de rodapé localizada diretamente em cima dela.

# 8 Use atalhos para fazer alterações de design no layout da página

Como seus layouts vêm com configurações de design embutidas em seus módulos, fazer alterações em suas configurações de design em uma escala global (em todo o site) pode ser um pouco tedioso. Mas existem alguns truques para acelerar o processo. Para começar, eu faria alterações no layout de uma página primeiro. Dessa forma, você pode salvar elementos da página editada para adicionar às suas outras páginas que precisam de alterações de design. Aqui estão alguns truques para acelerar o processo de fazer alterações de design em um determinado layout.

Usando opções de clique com o botão direito

Não se esqueça de que você pode usar as opções de clique com o botão direito para copiar e colar estilos de módulo de um módulo para o outro, desde que seja do mesmo tipo.

Restaure os Padrões para que você possa controlá-los usando o Customizador de Tema

Atualmente, existem certas configurações disponíveis para módulos que não são personalizáveis ​​pelo personalizador de tema (como a sombra da caixa, por exemplo). Como regra geral, o Customizador de Tema mudará tudo o que for deixado para a configuração padrão dentro de um módulo, se essa configuração estiver disponível no customizador. Mas, para alguns módulos, pode fazer sentido restaurar certas configurações de design para seus padrões para que você possa controlar o estilo do personalizador de tema.

Um bom caso de uso para isso seria as configurações do texto do corpo e do texto do cabeçalho. Portanto, por exemplo, se você tiver um módulo de texto em seu layout com uma fonte, cor e tamanho de texto personalizados, não será possível alterar esses elementos do personalizador de tema até restaurá-los ao status padrão.

Use a caixa de pesquisa para localizar as configurações que deseja alterar

Identifique facilmente o que está definido como padrão

Ao pesquisar as opções que deseja alterar, você notará que algumas opções têm um ícone “restaurar padrão” próximo a elas. Isso significa que o padrão foi alterado.

Restaure todas as configurações de design para o padrão com um clique

Para aqueles de vocês que amam o construtor visual tanto quanto eu, provavelmente ainda não descobriram esse truque útil. Se você estiver no construtor de backend, clique para editar as configurações de um módulo e, em seguida, selecione a guia de design. Notou alguma coisa? É um pequeno ícone / botão “Restaurar ao padrão” localizado na guia.

Clicar em irá solicitar que você confirme que deseja perder essas configurações. Se você selecionar sim, todas as configurações da guia de design voltarão ao estado padrão. Isso, é claro, será adicionado ao construtor visual no futuro.

# 9 Salvar elementos-chave para construir novas páginas ou postagens

Às vezes, você precisará criar páginas ou postagens adicionais que exigem um layout diferente. Talvez você queira um layout de página mais geral com um cabeçalho, uma seção de conteúdo e uma seção de rodapé. Ou talvez você queira criar uma página de destino mais elaborada. Você pode até criar um layout de postagem personalizado para suas postagens de blog. A maneira mais fácil de fazer isso é usar elementos dos layouts que você já possui para criar novos. E é a maneira mais eficiente de manter seu design consistente em todo o site. Vamos examinar alguns dos elementos básicos que você deve considerar usar para criar layouts de página adicionais.

Cabeçalho da página

Este é um acéfalo. Cada página precisa de um cabeçalho. Definitivamente, eu salvaria uma seção de cabeçalho para sua biblioteca. Eu sugeriria encontrar uma versão mais genérica de seus cabeçalhos para que se encaixem em qualquer tipo de página. Normalmente, o layout da página de contato é um bom candidato para isso porque geralmente tem um título centralizado básico, subtítulo e uma cor de fundo.

Cabeçalhos de seção

Também é uma boa ideia salvar uma versão dos cabeçalhos da seção. Dessa forma, quando você estiver adicionando mais conteúdo às suas novas páginas, você terá um novo cabeçalho estilizado e pronto para usar.

Seção de Conteúdo

Em muitos casos, um módulo de texto simples com um fundo branco é tudo que você precisa para isso, mas às vezes seus novos layouts têm seções de conteúdo exclusivas. Pode ser um módulo de texto com sombra de caixa ou vários módulos de blurb estilizados de maneira única. Para manter a consistência, salve o que você precisa na biblioteca para uso futuro.

Botões (claros e escuros)

Provavelmente, você precisará adicionar mais botões à medida que criar novas páginas. Ter uma versão escura e clara de seu botão disponível em sua biblioteca é extremamente conveniente. Eu sugiro salvar um módulo de botão para as versões claras e escuras.

Seção de rodapé

Cada layout geralmente vem com uma bela seção de rodapé que fica logo acima da barra inferior de sua página. Alguns layouts têm versões diferentes desta seção de rodapé. Essas seções geralmente incluem informações de contato, opções de e-mail e outras informações importantes. Encontre um que deseja usar e salve-o em sua biblioteca para uso futuro.

Agora, sempre que quiser construir uma nova página, você terá essas seções, linhas e módulos para escolher.

# 10 Definir itens globais

Global pode economizar muito tempo ao fazer edições futuras em seu site, mas requer um pouco de cautela. Você precisa identificar quais elementos de seus layouts serão usados ​​com frequência em todo o site e exigirão atualizações mais uniformes. Bons candidatos para itens globais seriam seções de rodapé, módulos de chamada para ação, módulos de botão e opções de email, já que eles precisam ser espalhados por todo o site, mas exigem o mesmo estilo e conteúdo uniforme. Desta forma, a atualização de um atualizará todos.

Pensamentos finais

Espero que você tenha achado essas etapas úteis. Meu objetivo para este post foi fornecer algumas diretrizes gerais ou práticas recomendadas ao importar esses layouts em uma nova instalação com o propósito de criar um novo site. Seguir essas etapas em ordem evitará que você perca tempo e terá uma boa base para construir.