Editor do Wix Studio: adicionar e personalizar breadcrumbs
5 min de leitura
Melhore a navegação no site do seu cliente ao adicionar um elemento de breadcrumbs. Ao oferecer um caminho de retorno para as páginas pai e a página inicial, os breadcrumbs incentivam os visitantes a continuar a explorar.
![Exemplo do elemento breadcrumbs em um site online do Editor do Wix Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/06/3677c8c7-9619-4018-b3fb-02473da44a41/d7b1f62d-747c-405a-99f3-e3f4fa597f18.gif)
Neste artigo, saiba mais sobre:
Adicionar e configurar breadcrumbs
Adicione uma trilha de breadcrumbs para fornecer aos visitantes uma exibição clara da hierarquia do site. Se você adicionar o elemento breadcrumbs ao seu cabeçalho master, ele aparece em todas as páginas do site. No entanto, você também pode adicionar breadcrumbs a uma página específica do site ao colocar o elemento no corpo da página.
Você usa páginas dinâmicas?
No momento, não é possível adicionar breadcrumbs a uma página dinâmica.
Para adicionar e configurar o elemento breadcrumbs:
- Vá para o seu Editor.
- Clique em Elementos
no lado esquerdo do Editor.
- Clique em Menu e busca.
- Clique em Breadcrumbs.
- Arraste o design que você mais gostou para sua página.
- Clique em Configurações.
- Decida o que você deseja mostrar na trilha de breadcrumbs:
- Estado padrão: escolha quais itens aparecem na trilha de breadcrumbs:
- Breadcrumb completo: mostre a página inicial e a página atual. Se um visitante for para uma subpágina, a página principal também será exibida.
- Ocultar a página inicial: oculte a página inicial do breadcrumb.
- Ocultar a página atual: oculte a página do breadcrumb em que o visitante está no momento.
- Exibir a página inicial como: escolha como você deseja que a página inicial apareça no breadcrumb:
- Texto: o nome da página inicial aparece no breadcrumb.
- Ícone: um ícone representando a página inicial aparece no breadcrumb. Clique no ícone abaixo de Ícone da página inicial para escolher um ícone do Wix ou fazer upload da sua própria arte vetorial.
- Estado padrão: escolha quais itens aparecem na trilha de breadcrumbs:
Trabalhando com breakpoints:
Suas seleções no painel Configurações do breadcrumbs se aplicam a todos os breakpoints.
![Configuração do elemento breadcrumbs no Editor do Wix Studio, escolhendo um novo ícone personalizado para a página inicial](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/06/fe4f8293-1fd7-4840-97e1-013cca8813dc/0e40395c-68b9-4f61-98ce-eeb5b8aa5fad.png)
Atualizar páginas pai
O elemento breadcrumbs mostra a posição da página atual na hierarquia do site. Para organizar melhor o site e para fins de SEO, você pode criar uma hierarquia de páginas pai (por exemplo: páginas de nível superior) com páginas filho aninhadas abaixo dele.
![Um exemplo de breadcrumbs, mostrando a página inicial, uma página pai e uma página filho](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/06/f72cce22-f2e3-4dbc-b951-78da0acb6556/d6ac21d2-3d92-4193-85a5-898d29340c55.png)
Para selecionar um novo pai para a página em que você está trabalhando (reagrupar), vá para o painel Configurações da página.
Observação:
Não é possível reagrupar a página inicial, assim como páginas relacionadas aos aplicativos Wix (por exemplo páginas do Wix Stores).
Para renomear uma página:
- Vá para o seu Editor.
- Clique em Páginas
no lado esquerdo do Editor.
- Clique no ícone Mais ações
na página relevante.
- Clique em SEO básico.
- Selecione a página relevante no dropdown em Página pai (hierarquia do site).
![A aba SEO básico no painel Configurações da página, onde você pode atualizar sua página pai](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/06/b1c1715b-60a1-4ee7-a90c-1074ec344a2f/cc8e14c1-85f1-4901-88e1-3a3efb9d7ec4.png)
Ajustar o layout dos breadcrumbs
Do controle de itens excedentes ao ajuste do espaçamento vertical e horizontal, você tem a flexibilidade de adaptar o layout dos breadcrumbs de acordo com o site do seu cliente. Além disso, você pode escolher o alinhamento e a direção dos itens para uma aparência refinada.
Para ajustar o layout dos breadcrumbs:
- Vá para o seu Editor.
- Selecione o elemento breadcrumbs.
- Clique no ícone Layout
.
- Ajuste o layout usando as opções disponíveis:
- Itens excedidos: selecione como exibir itens que não cabem no breadcrumb em telas menores:
- Quebrar texto: se os itens não couberem, outra linha será criada na trilha.
- Recolher: os itens são exibidos em apenas uma linha. Se eles não couberem, um sinal de reticências será exibido.
- Mostrar separadores: ative a alavanca para mostrar separadores entre itens do breadcrumb e escolha o ícone que deseja usar: Seta ou Barra.
- Espaçamento vertical: arraste o slider para alterar o espaçamento acima e abaixo dos itens.
- Espaçamento horizontal: arraste o slider para alterar o espaçamento entre os itens.
- Alinhamento do item: alinhe os itens à esquerda, ao centro ou à direita.
- Direção do item: escolha a direção em que os itens aparecem: Esquerda para direita ou Direita para esquerda.
- Itens excedidos: selecione como exibir itens que não cabem no breadcrumb em telas menores:
Trabalhando com breakpoints:
Suas seleções no painel Layout do breadcrumbs se aplicam a todos os breakpoints.
![O painel Layout dos breadcrumbs ao lado do elemento breadcrumbs no Editor do Wix Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/06/9c1b0279-0b4f-4251-a5b0-0218d6bd0feb/7d8bfcb2-6c62-4467-926f-377610764fae.png)
Fazer o design dos breadcrumbs
Ajuste a aparência do elemento breadcrumbs no painel Inspetor. Se você está ajustando o background, os separadores ou os itens, você tem controle total sobre o design. Alterne facilmente entre diferentes estados, como normal, interativo ou página atual.
Para fazer o design do breadcrumb:
- Vá para o seu Editor.
- Selecione o elemento breadcrumbs.
- Clique no ícone Abrir inspetor
no canto superior direito do Editor.
- Escolha a parte que você deseja personalizar: Background, Separadores ou Itens.
- Selecione o estado relevante no dropdown: Normal, Interativo ou Página atual.
- Use as opções disponíveis para fazer o design dos breadcrumbs.
Trabalhando com breakpoints:
Você pode personalizar os breadcrumbs por breakpoint para que o elemento fique ideal em todas as telas.
![Fazendo o design do elemento breadcrumbs no painel Inspetor, escolhendo uma parte e um estado específicos](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/06/3828ceb8-7c71-485e-bdaa-d605850040cc/d3d32cd9-5cef-4a61-ac7f-559d9ce00ce5.png)
Esse artigo foi útil?
|