Como apresentar serviços lindamente em dispositivos móveis com Divi (download grátis!)

Se você está se concentrando em designs que priorizam o celular, esta postagem pode ajudá-lo. Criamos dois belos exemplos de vitrines de serviço que ficam bem em telas menores. Mais ainda, eles foram projetados especificamente para ter a melhor aparência no celular, ao mesmo tempo em que mantêm um bom design no desktop. Neste post, mostraremos passo a passo como recriá-los do zero. Esperamos que este tutorial inspire você a liberar sua criatividade ao projetar seções de serviços para qualquer site que você construir. No final do tutorial, você também poderá baixar os arquivos JSON de ambas as seções.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida nos dois exemplos móveis que recriaremos.

Exemplo 1

Exemplo # 2

Vamos começar a recriar o exemplo nº 1

Inscreva-se no nosso canal no Youtube

Adicionar nova seção

Fundo Gradiente

Crie uma nova página e adicione uma seção regular a ela. Abra as configurações da seção e adicione um fundo gradiente.

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

Adicionar linha # 1

Estrutura da Coluna

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

Adicionar Módulo de Texto # 1

Adicionar conteúdo

O primeiro módulo de que precisaremos é um Módulo de Texto. Adicione algum conteúdo à caixa de conteúdo.

Configurações de texto

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

• Fonte do texto: Poppins
• Peso da fonte do texto: pesado
• Cor do texto: #ffffff
• Tamanho do texto: 20vw
• Altura da linha de texto: 1em

• Força do borrão da sombra do texto: 0,95em
• Cor da sombra do texto: rgba (0,0,0,0.13)
• Orientação do Texto: Centro

Adicionar Módulo de Texto # 2

Adicionar conteúdo H2

Adicione outro Módulo de Texto logo abaixo do anterior. Insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

Em seguida, vá para a guia de design e modifique as configurações de texto H2.

• Fonte do título 2: Poppins
• Peso da fonte do cabeçalho 2: negrito
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 000000
• Tamanho do texto do título 2: 10vw (telefone e tablet), 10vw (desktop)

Espaçamento

Crie uma sobreposição entre os dois módulos de texto usando alguma margem superior negativa.

• Margem superior: -12vw (telefone), -10vw (tablet), -8vw (desktop)

Adicionar linha # 2

Estrutura da Coluna

Continue adicionando outra linha usando a seguinte estrutura de coluna:

Fundo Gradiente

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente.

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

Dimensionamento

Vá para as configurações de dimensionamento a seguir e permita que a linha ocupe toda a largura da tela.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione alguns valores de espaçamento também. Esses valores garantirão que tudo esteja bem em todos os tamanhos de tela.

• Preenchimento esquerdo: 0vw (telefone e tablet), 15vw (desktop)
• Preenchimento direito: 0vw (telefone e tablet), 15vw (desktop)

CSS customizado

Também colocamos as duas colunas uma ao lado da outra, adicionando uma linha de código CSS na guia avançada.

display: flex;

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H3 e link

Agora podemos começar a adicionar módulos! Adicione um Módulo de Texto à primeira coluna com alguma cópia H3 e um link.

Cor de fundo

Em seguida, vá para as configurações de fundo do módulo e adicione uma cor de fundo.

• Cor de fundo: rgba (255,255,255,0,95)

Configurações de texto

Continue alterando a orientação do texto nas configurações de texto do módulo.

• Orientação do Texto: Centro

Configurações de texto de link

Modifique as configurações de texto do link também.

• Fonte do link: Poppins
• Peso da fonte Linke: negrito
• Estilo da fonte do link: sublinhado
• Cor do sublinhado do link: # 000000
• Cor do texto do link: # 000000
• Tamanho do texto do link: 3vw (telefone), 2vw (tablet), 1vw (desktop)

Configurações de texto H3

Junto com as configurações de texto H3.

• Fonte do título 3: Poppins
• Peso da fonte do cabeçalho 3: ultraleve
• Cor do texto do título 3: # 000000
• Cabeçalho 3 Tamanho do texto: 4vw (telefone), 3vw (tablet), 2vw (desktop)
• Cabeçalho 3 Altura da linha de texto: 1,9em para uma forma de círculo ou 3em para uma oval

Espaçamento

Para criar uma forma a partir deste módulo, vamos adicionar algumas margens personalizadas e valores de preenchimento nas configurações de espaçamento.

• Margem esquerda: 5vw
• Margem direita: -5vw
• Preenchimento superior: 17vw (telefone), 20vw (tablet), 15vw (desktop)
• Preenchimento inferior: 17vw (telefone), 20vw (tablet), 15vw (desktop)

