Como criar designs que priorizam dispositivos móveis com Divi

Muitos sites recebem toneladas de visitantes de dispositivos móveis. Isso leva à questão de saber se seus designs são ou não suficientemente otimizados para tamanhos de tela menores. Com o Divi, um design criado para uma experiência de desktop também responde instantaneamente. Mas só porque algo é responsivo, não significa que também esteja otimizado.

Se o celular é sua principal fonte de visitantes, pode realmente ajudar começar a projetar e construir a partir de uma perspectiva móvel em vez de desktop. Nesta postagem, mostraremos exatamente como fazer isso. Depois de passar por algumas dicas e truques que você deve ter em mente, também recriaremos um exemplo do zero que leva essas dicas em consideração.

Vamos lá!

Antevisão

Conforme mencionado antes, começaremos examinando algumas dicas e truques. Depois, vamos recriar um exemplo do zero que faz uso dessas dicas. Vamos dar uma olhada no resultado.

Móvel

Área de Trabalho

Abordagem

Inscreva-se no nosso canal no Youtube

1. Mude para a visualização móvel logo após adicionar uma nova página

A primeira coisa que você precisa fazer, depois de adicionar uma nova página, é alternar imediatamente para a visualização móvel. Isso permitirá que você crie um design orientado para dispositivos móveis e preciso.

2. Habilite opções responsivas para cada elemento de design e modifique os valores móveis primeiro

Depois de começar a projetar o design que deseja, você desejará habilitar as opções responsivas para os elementos de design. Isso inclui, mas não está limitado ao tamanho do texto, preenchimento e margem. Os primeiros valores que você adicionará serão os valores do celular (em vez dos da área de trabalho) para garantir que o design seja otimizado primeiro para o celular.

3. Remova o espaço padrão entre as colunas e adicione preenchimento manualmente, se necessário

Para criar mais espaço horizontal, também é recomendável remover todo o preenchimento personalizado padrão entre as colunas. Se necessário, você sempre pode adicionar o preenchimento manualmente a cada coluna ou elemento de design e escolher a distância que deseja que haja.

4. Coloque 2 ou 3 colunas lado a lado para criar um design horizontal

A estrutura responsiva em Divi é orientada verticalmente. Isso significa que módulos e colunas aparecem abaixo uns dos outros. Isso, no entanto, requer mais rolagem vertical. Dependendo do projeto em que você está trabalhando, criar um fluxo mais horizontal pode realmente fazer a diferença.

5. Modifique as visualizações da área de trabalho e do tablet ao longo do caminho ou depois

Mesmo que você esteja projetando para o propósito de dispositivos móveis, é importante manter as outras visualizações em ordem também. As opções responsivas incluídas em cada elemento de design o ajudarão a fazer isso. Você pode optar por modificar esses valores posteriormente ou durante o processo de design.

Vamos começar a recriar o exemplo!

Adicionar nova seção

Abra uma nova página, mude para a visualização móvel e adicione uma nova seção para começar.

Adicionar linha # 1

Estrutura da Coluna

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

Adicionar Módulo de Texto à Linha

Adicionar conteúdo H2

Adicione um Módulo de Texto à coluna de sua linha e insira algum conteúdo do título H2.

Configurações de texto H2

Em seguida, vá para as configurações de texto do título e altere a aparência do título.

• Fonte do título 2: Didact Gothic
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 333333
• Tamanho do texto do título 2: 5.5vw (telefone), 5vw (tablet), 2vw (desktop)

Adicionar Módulo Divisor à Linha

Visibilidade

Logo abaixo do Módulo de Texto que você adicionou, vá em frente e adicione 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: # 333333

Dimensionamento

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

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

Adicionar linha # 2

Estrutura da Coluna

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

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações da linha e adicione uma cor de fundo à linha.

• Cor de fundo: # ffe69e

Cor de fundo da coluna 2

Adicione também uma cor de fundo à segunda coluna da linha.

• Cor de fundo da coluna 2: # ffd65b

Alinhamento

Em seguida, altere o alinhamento da linha.

• Alinhamento de linha: esquerda

Dimensionamento

Abra as configurações de dimensionamento a seguir. Aqui, queremos remover todo o espaço padrão entre as colunas. Também estamos usando largura personalizada para a coluna para torná-la bonita na área de trabalho.

• Usar largura personalizada: Sim
• Unidade: PX
• Largura personalizada: 700 px
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim

Espaçamento

Continue indo para as configurações de espaçamento e adicione algumas margens personalizadas e valores de preenchimento manualmente.

• Margem superior: 5vw
• Margem inferior: 5vw
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 1: 10vw (telefone), 8vw (tablet), 4vw (desktop)
• Preenchimento inferior da coluna 1: 10vw (telefone), 8vw (tablet), 4vw (desktop)

Fronteira

Adicione alguns cantos arredondados à linha também.

• Superior direito: 10px
• Inferior direito: 10px

Sombra da caixa

E dê a ele uma sombra de caixa sutil também.

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

CSS customizado

Por último, mas não menos importante, colocaremos as colunas uma ao lado da outra em telas menores para garantir que estamos aproveitando ao máximo o espaço horizontal que temos. Vá para a guia avançada e adicione uma única linha de código CSS ao elemento principal.

display: flex;

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H3

É hora de começar a adicionar módulos! Adicione um título Módulo de texto à primeira coluna e insira algum conteúdo H3.

Configurações de texto H3

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

