Como adicionar um campo de pesquisa ao menu secundário Divi

Sem um campo de pesquisa, a navegação do seu site será prejudicada. Você pode ter a experiência de navegação mais robusta da Internet, mas se seus usuários não conseguirem pesquisar exatamente o que procuram, você corre o risco (e provavelmente vai) perder negócios. Este tutorial irá guiá-lo na adição de uma caixa de pesquisa ao menu secundário Divi para que, seja qual for o caso, seus usuários estarão sempre a alguns cliques de distância de tudo o que precisam.

Visão geral da caixa de pesquisa Divi

escritório

Móvel Esteira

Baixe e / ou modifique o cabeçalho global

Neste artigo, usaremos o cabeçalho / rodapé gratuito que vem com nosso pacote de layout de entrega de supermercado. Você pode simplesmente baixar o .Zip *: francês arquivar e extrair o necessário json arquivo em seu computador.

Depois disso, vá para o painel do WordPress e navegue até Divi - gerador de tema. A partir daí, você deve clicar no ícone de setas para cima e para baixo para abrir as opções de portabilidade.

No novo modal, clique no botão importação guia e encontre o json arquivo que você baixou. Quando estiver pronto, selecione Importar modelos do construtor de Tema Divi para iniciar o download.

Neste ponto, você está pronto para entrar no Cabeçalho global parte de modelo de site por padrão. Importado de json O arquivo deve ter aplicado automaticamente o brinde como o cabeçalho geral do site.

Adicione um campo de pesquisa à barra de menu secundária

Usando o Divi Visual Builder, você verá algo semelhante a este como o Cabeçalho Global.

A primeira coisa que queremos fazer é criar espaço para a caixa de pesquisa. Queremos garantir que o campo de pesquisa seja facilmente acessível a todos. visitantes, então vamos adicioná-lo ao menu secundário (acima do Home / Contato linha).

Para começar, adicionaremos a caixa de pesquisa usando o Módulo de pesquisa Divi na terceira coluna da primeira linha.

O texto do espaço reservado é importante para os campos de pesquisa, então, quando seu módulo estiver no lugar, vá para parametros e defina o seu Área reservada texto para algo que lembra o usuário do que procurar. nós colocamos Encontre itens! como um espaço reservado para que o usuário saiba que isso é o que ele pode procurar, já que estamos usando o pacote de layout de entrega de supermercado.

A caixa de pesquisa na terceira coluna não é boa. Então, queremos entrar no Módulo de Pesquisa configurações e vá para o Projeto língua. Encontre transformador opções, vá para traduzir guia (o segundo). Você pode então arrastar o módulo de pesquisa para o lugar, e Divi cuidará de todo o CSS e espaçamento para ele.

Também usamos% para este valor para que permaneça relativo, independentemente da janela de visualização na área de trabalho. Usando pixels pode distorcer algumas resoluções diferentes.

Divi Transformador Traduzir as opções também precisam ser ajustadas para o celular. Se não, é a mesma coisa. Portanto, certifique-se de ir ao reatividade configurações e defina a localização do módulo de pesquisa nas opções do menu secundário. Acabamos de ajustar o posicionamento vertical do celular porque colocá-lo na terceira coluna da linha o exibe automaticamente na parte inferior dos itens da linha.

Estilizando o módulo de pesquisa Divi

Embora você não tenha muitas opções de estilo para uma caixa de pesquisa, você tem algumas. Ou seja, a cor do texto e do próprio campo, tanto quando está inativo quanto quando o usuário clica nele. (E espaçamento, tamanho e outras opções de design Divi padrão, é claro.)

Para encontrar as opções de cores, vá para o Campeão menu no Projeto língua. Depois de expandido, você tem a possibilidade de modificar a cor do texto do espaço reservado, a cor de fundo do campo e a cor do texto do campo (texto inserido pelo usuário, ou seja, para dizer). Além do concentrar variações ocorrem quando o usuário interage especificamente com a caixa de pesquisa.

Quando estiver com o estilo de sua preferência, clique no botão Salvar.

Verifique as configurações de visibilidade

Alguns de nossos pacotes de layout e cabeçalho gratuitos vêm com diferentes opções de exibição para desktops e dispositivos móveis. Se você vir mods esmaecidos / acinzentados no construtor visual, isso indica que o mod está desabilitado em alguns dispositivos.

Para o cabeçalho de entrega de supermercado, as duas últimas colunas estão desativadas no celular. Queremos entrar no Configurações de linha e clique nas configurações das colunas que deseja exibir no celular. Nesse caso, é o terceiro.

Então vá para o progresso língua e navegue para visibilidade opção. Aqui, certifique-se de que todas as opções em desativar sobre não verificado para a coluna que contém seu campo de pesquisa. Clique no botão Salvar (carrapato verde), e os módulos devem aparecer em cores e não devem mais ser descoloridos.

Depois de se certificar de que tudo está visível, você está pronto para colocar isso online!

Salve seu trabalho

Certifique-se de clicar no botão verde salvar na parte inferior direita da tela.

Agora você está pronto para fechar o gerador visual usando o X no canto superior direito. Na próxima tela, você vai querer ter certeza de que o Divi Theme Builder salvou todas as suas opções. Se ele disser Salvar alterações, Clique no botão. Se ele disser Todas as alterações salvas, então o seu campo de pesquisa já está ativo no menu secundário Divi.

Resultados finais

Só falta admirar o seu trabalho no seu site!

escritório

Móvel Esteira

Conclusão com o campo de pesquisa Divi

As caixas de pesquisa são uma parte fundamental de uma boa experiência do usuário em seu site. Se pretende prestar o melhor serviço possível ao seu visitantes, garantir que seu conteúdo seja pesquisável deve ser uma de suas principais prioridades. Espero que você possa usar esse método rápido e fácil e aplicá-lo ao seu site Divi em breve!