Fronteira

Estamos transformando o quadrado em um círculo usando cantos arredondados, adicionando '100vw' a cada um dos cantos.

Sombra da caixa

E para criar alguma profundidade, vamos adicionar uma sombra de caixa sutil.

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

Clonar Módulo de Texto 4 Vezes

Agora que terminamos de modificar o primeiro Módulo de texto, podemos prosseguir e cloná-lo quatro vezes. Coloque duas das duplicatas na segunda coluna.

Modificar Duplicado # 1

Espaçamento

Continue modificando as configurações de espaçamento da primeira duplicata.

• Margem superior: 20vw
• Margem esquerda: -5vw
• Margem direita: 5vw

Modificar Duplicado # 2

Cor de fundo

Abra a segunda duplicata a seguir e mude a cor de fundo.

• Cor de fundo: rgba (255.248.209,0,92)

Espaçamento

Modifique as configurações de espaçamento também.

• Margem superior: -5vw

Modificar Duplicado # 3

Cor de fundo

Em seguida, abra a terceira duplicata e altere a cor de fundo.

• Cor de fundo: rgba (219.255.223.0,95)

Espaçamento

Modifique as configurações de espaçamento a seguir.

• Margem superior: -5vw
• Margem esquerda: -5vw
• Margem direita: 5vw

Modificar Duplicado # 4

Espaçamento

Abra também a última duplicata e adicione um pouco de margem superior negativa para finalizar o desenho.

• Margem superior: -5vw

Vamos começar a recriar o exemplo # 2

Adicionar nova seção

Passemos ao segundo exemplo! Adicione uma nova seção à sua página.

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Adicionar Módulo de Texto

Adicionar conteúdo H2

O primeiro módulo de que precisaremos é um Módulo de Texto. Insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

Em seguida, vá para a guia de design e modifique as configurações de texto H2.

• Fonte do título 2: Poppins
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 333333
• Tamanho do texto do título 2: 7vw (telefone e tablet), 4vw (desktop)

Adicionar Módulo Divisor

Visibilidade

Adicione um Módulo divisor logo abaixo do Módulo de texto. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

Cor

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

• Cor: # 333333

Dimensionamento

Brinque com as configurações de dimensionamento também.

• Peso do divisor: 5px
• Largura: 12%
• Alinhamento do Módulo: Centro

Adicionar linha # 2

Estrutura da Coluna

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

Cor de fundo

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

• Cor de fundo: #ffffff

Dimensionamento

Vá para as configurações de dimensionamento a seguir e permita que a linha ocupe toda a largura da tela.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione alguns valores de margem e preenchimento personalizados a seguir para otimizar o design para todos os tamanhos de tela.

• Margem superior: 2vw
• Margem inferior: 2vw
• Preenchimento superior: 10vw (telefone e tablet), 5vw (desktop)
• Preenchimento inferior: 10vw (telefone e tablet), 5vw (desktop)
• Preenchimento esquerdo: 2vw (telefone e tablet), 20vw (desktop)
• Preenchimento direito: 2vw (telefone e tablet), 20vw (desktop)

Sombra da caixa

Também estamos usando uma sombra de caixa sutil.

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

CSS customizado

Por último, mas não menos importante, coloque as duas colunas uma ao lado da outra, adicionando uma única linha de código CSS ao elemento principal na guia avançada.

display: flex;

Adicionar Módulo Blurb à Coluna 1

Selecione o ícone

Agora podemos começar a adicionar módulos! O único módulo de que precisamos na coluna 1 é um Módulo Blurb. Selecione um ícone de sua escolha.

Fundo Gradiente

Em seguida, adicione um fundo gradiente.

• Cor 1: # 7b28ef
• Cor 2: # 29b6e5
• Direção do gradiente: 142 graus

Configurações de ícone

Modifique as configurações do ícone a seguir.

• Cor do ícone: #ffffff
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 5vw (telefone e tablet), 4vw (desktop)

Dimensionamento

E mude as configurações de dimensionamento.

• Largura: 48% (telefone e tablet), 78% (desktop)

Espaçamento

Também estamos adicionando alguns valores de margem e preenchimento personalizados para otimizar o design em todos os tamanhos de tela.

• Margem superior: 2vw (telefone)
• Preenchimento superior: 8,5vw (telefone), 9vw (tablet), 6vw (computador)
• Preenchimento inferior: 3vw (telefone), 5vw (tablet), 4vw (desktop)

Fronteira

Em seguida, transforme o módulo em um círculo adicionando '100vw' a cada um dos cantos nas configurações de borda.

Sombra da caixa

