Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Search

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Ao usar o módulo de pesquisa, você pode colocar um formulário de pesquisa em qualquer lugar em seu site. Este formulário de pesquisa permitirá que seus visitantes pesquisem todo o conteúdo do seu site, incluindo todas as páginas e postagens do blog. Isso lhe dá a funcionalidade do widget de pesquisa do WordPress com a flexibilidade que oferece Divi Builder. Você pode não apenas controlar a localização de formulários de pesquisa na página, mas também personalizar seu design.

Como adicionar um módulo de pesquisa à sua página

Antes de adicionar um módulo de pesquisa à sua página, primeiro você deve pular para o Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

módulo de pesquisa divi.png

Localize o módulo de pesquisa na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "search", depois clicar em enter para pesquisar e adicionar automaticamente o módulo de pesquisa! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de caso de uso: Adicionando um módulo de pesquisa personalizado a uma página de blog de largura total

Para este exemplo, mostrarei como adicionar um módulo de pesquisa para ser um call to action principal na parte superior de uma página do blog. Isso permite que os usuários pesquisem facilmente o conteúdo do seu blog sem qualquer confusão.

Esta página tem um cabeçalho de largura total na parte superior com o módulo de pesquisa diretamente abaixo. Sob o módulo de pesquisa é um módulo de blog usando o layout da grade.

exemplo de blog com formulário de pesquisa divi.jpg

Usando o Visual Builder, adicione uma nova seção padrão à página do blog com uma linha de largura total (coluna 1). Em seguida, insira o módulo de pesquisa na linha.

Atualize as configurações do módulo de pesquisa da seguinte maneira:

Opções de conteúdo

Texto reservado: Pesquise nosso blog ...
Ocultar o botão: SIM

Opções de design

Cor de fundo do campo de entrada: # f8f8f8
Cor do espaço reservado: # 888888
Tamanho da fonte de entrada: 16px
Cor do texto de entrada: # 888888
Altura da linha de entrada: 1em
Preenchimento personalizado: 20px Top, 20px Bottom

divi search configuration content.png

Salvar configurações

Agora, volte para alterar a largura da linha que contém seu módulo de pesquisa. Na guia Design de parâmetros de linha, defina a linha para uma largura personalizada de 300 px. Isso manterá o módulo de pesquisa compacto e centralizado na página.

largura da divi.png da configuração

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Isso é tudo!

Pesquisar opções de conteúdo

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

busca de módulo divi contenu.png

Texto de espaço reservado

Digite o texto que você deseja usar como o espaço reservado para o campo de pesquisa.

Botão Ocultar

Se você habilitar essa opção, o botão Pesquisar ficará oculto.

Excluir páginas

Se você ativar essa opção, as páginas serão excluídas dos resultados da pesquisa.

Excluir itens

A ativação dessa opção excluirá as mensagens dos resultados da pesquisa.

Excluir categorias

Escolha as categorias que você deseja excluir dos resultados da pesquisa.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design de pesquisa

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi tem uma longa lista de parâmetros de design que você pode usar para modificar qualquer coisa.

divi search design.png

Cor de fundo do campo de entrada

Aqui você pode alterar a cor de fundo da barra de pesquisa.

Cor do marcador de posição

Antes do campo de pesquisa ser usado, o texto do espaço reservado existe dentro do campo. Se você ajustou a cor do plano de fundo do campo, também poderá ajustar a cor do texto do espaço reservado para garantir que ele seja legível.

Cor do texto

Aqui você pode escolher o valor do seu texto. Se você está trabalhando em um fundo escuro, o texto deve estar ligado. Se você trabalha com um fundo claro, seu texto deve estar escuro.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Orientação de texto

Isso controla como o texto é alinhado no módulo.

Fonte de entrada

Você pode alterar a fonte do texto de entrada selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte de entrada

Aqui você pode ajustar o tamanho do seu texto de entrada. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto de entrada

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto de entrada, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento entre letras

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto de entrada, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha

A altura da linha afeta o espaço entre cada linha do texto de entrada Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo. inserido à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Botão e cor da borda

Isso mudará o plano de fundo e a cor da borda do botão de pesquisa.

Fonte do botão

Você pode alterar a fonte do texto do botão selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do botão

Aqui você pode ajustar o tamanho do texto do seu botão. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto do botão

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do botão, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento das letras do botão

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do botão, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do botão

A altura da linha afeta o espaço entre cada linha do texto do botão Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Largura máxima

Por padrão, a largura máxima da barra de pesquisa é definida como 100%. Isso significa que a barra de pesquisa será exibida em sua largura natural, a menos que a largura da barra de pesquisa exceda a largura da coluna pai; nesse caso, a barra de pesquisa será limitada a 100% da largura da coluna. Se você quiser restringir ainda mais a largura máxima da barra de pesquisa, você pode fazer isso inserindo o valor de largura máxima desejado aqui. Por exemplo, um valor de 50% limitaria a largura da barra de pesquisa a 50% da largura da coluna pai.

Margem personalizada

Margem é o espaço adicionado ao exterior do seu módulo, entre o módulo e o próximo elemento acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Preenchimento personalizado

Fill é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Opções Avançadas do Módulo de Pesquisa

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

divi advanced option module search.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Outros tutoriais Divi

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
20 ações
ação12
chilrear2
Enregistrer6
Whatsapp