Como empilhar itens de portfólio lindamente com as opções de transformação da Divi

As novas opções de transformação Divi abriram muitas portas para a criação de um design web visualmente atraente. Isso nos deixa um passo mais perto de não precisar de nenhum software de edição de imagem ao projetar um site do zero. Podemos transformá-lo para ficar exatamente do jeito que queremos, ao mesmo tempo em que temos um design 100% responsivo.

Neste post, vamos usar as novas opções de transformação para empilhar itens de portfólio de maneira bonita. Essa é uma ótima abordagem para mostrar sites feitos anteriormente, por exemplo. Também garantiremos que as imagens permaneçam onde estão, independentemente do tamanho da tela que os visitantes estejam usando. Esperamos que este tutorial inspire você a ser criativo com as novas opções de transformação do Divi ao personalizar um site de acordo com as suas necessidades.

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 adicionando uma nova seção à sua página. Abra as configurações da seção e adicione um fundo gradiente a ela.

• Cor 1: # f4f4f4
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 30%
• Posição final: 30%

Espaçamento

Em seguida, vá para a guia de design e modifique os valores de preenchimento personalizado nas configurações de espaçamento.

• Preenchimento superior: 0px (desktop), 18vw (tablet), 40vw (telefone)
• Preenchimento inferior: 0px (desktop), 18vw (tablet), 40vw (telefone)

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as 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
• Equalize Alturas de Coluna: Sim

Espaçamento

Em seguida, vá para as configurações de espaçamento e remova o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Exibição

Também estamos garantindo que as duas colunas apareçam lado a lado em telas menores. Para fazer isso, precisaremos adicionar uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo de Imagem # 1 à Coluna 1

Enviar Imagem

Agora podemos começar a adicionar os diferentes módulos! Para poder seguir este tutorial, vá em frente e salve a seguinte tela de impressão em seu computador:

Carregue a tela de impressão para um Módulo de imagem na primeira coluna.

Dimensionamento

Em seguida, vá para a guia de design e ative a opção 'Forçar largura total'. Depois de fazer isso, a imagem ocupará toda a largura da coluna.

• Forçar largura total: Sim

Espaçamento

Para diminuir o tamanho da imagem, vamos adicionar algumas margens esquerda e direita personalizadas. Você notará que estamos usando uma unidade de janela de visualização para garantir que o tamanho da imagem permaneça intacto, não importa o tamanho da tela.

• Margem superior: -10vw
• Preenchimento esquerdo: 11vw
• Preenchimento direito: 11vw

Fronteira

Adicione '2vw' a cada um dos cantos nas configurações de borda a seguir.

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)

Transformar Traduzir

Agora podemos começar a transformar a imagem! Adicione os seguintes valores à guia de conversão de transformação das opções de transformação:

• Inferior: -26vw
• Direita: -2vw

Os valores que você adiciona aqui dependem da largura e da altura de sua imagem, portanto, se estiver usando uma imagem diferente, você terá que modificar os valores de acordo. Certifique-se de usar unidades de janela de visualização para garantir que a posição da imagem permaneça a mesma em todos os tamanhos de tela.

Transformar, girar

Vá para a guia de rotação de transformação e gire a imagem de acordo:

• Esquerda: 24 graus
• Centro: 46deg
• Direito: -7deg

Traduzir Skew

Por último, mas não menos importante, ative a inclinação da tradução com os seguintes valores:

• Inferior: -4deg
• Direita: 24deg

Adicionar Módulo de Imagem # 2 à Coluna 1

Enviar Imagem

Avance para o próximo Módulo de Imagem! Salve a seguinte tela de impressão em seu computador ou use outra tela de impressão de sua escolha:

Continue carregando a tela de impressão para o segundo Módulo de imagem na coluna 1.

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e habilite a opção 'Forçar largura total'.

• Forçar largura total: Sim

Espaçamento

Estamos reduzindo o tamanho da imagem e fazendo com que ela se sobreponha à imagem anterior usando alguns valores de margem personalizados nas configurações de espaçamento.

• Margem superior: -81vw (desktop), -50vw (tablet e telefone)
• Margem esquerda: 11vw
• Margem direita: 11vw

Fronteira

Vamos adicionar '2vw' a cada um dos cantos nas configurações de borda a seguir.

Sombra da caixa

E vamos adicionar uma sombra de caixa também. Observe como estamos usando uma sombra de caixa mais escura para a segunda imagem do item do portfólio. Isso o ajudará a criar mais profundidade entre os itens do portfólio.

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

Transformar Traduzir

Em seguida, vá para as configurações de transformação e modifique os valores de conversão de transformação:

• Inferior: -8vw
• Certo: 0px

Novamente, esses valores realmente dependem de como você deseja posicionar a tela de impressão e das dimensões que ela tem. Quanto menor for a imagem, mais você terá que empurrá-la para a esquerda usando um valor negativo maior.