Estamos adicionando uma sombra de caixa também.

• Posição vertical da sombra da caixa: 10 px
• Força de propagação da sombra da caixa: 5px
• Cor da sombra: rgba (2.185.252,0.35)

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo H3

Vamos para a segunda coluna! O primeiro módulo de que precisamos é um Módulo de texto de título. Adicione algum conteúdo H3.

Configurações de texto H3

Em seguida, vá para a guia de design e modifique as configurações de texto H3.

• Fonte do título 3: Poppins
• Cabeçalho 3 Tamanho do texto: 4vw (telefone), 3vw (tablet), 2vw (desktop)

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Margem superior: 0vw (telefone), 3vw (tablet e desktop)
• Margem esquerda: -20vw (telefone e tablet), 0vw (desktop)
• Margem direita: 0vw
• Preenchimento inferior: 2vw (telefone e tablet), 1vw (desktop)
• Preenchimento esquerdo: 5vw (telefone e tablet), 2vw (desktop)

Fronteira

Junto com uma borda esquerda.

• Largura da borda esquerda: 5 px
• Cor da borda esquerda: # f4f4f4
• Estilo da borda esquerda: duplo

Adicionar Módulo Divisor à Coluna 2

Mostrar divisor

O segundo módulo de que precisamos é 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: # f4f4f4

Estilos

Altere o estilo do divisor nas configurações de estilo a seguir.

• Estilo Divisor: Duplo

Dimensionamento

Continue modificando as diferentes opções nas configurações de dimensionamento.

• Peso do divisor: 5px
• Altura: 0 px

Espaçamento

E brinque com os valores de espaçamento também.

• Margem esquerda: -20vw (telefone e tablet), 0vw (desktop)

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

O próximo módulo de que precisamos na segunda coluna é outro Módulo de Texto. Adicione algum conteúdo corporal de sua escolha.

Configurações de texto

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

• Tamanho do texto: 2vw (telefone), 1,7vw (tablet), 0,8vw (desktop)
• Orientação do Texto: Esquerda

Espaçamento

Brinque com os valores de espaçamento também.

• Margem superior: 0vw
• Margem esquerda: -20vw (telefone e tablet), 0vw (desktop)
• Margem direita: 0vw
• Preenchimento superior: 3vw (telefone e tablet), 2vw (desktop)
• Preenchimento esquerdo: 5vw (telefone e tablet), 2vw (desktop)

Fronteira

E adicione uma borda esquerda.

• Largura da borda esquerda: 5 px
• Cor da borda esquerda: # f4f4f4
• Estilo da borda esquerda: duplo

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

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

Configurações de botão

Em seguida, vá para a guia de design e altere as configurações do botão.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 2,5vw (telefone), 2vw (tablet), 1vw (desktop)
• Cor do texto do botão: # 4f77e8
• Largura da borda do botão: 1 px
• Cor da borda do botão: # 4f77e8

• Raio da borda do botão: 1px
• Fonte do botão: Poppins

Espaçamento

Modifique os valores de espaçamento também.

• Margem superior: 4vw (telefone e tablet), 2vw (desktop)
• Margem esquerda: -20vw (telefone e tablet), 0vw (desktop)

Clonar linha duas vezes

Agora que terminamos de modificar a linha e todos os seus módulos, podemos cloná-la duas vezes.

Alterar ícones

Certifique-se de alterar os ícones para ambos os Módulos Blurb.

Alterar fundos gradientes

Modifique os fundos gradientes também.

• Cor 1: # ff2885
• Cor 2: # d6ac24

• Cor 1: # 70ff1e
• Cor 2: # 2699ff

Alterar as cores da sombra da caixa

Combine a cor da sombra da caixa com o novo fundo gradiente.

• Cor da sombra: rgba (255.208,2,0.37)

• Cor da sombra: rgba (42,255,0,0,37)

Alterar borda do botão e cores do texto

E complete o design alterando a borda do botão e as cores do texto.

• Cor do texto do botão: # e96c54
• Cor da borda do botão: # e96c54

• Cor do texto do botão: # 4dcb93
• Cor da borda do botão: # 4dcb93

Baixe as seções de serviços móveis GRATUITAMENTE

Para colocar as mãos nas seções de serviços móveis gratuitos, primeiro você precisa baixá-las 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!

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado móvel de ambos os exemplos.

Exemplo 1

Exemplo # 2

Pensamentos finais

Nesta postagem, mostramos duas maneiras criativas de como exibir serviços em dispositivos móveis usando apenas as opções integradas do Divi. Esperamos que essa abordagem que prioriza os dispositivos móveis também inspire você a ser criativo. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!