Maneiras simples e criativas de exibir logotipos de empresas na Divi

Existem muitos motivos para exibir logotipos de empresas em seu site. Uma seção “Apresentada em” dos logotipos da empresa pode ter influência para investidores ou parceiros em potencial. Ou uma seção “Nossos clientes incluem” pode estabelecer uma prova social valiosa com os visitantes. Mas seja qual for o motivo, é importante saber como adicionar esses logotipos ao seu site. Neste tutorial, examinarei três métodos diferentes para adicionar logotipos de empresas ao seu site com Divi. Vou até mostrar como adicionar galerias de logotipo a qualquer Módulo Divi!

Aqui está o que será abordado neste tutorial:

• Preparando suas imagens de logotipo
• Usando o Módulo Divi Gallery para exibir logotipos com um simples arrastar e soltar
• Usando o WordPress Gallery Embed to Display Logos
• Usando o Divi Builder para criar um layout personalizado para logotipos

Vamos começar!

Espiada

Aqui está uma olhada em alguns dos designs possíveis usando as técnicas neste tutorial.

Preparando suas imagens de logotipo

Ao preparar seus logotipos para serem exibidos em seu site, é importante que você reserve um tempo para dimensionar suas imagens usando um editor de fotos antes de adicioná-las ao seu site. Isso evitará a dor de cabeça de tentar dimensionar e posicionar seus logotipos com larguras, preenchimentos ou margens personalizados. Confie em mim. Você não quer seguir por esse caminho se não for necessário.

Como cada logotipo tem um tamanho único, é praticamente impossível fazer com que todos tenham as dimensões exatas. É aqui que um editor de fotos é útil. Por exemplo, usando o Photoshop, você pode criar um novo arquivo e definir as dimensões do documento para o tamanho que deseja que todas as imagens do logotipo (neste caso, 226 por 100 pixels).

Em seguida, adicione a imagem do logotipo ao documento, redimensione e posicione a imagem diretamente no centro. Certifique-se de que é um arquivo de imagem png com fundo transparente.

Em seguida, exporte a imagem como um arquivo png para manter o fundo transparente.

Em seguida, repita o processo para o resto de seus logotipos.

Você pode manter a cor original do logotipo ou usar um editor de fotos para alterá-los para a cor que desejar. Se você planeja adicionar seus logotipos usando um Divi (ou seja, o módulo de imagem ou galeria de imagens), você sempre pode usar os efeitos de filtro embutidos do Divi para ajustar as cores também.

Inscreva-se no nosso canal no Youtube

Nº 1: Usar o módulo Divi Gallery para exibir os logotipos da empresa (basta arrastar e soltar)

Este primeiro método para adicionar logotipos de empresas ao seu site com o Divi é o mais fácil possível. Usando o recurso de arrastar e soltar do Divi, você pode arrastar todos os logotipos da empresa para o Divi Builder para criar instantaneamente uma galeria de imagens para exibir seus logotipos em uma grade.

Para fazer isso, crie uma nova página e implante o Divi Builder para construir no front end. Selecione a opção “Construir do zero”. Assim que o Divi builder estiver instalado e funcionando, abra a pasta que contém todas as suas imagens e selecione-as. Em seguida, basta arrastá-los para a janela do navegador com o Divi Builder.

O Divi adicionará automaticamente essas imagens a um novo Módulo da Galeria e abrirá as Configurações da Galeria para iniciar o processo de personalização para você.

Como estou adicionando 8 imagens de logotipo e não quero mostrar nenhum título, legenda ou paginação, posso atualizar o seguinte:

Número das imagens: 8
Mostrar título e legenda: NÃO
Mostrar paginação: NÃO

Por padrão, o módulo da galeria adicionará uma sobreposição de foco com um ícone para cada imagem. Você pode ajustar as configurações de sobreposição para a cor do ícone de zoom, a cor de sobreposição de foco ou ícone de foco.

Para manter as coisas limpas e simples, você pode se livrar da sobreposição de foco definindo a cor do ícone de zoom e a cor de sobreposição de foco como transparente.

Depois disso, você pode explorar todas as opções de design para criar designs exclusivos para sua galeria de imagens. Por exemplo, você pode adicionar uma borda com uma sombra de caixa sutil.

Largura da borda da imagem: 1px
Cor da borda da imagem: #dddddd
Sombra da caixa de imagem: veja a captura de tela

