Como criar barras de rodapé fixas móveis com Divi

Sabemos como é importante garantir que tudo seja personalizado para se adequar à experiência móvel. Para ajudá-lo a levar a experiência móvel a outro nível, mostraremos como criar barras de rodapé móveis fixas com Divi nesta postagem passo a passo.

Este tutorial é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Desta vez, usaremos o Pacote de Layout de Clínica de Saúde e faremos com que as barras de rodapé móveis fixas correspondam ao estilo do pacote de layout. No entanto, você poderá usar essa abordagem para qualquer tipo de design em que estiver trabalhando e criar suas próprias alternativas de barra de rodapé móvel fixa.

Vamos lá!

Antevisão

Antes de mergulhar no tutorial, vamos dar uma olhada rápida nos três exemplos que recriaremos passo a passo. Esses exemplos só aparecerão no celular (e no tablet, se você preferir).

Recriar o Exemplo # 1

Adicionar nova seção ao final da página

Vamos começar a recriar a primeira barra de rodapé móvel fixa! Recomendamos a criação de uma página para três dos layouts incluídos no Pacote de layout da clínica de saúde. Um para cada exemplo. Abra a página à qual deseja adicionar a primeira barra de rodapé. Role para baixo até o final da página e adicione uma nova seção logo após a última.

Espaçamento

Abra as configurações de linha e remova todos os preenchimentos personalizados superior e inferior nas configurações de espaçamento.

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

Visibilidade

Estamos escondendo esta seção no desktop também. Se você deseja que a barra de rodapé do celular apareça apenas no celular, vá em frente e oculte a seção no tablet também.

Adicionar nova linha

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.

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

Espaçamento

Remova todo o preenchimento padrão superior e inferior da próxima linha.

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

CSS customizado

Por último, estamos adicionando algumas linhas CSS personalizadas à linha. Essas linhas ajudarão a transformar a linha em uma barra de rodapé fixa.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é um Módulo de Texto na coluna 1. Adicione algum conteúdo de sua escolha.

Cor de fundo

Vá para as configurações de fundo do módulo e altere a cor de fundo.

• Cor de fundo: # 5e89fb

Configurações de texto

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

• Fonte do Texto: Work Sans
• Peso da fonte do texto: leve
• Cor do texto: #ffffff
• Tamanho do texto: 16px
• Espaçamento entre letras do texto: -1px

Espaçamento

Adicione alguns valores de preenchimento personalizados a seguir.

• Preenchimento superior: 16 px
• Preenchimento inferior: 16 px
• Preenchimento esquerdo: 15px
• Preenchimento direito: 15px

Fronteira

E alguns cantos arredondados também.

• Superior esquerdo: 10 px
• Superior direito: 10px

Sombra da caixa

Complete as configurações do módulo adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px

Adicionar Módulo Blurb à Coluna 2

Adicionar conteúdo

Adicione um Módulo Blurb à segunda coluna e adicione um título de sua escolha.

Selecione o ícone

Continue selecionando um ícone para o Módulo Blurb.

Cor de fundo

Adicione uma cor de fundo ao módulo também.

• Cor de fundo: # 62de9d

Configurações de ícone

Vá para a guia de design e altere as configurações do ícone.

• Cor do ícone: #ffffff
• Posicionamento do ícone: Esquerda
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 19px

Configurações de texto do título

Continue modificando as configurações de texto do título.

• Fonte do título: Work Sans
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 16px
• Espaçamento entre letras de título: -1px

Espaçamento

Adicione um pouco de preenchimento personalizado ao módulo também.

• Enchimento superior: 20 px
• Preenchimento inferior: 10 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Fronteira

E adicione '10px' aos cantos superior esquerdo e superior direito.

• Superior esquerdo: 10 px
• Superior direito: 10px

Sombra da caixa

Por último, mas não menos importante, adicione uma sombra de caixa sutil ao módulo.

• Força do desfoque de sombra da caixa: 80 px

Recriar o Exemplo # 2

Adicionar nova seção ao final da página

Passemos ao segundo exemplo! Novamente, abra uma página de sua escolha, role para baixo até o final da página e adicione uma nova seção.

Espaçamento

Abra as configurações de seção e remova o preenchimento padrão superior e inferior.

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

Visibilidade

Oculte a seção na área de trabalho (e no tablet, se preferir).

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo, abra as configurações de linha e altere as configurações de dimensionamento.

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

Espaçamento

Remova o preenchimento padrão superior e inferior da linha também.

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