• Fonte do título 3: Didact Gothic
• Peso da fonte do cabeçalho 3: negrito
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: # ee6f49
• Tamanho do texto do título 3: 4vw (telefone), 3vw (tablet), 1,5vw (desktop)

Adicionar Módulo Divisor à Coluna 1

Visibilidade

Em seguida, adicione um Módulo divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Em seguida, mude a cor do divisor.

• Cor: #ffffff

Dimensionamento

Junto com as configurações de dimensionamento.

• Peso do divisor: 4px
• Largura: 30%
• Alinhamento do Módulo: Centro

Espaçamento

Adicione alguma margem superior personalizada ao módulo também.

• Margem superior: 4vw (telefone), 2vw (tablet), 1,5vw (telefone)

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

O próximo e último módulo necessário na primeira coluna é um Módulo de Botão. Insira alguma cópia.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

Modifique a aparência do botão nas configurações do botão também.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 3vw (telefone), 2vw (tablet), 1,5vw (desktop)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ee6f49
• Largura da borda do botão: 0 px
• Fonte do botão: Didact Gothic
• Intensidade da fonte: Negrito

Adicionar Módulo de Imagem à Coluna 2

Ícone de upload

O único módulo de que precisaremos na coluna 2 é um Módulo de imagem. Você pode usar qualquer imagem de sua escolha, mas se quiser usar exatamente os mesmos ícones que foram usados ​​neste exemplo, você pode ir para o Pacote de Layout de Loja de Móveis e baixá-los no final da postagem.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento da imagem.

• Alinhamento de imagem: centro

Clone Row # 2

Quando terminar de modificar a linha, você pode cloná-la.

Alterar a cor de fundo da linha

Precisamos fazer algumas alterações nesta duplicata, começando com a cor de fundo da linha.

• Cor de fundo: # 8ee5cf

Remover a cor de fundo da coluna 2

Continue removendo a cor de fundo da coluna 2.

Adicionar cor de fundo da coluna 1

Em vez disso, estamos adicionando uma cor de fundo à primeira coluna.

• Cor de fundo da coluna 1: # 47e5bd

Alterar Módulos nas Colunas

Também estamos trocando colunas para os módulos.

Alterar ícone no módulo de imagem

Em seguida, altere o ícone no Módulo de imagem.

Adicionar filtro ao módulo de imagem

E faça com que corresponda às novas cores de fundo de linha e coluna, alterando o matiz nas configurações de filtros.

• Matiz: 65deg

Alterar alinhamento de linha

Altere o alinhamento da linha a seguir.

• Alinhamento de linha: direita

Alterar borda da linha

Junto com os cantos arredondados.

• Superior esquerdo: 10 px
• Inferior esquerdo: 10px

Alterar a cor do texto do módulo de texto na coluna 2

Também estamos usando outra cor de texto para o Módulo de Texto na coluna 2.

• Cor do texto do título 3: # 7b9710

Alterar a cor de fundo do botão

E estamos usando a mesma cor para o fundo do botão.

• Cor de fundo do botão: # 7b9710

Clonar as duas linhas

Agora que temos os dois lados da linha, podemos clonar os dois até quantas vezes precisarmos e colocá-los em ordem.

Modificar Duplicado # 1

Alterar a cor de fundo da linha

Começaremos alterando a cor de fundo da linha da primeira duplicata.

• Cor de fundo: # ffc9cf

Mudar a cor da coluna

Em seguida, modificaremos a cor de fundo da coluna 2 também.

• Cor de fundo da coluna 2: # ffadb6

Alterar ícone no módulo de imagem

Mude o ícone no Módulo de Imagem para outro de sua escolha.

Adicionar filtro ao módulo de imagem

E altere o matiz nas configurações de filtro para que corresponda às novas cores de fundo de linha e coluna.

• Matiz: 309deg

Mudar a cor do texto

Estamos mudando a cor do texto também.

• Cor do texto do título 3: # f862b0

Alterar a cor de fundo do botão

E estamos usando a mesma cor para o fundo do botão.

• Cor de fundo do botão: # f862b0

Modificar Duplicado # 2

Alterar a cor de fundo da linha

Para a próxima e última duplicata! Altere a cor de fundo da linha.

• Cor de fundo: # b2c4ff

Mudar a cor da coluna

Faça o mesmo para a cor de fundo da coluna 1.

• Cor de fundo da coluna 1: # 9eb4ff

Alterar ícone no módulo de imagem

Em seguida, altere o ícone que está sendo usado.

Adicionar filtro ao módulo de imagem

Junto com o matiz nas configurações de filtros do Módulo de Imagem.

• Matiz: 221deg

Mudar a cor do texto

Modifique a cor do texto do Módulo de Imagem a seguir.

• Cor do texto do título 3: # 6287f9

Alterar a cor de fundo do botão

E use a mesma cor para o fundo do botão.

• Cor de fundo do botão: # 6287f9

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado.

Móvel

Área de Trabalho

Pensamentos finais

Se sua principal fonte de visitantes vêm de dispositivos móveis, é importante otimizar tudo para esse tamanho de tela específico. Com Divi, tudo responde instantaneamente. Mas só porque algo é responsivo, não significa que seja otimizado para esse tamanho de tela específico. Outra maneira de abordar o design para celulares é começar seu design a partir de uma perspectiva móvel em primeiro lugar. Neste post, compartilhamos algumas dicas e truques sobre como fazer isso. Depois, recriamos um exemplo que segue essas regras e nos permite criar um resultado impressionante. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!