Como criar belas redes sociais para celular Siga a bios com Divi (download grátis!)

Quando você está criando seu site pessoal, ajuda ter uma página de biografia social para a qual você possa criar um link facilmente. É um excelente cartão de visita online com um resumo do que você faz e onde as pessoas podem ver seu trabalho. As informações que são compartilhadas nas biografias das redes sociais móveis geralmente se limitam a sua imagem, nome, cargo, uma pequena descrição e links de portfólio. Você também pode adicionar um CTA adicional para ajudar os visitantes a entrarem em contato com você.

Neste post, mostraremos como criar duas belas bios de seguidores sociais para celular usando o Divi. No final do tutorial, também compartilharemos os arquivos JSON de ambos os exemplos para que você possa começar imediatamente.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida nos dois exemplos que recriaremos do zero.

Exemplo 1

Exemplo 2

Comece a recriar o exemplo # 1

Adicionar nova seção

Cor de fundo

Vamos começar com o primeiro exemplo! Crie uma nova página ou abra uma existente e adicione uma seção regular a ela. Abra as configurações da seção e adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Espaçamento

Em seguida, vá para as configurações de espaçamento da seção e faça algumas alterações. Você notará que os valores diferem de acordo com o tamanho da tela. Estamos mantendo o mesmo tipo de design fino em diferentes tamanhos de tela, modificando o preenchimento esquerdo e direito conforme avançamos.

• Preenchimento superior: 50 px (desktop e tablet), 0 px (telefone)
• Preenchimento inferior: 50 px (desktop e tablet), 0 px (telefone)
• Preenchimento esquerdo: 36vw (desktop), 23vw (tablet), 0vw (telefone)
• Preenchimento direito: 36vw (desktop), 23vw (tablet), 0vw (telefone)

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo.

• Cor de fundo: # 333333

Dimensionamento

Em seguida, vá para as configurações de dimensionamento na guia de design e remova todo o espaço personalizado entre a coluna e a linha.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Sombra da caixa

Também estamos adicionando uma sombra de caixa para criar alguma profundidade em tamanhos de tela maiores.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Imagem

Enviar Imagem

É hora de começar a adicionar módulos! Comece com um Módulo de imagem que tenha uma proporção de 1: 1. A imagem que estamos usando, por exemplo, tem largura e altura de '500px'.

Alinhamento

Depois de fazer o upload da imagem, vá para a guia de design e altere o alinhamento da imagem.

• Alinhamento de imagem: centro

Dimensionamento

Estamos reduzindo o tamanho da imagem, modificando a largura nas configurações de dimensionamento a seguir.

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

Fronteira

Também estamos transformando a imagem em um círculo, adicionando '50vw' a cada um dos cantos nas configurações de borda. Além disso, adicionaremos uma borda branca usando as seguintes configurações:

• Largura da borda: 8 px
• Cor da borda: #ffffff

Sombra da caixa

Por último, mas não menos importante, adicione uma sombra de caixa para criar um design dimensional.

• Posição vertical da sombra da caixa: 40px
• Força do desfoque de sombra da caixa: 100 px
• Cor da sombra: # 000000

Adicionar Módulo de Texto # 1

Adicionar conteúdo H3

Avance para o próximo módulo! Adicione um Módulo de Texto logo abaixo do Módulo de Imagem com algum conteúdo H3.

Configurações de texto H3

Continue indo para a guia de design e alterando as configurações de texto H3.

• Fonte do título 3: Open Sans
• Cabeçalho 3 Peso da fonte: Semi negrito
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: #ffffff
• Altura da linha do título 3: 0,1em

Espaçamento

Também estamos adicionando alguma margem superior para criar espaço entre o Módulo de Imagem e este Módulo de Texto.

• Margem superior: 30px

Adicionar Módulo de Texto # 2

Adicionar conteúdo

O próximo módulo de que precisamos é outro Módulo de Texto. Adicione o seu cargo à caixa de conteúdo.

Configurações de texto

Em seguida, vá para a guia de design e altere as configurações de texto.

