Personalizar a barra de busca do site
4 min de leitura
Permita que seus visitantes pesquisem qualquer coisa no seu site usando a barra de busca do Wix Site Search. Os resultados da busca são exibidos em uma lista, para que seus visitantes possam encontrar facilmente o que estão procurando. Você pode alterar o layout e o design da barra de busca para que ela combine com o design do seu site.
Neste artigo saiba mais sobre:
Personalizar as configurações da barra de busca
Personalize o texto da variante da sua barra de busca e as sugestões de resultados.
Para personalizar as configurações da sua barra de busca:
- Clique na barra de busca no Editor.
- Clique em Configurações.
- Personalize as opções de configurações:
- Texto da variante: adicione um texto curto que é exibido quando a barra de busca está vazia.
Observação: esse texto desaparece quando o visitante do site começa a digitar na barra de busca. - Sugestões de resultados: ative ou desative as sugestões de resultados exibidas quando um usuário começa a digitar.
- Itens populares: ative ou desative a exibição de itens que estão em alta antes que um usuário comece a digitar.
Observação: a ativação de itens populares só é possível se as sugestões de resultados também estiverem ativadas.
- Texto da variante: adicione um texto curto que é exibido quando a barra de busca está vazia.
Alterar o layout da barra de busca
Defina o layout, o alinhamento e o espaçamento na barra de busca no painel Layouts.
Para alterar o layout da barra de busca:
- Clique na barra de busca no Editor.
- Clique no ícone Layouts
. - Personalize as opções de layout:
- Escolha um layout: escolha um estilo para sua barra de busca.
- Alinhamento do ícone: selecione a posição do ícone de busca.
- Alinhamento do texto: selecione a posição do texto.
- Preenchimento do texto: defina o espaçamento entre a borda da barra de busca e o texto.
- Preenchimento do ícone: defina o tamanho da área do ícone.
Observação:
As opções disponíveis dependem do layout que você escolher.
Personalizar o design da barra de busca
Personalize o design da sua barra de busca para os diferentes estados:
- Normal: quando sua barra não está em uso.
- Interativo: quando os visitantes passam o mouse sobre a barra.
- Foco: quando os visitantes clicaram na barra.
Para personalizar o design da sua barra de busca:
- Clique na barra de busca no Editor.
- Clique no ícone Design
. - Selecione um design predefinido.
- Clique em Personalizar design para alterar ainda mais.
- Clique em uma aba para escolher qual estado você deseja personalizar: Normal, Interativo ou Foco.
- Personalize o estado usando as opções:
- Cor e opacidade de preenchimento: altere a cor do background da barra e do ícone:
- Background do campo de entrada: clique na caixa de cores para selecionar a cor do background do campo de entrada e arraste o slider para aumentar ou diminuir a opacidade.
- Background do botão: clique na caixa de cores para selecionar a cor do background do ícone de busca e arraste o slider para aumentar ou diminuir a opacidade.
- Ícone do botão: clique na caixa de cores para selecionar a cor do ícone de busca e arraste o slider para aumentar ou diminuir a opacidade.
- Borda: adicione e personalize uma borda para sua barra:
- Opacidade e cor: clique na caixa de cores para selecionar a cor da borda e arraste o slider para aumentar ou diminuir a opacidade.
- Estilo da borda: selecione o estilo da sua borda e em quais lados ela aparece.
- Largura: arraste o slider para deixar sua borda mais espessa ou mais fina.
- Cantos: arredonde os cantos da sua barra:
- Insira um valor em um canto ou clique no ícone de cadeado para alterar todos os valores juntos.
- Sombra: adicione uma sombra à sua barra:
- Clique na alavanca Ativar sombra para adicionar uma sombra.
- Personalize sua sombra usando as opções:
- Ângulo: selecione o ângulo da sombra.
- Distância: arraste o slider para aumentar ou diminuir a distância da sombra.
- Tamanho: arraste o slider para aumentar ou diminuir o tamanho da sombra.
- Borrado: arraste o slider para aumentar ou diminuir o borrado da sombra.
- Opacidade e cor: clique na caixa de cores, selecione a cor da sombra e arraste o slider para aumentar ou diminuir a opacidade da sombra.
- Texto: formate o texto na barra:
- Cor da variante: clique na caixa de cores para selecionar a cor do texto da variante e arraste o slider para aumentar ou diminuir a opacidade.
- Cor: clique na caixa de cores para selecionar a cor do texto de entrada.
- Tema: clique no menu dropdown e selecione o tema de texto.
- Fonte: clique no menu dropdown e selecione a fonte do texto.
- Tamanho da fonte: arraste o slider para definir o tamanho do texto.
- Negrito/Itálico: clique nas opções para formatar o texto.
- Cor e opacidade de preenchimento: altere a cor do background da barra e do ícone:
Altere a posição da barra de busca:
Para reposicionar sua barra de busca, clique e arraste-a para o cabeçalho ou rodapé do seu site.
Esse artigo foi útil?
|