Criando uma estrutura de projeto diagonal com as opções de transformação da Divi (download gratuito!)

Estamos sempre procurando maneiras de expandir as possibilidades de design que você tem com o Divi. E desde que a atualização das opções de transformação foi lançada, muitas novas técnicas tornaram-se possíveis, sem a necessidade de conhecimento de codificação customizada.

Neste post, vamos mostrar como criar uma estrutura de design diagonal impressionante. O design que recriaremos funciona muito bem para a seção de heróis e combina com qualquer tipo de site que você deseja configurar. No final do tutorial, você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Vamos começar a recriar!

Adicionar nova seção

Fundo Gradiente

Comece criando uma nova página ou abrindo uma existente e adicione uma seção regular a ela. Abra as configurações da seção e adicione um fundo gradiente usando as seguintes configurações:

• Cor 1: # ffd633
• Cor 2: #efefef
• Direção do gradiente: 217 graus
• Posição inicial: 45%
• Posição final: 45%

Espaçamento

Em seguida, vá para a guia de design e adicione algum preenchimento personalizado superior e inferior.

• Preenchimento superior: 4vw
• Preenchimento inferior: 12vw

Transbordar

Precisamos ter certeza de que as opções de transformação não ultrapassam o contêiner da seção. Para fazer isso, adicionaremos uma única linha de código CSS ao elemento principal da seção.

overflow: hidden;

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando a primeira 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 da tela. Na próxima etapa desta postagem, substituiremos o espaço que acabamos de remover adicionando alguns valores de preenchimento esquerdo e direito personalizados usando uma unidade de janela de visualização. Isso garantirá que o design permaneça responsivo em todos os tamanhos de tela.

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

Espaçamento

Vá em frente e adicione alguns valores de preenchimento personalizados às configurações de espaçamento a seguir.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 25vw (desktop), 16vw (tablet), 7vw (telefone)
• Preenchimento direito: 25vw (desktop e tablet), 27vw (telefone)

Exibição

Também estamos garantindo que as colunas apareçam lado a lado em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo Blurb à Coluna 1

Adicionar Título

É hora de começar a adicionar módulos! Adicione um Módulo Blurb à coluna 1 e insira um título de sua escolha.

Carregar ilustração

Continue enviando uma ilustração de sua escolha. Os que usaremos ao longo deste tutorial fazem parte do App Developer Layout Pack. Você pode baixar as ilustrações gratuitamente acessando o post e baixando-as no final.

Fundo

Em seguida, adicione uma cor de fundo totalmente branca ao Módulo do Blurb.

• Cor de fundo: #ffffff

Configurações de texto do título

Vá para a guia de design e modifique as configurações de texto do título de acordo:

• Fonte do título: Poppins
• Peso da fonte do título: Semi negrito
• Estilo da fonte do título: maiúsculas
• Alinhamento do Texto do Título: Centro
• Tamanho do texto do título: 0,5vw (desktop), 1,6vw (tablet), 2,4vw (telefone)
• Espaçamento entre letras de título: 1px
• Altura da linha do título: 1,6em

Espaçamento

Modifique as configurações de espaçamento a seguir.

• Preenchimento superior: 1,3 vw (desktop), 4vw (tablet), 6vw (telefone)
• Preenchimento inferior: 1,3vw (desktop), 4vw (tablet), 6vw (telefone)
• Preenchimento esquerdo: 1vw (desktop), 7vw (tablet e telefone)
• Preenchimento direito: 1vw (desktop), 7vw (tablet e telefone)

Fronteira

Continue adicionando '1vw' aos cantos superior esquerdo e superior direito do Módulo Blurb.

Sombra da caixa

Por último, mas não menos importante, adicione uma sombra de caixa ao módulo usando as seguintes configurações:

• Posição vertical da sombra da caixa: 10 px
• Força do desfoque de sombra da caixa: 60 px
• Cor da sombra: rgba (39,39,52,0.37)

Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes

Depois de personalizar o Módulo Blurb, você pode cloná-lo duas vezes. Coloque as duplicatas nas duas colunas restantes da linha.

Alterar Duplicado # 1

Alterar cópia e ilustração

Altere a cópia e a ilustração da primeira duplicata.

Alterar espaçamento

Junto com as configurações de espaçamento.

• Margem superior: -3vw
• Preenchimento superior: 2.7vw (desktop), 8vw (tablet), 11vw (telefone)
• Preenchimento inferior: 2.7vw (desktop), 8vw (tablet), 11vw (telefone)