• Fonte do texto: Open Sans
• Peso da fonte do texto: regular
• Cor do texto: # 919191
• Orientação do Texto: Centro

Adicionar Módulo de Texto # 3

Adicionar conteúdo

Continue adicionando outro Módulo de Texto com uma breve descrição de você mesmo.

Configurações de texto

Vá para as configurações de texto e faça algumas alterações.

• Fonte do texto: Open Sans
• Cor do texto: # b7b7b7
• Altura da linha de texto: 1,6em
• Orientação do Texto: Centro

Dimensionamento

Modifique a largura do módulo também.

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

Espaçamento

E adicione alguma margem superior e inferior para criar espaço adicional.

• Margem superior: 30px
• Margem inferior: 30px

Adicionar Módulo de Botão

Adicionar cópia

O próximo e último módulo de que precisamos nesta linha é um Módulo de Botão. Adicione alguma cópia.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento do botão para que corresponda aos módulos anteriores.

• Alinhamento do botão: Centro

Configurações de botão

Continue alterando a aparência do botão nas configurações do botão.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 13px
• Cor do texto do botão: #ffffff
• Cor 1: # ad32ff
• Cor 2: # 32baff
• Direção do gradiente: 96deg
• Largura da borda do botão: 0 px
• Raio da borda do botão: 30px
• Fonte do botão: Open Sans
• Peso da fonte: ultra negrito
• Estilo da fonte: maiúsculas

Espaçamento

Adicione um pouco de margem e preenchimento personalizados a seguir.

• Margem inferior: 50px
• Enchimento superior: 15px
• Preenchimento inferior: 15 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Sombra da caixa

E complete o design do botão adicionando uma sombra de caixa.

• Posição vertical da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.69)

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha! Use a seguinte estrutura de coluna:

Fundo Gradiente

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente:

• Cor 1: # 1e1e1e
• Cor 2: # 3f3f3f
• Tipo de gradiente: radial
• Direção radial: canto superior esquerdo
• Posição inicial: 26%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Salve a seguinte imagem em seu computador e use-a como imagem de fundo para a linha:

Junto com as seguintes configurações de fundo:

• Tamanho da imagem de fundo: tamanho real
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: luz forte

Dimensionamento

Em seguida, vá para a guia de design e remova todo o espaço entre as colunas e a linha. Isso nos ajudará a aproveitar ao máximo o espaço de linha que obtemos.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione um pouco de preenchimento personalizado a seguir.

• Preenchimento superior: 84 px
• Preenchimento inferior: 84 px
• Preenchimento esquerdo: 4vw (desktop), 7vw (tablet), 14vw (telefone)
• Preenchimento direito: 4vw (desktop), 7vw (tablet), 14vw (telefone)

Sombra da caixa

Junto com uma sombra de caixa.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.3)

Exibição

Para garantir que todos os ícones sociais de acompanhamento apareçam lado a lado, adicionaremos uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 1

Alinhamento

O primeiro módulo de que precisamos na coluna 1 é um Módulo de Acompanhamento de Mídia Social. Depois de adicionar o módulo, altere o alinhamento do item na guia de design.

• Alinhamento de item: Centro

Adicionar nova rede social

Continue adicionando uma nova rede social. Para este exemplo, estamos usando o Dribbble.

Ligação

Adicione um link ao seu perfil do Dribbble.

Fundo Gradiente

Em seguida, altere o fundo gradiente usando as seguintes configurações:

• Cor 1: # ea0061
• Cor 2: # ea4c8d
• Direção do gradiente: 136 graus

Espaçamento

E aumente o tamanho do módulo adicionando algum preenchimento personalizado.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 20px
• Preenchimento direito: 20 px

Fronteira

Também estamos transformando o módulo em um círculo, adicionando '20vw' a cada um dos cantos nas configurações de borda.

Sombra da caixa

Por último, mas não menos importante, adicione uma sombra de caixa.

• Posição vertical da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: # 000000

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

