Como criar uma colagem de imagem interativa usando as opções de posição da Divi
Publicados: 2020-01-29As novas opções de posição da Divi abrem a porta para a criação de layouts de colagem de imagem exclusivos usando a propriedade de posição absoluta. Isso permite que você faça posicionamentos mais precisos para cada elemento de seu design. E uma vez que você combine isso com as incontáveis combinações de configurações de design dentro do Divi, você pode criar algumas colagens de imagens incríveis.
Neste tutorial, vou mostrar como usar as opções de posição integradas do Divi para criar uma bela colagem de imagem interativa para o seu site Divi em minutos.
Vamos começar!
Espiada
Aqui está uma olhada rápida no layout de colagem de imagem interativa que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos no layout de colagem de imagens deste tutorial, primeiro você precisa baixá-lo 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 para sua página, simplesmente extraia o arquivo zip e arraste o arquivo JSON para o 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.
Criando a colagem de imagem interativa com as opções de posição da Divi
Otimizando a linha e a coluna
Para começar, crie uma linha de uma coluna.
Configurações de linha
Em seguida, precisamos atualizar a linha para que não tenhamos nenhum espaço extra entre os módulos (por meio da largura da medianiz), portanto, definiremos a largura da medianiz como 1. Também precisamos ter certeza de que a linha ocupe toda a largura da janela do navegador portanto, podemos aproveitar as unidades de comprimento vw para posicionar nossas imagens (a unidade de comprimento vw (largura da janela de visualização) está relacionada à largura da janela do navegador). Com a largura definida como 100%, podemos usar unidades de comprimento vw para posicionar nossas imagens dentro da linha / coluna de forma que a posição permaneça intacta em todas as larguras do navegador para um design responsivo perfeito. E para ocultar qualquer estouro de imagem fora da linha, precisamos definir o estouro como oculto.
Para fazer isso, otimize as configurações de linha da seguinte maneira:
Configurando a altura da coluna
Por padrão, a altura da coluna é determinada pela altura do conteúdo (ou módulos Divi) que ela contém. Módulos Divi (como todos os divs em HTML) terão uma posição estática por padrão, o que significa que eles irão adicionar espaço / altura real à sua coluna pai porque ela está posicionada no fluxo normal da página. No entanto, os Módulos Divi que têm uma posição absoluta, quebram o fluxo normal e não criarão espaço / altura real para a coluna. Por esse motivo, precisamos adicionar uma altura especificada para a coluna para que possamos posicionar as imagens dentro de um espaço predeterminado.
Para fazer isso, abra as configurações de linha e atualize as configurações de coluna adicionando o seguinte CSS personalizado ao elemento principal.
height: 40vw;
Na guia do telefone, restaure a altura ao seu estado padrão, pois também estamos alterando as imagens de volta para uma posição estática no telefone. Adicione o seguinte CSS personalizado à guia do telefone:
height: auto !important;
Adicionando o Texto do Título
Com a altura da coluna definida, podemos começar a adicionar nossos elementos posicionados absolutos à coluna. Vamos começar adicionando um módulo de texto para o título do nosso layout de colagem de imagens.
Conteúdo do Módulo de Texto
Em seguida, atualize o texto com o seguinte conteúdo:
<h2>Recent Work</h2>
Configurações do módulo de texto
Em seguida, atualize as configurações do módulo de texto da seguinte forma:
- Fonte do título 2: Limelight
- Título 2 Alinhamento de texto: centro
- Cor do texto do título 2: # 24005b
- Tamanho do texto do título 2: 5vw (desktop e tablet), 50px (telefone)
- Largura: 100%
- Largura máxima: 35vw (desktop e tablet), 100% (telefone)
- Posição: Absoluta (desktop), Padrão (telefone)
- Deslocamento horizontal (desktop): 35vw
Criação e posicionamento de imagens
Agora que o título está no lugar, vamos criar a primeira imagem para nossa colagem de imagens interativa. A ideia é criar o primeiro com todas as otimizações feitas para que possamos duplicá-lo para facilitar a criação e o posicionamento do restante das imagens para a colagem.
Otimizando a primeira imagem com efeitos de foco, caixa de luz e posicionamento absoluto.
Primeiro, adicione um módulo de imagem no módulo de texto.
Em seguida, carregue uma imagem para o módulo e escolha a opção de abrir a imagem em uma mesa de luz. Agora a imagem será exibida em uma mesa de luz ao clicar.
Escala de imagem ao pairar
Além da interação com a caixa de luz, adicione um efeito de foco que faz com que a imagem aumente um pouco mais. Para fazer isso, atualize a seguinte opção de transformação:
- Escala de transformação (pairar): 115%
Posicionamento absoluto com prioridade de índice Z ao passar o mouse
Para posicionar nossa imagem, usaremos uma posição absoluta com unidades de comprimento vw. Atualize as opções de posição da seguinte forma:
Na área de trabalho (e tablet)
- Posição: absoluta
- Localização: Superior Esquerdo
- Deslocamento vertical: 5vw
- Deslocamento horizontal: -2vw
Ao telefone
- Posição: Padrão
Ao pairar
- Índice Z: 2
Design de imagem e configurações responsivas
Em seguida, atualize o seguinte:
- Alinhamento de imagem: esquerda (desktop), centro (telefone)
- Largura: 75% (telefone)
- Largura máxima: 20vw (desktop e tablet), 100% (telefone)
- Margem (telefone): 30px inferior
- Sombra da caixa: veja a imagem
- Saturação: 0% (desktop), 100% (foco)
Usando a primeira imagem como modelo para criar e posicionar rapidamente as outras imagens
Assim que a primeira imagem estiver completa, é realmente fácil criar novas imagens para construir a colagem de imagens interativa. É também uma ferramenta de design poderosa porque você poderá arrastar as imagens no lugar e ajustar o tamanho enquanto visualiza o design em tempo real.
Aqui está o processo ...
- Duplique a imagem clicando no ícone duplicar. A imagem duplicada será posicionada absolutamente no mesmo lugar, diretamente em cima da imagem que você está duplicando.
- Arraste a imagem no lugar. Como a imagem duplicada herda a unidade de comprimento vw da imagem anterior, você pode usar o ícone de arrastar para posicionar a imagem exatamente onde deseja dentro da linha.
- Atualize a imagem com uma nova.
- Ajuste o tamanho da imagem usando as opções de tamanho embutidas.
Aqui está uma ilustração de como seria a aparência ao criar a segunda imagem.
A parte legal desse processo é que a posição (deslocamentos vertical e horizontal) será determinada sempre que você arrastar a imagem para o lugar. Não há necessidade de atualizar as posições de deslocamento manualmente nas configurações.
Mas, para que você possa ver os deslocamentos que usei neste exemplo, irei incluí-los para cada imagem abaixo junto com os ajustes de tamanho.
Atualizações da imagem 2
- Deslocamento vertical: 10,06 vw
- Deslocamento horizontal: 16,51 vw
- Largura máxima: 18 vw
Atualizações da imagem nº 3
- Deslocamento vertical: 24,25vw
- Deslocamento horizontal: 7.13vw
- Largura máxima: 20vw
Atualizações da imagem nº 4
- Deslocamento vertical: 17,69vw
- Deslocamento horizontal: 31,91vw
- Largura máxima: 18vw
Atualizações da imagem 5
- Deslocamento vertical: 12vw
- Deslocamento horizontal: 46,82vw
- Largura máxima: 15vw
Atualizações da imagem # 6
- Deslocamento vertical: 19,13vw
- Deslocamento horizontal: 58,84vw
- Largura máxima: 12vw
Atualizações da imagem nº 7
- Deslocamento vertical: 28,24vw
- Deslocamento horizontal: 54,2vw
- Largura máxima: 10vw
Atualizações da imagem # 8
- Deslocamento vertical: 32,5vw
- Deslocamento horizontal: 74,04vw
- Largura máxima: 8vw
Atualizações da imagem nº 9
- Deslocamento vertical: 1.01vw
- Deslocamento horizontal: 75,5vw
- Largura: 27vw
- Largura máxima: 27vw
Adicionar imagem de fundo
Para um toque final, adicione uma imagem de fundo à seção e pronto!
Resultado final
Esta é a aparência da galeria de imagens interativas no desktop e no tablet. Observe os efeitos de foco que trazem a imagem para a frente, mostram a versão colorida da imagem e aumentam a escala da imagem. Em seguida, você pode clicar na imagem para mostrar o efeito lightbox.
Aqui está o design da tela do telefone.
Alterar o ponto de localização das imagens para diferentes designs de layout
Como os deslocamentos para cada uma das imagens são relativos ao ponto de localização, podemos alterar o ponto de localização original das imagens para ver nosso design vindo de diferentes direções em segundos.
Para fazer isso, use o recurso de seleção múltipla do Divi para selecionar todos os módulos de imagem. Em seguida, abra uma das configurações do módulo de imagem para abrir o modal de configurações do elemento.
Em seguida, você pode alterar a localização de cada um dos quatro cantos para diferentes estruturas do layout.
Localização no canto superior direito
Localização do canto esquerdo inferior
Localização do canto inferior direito
Pensamentos finais
As novas opções de posição do Divi são poderosas e convenientes. E, como vimos neste tutorial, eles nos fornecem algumas ferramentas de design maravilhosas para projetar layouts exclusivos para nossas imagens. Esperançosamente, esta colagem de imagem interativa servirá como uma pequena inspiração para seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!