Como criar lindas transições de foco de fundo gradiente com Divi
Publicados: 2019-07-13Recentemente, algumas opções adicionais de foco foram adicionadas ao Divi - permitindo que você crie ainda mais efeitos interessantes sem ter que tocar em uma única linha de código. Agora você pode, por exemplo, criar incríveis transições de foco de fundo gradiente. Ao combinar gradientes de coluna, linha e seção, você pode obter designs exclusivos. Neste tutorial, mostraremos exatamente como fazer isso. Começaremos passando por algumas etapas gerais. Feito isso, vamos nos concentrar em três exemplos de design individualmente. Você também poderá baixar o arquivo JSON gratuitamente!
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida nos três exemplos diferentes que recriaremos ao longo deste tutorial.
Exemplo 1
Exemplo # 2
Exemplo # 3
Baixe as seções Hero GRATUITAMENTE
Inscreva-se no nosso canal no Youtube
Para colocar suas mãos nessas seções gratuitas de heróis, primeiro você precisa baixá-las 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!
Passos Gerais
Adicionar nova seção
Espaçamento
Vamos começar percorrendo algumas etapas gerais. Adicione uma nova seção à página em que está trabalhando e remova todo o preenchimento padrão. A remoção de todo o preenchimento superior e inferior irá, mais tarde, nos ajudar a combinar fundos gradientes de coluna, linha e seção.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar nova linha
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 permita que a linha ocupe toda a largura do contêiner de seção.
- Largura: 100%
- Largura máxima: 100%
Espaçamento
Passe para as configurações de espaçamento e remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar Módulo de Texto # 1 à Coluna
Adicionar conteúdo H1
Vamos começar a adicionar módulos! O primeiro de que precisamos é 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
- Alinhamento do Texto do Título: Centro
- Cor do texto do título: # 000000
- Tamanho do texto do título: 3vw (desktop), 6vw (tablet e telefone)
- Espaçamento entre letras do cabeçalho: 0,7vw
Dimensionamento
Abra as configurações de dimensionamento a seguir e altere a largura junto com o alinhamento do módulo.
- Largura: 48% (desktop), 60% (tablet e telefone)
- Alinhamento do Módulo: Centro
Espaçamento
Conclua o design do módulo adicionando alguma margem superior.
- Margem superior: 10vw
Adicionar Módulo Divisor à Coluna
Visibilidade
Avance para o próximo módulo! Adicione um Módulo Divisor e 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: # 000000
Dimensionamento
Passe para as configurações de dimensionamento e aplique as seguintes configurações:
- Peso do divisor: 0,1vw
- Largura: 10% (desktop), 16% (tablet), 25% (telefone)
- Alinhamento do Módulo: Centro
Espaçamento
Adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela também.
- Preenchimento superior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
- Preenchimento inferior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
Adicionar Módulo de Texto # 2 à Coluna
Adicionar conteúdo
Passe para o próximo módulo, que é outro Módulo de Texto. Adicione 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
- Alinhamento de Texto: Justificar
- Altura da linha de texto: 2.3em
Dimensionamento
Modifique a largura e o alinhamento do módulo nas configurações de dimensionamento a seguir:
- Largura: 30% (desktop), 54% (tablet), 70% (telefone)
- Alinhamento do Módulo: Centro
Adicionar Módulo de Botão à Coluna
Adicionar cópia
O próximo e último módulo de que precisamos na coluna é um Módulo de Botão. Adicione alguma cópia de sua escolha.
Alinhamento
Vá para a guia de design e altere o alinhamento do botão.
- Alinhamento do botão: Centro
Configurações de botão
Modifique as configurações do botão também.
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 0,8vw (desktop), 2vw (tablet), 2,8vw (telefone)
- Cor do texto do botão: # 000000
- Largura da borda do botão: 1 px
- Raio da borda do botão: 1px
- Fonte do botão: Montserrat
Espaçamento
E adicione alguns valores de espaçamento personalizados em diferentes tamanhos de tela.
- Margem superior: 2vw (desktop), 8vw (tablet e telefone)
- Margem inferior: 10vw
- Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
- Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
- Preenchimento esquerdo: 3vw (desktop), 6vw (tablet), 8vw (telefone)
- Preenchimento direito: 3vw (desktop), 6vw (tablet), 8vw (telefone)
Clonar seção duas vezes
Depois de concluir a seção, você pode cloná-la duas vezes; um para cada exemplo.
Recriar a transição de flutuação do fundo do gradiente nº 1
Seção
Fundo gradiente padrão
Vamos começar a criar a primeira transição de foco! Abra as configurações da seção e adicione o seguinte fundo gradiente padrão:
- Cor 1: # d1d1ff
- Cor 2: # f7f7f7
- Direção do gradiente: 90 graus
- Posição inicial: 50%
- Posição final: 50%
Hover Gradient Background
Modifique o fundo gradiente ao pairar.
- Cor 1: # f7f7f7
- Cor 2: # ffc1c7
- Direção do gradiente: 90 graus
- Posição inicial: 50%
- Posição final: 50%
Linha
Fundo gradiente padrão
Abra as configurações de linha a seguir e aplique as seguintes configurações de fundo gradiente padrão:
- Cor 1: # 7032ff
- Cor 2: rgba (255,255,255,0)
- Direção do gradiente: 90 graus
- Posição inicial: 10%
- Posição final: 10%
Hover Gradient Background
Modifique o fundo gradiente ao pairar.
- Cor 1: rgba (255,255,255,0)
- Cor 2: # ff324a
- Direção do gradiente: 90 graus
- Posição inicial: 90%
- Posição final: 90%
Recriar a transição de flutuação do fundo do gradiente nº 2
Seção
Fundo gradiente padrão
Passemos ao segundo exemplo! Abra as configurações da seção e adicione o seguinte fundo gradiente:
- Cor 1: # f7f7f7
- Cor 2: #eceaff
- Direção do gradiente: 156deg
- Posição inicial: 50%
- Posição final: 50%
Hover Gradient Background
Adicione um fundo gradiente diferente ao passar o mouse:
- Cor 1: #ffeaec
- Cor 2: # f7f7f7
- Direção do gradiente: 204 graus
- Posição inicial: 50%
- Posição final: 50%
Linha
Fundo gradiente padrão
Abra as configurações de linha a seguir e aplique as seguintes configurações de fundo gradiente:
- Cor 1: # a932ff
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Esquerda Inferior
- Posição inicial: 14%
- Posição final: 14%
Hover Gradient Background
Altere o fundo gradiente da linha ao passar o mouse de acordo:
- Cor 1: # ff324a
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção radial: canto superior esquerdo
- Posição inicial: 14%
- Posição final: 14%
Coluna
Fundo gradiente padrão
Passe para as configurações de coluna e adicione o seguinte fundo gradiente:
- Cor 1: # a932ff
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção radial: canto superior direito
- Posição inicial: 14%
- Posição final: 14%
Hover Gradient Background
Modifique o fundo gradiente da coluna ao passar o mouse:
- Cor 1: # ff324a
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção radial: inferior direito
- Posição inicial: 14%
- Posição final: 14%
Recriar a transição de flutuação do fundo do gradiente nº 3
Seção
Fundo gradiente padrão
Vamos para o próximo e último exemplo! Abra as configurações da seção e aplique o seguinte fundo gradiente:
- Cor 1: # ffc1c7
- Cor 2: #ffffff
- Tipo de gradiente: radial
- Direção Radial: Topo
- Posição inicial: 45%
- Posição final: 45%
Hover Gradient Background
Modifique o fundo gradiente da seção ao pairar.
- Cor 1: # ffc1c7
- Cor 2: #ffffff
- Tipo de gradiente: radial
- Direção Radial: Esquerda
- Posição inicial: 20%
- Posição final: 20%
Linha
Fundo gradiente padrão
Abra as configurações de linha a seguir e adicione o seguinte fundo gradiente:
- Cor 1: # d3dfff
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção radial: inferior
- Posição inicial: 45%
- Posição final: 45%
Hover Gradient Background
Modifique o fundo gradiente de acordo:
- Cor 1: # d3dfff
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção radial: direita
- Posição inicial: 20%
- Posição final: 20%
Coluna
Fundo gradiente padrão
Por último, mas não menos importante, adicione um fundo gradiente de coluna e pronto!
- Cor 1: # f7f7f7
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
- Posição inicial: 41%
- Posição final: 41%
Antevisão
Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado de todos os três exemplos que recriamos ao longo deste tutorial!
Exemplo 1
Exemplo # 2
Exemplo # 3
Pensamentos finais
Nesta postagem, mostramos como usar criativamente as opções adicionais de foco de fundo gradiente do Divi para criar lindas transições de foco apenas com as opções integradas do Divi. Começamos com algumas etapas gerais e continuamos recriando cada um dos três exemplos. 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.