Adicione um Módulo de Texto à primeira coluna a seguir.

Configurações de texto

Altere as configurações de texto.

• Fonte do texto: Open Sans
• Peso da fonte do texto: ultra negrito
• Cor do texto: #ffffff
• Orientação do Texto: Centro

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo

Adicione outro abaixo do anterior.

Configurações de texto

Altere as configurações de texto deste módulo também.

• Fonte do texto: Open Sans
• Cor do texto: # 898989
• Tamanho do texto: 11px
• Orientação do Texto: Centro

Clonar módulos na coluna 1 duas vezes e colocar duplicatas nas colunas restantes

Quando terminar de personalizar todos os módulos na coluna 1, você pode prosseguir e cloná-los duas vezes. Coloque as duplicatas nas duas colunas restantes da linha.

Mudar Redes Sociais

Claro, você precisará mudar as redes sociais.

Alterar links de rede social

Junto com os links.

Alterar fundos gradientes da rede social

E os fundos gradientes da rede.

• Cor 1: # 0043ff
• Cor 2: # 00aced

• Cor 1: # ea2c59
• Cor 2: # fed270

Comece a recriar - Exemplo # 2

Adicionar nova seção

Cor de fundo

Vamos para o próximo exemplo! Adicione uma nova seção com uma cor de fundo branca.

• Cor de fundo: #ffffff

Espaçamento

Adicione um pouco de preenchimento personalizado a seguir.

• Preenchimento superior: 50 px (desktop e tablet), 0 px (telefone)
• Preenchimento inferior: 50 px (desktop e tablet), 0 px (telefone)
• Preenchimento esquerdo: 36vw (desktop), 23vw (tablet), 4vw (telefone)
• Preenchimento direito: 36vw (desktop), 23vw (tablet), 4vw (telefone)

Adicionar linha # 1

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, vá para a guia de design das configurações de linha e altere as configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Adicionar Módulo de Imagem

Enviar Imagem

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é um Módulo de imagem com uma proporção de 1: 1.

Alinhamento

Altere o alinhamento da imagem.

• Alinhamento de imagem: centro

Dimensionamento

Modifique a largura também.

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

Fronteira

E adicione '20px' a cada um dos cantos nas configurações de borda.

Sombra da caixa

Complete o desenho da imagem adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 51 px
• Cor da sombra: rgba (0,0,0,0.37)

Adicionar Módulo de Texto # 1

Adicionar conteúdo H3

O próximo módulo de que precisamos é um Módulo de Texto. Adicione algum conteúdo H3 de sua escolha.

Configurações de texto H3

Altere as configurações de texto H3 na guia de design.

• Fonte do título 3: Open Sans
• Peso da fonte do cabeçalho 3: ultra negrito
• Estilo da fonte do título 3: maiúsculas
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: # 000000
• Cabeçalho 3 espaçamento entre letras: -1 px
• Altura da linha do título 3: 0,9em

Espaçamento

Adicione alguma margem superior a seguir.

• Margem superior: 30px

Adicionar Módulo de Texto # 2

Adicionar conteúdo

Adicione outro Módulo de Texto.

Configurações de texto

Modifique as configurações de texto.

• Fonte do texto: Open Sans
• Cor do texto: # 919191
• Orientação do Texto: Centro

Adicionar linha # 2

Estrutura da Coluna

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

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo da linha.

• Cor de fundo: #ffffff

Cor de fundo da coluna 2

Adicione também uma cor de fundo à segunda coluna.

• Cor de fundo da coluna 2: #efefef

Alinhamento

Certifique-se de usar o alinhamento da linha à esquerda.

• Alinhamento de linha: esquerda

Dimensionamento

Vá para as configurações de dimensionamento a seguir e faça algumas alterações.

• Usar largura personalizada: Sim
• Unidade: %
• Largura personalizada: 67%
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim

Espaçamento

Também estamos adicionando algum preenchimento personalizado à linha e suas colunas.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 1: 20 px
• Preenchimento inferior da coluna 1: 20 px
• Preenchimento superior da coluna 2: 20 px
• Preenchimento inferior da coluna 2: 20 px

