Como criar uma bela seção de herói para seu site pessoal com Divi

Criar um site pessoal é divertido e desafiador. Você deseja que seu site pareça envolvente e pessoal o suficiente para que sua história seja contada. E ao mesmo tempo, você quer ter um site bonito e autêntico que mostre que você sabe o que está fazendo.

Para ajudá-lo no processo criativo de criação desse site pessoal, criamos uma bela seção de heróis que definitivamente fará com que seu site se destaque. Neste post, mostraremos passo a passo como criar esse resultado usando nada mais do que as configurações internas do Divi para cada uma das etapas. Antes de mergulhar no tutorial, vamos dar uma olhada no resultado.

Resultado na área de trabalho

O resultado no desktop é assim:

Resultado no celular

E os visitantes que visitarem o site no celular verão o seguinte resultado:

Como criar uma bela seção de herói para seu site pessoal com Divi

Inscreva-se no nosso canal no Youtube

Criar Seção

Comece criando uma nova página em seu site WordPress, habilitando o Divi Builder, mudando para o Visual Builder e adicionando uma nova seção a ele.

Fundo Gradiente

A única coisa que você terá que alterar nesta seção é o plano de fundo. Este pano de fundo se aplicará a todas as linhas que adicionaremos nas próximas etapas desta postagem. Abra a subcategoria Plano de fundo e adicione o seguinte plano de fundo gradiente a ela:

• Primeira cor: # c2c6f3
• Segunda cor: # cea5b9
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 45%
• Posição final: 45%

Adicionar primeira linha

Então, vá em frente e adicione a primeira linha à seção. Esta linha incluirá apenas o Módulo de Texto que você pode ver na parte superior do layout.

Estrutura da Coluna

A seguir, escolha uma estrutura de coluna com uma coluna.

Dimensionamento

Vá para a guia Design de suas configurações de linha e use as seguintes configurações para a subcategoria Dimensionamento:

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

Módulo de Texto

Conforme mencionado anteriormente, esta linha precisará apenas de um Módulo de Texto.

Configurações de texto

Depois de inserir o texto que deseja que apareça na guia Conteúdo, vá para a guia Design e aplique as seguintes configurações à subcategoria Texto:

• Fonte do texto: Arizonia
• Peso da fonte do texto: regular
• Tamanho do texto: 150 (desktop), 80 (tablet), 70 (telefone)
• Cor do texto: rgba (255,255,255,0,39)
• Orientação do Texto: Centro

Adicionar segunda linha

Depois de concluir a primeira linha, vá em frente e adicione uma segunda linha à mesma seção.

Estrutura da Coluna

Como a linha anterior, esta linha também terá apenas uma coluna.

Imagem de fundo

Abra as configurações de linha e adicione a imagem pessoal que deseja usar como imagem de fundo para a primeira coluna. Certifique-se de que a posição da imagem também esteja definida como 'Centro'.

Dimensionamento

Em seguida, abra a subcategoria Dimensionamento e faça as seguintes alterações:

• Usar largura personalizada: Sim
• Largura personalizada: 557 px

Espaçamento

Em seguida, use '0px' para o preenchimento superior, inferior, direito e esquerdo da linha.

Sombra da caixa

Por último, aplique a seguinte caixa de sombra:

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 2 px
• Força do desfoque de sombra da caixa: 53px
• Força de propagação da sombra da caixa: 10px
• Cor da sombra: rgba (0,0,0,0.3)
• Posição da sombra: sombra externa

Módulo de Texto

Assim que as configurações de linha forem concluídas, vá em frente e adicione um Módulo de Texto à coluna.

Cor de fundo

Em primeiro lugar, este Módulo de Texto precisará de uma cor de fundo com a cor 'rgba (0,0,0,0.66)'.

Configurações de texto

Em seguida, vá para a guia Design e faça as seguintes alterações aplicadas à subcategoria Texto:

• Fonte do texto: Andika
• Peso da fonte do texto: negrito
• Estilo da fonte do texto: maiúsculas
• Tamanho do texto: 78 px (desktop), 70 px (tablet), 50 px (telefone)
• Cor do texto: # c2c6f3
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Fronteira

Em seguida, abra a subcategoria Borda e use a seguinte borda:

• Borda de uso: Sim
• Cor da borda: # c2c6f3
• Largura da borda: 8 px
• Estilo de borda: sólido

Espaçamento

Continuando, adicione a seguinte margem e preenchimento:

• Margem superior, direita, inferior e esquerda: 50 px
• Preenchimento superior: 200px
• Preenchimento inferior: 200 px

Sombra da caixa

Por último, use a seguinte caixa de sombra para o módulo de texto:

• Posição horizontal da sombra da caixa: 0 px
• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 0 px
• Força de propagação da sombra da caixa: 50px
• Cor da sombra: rgba (206,165,185,0,41)
• Posição da sombra da caixa: sombra externa

Adicionar terceira linha

Conforme mencionado antes, estamos usando apenas uma seção para este tutorial. A razão por trás disso é que queremos que o fundo gradiente da seção seja espalhado por todos os diferentes conteúdos que estão sendo compartilhados. Vá em frente e adicione uma nova linha.

Estrutura da Coluna

Selecione duas colunas para esta linha.

Dimensionamento

Em seguida, ative a opção 'Usar largura personalizada' e aplique uma largura de '663px'.

Espaçamento

Por último, adicione uma margem superior e inferior de '50px'.

Módulo de Primeiro Texto

Adicione um primeiro Módulo de Texto à primeira coluna da linha.

Configurações de texto

Em seguida, vá para a guia Design, use 'Andika' como a fonte do texto e 'Regular' como o peso da fonte do texto.

Clone o módulo de texto e coloque-o na segunda coluna

O Módulo de Texto na segunda coluna tem exatamente as mesmas configurações, então vá em frente, clone o Módulo de Texto e coloque-o na segunda coluna.

Adicionar Quarta Linha

Resta mais uma linha para adicionar à seção antes que o design seja concluído.

Estrutura da Coluna

Esta nova linha também possui duas colunas.

Dimensionamento

Abra as configurações de linha e faça com que as seguintes configurações se apliquem à subcategoria de dimensionamento:

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

Espaçamento

Em seguida, adicione um preenchimento superior de 20 px.

Módulo de Primeira Imagem

Vá em frente e adicione um primeiro Módulo de imagem à primeira coluna desta última linha.

Sombra da caixa

E adicione o seguinte Box Shadow a ele:

• Posição horizontal da sombra da caixa: -6px
• Posição vertical da sombra da caixa: 2 px
• Força do desfoque de sombra da caixa: 53px
• Força de propagação da sombra da caixa: 10px
• Cor da sombra: rgba (0,0,0,0.3)
• Posição da sombra da caixa: sombra externa

Clonar Módulo de Imagem e Colocar na Segunda Coluna

E por último, clone este Módulo de Imagem e coloque-o na segunda coluna também para completar esta linha.

Resultado

Depois de passar por todas as etapas que adicionamos a esta postagem, você deverá conseguir o seguinte resultado:

No Desktop

No telemóvel

Pensamentos finais

As possibilidades que você tem com Divi são infinitas. Você pode fazer com que seu site tenha a aparência exata que deseja usando o Visual Builder, que mostra as alterações em tempo real. Para esta postagem em particular, mostramos como você pode criar uma bela seção de heróis para um site pessoal. Este tutorial foi feito usando nada mais do que as opções integradas do Divi. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!