Aqui está como o design final ficaria em diferentes tamanhos de navegadores.

E como essa galeria pode ser adicionada a qualquer estrutura de coluna, você pode criar facilmente layouts exclusivos para os logotipos de sua empresa. Aqui está um exemplo de um layout de duas colunas com um módulo de texto à esquerda e o módulo da galeria de imagens (com os logotipos) à direita. Eu adicionei um gradiente de fundo apenas para mostrar a você uma aparência diferente.

# 2 Usando o WordPress Gallery Embed para exibir os logotipos da empresa (com qualquer módulo Divi)

Você também pode adicionar logotipos de empresas ao seu site usando o código de acesso da Galeria de imagens do WordPress. Isso é surpreendentemente fácil de fazer e é perfeito para logotipos porque, na maioria dos casos, você não precisa adicionar estilos personalizados às imagens. O que é ótimo sobre esse método é que você pode implantar até 9 colunas para seus logotipos que se adaptam à janela do seu navegador, permitindo que você mantenha sua estrutura de colunas no celular também.

Aqui está como fazer.

No Divi Builder, crie uma nova seção com uma estrutura de coluna de um quarto e três quartos.

Digamos que você queira ter algum texto à esquerda dos logotipos de sua empresa em uma galeria de seis colunas. Primeiro, adicione um módulo de texto na coluna da esquerda e atualize o seguinte:

Conteúdo: “Conforme apresentado em”
Fonte do texto: Montserrat
Peso da fonte do texto: negrito
Tamanho do texto do texto: 26px
Orientação do texto: centro

Agora adicione outro módulo de texto na coluna da direita. Na guia de conteúdo, exclua o conteúdo simulado existente e clique no botão “Adicionar mídia” na parte superior da caixa do editor de conteúdo.

Isso abrirá o pop-up da Galeria de mídia. Em seguida, clique no link Criar galeria à esquerda do pop-up. Em seguida, selecione as imagens do logotipo que deseja incluir na galeria (estou usando oito imagens para este exemplo). Clique no botão Criar Galeria.

Isso abrirá a página Editar Galeria no pop-up. Atualize as configurações da Galeria na barra lateral direita da seguinte maneira:

Link para: Nenhum
Colunas: 8 (deve ser igual ao número de imagens na galeria para que permaneçam em uma linha)
Tamanho: Tamanho Completo

Em seguida, clique no botão Criar uma nova galeria.

Isso irá incorporar o shortcode da galeria necessário integrado ao WordPress e exibir a galeria dentro do módulo de texto.

Agora abra as configurações de linha e atualize o seguinte:

Tornar esta linha com largura total: SIM
Usar largura de calha personalizada: SIM
Largura da calha: 1
Equalize a altura das colunas: SIM

Com esta configuração, você tem mais espaço para seus logotipos respirarem. Agora tudo o que resta fazer é ajustar o texto à esquerda para ser alinhado verticalmente com os logotipos à direita. Você pode adicionar o preenchimento personalizado necessário à coluna esquerda para fazer isso, mas para garantir que ambos os módulos permaneçam centralizados verticalmente, você pode adicionar o seguinte CSS personalizado ao Elemento principal na guia Configurações de linha avançadas.

align-items: center;

Este CSS funciona porque definimos Equalize Column Heights como YES, ativando assim a propriedade “display: flex” para a linha. Para obter mais informações sobre isso, verifique como alinhar o conteúdo verticalmente no Divi.

E para remover a borda cinza em torno de nossas imagens, precisamos adicionar o seguinte snippet CSS às configurações de nossa página:

.gallery img {
border: none !important;
}

Aqui está o design final.

Aqui está com um fundo preto adicionado à linha.

No celular, as colunas não se quebram em nenhum tamanho de tela. As imagens simplesmente são redimensionadas para um tamanho menor. Eu admito. Oito colunas provavelmente é muito no smartphone porque as imagens ficam muito pequenas.

Incorporar galerias de logotipo em qualquer módulo Divi

Por ser um shortcode incorporado, você pode adicionar esta galeria a quase qualquer Módulo Divi, o que abre muitas possibilidades diferentes.

Por exemplo, você pode adicionar imagens de logotipo dentro de um botão, um acordeão ou até mesmo um módulo de guias.

Aqui está um exemplo de como seria quando você adicionasse o shortcode da galeria wordpress de seus logotipos a duas guias diferentes.
Para este exemplo, selecionei 6 logotipos com 3 colunas para cada galeria.

