Como maximizar as janelas de visualização móveis da Divi usando a cópia girada

Ao projetar um site, você tem uma escolha importante a fazer desde o início: “Para qual dispositivo vou projetar primeiro?” Freqüentemente, a resposta é desktop. Mas só porque você projeta primeiro para o desktop, não significa que seu design móvel não possa ser tão completo. Usando a cópia girada, por exemplo, você pode maximizar as janelas de exibição móveis do Divi e encaixar mais conteúdo nas janelas de exibição móveis sem sobrecarregar seus visitantes ou seu design. Neste tutorial, mostraremos exatamente como fazer isso dentro do Divi. 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.

Baixe o layout de portas de visualização móveis maximizando GRATUITAMENTE

Para colocar suas mãos no layout de viewports móvel de maximização gratuita, 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.

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!

Vamos começar a recriar!

Adicionar nova seção

Espaçamento

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e remova todo o preenchimento padrão superior e inferior.

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

Adicionar linha # 1

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 modifique as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 50% (desktop), 100% (tablet e telefone)
• Alinhamento de linha: esquerda

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

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

CSS do elemento principal

Para garantir que todas as colunas permaneçam próximas umas das outras, adicionaremos uma única linha de código CSS ao elemento principal da linha também.

display: flex;

Configurações da coluna 1

Animação

Em seguida, abriremos as configurações da coluna 1 e adicionaremos a seguinte animação:

• Estilo de animação: Fade

CSS do elemento principal

Manteremos o tamanho da coluna em telas menores adicionando a seguinte linha de código CSS ao elemento principal da coluna:

width: 40% !important;

Configurações da coluna 2

Animação

A seguir, abriremos as configurações da coluna 2 e aplicaremos a seguinte animação:

• Estilo de animação: Fade
• Atraso de animação: 200ms

CSS do elemento principal

Estamos mantendo o tamanho da coluna em telas menores adicionando a seguinte linha de código CSS:

width: 60% !important;

Adicionar Módulo de Imagem à Coluna 2

Enviar Imagem

É hora de adicionar módulos. Adicione um Módulo de imagem à coluna 2 e carregue uma imagem de retrato de sua escolha.

Dimensionamento

Vá para a guia de design do módulo e force a largura total do módulo.

• Forçar largura total: Sim

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H2

Na coluna 1, o primeiro módulo de que precisamos é um Módulo de Texto com conteúdo H2.

Configurações de texto H2

Vá para a guia de design do módulo e modifique as configurações de texto H2 da seguinte forma:

• Fonte do título 2: Montserrat
• Peso da fonte do cabeçalho 2: leve
• Alinhamento de texto do título 2: centro (apenas tablet e telefone)
• Cor do texto do título 2: # 000000
• Tamanho do texto do título 2: 3vw (desktop), 50px (tablet), 40px (telefone)
• Cabeçalho 2 espaçamento entre letras: -3 px

Dimensionamento

A seguir, modificaremos a largura nas configurações de dimensionamento.

• Largura: 89% (desktop), 150% (tablet e telefone)

Transformar, girar

Para girar nosso módulo em tamanhos de tela menores, usaremos as configurações de rotação de transformação.

• Esquerda: 270deg (apenas tablet e telefone)

Posição

Também estamos reposicionando o módulo de maneira diferente em diferentes tamanhos de tela.

• Posição: Absoluta
• Localização: Centro inferior (área de trabalho), centro (tablet e telefone)
• Deslocamento vertical: 50px

Adicionar Módulo Divisor à Coluna 1

Visibilidade

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

• Mostrar divisor: Sim

Linha

Vá para a guia de design do módulo e altere a cor da linha.

• Cor da linha: # 000000

Dimensionamento

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

• Largura: 50% (desktop), 30% (tablet e telefone)

Posição

E conclua as configurações do módulo reposicionando o módulo de acordo:

• Posição: Absoluta
• Localização: Centro à direita

Adicionar linha # 2

Estrutura da Coluna

Na próxima linha, use a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 50% (desktop), 100% (tablet e telefone)
• Alinhamento de linha: direita

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

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

CSS do elemento principal

