Como usar criativamente as bordas de linha do Divi para criar um design impressionante de seção de herói
Publicados: 2019-07-06A seção do herói da sua página geralmente define a barra para o resto da página. Ele também desempenha um papel importante na primeira impressão dos visitantes. Com Divi, você pode criar incríveis seções de heróis usando apenas as opções integradas. Agora, se você está procurando uma maneira de fazer sua próxima seção de heróis se destacar, você vai adorar este post. Vamos mostrar a você como criar um design de seção de herói eficaz e bonito enquanto brinca com as bordas de linha do Divi. Você também poderá baixar o arquivo JSON de design gratuitamente!
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Baixe o layout da seção Hero GRATUITAMENTE
Para colocar as mãos no layout da seção de herói GRATUITO, 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!
Vamos começar a recriar!
Inscreva-se no nosso canal no Youtube
Adicionar nova seção
Fundo Gradiente
Vá em frente e crie uma nova página ou abra uma existente. Adicione uma nova seção regular, abra as configurações da seção e adicione o seguinte fundo gradiente:
- Cor 1: # 7e2dff
- Cor 2: #ffffff
- Posição inicial: 63%
- Posição final: 63%
Espaçamento
Vá para a guia de design e adicione algum preenchimento personalizado superior e inferior em diferentes tamanhos de tela.
- Preenchimento superior: 6vw (desktop), 13vw (tablet), 32vw (telefone)
- Preenchimento inferior: 6vw (desktop), 10vw (tablet), 20vw (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, abra as configurações de linha e modifique a largura máxima.
- Largura máxima: 100%
Espaçamento
Remova o preenchimento padrão superior e inferior da linha também.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar Módulo de Imagem à Coluna
Enviar Imagem
É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é um Módulo de imagem. Faça upload da imagem que você pode encontrar na pasta compactada que você baixou no início deste tutorial. Se você preferir usar outra imagem, certifique-se de usar uma largura de 1160 px e uma altura de 1385 px.
Dimensionamento
Vá para a guia de design do Módulo de imagem e ative a opção 'Forçar largura total'.
- Forçar largura total: Sim
Espaçamento
Modifique as configurações de espaçamento a seguir.
- Mostrar espaço abaixo da imagem: Não
- Preenchimento esquerdo: 17vw
Fronteira
E adicione '50vw' ao canto superior direito do Módulo de imagem.
Filtros
Também estamos mudando as cores de nossa imagem para combinar com nossa paleta de cores. Abra as configurações de filtros e aplique as seguintes configurações:
- Matiz: 211deg
- Saturação: 600%
- Brilho: 67%
- Contraste: 112%
- Inverter: 18%
Adicionar Módulo de Texto # 1 à Coluna
Adicionar conteúdo H1
O segundo módulo de que precisamos nesta linha é um Módulo de Texto com algum conteúdo H1.
Configurações de texto H1
Vá para a guia de design e altere as configurações de texto H1 de acordo:
- Fonte do cabeçalho: Montserrat
- Peso da fonte do cabeçalho: Semi negrito
- Cor do texto do título: #ffffff
- Tamanho do texto do título: 5vw
- Espaçamento entre letras do cabeçalho: -2 px
Dimensionamento
Modifique a largura do módulo a seguir.
- Largura: 70%
Espaçamento
E crie uma sobreposição entre este e o módulo anterior usando alguma margem superior negativa.
- Margem superior: -57vw (desktop), -75vw (tablet), -91vw (telefone)
Adicionar Módulo Divisor à Coluna
Visibilidade
O próximo módulo de que precisamos é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Linha
Altere a cor da linha a seguir.
- Cor da linha: # 00dcff
Dimensionamento
Modifique também as configurações de dimensionamento.
- Peso do divisor: 0,8vw
- Largura: 27%
Adicionar Módulo de Texto # 2 à Coluna
Adicionar conteúdo de parágrafo
Continue adicionando um novo Módulo de Texto com algum conteúdo de parágrafo de sua escolha.
Configurações de texto
Vá para a guia de design e altere as configurações de texto de acordo:
- Fonte do texto: Open Sans
- Cor do texto: #ffffff
- Tamanho do texto: 1vw (desktop), 2vw (tablet), 2,5vw (telefone)
- Altura da linha de texto: 1.8em
Dimensionamento
Modifique a largura do módulo também.
- Largura: 53% (desktop), 65% (tablet), 100% (telefone)
Adicionar Módulo de Botão à Coluna
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 de sua escolha.
Configurações de botão
Vá para as configurações de botão a seguir e altere o estilo de seu botão de acordo:
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 1vw (desktop), 2vw (tablet), 3vw (telefone)
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # 000000
- Largura da borda do botão: 0 px
- Fonte do botão: Open Sans
Espaçamento
Adicione alguns valores de preenchimento personalizados também.
- Enchimento superior: 1vw
- Preenchimento inferior: 1vw
- Preenchimento esquerdo: 4vw
- Preenchimento direito: 4vw
Adicionar linha # 2
Estrutura da Coluna
Para a próxima linha! Escolha a seguinte estrutura de coluna:
Cor de fundo
Sem adicionar nenhum módulo ainda, abra as configurações de linha. Mude a cor de fundo para branco.
- Cor de fundo: #ffffff
Dimensionamento
Vá para a guia de design e aumente a largura máxima.
- Largura máxima: 100%
Espaçamento
Adicione alguns valores de preenchimento personalizados a seguir.
- Preenchimento superior: 3vw
- Preenchimento inferior: 8vw
- Preenchimento esquerdo: 7vw
- Preenchimento direito: 7vw
Fronteira
Continuaremos adicionando '20vw' aos cantos inferior esquerdo e superior direito da linha. Adicionaremos uma borda superior usando as seguintes configurações também:
- Largura da borda superior: 1,2vw
- Cor da borda superior: # 00dcff
Sombra da caixa
Também estamos adicionando uma sombra de caixa sutil para criar profundidade na página.
- Força do desfoque de sombra da caixa: 120 px
Índice Z
Para garantir que a linha apareça no topo do Módulo de Imagem, vamos aumentar o Índice Z da linha nas configurações de visibilidade.
- Índice Z: 10
Adicionar Módulo Blurb à Coluna 1
Adicionar conteúdo
Depois de concluir as configurações da linha, você pode adicionar um Módulo Blurb à primeira coluna da linha. Insira algum conteúdo de sua escolha.
Selecione o ícone
Selecione um ícone de sua escolha a seguir.
Configurações de ícone
Vá para a guia de design e altere as configurações do ícone.
- Cor do ícone: # 000000
- Posicionamento do ícone: topo
- Use o tamanho da fonte do ícone: Sim
- Tamanho da fonte do ícone: 5vw
Configurações de texto do título
Modifique as configurações do título também.
- Fonte do título: Montserrat
- Peso da fonte do título: negrito
- Alinhamento do Texto do Título: Centro
- Cor do texto do título: # 000000
- Tamanho do texto do título: 1.1vw (desktop), 2.5vw (tablet), 3vw (telefone)
- Espaçamento entre letras de título: -1px
Configurações do corpo do texto
Junto com as configurações do corpo do texto.
- Fonte do corpo: Open Sans
- Alinhamento do corpo do texto: centro
- Tamanho do corpo do texto: 0.8vw (desktop), 1.6vw (tablet), 2vw (telefone)
- Altura da linha corporal: 1,5 vw (desktop), 3vw (tablet e telefone)
Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes
Depois de concluir o módulo Blurb na coluna 1, você pode cloná-lo duas vezes e colocar as duplicatas nas duas colunas restantes da linha.
Mudar o Conteúdo
Certifique-se de alterar o conteúdo de ambas as duplicatas e pronto!
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Pensamentos finais
Neste post, mostramos como ser criativo com as bordas de linha integradas do Divi para criar uma seção de herói impressionante que você pode usar em seu próximo projeto Divi. Recriamos um belo exemplo do zero e você também conseguiu baixar o arquivo JSON gratuitamente. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!
Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.