Como adicionar e animar seu logotipo SVG dentro de seu cabeçalho global com Divi's Theme Builder & Anime.js

Publicados: 2020-07-29

Seu logotipo é uma parte central da identidade da sua marca. É por isso que quase sempre é incluído em qualquer cabeçalho de site que você encontrar. Ao adicionar um logotipo ao seu cabeçalho, você pode escolher fazer o upload de um arquivo PNG ou optar por uma integração SVG. Para uma abordagem mais personalizada, você também pode animar seu logotipo SVG. É exatamente isso que vamos mostrar neste post. Mostraremos como adicioná-lo ao cabeçalho global criado em Divi primeiro e, em seguida, animá-lo usando a biblioteca Anime JS. Usaremos um design simples em nosso exemplo, mas assim que obtiver a abordagem, você pode animar qualquer logotipo!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

logotipo svg

Móvel

logotipo svg

Baixe o modelo de cabeçalho global GRATUITAMENTE

Para colocar suas mãos no modelo de cabeçalho global, primeiro você precisará baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

1. Crie o logotipo SVG no Adobe Illustrator e obtenha o código SVG

Abra o Illustrator e crie um novo documento

Na primeira parte deste tutorial, criaremos um logotipo simples dentro do Adobe Illustrator. Se você já possui um logotipo SVG, sinta-se à vontade para usá-lo. Como alternativa, você também pode acessar o arquivo de amostra do logo do Illustrator na pasta de download acima. Se você preferir criar a amostra do logotipo do zero, comece adicionando um novo documento com uma proporção de 1: 1.

Largura: 500px
Altura: 500px

logotipo svg

Adicionar Círculo à Camada Existente

O primeiro elemento que adicionaremos é um círculo. Usaremos uma cor de preenchimento que corresponda à paleta de cores do Spice Shop Layout Pack. Também verificaremos se o círculo está alinhado centralmente em nossa tela.

Preencher: # 0C1019
AVC: Nenhum

logotipo svg

Criar nova camada e adicionar texto de logotipo

A seguir, vamos adicionar uma nova camada.

logotipo svg

Usaremos esta camada para adicionar algum texto de logotipo.

Fonte: Montserrat
Peso da fonte: preto
Tamanho da fonte: 110pt

logotipo svg

Crie contornos para o logotipo

Quando terminar de modificar o texto do logotipo, você pode clicar com o botão direito do mouse no elemento e clicar em “Criar contornos” para transformar o texto em um contorno.

logotipo svg

Alinhar contornos de texto

Certificar-nos-emos de que os contornos do texto também estão alinhados ao centro.

logotipo svg

Exportar como SVG

Agora que todos os caminhos estão prontos, podemos exportar o SVG. Para fazer isso, vamos passar o mouse sobre a opção “Arquivo” no topo, vá em “Exportar” e clique em “Exportar como…”.

logotipo svg

Obter código SVG

Depois de clicar no botão “Exportar”, você verá uma janela aparecer com algumas opções adicionais de SVG. Lá, você poderá copiar o código SVG. Certifique-se de manter o SVG por perto para uso posterior neste tutorial.

logotipo svg

2. Comece a criar um cabeçalho global / personalizado dentro do Divi Theme Builder

Vá para Divi Theme Builder e comece a criar cabeçalho global

Agora que passamos pela primeira parte deste tutorial, obtendo o código SVG do nosso logotipo, é hora de mudar para o Divi! Criaremos um novo cabeçalho global navegando até o Theme Builder dentro do back-end do WordPress.

logotipo svg

Configurações da seção

Cor de fundo

Depois de inserir o modelo de cabeçalho global, você notará uma seção. Abra essa seção e aplique uma cor de fundo.

Cor de fundo: #eaeaea

logotipo svg

Espaçamento

Vá para a guia de design e remova todo o preenchimento padrão superior e inferior a seguir.

Preenchimento superior: 0 px
Preenchimento inferior: 0 px

logotipo svg

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

logotipo svg

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha, vá para a guia de design e modifique as configurações de dimensionamento da seguinte forma:

Usar largura de calha personalizada: Sim
Largura da calha: 1
Equalize Alturas de Coluna: Sim
Largura: 95%
Largura máxima: 100%

logotipo svg

Espaçamento

Remova também todo o preenchimento padrão superior e inferior.

Preenchimento superior: 0 px
Preenchimento inferior: 0 px

logotipo svg

Elemento Principal

Para garantir que nossas colunas permaneçam próximas umas das outras em tamanhos de tela menores, adicionaremos uma linha de código CSS ao elemento principal da linha também.

display: flex;

logotipo svg

Elemento principal da coluna 1

A seguir, vamos garantir que a estrutura da coluna (1/4 e 3/4) seja mantida em tamanhos de tela menores, adicionando uma linha de código CSS a cada coluna individualmente. Comece com o primeiro.

width: 25% !important;

logotipo svg

Elemento Principal da Coluna 2

Faça o mesmo para a segunda coluna, mas use outra porcentagem de largura.

width: 75% !important;

logotipo svg

3. Adicionar logotipo SVG (módulo de código interno)

Adicionar Módulo de Código à Coluna 1

É hora de adicionar módulos, começando com um primeiro Módulo de Código. Colocaremos este Módulo de código na coluna 1 e o usaremos para adicionar nosso código SVG.

