20 Cabeçalhos do Flexbox para Divi 5 (Download grátis!)

O Flexbox facilita a criação de cabeçalhos que parecem limpos, adaptados lindamente a diferentes tamanhos de tela e são simples de personalizar no Divi 5. Neste pacote gratuito, você encontrará 20 designs de cabeçalho Flexbox exclusivos, cada um construído com o sistema de layout flex do Divi 5 para alinhamento preciso e controle responsivo. Se você deseja usar os estilos globais existentes do seu site ou começar com um design pronto, você encontrará as duas opções aqui.

Demoção de pré -visualização e ao vivo

Vamos dar uma olhada nos 20 cabeçalhos do Flexbox neste pacote. Este pacote é gratuito para você baixar mais adiante a postagem.

Inscreva -se no nosso canal do YouTube

Veja a demonstração ao vivo

Baixe 20 cabeçalhos Flexbox para Divi 5

Obtenha todos os 20 cabeçalhos do Flexbox gratuitamente, incluindo versões padrão e de pré -príncipe. Cada cabeçalho está pronto para importar para sua biblioteca Divi e usar no construtor de temas. Basta baixar e começar a construir.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

O que está incluído (42 exportações)

Depois de baixar e descompactar a pasta, você encontrará todas as 42 exportações de layout organizadas perfeitamente em versões padrão e de pré -estilo como cabeçalhos individuais e como pacotes completos de "todos os cabeçalhos".

Padrão - cabeçalhos individuais (20) → Usa seus estilos globais.
Padrão - todos os cabeçalhos (1) → pacote completo usando seus estilos globais.

PRETHLELED-Cabeçalhos individuais (20) → Inclui estilo em linha para uma aparência instantânea e pronta.
Prestado - Todos os cabeçalhos (1) → pacote completo com estilo em linha aplicado.

Como instalar os layouts

Mantenha sua pasta de download por perto para começar a importá -los para o seu site Divi.

1. Layouts de importação para a Biblioteca Divi

Vá para Divi → Divi Library.

Uma vez lá, clique no botão Importar e exportar para instalar os arquivos.

Procure o arquivo Layouts do cabeçalho do Flexbox (todos) e clique para importá -lo.

2. Crie um novo modelo de cabeçalho

Vá para Divi → Construtor de temas.

Crie um novo modelo de cabeçalho ou abra um existente.

3. Carregue o layout do cabeçalho

Quando estiver dentro da área do cabeçalho, você pode usar a biblioteca Divi para selecionar o layout do cabeçalho da escolha. Clique no botão Adicionar layout no canto superior esquerdo do construtor de temas.

Selecione Layout salvo .

Clique no layout do cabeçalho que você deseja adicionar ao construtor de temas.

Clique no botão Use este layout para carregar o cabeçalho.

Certifique -se de salvar o seu novo cabeçalho e as mudanças no construtor de temas.

Padrão vs Prestyled: O que você deve escolher?

Ao abrir a pasta de download, você verá duas versões de cada cabeçalho: ** Padrão ** e ** PRETHLED **. Eles são construídos exatamente da mesma maneira, a diferença está na maneira como lidam com o estilo.

Os cabeçalhos padrão herdam a aparência de seus estilos globais. As cores da sua marca, fontes e estilos de botões são aplicados automaticamente. Se você já configurou seus estilos globais, o padrão é a maneira mais rápida de adicionar esses cabeçalhos ao seu site e corresponder instantaneamente ao seu design.

Os cabeçalhos de pré -estily vêm com todos os seus estilos assados: cores, fontes e designs de botões estão embutidos. Eles se parecem exatamente com as visualizações imediatamente. Isso é ótimo se você estiver construindo uma demonstração rápida, testando idéias ou deseja pegar o design exato que vê nas capturas de tela sem tocar em suas variáveis.

Em resumo, vá com o padrão se você deseja que os cabeçalhos se misturem perfeitamente com os estilos de site existentes. Escolha o pré-estilo se quiser a aparência pronta mostrada nas visualizações.