Transformar, girar

Passe para a guia de rotação de transformação e brinque com todos os três valores.

• Esquerda: 24 graus
• Centro: 46deg
• Direito: -7deg

Traduzir Skew

Por último, mas não menos importante, modifique os valores de inclinação da tradução:

• Inferior: -4deg
• Direita: 24deg

Adicione o Módulo de Imagem # 3 à Coluna 1

Enviar Imagem

Para o próximo e último Módulo de imagem de que precisamos na coluna 1. Salve a seguinte tela de impressão em seu computador ou use qualquer outra tela de impressão de sua escolha:

Adicione a tela de impressão que você salvou a um novo Módulo de imagem.

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e habilite a opção 'Forçar largura total'.

• Forçar largura total: Sim

Espaçamento

Vá para as configurações de espaçamento a seguir e modifique os valores de margem de acordo:

• Margem superior: -107vw
• Margem esquerda: 19vw
• Margem direita: 19vw

Fronteira

Continue adicionando '2vw' a cada um dos cantos do Módulo de Imagem.

Sombra da caixa

Adicione uma sombra de caixa a seguir. Novamente, estamos usando uma cor de sombra mais forte do que as que usamos para os dois módulos de imagem anteriores.

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

Transformar Traduzir

Em seguida, vá para as configurações de transformação e modifique os valores de conversão de transformação:

• Inferior: -42vw
• Certo: 11vw

Transformar, girar

Passe para a guia de rotação de transformação e faça algumas alterações lá também.

• Esquerda: 24 graus
• Centro: 46deg
• Direito: -7deg

Traduzir Skew

Por último, mas não menos importante, modifique os valores de inclinação da tradução.

• Inferior: -4deg
• Direita: 24deg

Adicionar Módulo de Título de Texto à Coluna 2

Adicionar cópia H2

Vamos para a segunda coluna! Adicione um Módulo de Texto com algum conteúdo H2 de sua escolha.

Configurações de texto H2

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

• Fonte do título 2: Roboto
• Peso da fonte do cabeçalho 2: fino
• Alinhamento de Texto Título 2: Esquerda
• Cor do texto do título 2: # 000000
• Tamanho do texto do título 2: 5vw (desktop), 6vw (tablet), 7vw (telefone)
• Cabeçalho 2 espaçamento entre letras: -1 px

Espaçamento

Continue adicionando alguns valores de margem personalizados nas configurações de espaçamento.

• Margem superior: 35vw (desktop), 10vw (tablet), 0vw (telefone)
• Margem esquerda: -4vw
• Margem direita: 4vw

Adicionar Módulo Divisor à Coluna 2

Visibilidade

O próximo módulo de que precisamos na coluna 2 é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Em seguida, vá para a guia de design e altere a cor do divisor.

• Cor: # 8193fa

Dimensionamento

Modifique as configurações de dimensionamento também.

• Peso do divisor: 8px
• Largura: 28%

Espaçamento

E adicione alguns valores de margem personalizados.

• Margem superior: 1vw
• Margem esquerda: -4vw
• Margem direita: 4vw

Adicionar Módulo de Texto de Descrição à Coluna 2

Adicionar conteúdo

O próximo módulo de que precisamos na coluna 2 é outro Módulo de Texto. Adicione algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Em seguida, vá para as configurações de texto e faça algumas alterações.

• Fonte do texto: Open Sans
• Tamanho do texto: 0,6vw (desktop), 1,2vw (tablet), 1,8vw (telefone)
• Altura da linha de texto: 3.1em (Desktop), 2.7em (Tablet), 2.6em (Telefone)
• Orientação do Texto: Esquerda

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem superior: 1vw
• Margem esquerda: -4vw
• Margem direita: 4vw

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

O próximo e último módulo de que precisamos para concluir o design é 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: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor 1: # 5627ba
• Cor 2: # 8fb5fc
• Direção do gradiente: 122 graus
• Largura da borda do botão: 0 px
• Peso da fonte: ultra negrito
• Estilo da fonte: maiúsculas

Espaçamento

Altere também a margem personalizada e os valores de preenchimento.

• Margem superior: 2vw (desktop), 3vw (tablet), 5vw (telefone)
• Margem inferior: 6vw (tablet), 8vw (telefone)
• Margem esquerda: -4vw
• Margem direita: 4vw
• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 3vw (desktop), 5vw (tablet), 7vw (telefone)
• Preenchimento direito: 3vw (desktop), 5vw (tablet), 7vw (telefone)

Sombra da caixa

Por último, mas não menos importante, adicione uma sombra de caixa sutil e pronto!

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

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 novas opções de transformação do Divi. Mais especificamente, empilhamos itens de portfólio para criar um design agradável e visualmente atraente. Também nos certificamos de que as imagens fiquem ótimas em todos os tamanhos de tela. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!