Alterar Duplicado # 2

Alterar cópia e ilustração

Modifique a cópia e a ilustração da segunda duplicata também.

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 a ela.

• Cor 1: # fff20a
• Cor 2: # ffb200
• Direção do gradiente: 165deg

Dimensionamento

Em seguida, vá para a guia de design e ative a opção 'Make This Row Fullwidth'.

• Tornar esta linha com largura total: Sim

Sombra da caixa

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

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

Adicionar Módulo Divisor

Visibilidade

Estamos usando esta linha apenas para fins de design, não para mostrar nenhum módulo. Mas para ter certeza de que sabemos exatamente a aparência da linha, precisaremos adicionar um Módulo divisor a ela. Não queremos que o módulo apareça, então certifique-se de que a opção 'Mostrar divisor' esteja desabilitada.

• Mostrar divisor: Não

Aplicar opções de transformação às linhas

Linha # 1

Transformar Traduzir

Agora que completamos as duas primeiras linhas, vamos transformá-las para caber na estrutura de design diagonal que pretendemos criar. Comece abrindo as configurações da primeira linha e modifique os valores de conversão de transformação.

• Inferior: 30vw
• Direito: 6vw

Transformar, girar

Em seguida, altere o valor de rotação da transformação à esquerda.

• Esquerda: 37deg

Linha # 2

Escala de transformação

Continue abrindo a configuração da segunda linha e modifique os valores da escala de transformação.

• Abaixo: 133% (desktop), 171% (tablet), 176% (telefone)
• À direita: 133% (desktop), 171% (tablet), 176% (telefone)

Transformar Traduzir

Junto com os valores de conversão de conversão.

• Parte inferior: 12vw (desktop), 1vw (tablet), 3vw (telefone)
• Direita: -2vw (desktop), -6vw (tablet), -4vw (telefone)

Transformar, girar

E gire a linha nas configurações de rotação de transformação também.

• Esquerda: 37deg

Adicionar linha # 3

Estrutura da Coluna

Passe para a próxima e última linha! Você pode usar esta linha e suas colunas para compartilhar qualquer tipo de informação que desejar. Para recriar o design exato que você viu na visualização desta postagem, selecione 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 da tela.

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

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

Adicionar conteúdo H1

É hora de começar a adicionar módulos! Começaremos com um título Módulo de texto. Insira algum conteúdo H1 de sua escolha.

Configurações de texto H1

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

• Fonte do título: Poppins
• Tamanho do texto do título: 3vw (desktop), 5vw (tablet), 6vw (telefone)
• Espaçamento entre letras do cabeçalho: -2 px

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Margem superior: -6vw (desktop e tablet), 11vw (telefone)
• Margem esquerda: 10vw

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

Adicionar conteúdo

O segundo módulo de que precisamos é outro Módulo de Texto. Adicione algum conteúdo de sua escolha.

Configurações de texto

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

• Fonte do texto: Open Sans
• Tamanho do texto: 0.8vw (desktop), 1.5vw (tablet), 2.2vw (telefone)
• Altura da linha de texto: 2.6em

Espaçamento

Altere também os valores de espaçamento.

• Margem superior: 3vw (telefone), 5vw (telefone)
• Margem esquerda: 10vw
• Margem direita: 28vw (tablet), 20vw (telefone)

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

O próximo e último módulo de que precisamos é um Módulo de botão. Adicione alguma cópia de sua escolha.

Configurações de botão

Em seguida, vá para a guia de design e modifique as configurações do botão.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,9vw (desktop), 2,5vw (tablet), 3,5vw (telefone)
• Cor do texto do botão: # 000000
• Largura da borda do botão: 1 px
• Cor da borda do botão: # 000000
• Raio da borda do botão: 1px
• Fonte do botão: Poppins
• Peso da fonte: leve

Espaçamento

Por último, mas não menos importante, molde seu módulo usando alguns valores de espaçamento personalizados e pronto!

• Margem superior: 2vw (desktop), 5vw (tablet e telefone)
• Margem esquerda: 10vw
• Enchimento superior: 1vw
• Preenchimento inferior: 1vw
• Preenchimento esquerdo: 3vw
• Preenchimento direito: 3vw

Baixe a seção Diagonal Design GRATUITAMENTE

Para colocar suas mãos na seção de design diagonal livre, 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 já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

Neste artigo, mostramos como criar uma estrutura de design diagonal impressionante usando apenas as opções integradas do Divi. Esperamos que este tutorial ajude você a se familiarizar com as novas opções de transformação Divi. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!