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.