Baixe um design exclusivo de acompanhamento social com 5 paletas de cores para Divi

Sites e mídias sociais costumam andar de mãos dadas. As redes sociais são usadas para direcionar o tráfego para sites, mas o oposto também é verdadeiro, especialmente se você quiser aumentar o engajamento em suas redes sociais. É por isso que a maioria dos sites inclui links para suas redes sociais em várias páginas. Você pode seguir o caminho clássico e adicionar ícones ou pode tentar uma abordagem mais exclusiva.

Nós criamos um design de acompanhamento social impressionante e criativo que você pode baixar e usar em qualquer site que construir usando Divi. Além disso, também fornecemos 5 paletas de cores diferentes que ficam ótimas para este design.

Vamos lá!

Antevisão

Vamos começar observando as diferentes variações desse design e a exibição em diferentes tamanhos de tela.

Baixe o Social Follow Design GRATUITAMENTE

Para colocar suas mãos no design de acompanhamento social com 5 paletas de cores diferentes, primeiro você precisa baixá-los 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.

DOWNLOAD

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!

Paletas de cores

Vamos guiá-lo passo a passo pelo processo. Mas antes de fazermos isso, escolha uma paleta de cores de sua escolha e mantenha os códigos de cores por perto. Faremos referência ao número da cor ao longo do tutorial.

Paleta # 1

• Cor # 1: # D09CF1
• Cor # 2: # 00e2df

Paleta # 2

• Cor # 1: # ffa0a0
• Cor # 2: # 10007f

Paleta # 3

• Cor # 1: # ff3273
• Cor # 2: # 050042

Paleta # 4

• Cor # 1: # f954ee
• Cor # 2: # 00aeff

Paleta # 5

• Cor # 1: # ffca3a
• Cor # 2: # ff6005

Recriar Social Follow Design from Scratch

Adicionar Seção # 1

Fundo Gradiente

Comece adicionando uma seção regular a uma página nova ou existente. Abra as configurações da seção e aplique um fundo gradiente:

• Cor 1: Cor # 1 (Encontre na Paleta de Cores)
• Cor 2: Cor # 2 (Encontre na Paleta de Cores)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 6%

Imagem de fundo

Em seguida, carregue o padrão de fundo que você pode encontrar indo para a pasta baixada> Padrão de fundo . Combine o padrão de fundo com as seguintes configurações de fundo:

• Tamanho da imagem de fundo: tamanho real
• Posição da imagem de fundo: centro inferior
• Repetição da imagem de fundo: espaço

Divisor superior

Abra as configurações do divisor a seguir e adicione um divisor superior.

• Estilo do divisor: Encontrar na lista
• Cor do divisor: rgba (72,0,79,0,08)
• Altura do divisor: 500px
• Divider Flip: Vertical

Divisória Inferior

Adicione também uma divisória inferior.

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #FFFFFF
• Altura do divisor: 500px

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione algum preenchimento personalizado.

• Enchimento superior: 220px
• Preenchimento inferior: 329 px

Animação

Por último, adicione uma animação sutil à seção.

• Estilo de animação: slide
• Direção da animação: baixo
• Intensidade de animação: 2%
• Opacidade inicial da animação: 100%

Adicionar linha

Estrutura da Coluna

Agora podemos adicionar uma nova linha usando a seguinte estrutura de coluna:

Adicionar Módulo de Texto

Adicionar conteúdo

O único módulo de que precisaremos nesta linha é um Módulo de Texto. Adicione um título e um parágrafo à caixa de conteúdo.

Configurações de texto

Em seguida, vá para as configurações de texto e faça algumas modificações.

• Tamanho do texto: 16px
• Altura da linha de texto: 2em
• Orientação do Texto: Centro
• Cor do Texto: Claro

Configurações de texto H1 / H2

Altere também as configurações do título que você escolheu.

• Fonte do título: Rubik
• Estilo da fonte do título: maiúscula
• Tamanho do texto do título: 100 px (desktop), 42 px (tablet), 32 px (telefone)
• Altura da linha de direção: 1,2em

Dimensionamento

Diminua a largura do módulo a seguir.

• Largura: 71%
• Alinhamento do Módulo: Centro

Adicionar Seção # 2

Logo abaixo da seção anterior, vá em frente e adicione uma nova seção regular. Não há necessidade de fazer alterações nas configurações da seção.

Adicionar linha

Estrutura da Coluna

Adicione uma linha usando a seguinte estrutura de coluna:

Dimensionamento

Em seguida, defina a largura total da linha nas configurações de dimensionamento.

• Tornar esta linha com largura total: Sim

Adicionar Módulo de Imagem à Coluna 2

Carregar maquete

É hora de começar a adicionar módulos! Comece adicionando um Módulo de imagem à segunda coluna. Carregue a maquete que corresponda à paleta de cores que você escolheu. Você pode encontrar todas as variedades de maquetes acessando a pasta baixada> Mockups .

Dimensionamento

Altere também o tamanho do Módulo de imagem.

• Largura: 82% (desktop), 100% (tablet e telefone)
• Alinhamento do Módulo: Centro

Espaçamento

Para sobrepor o Módulo de imagem e a seção anterior, adicione alguma margem negativa ao Módulo de imagem.

• Margem superior: -300px

Adicionar Módulo Blurb à Coluna 3

Adicionar conteúdo

Agora podemos adicionar todas as redes sociais! Para criá-los, estamos usando os módulos do Blurb. Vá em frente e adicione o primeiro Módulo Blurb à terceira coluna e altere o conteúdo.

