Como usar as opções de posição da Divi para criar pacotes de imagens
Publicados: 2020-06-18Esteja você procurando por um novo visual para uma galeria de imagens ou apenas querendo uma bela exibição para imagens de produtos, este tutorial deve ajudar. Normalmente, ao adicionar imagens a um site Divi, podemos limitar o design a uma imagem por coluna. Embora esse seja um design tradicionalmente seguro e limpo, você pode descobrir que agrupar imagens na mesma coluna pode criar belos designs de pacotes de imagens que ficam ótimos em layouts de coluna única ou múltipla.
Neste tutorial, vamos mostrar como usar as opções de posição integradas do Divi para projetar 3 pacotes de imagens criativas que você pode usar em seu site de todas as maneiras.
Vamos começar.
Espiada
Aqui está uma rápida olhada nos designs que construiremos neste tutorial.
Projeto do pacote de imagens nº 1
Comece a construir o design # 1
Projeto do pacote de imagens nº 2
Comece a construir o projeto # 2
Projeto do pacote de imagens nº 3
Comece a construir o projeto # 3
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, 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!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Projetando o pacote de imagens nº 1
Para este primeiro design de pacote de imagem, vamos posicionar duas imagens (ligeiramente giradas) em cada lado de uma imagem central.
Comece adicionando uma linha de uma coluna a uma seção regular.
Adicionar imagem intermediária
Dentro da coluna, adicione um módulo de imagem.
Em seguida, carregue uma imagem para o módulo.
Para essas imagens, usaremos capturas de tela do Pacote de Layout do Fitness Coach. Cada um deles deve ter 880 x 1200 pixels.
Abra as configurações de imagem e atualize o seguinte:
- Largura: 50%
- Alinhamento do Módulo: centro
Adicione uma sombra de caixa da seguinte forma:
- Sombra da caixa: veja a imagem
- Posição vertical da sombra da caixa: 0 px
- Força do desfoque de sombra da caixa: 38px
- Força de propagação da sombra da caixa: 5px
- Cor da sombra: rgba (0,0,0,0.2)
Em seguida, defina o Índice Z como 1 para que fique acima das outras imagens do pacote.
- Índice Z: 1
Adicionar imagem à esquerda
Para criar a imagem esquerda no pacote, adicione uma nova imagem sob a imagem do meio.
Atualize a imagem por uma nova (certifique-se de que todas sejam do mesmo tamanho para obter os melhores resultados).
Na guia de design, atualize a largura da seguinte maneira:
- largura: 30%
Em seguida, adicione a sombra da caixa da seguinte forma:
- Sombra da caixa: veja a imagem
- Cor da sombra: rgba (0,0,0,0.2)
Em seguida, dê à imagem uma posição absoluta no local central esquerdo para que fique adjacente à imagem do meio no lado esquerdo.
- posição: absoluta
- Localização: centro esquerdo
Para dar um pouco de rotação à imagem, atualize a opção de rotação de transformação da seguinte maneira:
Transformar e girar eixo Z: -10deg
Adicione a imagem certa
Para criar a imagem certa, abra a caixa Camadas e duplique a imagem esquerda.
Rotule os módulos de imagem (imagem esquerda, imagem direita, etc.) para que você possa identificá-los facilmente mais tarde. Em seguida, abra as configurações da imagem duplicada e ajuste o local da seguinte forma:
- localização: centro direito
Em seguida, ajuste a opção de rotação de transformação da seguinte maneira:
- Índice Z de rotação de transformação: 10deg
Não se esqueça de trocar a imagem duplicada por uma nova.
Agora verifique o resultado até agora.
Adicionando pacote de imagens a várias colunas
Como as imagens são posicionadas em uma coluna, você pode adicionar facilmente esse design de pacote de imagens a vários layouts de coluna.
Para adicionar o pacote de imagens a várias colunas, duplique a linha que contém o pacote de imagens atual.
Na linha duplicada, duplique a coluna para criar outra coluna com o pacote de imagens incluído. Isso criará os pacotes de imagens em um layout de duas colunas.
Para criar uma linha de três pacotes de imagens, duplique a linha de duas colunas e, em seguida, duplique uma das colunas na linha duplicada. Isso lhe dará um layout de três colunas.
Resultado final
Aqui está o design final do pacote de imagens nº 1.
Projetando o pacote de imagens nº 2
O próximo projeto apresenta um pacote de imagens com cinco imagens - uma imagem no centro e quatro em cada canto da coluna.
Para começar, crie uma nova seção regular com um quarto, metade e um quarto da linha da coluna.
Adicionar imagem central
Na coluna do meio, adicione um módulo de imagem.
Em seguida, carregue uma imagem para o módulo. Estamos usando imagens do Pacote de Layout de Loja de Móveis (cada um com 800px por 1200).
Na guia de design, atualize o seguinte:
- Cor de fundo: # f7f3ec
- Largura: 55%
- Alinhamento do Módulo: centro
- Margem: 0px
- Preenchimento: 5% superior, 5% inferior, 5% esquerdo, 5% direito
Na guia avançado, aumente o Índice Z em 1 para garantir que a imagem permaneça acima das outras imagens no espaço Z.
- Índice Z: 1
Adicionar imagem superior esquerda
Para adicionar a imagem superior esquerda, adicione um novo módulo de imagem sob a imagem central na coluna do meio.
Faça upload de uma nova imagem para o módulo.
Em seguida, atualize as configurações de design da seguinte forma:
- Largura: 40%
- Margem: 0px inferior
Espaçamento entre colunas
A altura da coluna é determinada pela altura da imagem central e pela quantidade de preenchimento superior e inferior que adicionamos. Portanto, para dar às nossas imagens posicionadas absolutamente o espaçamento adequado, precisamos aumentar a altura da coluna aumentando o preenchimento superior e inferior.
- Preenchimento (desktop): 12% superior, 12% inferior
- Preenchimento (tablet): 24% superior, 24% inferior
Em seguida, dê à imagem superior esquerda uma posição absoluta da seguinte maneira:
- Posição: Absoluta
- Localização: canto superior esquerdo
Adicionar imagem superior direita
Agora que a imagem superior esquerda está no lugar, duplique a imagem para criar a imagem superior direita.
(Neste ponto, é uma boa ideia adicionar rótulos a cada uma das imagens para facilitar a identificação posterior.)
Abra a imagem duplicada (canto superior direito) e atualize o local da posição absoluta:
- Localização: canto superior direito
Adicionar imagem inferior esquerda
Para criar a imagem inferior esquerda, duplique a imagem superior direita e atualize os rótulos conforme necessário.
Abra as configurações da imagem duplicada (canto inferior esquerdo) e atualize o local da posição absoluta:
- Localização: canto inferior esquerdo
Adicionar imagem inferior direita
Para criar a imagem inferior direita, duplique a imagem inferior esquerda e atualize o rótulo conforme necessário. Em seguida, atualize a imagem e atribua a ela um novo local:
- Localização: canto inferior direito
Adicionar acento de design de sombra de caixa
Para adicionar um toque de design agradável, podemos adicionar uma sombra de caixa à imagem superior esquerda da seguinte maneira:
- Sombra da caixa: veja a imagem
- Posição horizontal da sombra da caixa: -170 px
- Posição vertical da sombra da caixa: 170px
- Cor da sombra: rgba (36,57,74,0.07)
Adicione um destaque de design de sombra de caixa complementar à imagem superior direita da seguinte maneira:
- Sombra da caixa: veja a imagem
- Posição horizontal da sombra da caixa: 170px
- Posição vertical da sombra da caixa: 170px
- Cor da sombra: rgba (36,57,74,0.07)
Adicionar Texto à Coluna da Esquerda
Para adicionar algum texto ao design, adicione um novo módulo de texto à coluna esquerda.
Contente
Em seguida, atualize o conteúdo com o seguinte:
<h2>Image Bundle</h2>
Design de Texto
Na guia de design, atualize o seguinte:
- Fonte do título 2: Montserrat
- Estilo da fonte do título 2: TT
- Alinhamento de texto do título 2: à direita
- Cor do texto do título 2: # 24394a
- Tamanho do texto do título 2: 34 px
- Cabeçalho 2 espaçamento entre letras: 4px
- Altura da linha do título 2: 1,3em
Preenchimento da coluna esquerda
Para diminuir um pouco o texto, abra as configurações da coluna esquerda e atualize o seguinte preenchimento:
- Preenchimento: 20% restantes
Adicionar Texto à Coluna da Direita
Para criar o texto da coluna direita, copie o módulo de texto na coluna esquerda e cole-o na coluna direita. Em seguida, abra as configurações de texto e atualize o seguinte:
- Alinhamento de texto do título 2: à esquerda
Preenchimento da coluna direita
Assim como fizemos para a coluna da esquerda, adicione o seguinte preenchimento à coluna da direita (coluna 3) para trazer para baixo o módulo de texto.
- Preenchimento: 33% superior
Fundo da seção
Para finalizar o design, abra as configurações da seção e adicione a seguinte cor de fundo:
- Cor de fundo: # f7f3ec
Aqui está o resultado até agora. 
Adicionando pacote de imagens a várias colunas
Para adicionar este pacote de imagens a várias colunas, duplique a linha e, em seguida, exclua as colunas esquerda e direita da linha duplicada, deixando apenas a coluna com o pacote de imagens.
Usando a seleção múltipla, selecione a imagem superior esquerda e a imagem superior direita. Abra as configurações e retire a sombra da caixa.
Em seguida, duplique a coluna uma ou duas vezes para criar várias colunas com os pacotes de imagens incluídos.
Se você estiver criando um layout de três colunas para seu pacote de imagens, abra as configurações de cada coluna e atualize o preenchimento da seguinte forma:
- preenchimento: 8% superior, 8% inferior
Resultado final
Aqui está o resultado final.
E aqui está no celular.
Projeto do pacote de imagens nº 3
Para este último design de pacote de imagens, vamos posicionar 5 imagens lado a lado com rotação 3D sutil para criar uma boa exibição para coisas como temas filhos ou pacotes de layout.
Adicionar linha
Para começar, adicione uma linha de uma coluna a uma seção regular.
Adicionar imagem intermediária
Dentro da linha, adicione um módulo de imagem.
Em seguida, carregue uma imagem para o módulo de imagem. Estamos usando as mesmas capturas de tela de 880 x 1200 pixels do Pacote de layout do preparador físico que usamos para o design # 1.
Na guia de design, atualize as opções de dimensionamento da seguinte maneira:
- Largura: 30%
- Alinhamento do Módulo: centro
Em seguida, dê à imagem uma sombra de caixa sutil:
- Sombra da caixa: veja a imagem
- Posição vertical da sombra da caixa: -12 px
- Força do desfoque de sombra da caixa: 28 px
- Cor da sombra: rgba (0,0,0,0.11)
Em seguida, retire a margem inferior padrão configurando-a para 0px.
- Margem: 0px inferior
Para certificar-se de que a imagem permanece acima das outras imagens durante a sobreposição, ajuste o Z Index.
- Índice Z: 2
Adicionar Perspectiva de Coluna
Antes de adicionarmos o resto das imagens ao pacote de imagens, precisamos adicionar CSS personalizado à coluna que adicionará perspectiva às imagens ao girá-las usando as opções de transformação. Isso cria um efeito 3D realista.
Adicionar imagem do meio à esquerda
Agora que definimos nossa perspectiva, podemos começar a adicionar as outras imagens.
Para criar a imagem do meio esquerdo, duplique a imagem do meio.
Atualize os rótulos das imagens na caixa Camadas conforme necessário e, em seguida, atualize o módulo de imagem duplicada com uma nova imagem.
Abra as configurações da imagem e atualize a localização da posição absoluta e o Índice Z da seguinte forma:
- Localização: canto inferior esquerdo
- Índice Z: 1
Em seguida, adicione as seguintes opções de transformação para posicionar e girar a imagem.
- Transformar Traduzir Eixo X: 75%
- Transformar, girar, eixo X: 30deg
Adicionar imagem à esquerda
Para criar a imagem da esquerda, duplique a imagem do meio à esquerda que acabamos de criar.
Abra as configurações da nova imagem e atualize a largura:
- Largura: 20%
Em seguida, ajuste a opção de conversão de transformação da seguinte maneira:
- Transformar Traduzir Eixo X: 0px
Em seguida, ajuste o Índice Z para que a imagem fique atrás da imagem central esquerda.
- Índice Z: 0
Adicionar imagem do meio à direita
Em seguida, vamos adicionar uma imagem do meio à direita ao pacote de imagens.
Para criar a imagem, abra o pop-up Camadas. Em seguida, duplique a imagem do meio à esquerda, arraste a imagem duplicada abaixo da imagem à esquerda e rotule-a de acordo (ou seja, “imagem do meio da direita”).
Abra as configurações para a imagem do meio à direita e altere a localização da posição absoluta da seguinte forma:
- Localização: canto inferior direito
Em seguida, ajuste as opções de transformação da seguinte maneira:
- Transformar Traduzir Eixo X: -75%
- Transformar, girar o eixo X: -30deg
Adicionar imagem certa
Para criar a imagem certa (a última), podemos duplicar a imagem esquerda. Em seguida, arraste a imagem duplicada sob a imagem direita do meio e rotule-a de “imagem certa”.
Abra as configurações de imagem corretas e atualize a localização da posição absoluta da seguinte forma:
- Localização: canto inferior direito
Em seguida, ajuste a rotação de transformação.
- Transformar, girar o eixo X: -30deg
Confira o resultado até agora.
E aqui está o mesmo pacote de imagens adicionado a várias colunas.
Pensamentos finais
Depois de entender como funciona a opção de posição absoluta do Divi, podemos usá-lo para criar alguns designs de pacote de imagens bastante impressionantes. A melhor parte desses pacotes de imagens é que eles existem em uma única coluna, para que tenham uma ótima aparência em várias colunas e sejam dimensionados perfeitamente em dispositivos móveis também.
Espero que isso lhe dê inspiração para criar exibições de imagens incríveis para o seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!