Isso pode ser útil para sites que exigem muitos logotipos.

# 3 Usando o Divi Builder para criar um layout personalizado para logotipos de empresas

Se você deseja ser um pouco mais criativo com os layouts do logotipo de sua empresa, pode usar o Divi Builder para projetar praticamente qualquer coisa que você possa imaginar. O elemento de linha do Divi suporta layouts de coluna de até 6 colunas, o que é mais do que suficiente para a maioria dos layouts de logotipo da empresa. Eu gosto dos layouts de 6 e 4 colunas mais para os logotipos, em grande parte por como eles respondem no celular.

No design a seguir, vou mostrar algumas dicas sobre como levar os layouts de logotipo de sua empresa para o próximo nível.

Primeiro, vamos começar criando uma nova seção com uma linha de seis colunas.

Antes de começarmos a adicionar qualquer coisa às nossas colunas, vá para as configurações de linha e atualize o seguinte:

Largura personalizada: 90%
Largura da calha: 1
Equalize a altura das colunas: SIM

Preenchimento personalizado: 4vw superior, 4vw inferior

Salvar configurações.

Em seguida, adicione um módulo de imagem à sua primeira coluna e selecione uma das imagens do seu logotipo.

Em seguida, continue a adicionar imagens de logotipo a cada coluna da seguinte maneira:

Coluna 1: 1 logotipo
Coluna 2: 2 logotipos
Coluna 3: 3 logotipos
Coluna 4: 3 logotipos
Coluna 5: 2 logotipos
Coluna 6: 1 logotipo

Agora, com esta configuração, você pode ajustar o alinhamento vertical usando um trecho de CSS personalizado. Se você deseja centralizar verticalmente o conteúdo, pode adicionar o mesmo snippet CSS que adicionamos para centralizar verticalmente nosso texto ao lado da galeria de logo no item 2 acima. Abra as configurações de linha e adicione o seguinte CSS ao elemento principal.

align-items: center;

Como você pode ver, isso cria um layout arredondado para os logotipos.

Mas para este layout, vou alinhar os módulos na parte inferior da linha. Portanto, substitua o snippet “align-items: center” pelo seguinte:

align-items: flex-end;

Isso alinha todos os módulos na parte inferior da linha, o que funcionará bem com a seção Divisores que iremos adicionar.

Agora estamos prontos para customizar nossa seção. Abra as configurações da seção e atualize o seguinte:

Antecedentes: # 2a3443

Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: rgba (255.255.255,0,03)
Altura do divisor superior: 13vw
Top Divider Flip: vertical

Preenchimento personalizado: 0 px superior, 0 px inferior

Para nosso título, vamos criar uma nova seção e colocá-la acima da seção que acabamos de criar. Crie uma nova seção regular com uma estrutura de linha de uma coluna.

Atualize as configurações da seção da seguinte forma:

Cor de fundo: # 2a3443

Estilo do divisor inferior: veja a captura de tela
Cor do divisor inferior: rgba (238.238.238,0.09)
Altura do divisor inferior: 13vw

Preenchimento personalizado: 0px inferior

Agora salve suas configurações e adicione um Módulo de Texto à linha e atualize o seguinte:

Para o conteúdo, adicione o seguinte:

<h2>As Featured In</h2>

Fonte do título 2: Montserrat
Peso da fonte do cabeçalho 2: negrito
Título 2 Alinhamento de texto: centro
Cor do texto do título 2: #ffffff
Tamanho do texto do título 2: 32px

Margem personalizada: 0 px inferior

Por fim, adicione um módulo de imagem sob o módulo de texto com o logotipo de uma empresa que deseja destacar dos demais. Em seguida, atualize o seguinte:

Alinhamento de imagem: centro
Margem personalizada: -75px

Confira o resultado final.

Pensamentos finais

Criar uma seção em seu site para logotipos de empresas é, na verdade, muito simples. Depois de ter as imagens do logotipo dimensionadas corretamente usando um editor de fotos, Divi pode cuidar do resto. Os métodos cobertos neste tutorial devem fornecer tudo o que você precisa para criar o layout que você deseja obter com o mínimo de esforço. E com o poder do Divi ao seu dispor, você deve se divertir criando seus próprios layouts exclusivos.

Estou ansioso para ouvir de você nos comentários.

Saúde!