Personalizando os cabeçalhos

O sistema de layout do Flexbox da Divi 5 oferece ferramentas poderosas para ajustar os layouts, mantendo tudo responsivo. Veja como personalizar esses cabeçalhos para se encaixar no estilo do seu site.

1. Ajuste as configurações flexíveis

Selecione a linha que contém os elementos do cabeçalho. Na guia Design, localize o menu suspenso de layout. Expanda -o para revelar as configurações do Flexbox.

Aqui, você pode alterar a direção do layout de linha para linha reversa, coluna ou coluna reversa. Esse recurso permite alterar a direção do seu layout.

As configurações do Justify Content permitem controlar como os itens flexíveis são distribuídos ao longo do eixo principal - a direção primária do contêiner flexível definido pela direção do layout. Ele determina o espaçamento e o alinhamento dos itens horizontalmente ou verticalmente, dependendo da direção do layout.

Os itens alinhados permitem controlar como os itens flexíveis estão alinhados em uma coluna, linha ou seção. Ele determina como os itens flexíveis são posicionados em relação um ao outro ao longo do eixo cruzado dentro do contêiner. Você pode escolher o início, o centro, o final e o alongamento.

Finalmente, o layout que envolve controla se os itens em um contêiner Flex são forçados a uma única linha ou autorizados a envolver várias linhas quando excedem a largura do contêiner (ou altura se a direção do layout estiver definida como coluna).

2. Mostre/oculte elementos em diferentes pontos de interrupção

O Divi 5 permite alternar a visibilidade de seções, linhas, colunas ou módulos individuais em pontos de interrupção específicos. Isso é útil para simplificar layouts em telas menores, como ocultar um botão secundário do CTA ou substituir um menu completo por um móvel.

Por exemplo, você pode ocultar os ícones de mídia social em um cabeçalho para economizar espaço nas telas móveis. Enquanto estiver no ponto de interrupção da área de trabalho, navegue até a guia Avançado. Expanda o menu suspenso de visibilidade. Em seguida, clique nos pontos de interrupção do telefone e do tablet para ocultar o elemento.

Use a visualização responsiva do Divi 5 para visualizar o cabeçalho. Ao visualizar o layout no ponto de interrupção do telefone, o elemento oculto será visível, mas acinzentado, indicando que estará oculto no front -end.

3. Adicione links sempre que necessário

Embora todo layout do cabeçalho esteja pronto para sair da caixa, você ainda precisará adicionar links. Neste exemplo, você adicionaria links ao módulo de siga da mídia social. Clique para expandir as configurações do módulo. Na guia Conteúdo, clique no primeiro ícone de mídia social para revelar suas configurações.

Expanda o suspensão do link e adicione o link à sua conta de mídia social no campo URL da conta .

Certifique -se de salvar seu cabeçalho antes de sair do construtor de temas.

Se você ainda não o fez, precisará criar um menu para o seu site. Saia do construtor visual e navegue até a aparência → menus. Adicione um nome ao campo Nome do menu .

Clique na caixa de seleção do menu primário e clique em Criar menu .

Para adicionar páginas ao menu, clique na guia Exibir toda a guia e selecione as páginas que você gostaria de aparecer no menu. Clique em Adicionar ao menu para atribuí -los.

De volta ao construtor de temas, faça alterações adicionais conforme necessário. Por exemplo, se o cabeçalho usar o Loop Builder, pode ser necessário ajustar a ordem dos links.

Use o Divi 5 para construir seus cabeçalhos hoje

Esses 20 cabeçalhos do Flexbox são uma maneira rápida de acelerar suas compilações Divi 5, esteja você trabalhando com seus estilos globais estabelecidos ou começando com uma aparência pré -designada. Faça o download, entre no construtor de temas e faça deles o seu. O Flexbox lida com o alinhamento para que você possa se concentrar no design.