CSS customizado

Adicione algumas linhas css personalizadas à próxima linha. Essas linhas de código CSS ajudarão a criar a barra de rodapé móvel fixa.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

Continue adicionando um Módulo Blurb à primeira coluna. Adicione um título de sua escolha.

Selecione o ícone

Em seguida, selecione um ícone.

Cor de fundo

Em seguida, adicione uma cor de fundo ao módulo.

• Cor de fundo: # 62de9d

Configurações de ícone

Vá para a guia de design e altere as configurações de ícone do módulo.

• Cor do ícone: #ffffff
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 25px

Configurações de texto do título

Altere também as configurações de texto do título.

• Fonte do título: Work Sans
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: #ffffff
• Espaçamento entre letras de título: -1px

Espaçamento

E adicione um pouco de acolchoamento superior e inferior para dar ao módulo algum espaço para respirar.

• Enchimento superior: 30px
• Preenchimento inferior: 30 px

Fronteira

Também estamos adicionando '15px' à borda superior esquerda do módulo.

• Superior esquerdo: 15px

Sombra da caixa

E vamos completar o módulo com uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px

Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes

Quando terminar de modificar o primeiro módulo do Blurb, você pode clonar o módulo duas vezes e colocar as duplicatas nas duas colunas restantes.

Alterar a cor de fundo da duplicata # 1

Altere a cor de fundo da primeira duplicata.

• Cor de fundo: # 3d3d3d

Alterar as configurações de espaçamento da duplicata nº 1

Junto com as configurações de espaçamento.

• Margem superior: -20px
• Enchimento superior: 50 px
• Preenchimento inferior: 30 px

Alterar borda da duplicata # 1

E os cantos arredondados também.

Alterar a cor de fundo da duplicata # 2

Altere também a cor de fundo da segunda duplicata na terceira coluna.

• Cor de fundo: # 000000

Alterar borda da duplicata # 2

Junto com os cantos arredondados.

• Superior direito: 15px

Recriar o Exemplo # 3

Adicionar nova seção ao final da página

Vamos para o próximo e último exemplo! Abra uma das páginas, role a página para baixo e adicione uma nova seção.

Divisor superior

Abra as configurações da seção e adicione um divisor superior.

• Cor do divisor: # 62de9d
• Altura do divisor: 110px

Espaçamento

Remova também todo o preenchimento padrão superior e inferior da seção.

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

Sombra da caixa

Adicione uma sombra de caixa sutil à seção seguinte.

• Força do desfoque de sombra da caixa: 80 px

CSS customizado

E inclua algumas linhas CSS personalizadas na guia avançada. Isso ajudará a transformar a seção em uma barra de rodapé móvel fixa.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Visibilidade

Por último, desative a seção no desktop (e no tablet se preferir).

Adicionar nova linha

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 altere as configurações de dimensionamento.

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

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior a seguir.

• Enchimento superior: 30px
• Preenchimento inferior: 20 px

CSS customizado

Para garantir que todas as três colunas permaneçam na mesma altura, vamos adicionar uma linha de código CSS à guia avançada da linha também.

display: flex;

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

Agora podemos começar a adicionar módulos! Adicione um Módulo do Blurb à primeira coluna e dê um título a ele.

Selecione o ícone

Selecione um ícone a seguir.

Configurações de ícone

Vá para a guia de design e altere as configurações do ícone.

• Cor do ícone: #ffffff
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 25px

Configurações de texto do título

Modifique as configurações de texto do título também.

• Fonte do título: Work Sans
• Orientação do Texto do Título: Centro
• Espaçamento entre letras de título: -1px

Clone o módulo do Blurb duas vezes e coloque

Quando terminar de modificar o módulo Blurb na coluna 1, você pode prosseguir e clonar o módulo duas vezes. Coloque as duplicatas nas duas colunas restantes.

Alterar a cor do ícone da duplicata # 1

Não se esqueça de mudar a cor do ícone da duplicata localizada na segunda coluna.

• Cor do ícone: # 000000

Antevisão

Agora que passamos por todas as diferentes etapas, vamos dar uma olhada final no resultado de todos os três exemplos que tratamos acima.

Pensamentos finais

Nesta postagem, lidamos com três designs diferentes de barras de rodapé móveis fixas que você pode recriar passo a passo seguindo o tutorial. As barras de rodapé do celular acompanharão os visitantes durante sua experiência de rolagem na página. Este tutorial é parte da iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!