logotipo svg

Adicionar código SVG copiado

Estruture-o

Depois de colar o código SVG (consulte a parte 1 deste tutorial) dentro do Módulo de Código, isso ajuda a estruturar tudo conforme mostrado na tela de impressão abaixo. Dessa forma, você terá uma visão geral clara dos diferentes elementos dentro do SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

logotipo svg

Adicionar Stroke & Stroke Width to Elements in CSS Code

No Illustrator, usamos apenas cores de preenchimento para os elementos que adicionamos. A razão para isso é porque queremos evitar a geração de caminhos extras. O código SVG nem sempre é tão previsível quanto você pode pensar, portanto, fazer algumas alterações manuais no código CSS pode ajudar a manter os caminhos simples. Para criar o mesmo resultado da visualização deste post, precisaremos adicionar um traço a ambos os nossos elementos. Para fazer isso, adicionaremos linhas de código CSS às duas classes dentro de nosso código. A classe CSS “cls-1” gerada em AI representa o círculo, a classe CSS “cls-2” representa os contornos do texto.

stroke: #0c1019;
stroke-width: 3px;

logotipo svg

Diminuir o raio do círculo

Como adicionamos um traço extra ao nosso círculo, o círculo parece ir além da tela SVG (perceptível nas laterais). Para corrigir isso, vamos simplesmente reduzir o raio dentro de nossa marca de círculo. Em vez de usar o “232,5” original, estamos reduzindo para “225”. Você pode determinar por si mesmo o valor de sua preferência brincando suavemente com esse número.

r = ”225 ″

logotipo svg

Modificar as configurações do módulo de código

Dimensionamento

Agora que nosso código SVG está pronto, podemos fazer algumas alterações adicionais no próprio Módulo de Código. Vá para a guia de design e modifique a largura do módulo em diferentes tamanhos de tela.

Largura:
- Desktop: 25%
- Tablet: 50%
- Telefone: 80%

logotipo svg

Espaçamento

Também estamos gerando uma sobreposição inferior, modificando as configurações de espaçamento.

Enchimento superior: 5%
Preenchimento inferior:
- Desktop: -12%
- Tablet: -20%
- Telefone: -35%

logotipo svg

4. Use Anime.js para animar seu logotipo SVG

Adicionar outro módulo de código abaixo do anterior

Nosso logotipo SVG foi adicionado ao nosso cabeçalho Divi! Na próxima parte deste tutorial, vamos animar o logotipo SVG usando a biblioteca Anime JS. A animação de desenho que você pode ver na visualização é uma das mais populares, mas você pode criar qualquer tipo de animação com esta biblioteca. Adicione um novo Módulo de Código logo abaixo do anterior.

logotipo svg

Adicionar biblioteca de anime

A primeira coisa que você precisa fazer é adicionar a biblioteca dentro das tags de script.

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

logotipo svg

Adicionar código de animação da linha do tempo de anime

Logo abaixo dele, você precisará adicionar o código JS de anime entre as tags de script, conforme mostrado na tela de impressão abaixo:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

Cada função “adicionar” representa uma animação em uma linha do tempo de animações. Você pode modificar essas funções “adicionar” como quiser, adicionar novas ou remover as atuais, apenas certifique-se de que a última função adicionar seja fechada corretamente com um ';' no final (como você pode ver no código acima). Você pode adicionar diferentes propriedades CSS dentro dessas funções de “adição”. Você pode descobrir mais sobre as propriedades e como elas são usadas nos exemplos de documentação do anime.js.

logotipo svg

5. Adicionar Módulo de Menu à Coluna 2

O único elemento de que precisamos para completar nosso cabeçalho global é um Módulo de Menu na coluna 2.

logotipo svg

Selecione o menu

Selecione um menu de sua escolha.

logotipo svg

Remover cor de fundo

Em seguida, remova a cor de fundo padrão.

logotipo svg

Configurações de texto do menu

Vá para a guia de design e modifique as configurações de texto do menu da seguinte forma:

Cor do texto do menu: # 000000
Tamanho do texto do menu:
- Desktop: 0.7vw
- Tablet: 2.2vw
- Telefone: 3vw
Alinhamento de Texto: Direito

logotipo svg

Configurações de texto do menu suspenso

Altere também a cor da linha do menu suspenso.

Cor da linha do menu suspenso: #ffffff

logotipo svg

Configurações de ícones

Junto com a cor do ícone do menu de hambúrguer.

Cor do ícone do menu de hambúrguer: # 0c1019

logotipo svg

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e certifique-se de que a largura seja “100%”.

Largura: 100%

logotipo svg

Posição

Conclua as configurações do módulo reposicionando-o na guia avançada.

Posição: Absoluta
Localização: Centro à direita

logotipo svg

6. Salve todas as alterações do Theme Builder

Depois de concluir todo o design do cabeçalho global, você pode salvar todas as alterações do construtor de tema e visualizar o resultado em seu site!

logotipo svg

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

logotipo svg

Móvel

logotipo svg

Pensamentos finais

Neste post, mostramos como levar seu cabeçalho global Divi um passo adiante em sua jornada de desenvolvimento web. Mais especificamente, mostramos como adicionar e animar seu logotipo SVG usando Divi e a biblioteca Anime JavaScript. Você também pode baixar gratuitamente o arquivo JSON do modelo de cabeçalho global! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.