Fronteira

Adicione '14px' aos cantos superior esquerdo, superior direito e inferior esquerdo.

Sombra da caixa

E complete o design da linha adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.17)

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 1

Alinhamento

Na primeira coluna, precisaremos de um módulo de Acompanhamento de Mídia Social. Altere o alinhamento do item.

• Alinhamento de item: Centro

Adicionar nova rede social

Em seguida, adicione uma nova rede social. Estamos usando o Dribbble.

Ligação

Adicione o link ao seu portfólio Dribbble.

Fundo Gradiente

E mude o fundo gradiente da rede social.

• Cor 1: # ea0061
• Cor 2: # ea4c8d
• Direção do gradiente: 136 graus

Espaçamento

Adicione alguns valores de preenchimento personalizados a seguir.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 20px
• Preenchimento direito: 20 px

Fronteira

E adicione '10px' a cada um dos cantos da rede social.

Sombra da caixa

Conclua o design do módulo adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo

Adicione um Módulo de Texto à segunda coluna.

Configurações de texto

Altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Peso da fonte do texto: ultra negrito
• Cor do texto: # 000000
• Orientação do Texto: Centro

Espaçamento

Crie espaço adicionando alguma margem superior a seguir.

• Margem superior: 10px

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

O segundo módulo de que precisamos na coluna 2 é outro Módulo de Texto.

Configurações de texto

Altere as configurações de texto.

• Fonte do texto: Open Sans
• Cor do texto: # 898989
• Tamanho do texto: 11px
• Orientação do Texto: Centro

Clone Row # 2

Quando terminar de modificar a linha, você pode cloná-la uma vez.

Módulos de troca

Troque os módulos a seguir.

Adicionar cor de fundo da coluna 1

Em seguida, adicione uma cor de fundo da coluna 1 à linha duplicada.

• Cor de fundo da coluna 1: #dbdbdb

Remover a cor de fundo da coluna 2

Remova a cor de fundo da coluna 2 a seguir.

Alterar alinhamento de linha

Altere o alinhamento da linha também.

• Alinhamento de linha: direita

Alterar o tamanho da linha

Junto com a largura personalizada nas configurações de dimensionamento.

• Largura personalizada: 66,99%

Alterar borda da linha

Também estamos garantindo que '14px' seja atribuído apenas aos cantos superior direito e inferior direito.

Mudar Rede Social de Acompanhamento

Continue mudando a rede social.

Alterar o fundo gradiente da rede de acompanhamento social

Junto com o fundo gradiente.

• Cor 1: # 0043ff
• Cor 2: # 00aced

Clone as duas linhas sociais de acompanhamento

Quando terminar de ter as duas linhas sociais de seguimento, você pode clonar cada uma delas.

Alterar borda da duplicata # 1

Altere os cantos arredondados da primeira duplicata.

Alterar rede social de seguimento da duplicata nº 1

Junto com a rede social.

Alterar plano de fundo gradiente da duplicata nº 1

E o fundo gradiente.

• Cor 1: # ea2c59
• Cor 2: # fed270

Alterar borda da duplicata # 2

Continue alterando também os cantos arredondados da segunda duplicata.

Alterar rede social de seguimento da duplicata nº 2

Junto com a rede social.

Alterar plano de fundo gradiente da duplicata nº 2

E, mais uma vez, o fundo gradiente que é atribuído à rede social.

• Cor 1: # 00306b
• Cor 2: # 007bb6

Baixe o Mobile Social Follow Bios GRATUITAMENTE

Para colocar as mãos nas seções de acompanhamento social para celular gratuitas, 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.

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!

Antevisão

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

Exemplo 1

Exemplo 2

Pensamentos finais

Neste post, mostramos a você como criar biografias sociais impressionantes para dispositivos móveis. Você pode usar esses designs como seu cartão de visita online e redirecionar as pessoas para esta página para que possam entrar em contato ou visualizar os links de seu portfólio. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!