Adicionar Link

Adicione um link para a página social a seguir.

Escolha o ícone

Escolha seu ícone também.

Cor de fundo

Continue indo para as configurações de fundo e usando uma cor de fundo ligeiramente transparente.

• Cor de fundo: rgba (255,255,255,0,79)

Configurações de ícone

Em seguida, altere as configurações do ícone. Aqui, estamos usando uma das cores oficiais do Instagram.

• Cor do ícone: # fb3958
• Posicionamento do ícone: Esquerda

Configurações de texto do título

Faça algumas alterações nas configurações de texto do título a seguir.

• Peso da fonte do título: Semi negrito
• Cor do texto do título: # fb3958
• Altura da linha do título: 1,7em

Espaçamento

Para criar uma sobreposição com a maquete, vamos adicionar alguns valores de espaçamento.

• Marign superior: -170 px (desktop), -800 (tablet), -700 (telefone)
• Margem esquerda: -60% (desktop), 0% (tablet e telefone)
• Margem direita: 60% (desktop), 0% (tablet e telefone)
• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Fronteira

Também vamos brincar com as configurações de borda.

• Borda superior esquerda: 20 px
• Borda inferior esquerda: 20 px
• Largura da borda direita: 5 px
• Cor da borda direita: # fb3958

Sombra da caixa

Adicionar uma sombra de caixa dará ao elemento de design alguma profundidade.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -11 px

Animação

Por último, estamos usando um estilo de animação deslizante para imitar o efeito de notificação móvel com o qual as pessoas estão familiarizadas.

• Estilo de animação: slide
• Direção da animação: esquerda

Clone o módulo do Blurb três vezes

Para economizar tempo, vamos clonar o Módulo Blurb três vezes. Em seguida, modificaremos cada uma das duplicatas para criar o resultado desejado.

Remova a margem superior negativa de duplicados

Para manter uma boa visão geral, começaremos removendo a margem personalizada negativa de cada uma das duplicatas.

Configurações exclusivas do módulo Blurb

Módulo 2 do Blurb

Mudar Cópia

Abra o segundo módulo do Blurb na terceira coluna e altere o conteúdo.

Escolha o ícone

Selecione outro ícone também.

Configurações de ícone

Altere a cor do ícone para corresponder à rede social que ele está representando.

• Cor do ícone: # 3b5998

Configurações de texto do título

Use a mesma cor para a cor do texto do título também.

• Cor do texto do título: # 3b5998

Espaçamento

Para criar outra sobreposição no outro lado do telefone, altere os valores de espaçamento.

• Margem esquerda: -170% (desktop), 0% (tablet e telefone)
• Margem direita: 170% (desktop), 0% (tablet e telefone)

Fronteira

Modifique as configurações de borda a seguir.

• Canto superior direito: 20 px
• Canto inferior direito: 20 px
• Largura da borda esquerda: 5 px
• Cor da borda esquerda: # 3b5998

Animação

Faça com que este Módulo do Blurb deslize do outro lado com um pequeno atraso também.

• Direção da animação: direita
• Atraso de animação: 100ms

Módulo Blurb # 3

Mudar Cópia

O terceiro Módulo do Blurb também precisa de uma cópia diferente.

Escolha o ícone

Escolha outro ícone a seguir.

Configurações de ícone

Mude a cor do ícone para uma que corresponda à rede social que ele está representando.

• Cor do ícone: # 1da1f2

Configurações de texto do título

Use a mesma cor para a cor do texto do título.

• Cor do texto do título: # 1da1f2

Espaçamento

Altere as configurações de espaçamento também.

• Margem esquerda: -80% (desktop), 0% (tablet e telefone)
• Margem direita: 80% (desktop), 0% (tablet e telefone)

Fronteira

Altere a cor da borda nas configurações de borda também.

• Cor da borda direita: # 1da1f2

Animação

Por último, adicione um pequeno atraso à animação que já está lá.

• Atraso de animação: 200ms

Módulo Blurb # 4

Mudar Cópia

Para o último Módulo Blurb, estamos começando alterando o conteúdo.

Escolha o ícone

Selecione outro ícone social nas configurações de imagem e ícone a seguir.

Configurações de ícone

Faça com que a cor do ícone corresponda à rede social exibida.

• Cor do ícone: # 0077B5

Configurações de texto do título

Use a mesma cor para o texto do título.

• Cor do texto do título: # 0077B5

Espaçamento

Empurre o módulo Blurb para o lado esquerdo usando também configurações de espaçamento diferentes.

• Margem esquerda: -180% (desktop), 0% (tablet e telefone)
• Margem direita: 180% (desktop), 0% (tablet e telefone)

Fronteira

Em seguida, modifique as configurações de borda.

• Canto superior direito: 20 px
• Canto inferior direito: 20 px
• Largura da borda esquerda: 5 px
• Cor da borda esquerda: # 0077B5

Animação

Por último, mas não menos importante, adicione uma direção de animação diferente e algum atraso de animação a este Módulo Blurb.

• Direção da animação: direita
• Atraso de animação: 300ms

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado.

Pensamentos finais

Neste post, compartilhamos um design social exclusivo para seguir, que você pode baixar gratuitamente. Também fornecemos 5 paletas de cores diferentes que você pode aplicar. Sinta-se à vontade para usar os arquivos JSON em qualquer site Divi que você criar para aumentar o engajamento social por meio do seu site. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!