Para garantir que as duas colunas permaneçam próximas uma da outra em tamanhos de tela menores, adicionaremos uma única linha de código CSS ao elemento principal da linha.

display: flex;

Configurações da coluna 1

Fundo Gradiente

A seguir, abriremos as configurações da coluna 1 e aplicaremos um fundo gradiente.

• Cor 1: # 1a9970
• Cor 2: # 000000
• Tipo de gradiente: Linear
• Direção do gradiente: 153deg

Animação

Estamos usando uma animação atrasada nesta coluna também.

• Estilo de animação: Fade
• Atraso de animação: 400 ms

CSS do elemento principal

Vamos, então, ter certeza de manter o tamanho da coluna em tamanhos de tela menores, adicionando a seguinte linha de código CSS ao elemento principal da coluna:

width: 25% !important;

Visibilidade

Por último, mas não menos importante, ocultaremos os overflows da coluna para garantir que nada ultrapasse o contêiner.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Configurações da coluna 2

Cor de fundo

Para as configurações da coluna 2. Use a seguinte cor de fundo para ele:

• Cor de fundo: # f4f4f4

Animação

Aplique uma animação atrasada também.

• Estilo de animação: Fade
• Atraso de animação: 600 ms

CSS do elemento principal

E conclua as configurações da coluna adicionando uma única linha de código CSS ao elemento principal da coluna. Isso garantirá que a coluna mantenha seu tamanho em telas menores.

width: 75% !important;

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

É hora de adicionar módulos. Adicione um Módulo de Texto à coluna 2 com algum conteúdo de descrição de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Tamanho do texto: 15 px (desktop), 14 px (tablet), 13 px (telefone)
• Altura da linha de texto: 2,4em

Dimensionamento

Em seguida, alteraremos as configurações de dimensionamento.

• Largura: 80%
• Alinhamento do Módulo: Centro

Espaçamento

Concluiremos as configurações do módulo adicionando alguns valores de preenchimento personalizados às configurações de espaçamento.

• Enchimento superior: 15%
• Estofamento inferior: 15%

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

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

Alinhamento

Vá para a guia de design do módulo e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

Defina o estilo do botão a seguir.

• Usar estilos personalizados para botão: Sim
• Cor do texto do botão: # 000000
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px

• Fonte do botão: Montserrat
• Mostrar ícone do botão: Sim
• Posicionamento do ícone do botão: Esquerda
• Mostrar apenas o ícone ao passar o mouse para o botão: Não

Espaçamento

E conclua as configurações do módulo adicionando alguns valores de preenchimento personalizados às configurações de espaçamento.

• Enchimento superior: 2%
• Estofamento inferior: 2%
• Preenchimento esquerdo: 10%
• Preenchimento direito: 10%

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Na coluna 1, o único módulo de que precisamos é um Módulo de Texto. Adicione o seguinte conteúdo à caixa de conteúdo: '- 01'.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Montserrat
• Peso da fonte do texto: fino
• Cor do texto: #ffffff
• Tamanho do texto: 50 px (desktop), 40 px (tablet), 35 px (telefone)
• Alinhamento de Texto: Centro

Dimensionamento

Aumente a largura do módulo a seguir.

• Largura: 150%

Transformar Traduzir

Em seguida, vá para as configurações de transformação e reposicione o módulo, modificando as configurações de conversão de transformação:

• Inferior: -50% (apenas tablet e telefone)

Transformar, girar

Também estamos girando o módulo em telas menores.

• Esquerda: 270deg (apenas tablet e telefone)

Posição

E concluiremos as configurações do módulo reposicionando o módulo na guia avançada.

• Posição: Absoluta
• Localização: Centro

Seção de clonagem para reutilização

Depois de concluir a primeira seção, você pode cloná-la quantas vezes quiser.

Alterar todas as cópias e links

Certifique-se de alterar todas as cópias e links.

Mudar imagem

Junto com a imagem do retrato e pronto!

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 maximizar suas janelas de visualização móveis dentro do Divi. Mais especificamente, usamos a cópia girada para caber mais conteúdo em nossas janelas de visualização sem criar uma experiência de design opressiva. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar 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.