Economizar é tão bom que chega a ser assustador!

ATÉ

80%
Poupança

Acabando:
Símbolo Wpmet
Dia
Horas
Mínimo
Segundo

Migalhas de pão

Começando #

Exiba links de navegação em seus sites WordPress com o Elementor Breadcrumbs Widget. Aqui está um artigo abrangente para explicar cada método em detalhes. Siga o processo passo a passo para conectar o Migalhas de pão.

Adicionar Breadcrumb Ferramenta #

  • Etapa => 1: Vá para Kit de elementos-> Elementos-> Certifique-se de que seu Migalhas de pão está ativo-> Salvar
  • Etapa => 2: Vá para Elementor=> Pesquisa Migalhas de pão=> Apenas Arraste e solte o campo.
  • Agora você pode ver seu Migalhas de pão ferramenta.
  • Etapa=>3: Agora, entre na guia Conteúdo nas configurações do widget. Aqui, você encontrará as seguintes configurações: 

Configurações, #

  • Ícone de casa– Você pode adicionar um ícone de home para o breadcrumb. Você verá três opções diferentes:
    • Clique aqui para não mostrar nenhum ícone de casa.
    • O próximo permite que você carregue um ícone SVG do seu dispositivo.
  • E, ao clicar na terceira opção, será aberto um pop-up com a biblioteca de ícones. 
  • Selecione um ícone e clique em “Inserir" botão.
  • Mostrar ícone separador: Este botão de alternância é habilitado por padrão. Desabilite este botão se você não quiser mostrar um separador entre os caminhos.
    • Ícone Separador: A partir daqui, você pode alterar o ícone separador padrão e adicionar um novo da biblioteca de ícones. Há também uma opção para carregar um ícone SVG. Ele funciona da mesma forma que o “Ícone Home”.
  • Comprimento máximo da palavra do título: Defina o comprimento máximo de palavras do título da página ou da postagem.
  • Mostrar categoria Trilha

Personalizar o widget Breadcrumbs #

Agora, exploraremos as opções de personalização para o widget breadcrumb. Vá para a guia Style.

Estilo, #

  • Cor do texto: Defina uma cor para a etapa de navegação onde os usuários estão ativos no momento.
  • Cor do link: Adicione uma cor diferente ao texto incorporado ao link.
  • Cor do link Hover: Dê cor ao texto incorporado ao link no estado de foco.
  • Tipografia: Controle todos os fatores dentro da tipografia, como fonte, tamanho, cor, altura da linha, espaçamento entre palavras, etc.
  • Alinhamentos: Defina o posicionamento do breadcrumb para a esquerda, direita ou centro.

Migalhas de pão, #

  • Preenchimento: Ajuste o espaçamento entre os itens de navegação e adicione espaço adicional com a borda do elemento.  
  • Margem: Defina o espaço ao redor dos itens de navegação.
  • Sombra da caixa: Defina o efeito de sombra ao redor das migalhas de pão.
  • Histórico do item: Dê um tipo de fundo entre cor sólida e gradiente para um item.
  • Fundo ativo: Adicione cor de fundo a um item de fundo ativo.
  • Opções de Borda: Use esses controles para ajustar a largura, a cor, o estilo e a redondeza da borda.

Ícone, #

Ícone de casa, #

  • Cor: Use o seletor de cores para definir a cor do ícone inicial.
  • Espaço entre: Use o controle deslizante ou insira um valor personalizado para definir o espaço entre o ícone inicial e o texto.
  • Tamanho: Defina o tamanho do ícone de trilha de navegação.

Ícone separador, #

  • Preenchimento: Defina o espaçamento entre o texto de trilha de navegação e os ícones separadores.
  • Tamanho: Determine o tamanho do ícone separador usando o controle deslizante ou inserindo um valor personalizado no campo.
  • Sombra da caixa: Use esses controles para adicionar efeitos de sombra ao redor da borda do item da trilha de navegação.
  • Cor: Escolha uma cor para o ícone separador.
  • Fundo: Adicione uma cor sólida ou um fundo gradiente ao ícone separador.
  • Configurações de Borda: Obtenha todos os recursos, como adicionar cor de borda, selecionar estilo de borda, definir espessura de borda, etc. para personalizar a borda.

Pronto! Agora é sua vez. Adicione um lindo breadcrumb ao seu site Elementor.

Quais são os seus sentimentos
Atualizado em 2 de janeiro de 2024