Otimizando a imagem do logotipo do seu site Divi com predefinições globais
Publicados: 2020-09-25Otimizar o logotipo do seu site no Divi é uma parte importante do design do seu site. Mas não precisa ser um empreendimento misterioso ou assustador. Na verdade, o Divi torna tudo muito simples com o Divi Theme Builder e todas as opções de design integradas disponíveis.
Neste tutorial, mostraremos como otimizar seus logotipos com o tamanho, posição e estilo corretos no Divi. Em seguida, mostraremos como salvar esses designs como predefinições globais que você pode usar para desenvolvimento futuro.
Vamos começar!
Baixe o layout das predefinições de imagem do logotipo GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download 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.
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!
Para usar este layout de imagem de logotipo em seu cabeçalho global, você deve primeiro importá-lo para a Biblioteca Divi da seguinte maneira:
- Vá para Divi> Biblioteca Divi.
- Clique no botão importar / exportar na parte superior da página.
- Selecione a guia Importar no pop-up de portabilidade
- Selecione Importar Predefinições
- Clique no botão Importar
Em seguida, vá para o construtor de tema e edite o cabeçalho global. Adicione um módulo de imagem onde deseja que o logotipo esteja e use as predefinições para estilizar e posicionar o logotipo de acordo.
Tamanhos de logotipo
Antes de otimizar a imagem do logotipo com Divi, é importante considerar a otimização do tamanho da imagem do logotipo antes de enviá-la para um módulo de imagem. Você não deseja fazer upload de uma imagem de logotipo de 1920 x 1080 pixels em seu site quando planeja exibir esse logotipo em 100 x 50 pixels. Claro, há maneiras de redimensionar a imagem do logotipo após o fato (ou seja, srcset e plug-ins de otimização de imagem). Porém, essa não é a prática recomendada, pois isso pode levar a tempos de carregamento de página mais lentos. E, vamos enfrentá-lo, seu logotipo é muito importante para se contentar com atalhos complicados.
Aqui está uma lista de tamanhos de imagem de logotipo comuns a serem considerados:
Para layout horizontal:
- 250 px x 150 px
- 350 px x 75 px
- 400 px x 100 px
Para layout vertical (quadrado):
- 160 px x 160 px (grande)
- 60 px x 60 px (pequeno)
Você pode precisar de um tamanho de logotipo maior do que você imagina.
É comum precisar de um logo menor no desktop e um logo maior no tablet (ou mesmo no telefone). No Divi, é comum que seus layouts de coluna sejam empilhados em um layout de uma coluna em telas de tablets e telefones. E uma vez que as larguras do navegador do tablet normalmente têm uma largura máxima de 980 px, que é um contêiner muito maior para o seu logotipo do que talvez no desktop. Portanto, pode ser necessário escolher um tamanho de logotipo maior e ajustar a altura ou largura máximas de acordo com o dispositivo. Se você carregar um logotipo menor do que o necessário no tablet, não poderá aumentar o tamanho sem comprometer a clareza da imagem. Resumindo, certifique-se de que o logotipo seja tão grande quanto o maior tamanho de exibição em todas as larguras de navegador.
Otimizando o tamanho e a posição do logotipo do seu site Divi com predefinições globais
Editando seu logotipo de cabeçalho global
Para começar, navegue até Divi Theme Builder em Divi> Theme Builder. Em seguida, clique para criar um novo cabeçalho global dentro do modelo de site padrão.
Em seguida, selecione a opção “Construir do zero”.
Para este tutorial, vamos otimizar o logotipo incluído com um cabeçalho global personalizado usando o Divi Theme Builder. Você é bem-vindo ao design de um cabeçalho existente ou importar um de nossos modelos de cabeçalho (e rodapé) globais predefinidos de nosso blog. Para manter as coisas simples, vamos construir um layout de cabeçalho realmente simples com um logotipo e um menu.
Adicionar layout de linha e coluna
No Editor de layout de cabeçalho global, adicione uma linha de coluna de um quarto e três quartos.
Na coluna da direita, adicione um módulo de imagem apenas como espaço reservado para nos ajudar a visualizar a colocação do logotipo no cabeçalho.
Adicione o módulo de imagem para exibir a imagem do logotipo
Adicione um módulo de imagem à coluna esquerda.
Usando o Módulo de Imagem para Logotipos
Para designs de cabeçalhos mais tradicionais, você pode aproveitar as vantagens do módulo de menu do Divi para exibir seu logotipo. No entanto, com os recursos de conteúdo dinâmico do Divi, você pode exibir o logotipo do seu site usando qualquer número de módulos Divi. Basicamente, você pode exibir seu logotipo em qualquer lugar em que possa exibir uma imagem no Divi. Por exemplo, você pode escolher exibir o logotipo do site em uma imagem do módulo de sinopse ou até mesmo como uma imagem de plano de fundo, se desejar. Para este tutorial, vamos nos concentrar em usar o módulo de imagem para exibir o logotipo do site. Isso permite que o logotipo seja um elemento completamente separado (não conectado a outros elementos em um módulo como um módulo de menu ou módulo de sinopse). Além disso, o módulo de imagem é construído para estilizar imagens, o que nos dá muitas opções de design adicionais para estilizar nossa imagem de logotipo. Vá para o final do artigo para saber mais sobre como adicionar um logotipo de site como uma imagem dinâmica.
Como vamos testar alguns tamanhos de imagem de logotipo diferentes, vamos colar imagens normais para nossos exemplos, em vez do logotipo dinâmico do site.
Exemplo 1: Criação de uma predefinição global de logotipo alinhado à esquerda
Para este primeiro exemplo, vamos construir uma predefinição simples para um logotipo alinhado à esquerda de 60 x 60 pixels.
Abra as configurações do módulo de imagem e carregue uma imagem do logotipo de 60 x 60 pixels para o módulo de imagem.
Atualize as configurações de design de imagem da seguinte maneira:
- Alinhamento de imagem: centro
- Largura máxima: 60px
- Alinhamento do Módulo (desktop): Esquerda
- Alinhamento do Módulo (tablet e telefone): Centro
Embora este seja um design para um logotipo alinhado à esquerda, o alinhamento da imagem é definido para o centro porque o alinhamento da imagem é diferente do alinhamento do módulo. O alinhamento da imagem é centralizado no módulo. E como o módulo tem largura máxima de 60px, o alinhamento da imagem realmente não importa porque o alinhamento do módulo agora ditará o alinhamento da imagem do logotipo.
Isso é útil se você quiser adicionar uma imagem de plano de fundo ao logotipo ou tornar o contêiner arredondado. Essencialmente, isso torna o contêiner da imagem do logotipo do mesmo tamanho que a própria imagem do logotipo.
Observe que o alinhamento do módulo é alterado para centralizar no tablet, uma vez que as colunas serão empilhadas no dispositivo móvel.
Criar uma nova predefinição a partir dos estilos atuais
Agora que o design do logotipo está concluído, você pode criar uma predefinição global para o módulo de imagem clicando na lista suspensa de predefinições e selecionando “Criar nova predefinição a partir dos estilos atuais”.
Dê à predefinição de imagem do logotipo um nome exclusivo. Nesse caso, podemos dar a ele o nome “Logo Left (60px por 60px)” para nos informar exatamente o tamanho da imagem a ser usado e como o logotipo será alinhado ao selecionar o uso da predefinição.
Exemplo 2: Criação de uma predefinição global de logotipo alinhado à direita
Para este próximo exemplo, vamos criar uma predefinição global de logotipo alinhado à direita. Isso será fácil de fazer com nosso design e predefinições atuais. Basta alterar o layout da coluna para três quartos um quarto, mover o menu para a coluna esquerda e mover o logotipo para a coluna direita.
Abra as configurações do módulo de imagem que contém a predefinição de imagem do logotipo que acabamos de criar.
Em seguida, atualize as configurações de design para alterar o alinhamento do módulo para a direita.
Simples o suficiente. Agora clique na lista suspensa de predefinições e crie uma nova predefinição a partir dos estilos atuais.
Dê à predefinição o nome “Logo Right (60px por 60px)”.
Exemplo 3: Criação de uma predefinição global de logotipo centralizado
Para este próximo exemplo, vamos construir uma predefinição global de logotipo centralizado. Como este é um logotipo centralizado, podemos usar um logotipo maior para nosso exemplo.
Primeiro, altere o layout da coluna para uma estrutura de 0 um quarto, meio um quarto, de modo que você tenha uma coluna maior no meio para o logotipo. Em seguida, mova o logotipo para a coluna central
Faça upload de uma nova imagem de logotipo de 250 x 150 pixels.
Na guia de design, atualize o seguinte:
- Largura máxima: 250px
- Alinhamento do Módulo: Centro
Em seguida, adicione uma nova predefinição global dos estilos atuais.
E dê a ele o nome “Logo Center (250px por 150px).
Exemplo 4: Criação de uma predefinição global de logotipo grande alinhado à esquerda
Para o próximo exemplo, vamos criar uma predefinição para um logotipo alinhado à esquerda maior (400px por 100px).
Como o logotipo terá 400 px de largura, queremos uma estrutura de colunas que dê ao logotipo o espaço de que precisa.
Vamos voltar a uma estrutura de duas colunas com o logotipo à esquerda e o menu à direita. No entanto, vamos mudar a estrutura para um terço dois terços.
Isso nos dará uma coluna com aproximadamente 320 px de largura se mantivermos a largura máxima da linha padrão de 1080 px.
Abra as configurações do módulo de imagem e adicione uma imagem de logotipo de 400 x 100 pixels.
Na guia de design, atualize o seguinte:
- Largura máxima: 400px
- Alinhamento do Módulo (desktop): esquerda
- Alinhamento do Módulo (tablet): centro
Como mencionei, a coluna tem uma largura máxima de 320 px, o que significa que a imagem do logotipo não será capaz de abranger toda a sua largura no desktop. No entanto, será possível no tablet assim que as colunas estiverem empilhadas. Por esse motivo, queremos definir a largura máxima da imagem para 400px.
Agora, o logotipo é um pouco maior no tablet, além de centralizado.
Em seguida, adicione uma nova predefinição global dos estilos atuais.
Dê a ele o nome “Logo Left (400px por 100px)” e salve a predefinição.
Exemplo 5: Construindo um logotipo alinhado à esquerda com predefinição global de efeitos de foco
Para este exemplo final, vamos adicionar alguns efeitos de foco a um logotipo alinhado à esquerda e salvá-lo como uma nova predefinição global.
Normalmente, as pessoas vinculam seu logotipo à página inicial. Adicionar um efeito de foco pode melhorar a experiência do usuário, tornando sua capacidade de clicar mais óbvia.
Para este exemplo, vamos usar a imagem do logotipo de 60 x 60 pixels com a predefinição “Logo à esquerda (60 x 60 pixels)”. Abra as configurações de imagem e selecione a predefinição na lista.
Agora podemos ajustar o preset com alguns estilos de efeito de foco antes de salvá-lo como um novo preset.
Atualize o seguinte:
- Cantos arredondados: 50%
- Sombra da caixa: veja a imagem
- Posição horizontal da sombra da caixa: 0 px
- Posição vertical da sombra da caixa: 0 px (desktop) 5 px (pairar)
- Cor da sombra: # ac3cf7
Em seguida, adicione a seguinte rotação de transformação ao passar o mouse:
- Transformar, girar o eixo Z (pairar): 90 graus
Em seguida, crie um novo preset a partir dos estilos atuais e nomeie-o “Logo Left w / Hover (60px por 60px)”.
Aqui está o resultado.
Adicionar um logotipo de site dinâmico ao módulo de imagem
Para adicionar o logotipo do seu site dinamicamente ao módulo de imagem, primeiro, você precisa se certificar e fazer o upload do logotipo do site em Opções do tema Divi.
Lembre-se do tamanho do logotipo que você está selecionando.
Em seguida, vá para o módulo de imagem que tem sua predefinição global e abra as configurações. Exclua a imagem atual e clique no ícone de conteúdo dinâmico. No menu suspenso, selecione Logotipo do site.
Agora seu módulo de imagem puxará o logotipo do seu site dinamicamente.
Não se esqueça de adicionar um link de página inicial dinâmico ao logotipo também.
Pensamentos finais
Esperamos que este tutorial ajude a agilizar o processo de adição de logotipos aos cabeçalhos Divi. Ele começa otimizando o tamanho da imagem do logotipo antes mesmo de enviá-lo para o tema Divi. Em seguida, você pode usar as configurações de design embutidas do Divi para ajustar o tamanho e a posição da imagem para diferentes layouts de coluna e diferentes dispositivos.
Obviamente, cada site exigirá seu próprio estilo único, alguns dos quais violarão as diretrizes definidas nesses exemplos. Mas estou confiante de que, com alguns ajustes, você pode criar novos presets para qualquer layout exclusivo com facilidade!
Estou ansioso para ouvir de você nos comentários.
Saúde!