Baixe um design de combinação de cabeçalho e rodapé mínimo GRÁTIS feito com o Divi's Theme Builder
Publicados: 2020-04-20Ao projetar um rodapé e um cabeçalho globais, é importante levar em consideração o estilo geral de design do site. Se você está construindo um site mínimo, com muito espaço em branco, por exemplo, sua melhor aposta é também um cabeçalho e rodapé mínimos. No tutorial de hoje, compartilharemos um design de combinação de cabeçalho e rodapé mínimo gratuito que você pode usar em qualquer site que construir e sem quaisquer restrições! Também o guiaremos, passo a passo, pelo processo de recriação.
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Baixe o modelo de site padrão da combinação mínima de cabeçalho e rodapé GRATUITAMENTE
Para colocar suas mãos no modelo de site padrão da combinação de cabeçalho e rodapé mínimo gratuito, primeiro você precisará 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!
https://youtu.be/EUtzKvn6PUI
Inscreva-se no nosso canal no Youtube
1. Crie o cabeçalho global
Vá para Divi Theme Builder
Comece indo ao Divi Theme Builder e clique em 'Add Global Header'.
Comece a construir o cabeçalho global
Em seguida, comece a construir o cabeçalho global.
Modificar Seção # 1
Espaçamento
Uma vez dentro do editor de template, você notará uma seção. 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 nova linha
Estrutura da Coluna
Continue adicionando uma nova linha 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: 80% (desktop), 90% (tablet e telefone)
Espaçamento
Remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Fronteira
Use uma borda inferior também.
- Largura da borda inferior: 1 px
- Cor da borda inferior: # 333333
Elemento Principal
Em seguida, vá para a guia avançada e adicione uma única linha de código CSS ao elemento principal da linha. Isso nos ajudará a manter as colunas próximas umas das outras em tamanhos de tela menores.
display: flex;
Espaçamento entre colunas
A seguir, adicionaremos algum preenchimento personalizado a todas as colunas em nossa linha.
- Enchimento superior: 1%
- Estofamento inferior: 1%
Borda da coluna 1 e 2
Adicionaremos uma borda direita à primeira e segunda colunas também.
- Largura da borda direita: 1px
- Cor da borda direita: # 333333
Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 1
Adicionar redes sociais
É hora de adicionar módulos, começando com um Módulo de Acompanhamento de Mídia Social na coluna 1. Adicione as redes sociais de sua escolha.
Remova a cor de fundo individual de cada rede social
Continue removendo a cor de fundo de cada rede social em um nível individual.
Alinhamento
Em seguida, volte às configurações gerais do módulo e altere o alinhamento do módulo na guia de design.
- Alinhamento do Módulo: Centro
Configurações de ícone
Altere as configurações do ícone a seguir.
- Cor do ícone: # 000000
- Usar tamanho de ícone personalizado: Sim
- Tamanho da fonte do ícone: 16 px (área de trabalho), 14 px (tablet e telefone)
Espaçamento
E complete as configurações do módulo adicionando alguma margem superior.
- Margem superior: 2%
Adicionar Módulo de Texto à Coluna 2
Adicionar conteúdo
Na segunda coluna, adicionaremos um Módulo de Texto com algum conteúdo de nossa escolha.
Configurações de texto
Vá para a guia de design e altere as configurações de texto do módulo da seguinte forma:
- Fonte do texto: Roboto Mono
- Cor do texto: # 000000
- Tamanho do texto: 17 px (desktop), 15 px (tablet), 13 px (telefone)
- Alinhamento de Texto: Centro
Espaçamento
Vamos adicionar alguma margem superior também.
- Margem superior: 3%
Adicionar Módulo de Botão à Coluna 3
Adicionar cópia
Vamos para a última coluna. Adicione um Módulo de Botão com alguma cópia de sua escolha.
Alinhamento de Botão
Vá para a guia de design do módulo e altere o alinhamento de acordo:
- Alinhamento do botão: Centro
Configurações de botão
Em seguida, acesse as configurações de botão e defina o estilo dos botões da seguinte maneira:
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 20 px (desktop), 16 px (tablet), 13 px (telefone)
- Cor do texto do botão: # 670fff
- Largura da borda do botão: 0 px
- Fonte do botão: Roboto Mono
- Peso da fonte do botão: negrito
- Posicionamento do ícone do botão: Esquerda
- Mostrar apenas o ícone ao passar o mouse para o botão: Não
Adicionar Seção # 2
Espaçamento
Adicione outra seção regular logo abaixo da anterior. Abra as configurações da seção e remova o preenchimento superior padrão.
- Preenchimento superior: 0 px
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 modifique as configurações de dimensionamento de acordo:
- Largura: 90%
- Largura máxima: 100%
Fronteira
Adicione uma borda inferior a seguir.
- Largura da borda inferior: 1 px
- Cor da borda inferior: # 333333
Adicionar Módulo de Menu à Coluna
Selecione o menu
Em seguida, adicione um Módulo de Menu à coluna da linha e selecione um menu de sua escolha.
Carregar logotipo
Faça upload de um logotipo a seguir.
Configurações de texto do menu
Em seguida, vá para a guia de design e altere as configurações de texto do menu de acordo:
- Fonte do Menu: Roboto
- Cor do texto do menu: # 000000
- Tamanho do texto do menu: 18 px
- Alinhamento de Texto: Direito
Configurações de texto do menu suspenso
Altere também a cor da linha do menu suspenso.
- Cor da linha do menu suspenso: # 670fff
Configurações de ícones
Junto com a cor do ícone do menu de hambúrguer nas configurações dos ícones.
- Cor do ícone do menu de hambúrguer: # 670fff
Dimensionamento
Conclua as configurações do módulo alterando a largura máxima do logotipo nas configurações de dimensionamento.
- Largura máxima do logotipo: 35%
Salvar seção 1 na biblioteca Divi
Depois de preencher o cabeçalho global e todos os seus elementos, você pode salvar a primeira seção em sua biblioteca Divi. Reutilizaremos esta seção mais tarde em nosso rodapé global.
Salvar alterações de Cabeçalho Global e Construtor de Tema
Em seguida, salve o modelo de cabeçalho global junto com as alterações do Divi Theme Builder.
2. Criar rodapé global
Comece a construir rodapé global
Para o rodapé global! Comece a construir o rodapé do zero.
Adicionar nova linha à seção # 1
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Dimensionamento
Abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:
- Equalize Alturas de Coluna: Sim
- Largura: 95%
- Largura máxima: 100%
Fronteira
E complete as configurações da linha adicionando uma borda superior.
- Largura da borda superior: 1 px
- Cor da borda superior: # 333333
Adicionar Módulo de Imagem à Coluna 1
Carregar logotipo
É hora de adicionar módulos, começando com um Módulo de imagem na coluna 1. Faça upload de um logotipo.
Dimensionamento
Vá para a guia de design do módulo e altere as configurações de dimensionamento de acordo:
- Largura: 52%
- Alinhamento do Módulo: Centro
Adicionar Módulo de Aceitação de Email à Coluna 1
Remover Conteúdo
O próximo módulo de que precisamos na coluna 1 é um Módulo de aceitação de e-mail. Remova todas as cópias.
Vincular conta de e-mail
Em seguida, adicione uma conta de e-mail de sua escolha.
Remover cor de fundo
Em seguida, remova a cor de fundo padrão.
Layout
Vá para a guia de design e verifique se o seguinte layout se aplica:
- Layout: corpo à esquerda, formulário à direita
Configurações de campos
Altere as configurações dos campos também.
- Enchimento superior: 10 px
- Preenchimento inferior: 10 px
- Fonte Fields: Roboto Mono
- Campos arredondados: 0px (todos os cantos)
- Largura da borda dos campos: 1px
- Cor da borda dos campos: # 333333
Configurações de botão
E conclua as configurações do módulo definindo o estilo do botão da seguinte maneira:
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 18 px
- Cor de fundo do botão: # 000000
- Fonte do botão: Roboto Mono
Adicionar Módulo de Texto # 1 à Coluna 2
Adicionar conteúdo
Para a segunda coluna. Adicione um primeiro Módulo de Texto com algum conteúdo de sua escolha.
Configurações de texto
Vá para a guia de design e altere as configurações de texto da seguinte forma:
- Fonte do texto: Roboto Mono
- Peso da fonte do texto: negrito
- Cor do texto: # 000000
- Tamanho do texto: 21px
- Alinhamento de Texto: Centro
Espaçamento
Adicione alguma margem inferior também.
- Margem inferior: 10%
Adicionar Módulo Divisor à Coluna 2
Visibilidade
Logo abaixo do Módulo de Texto, adicionaremos um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Configurações de linha
A seguir, altere as configurações de linha do módulo.
- Cor da linha: # 000000
- Estilo de linha: Sólido
- Posição da linha: topo
Adicionar Módulo de Texto # 2 à Coluna 2
Adicionar conteúdo
Adicione outro Módulo de Texto à segunda coluna com um item de rodapé de sua escolha.
Adicionar Link
Adicione um link a seguir.
Configurações de texto
Em seguida, vá para a guia de design e altere as configurações de texto de acordo:
- Fonte do texto: Roboto Mono
- Cor do texto: # 000000
- Tamanho do texto: 16px
- Alinhamento de Texto: Centro
Espaçamento
Adicione alguma margem inferior também.
- Margem inferior: 2%
Clone o módulo de texto # 2 quantas vezes forem necessárias
Depois de concluir o segundo Módulo de texto na coluna 2, você pode cloná-lo quantas vezes quiser, dependendo de quantos itens de rodapé deseja exibir.
Modificar conteúdo e links
Modifique o conteúdo e os links de cada Módulo de Texto duplicado.
Clonar coluna 2 duas vezes
Depois de preencher a segunda coluna e todos os seus itens de rodapé, você pode clonar a coluna inteira duas vezes.
Modificar conteúdo e links
Modifique o conteúdo e os links nas colunas duplicadas.
Seção de importação # 2
Depois de concluir a primeira seção, é hora de importar a seção que usamos no cabeçalho global.
Alterar borda da linha
Abra as configurações da linha na segunda seção, remova a borda inferior e adicione uma borda superior.
- Largura da borda superior: 1 px
- Cor da borda superior: # 333333
- Largura da borda inferior: 0 px
Alterar conteúdo no módulo de texto
Altere a cópia no Módulo de Texto na coluna 2 também.
Salvar rodapé global
Depois de concluir o rodapé global, certifique-se de salvar todas as alterações.
3. Salve as alterações do Theme Builder e o resultado da visualização
Em seguida, saia do editor de modelos, salve todas as alterações do Divi Theme Builder e visualize o resultado em seu site!
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, compartilhamos uma bela combinação mínima de cabeçalho e rodapé que você pode usar gratuitamente em qualquer site que construir e sem quaisquer restrições! Esta combinação de cabeçalho e rodapé é um ótimo complemento para os poucos sites que você cria. Existem vários elementos incluídos, sem fazer com que o design geral pareça opressor. Também recriamos o design do zero. 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.