Adicionando barra de guias personalizada e mais ícones de tela no aplicativo MemberPress

Você pode personalizar a navegação do seu aplicativo MemberPress carregando seus próprios ícones personalizados para a barra de guias e a tela Mais. Isso dá ao seu aplicativo uma aparência sofisticada e com a marca, alinhada com sua identidade visual. Este guia orienta você sobre como carregar ícones personalizados, aplicar o recurso Preenchimento de cor e testá-los em dispositivos iOS e Android.

Entendendo o recurso de ícones personalizados

Os requisitos do recurso de ícones personalizados definem configurações para a personalização da marca da navegação por meio de ícones carregados e personalização de cores.

Recurso de upload de ícones permite a substituição personalizada de imagens para ícones de navegação padrão em toda a interface do aplicativo. Ícones personalizados fortalecem a identidade da marca e a consistência visual entre os elementos de navegação.

Funcionalidade de preenchimento de cor Converte áreas brancas dos ícones em transparentes e sobrepõe as cores da marca para um estilo coeso. A aplicação de cores garante que os ícones combinem com o tema geral do aplicativo e o esquema de cores.

Ajuste de recorte permite a modificação dos limites dos ícones, garantindo o ajuste adequado dentro das restrições de navegação. O recorte adequado evita distorções e mantém a nitidez dos ícones em todos os dispositivos.

Personalização de estilo Oferece variações de ícones preenchidos ou contornados com opções de contêineres quadrados ou circulares. A flexibilidade de estilo acomoda diferentes preferências de design e diretrizes de marca.

Consistência entre plataformas garante que os ícones personalizados sejam exibidos corretamente em dispositivos iOS e Android. A aparência uniforme mantém o reconhecimento da marca, independentemente da plataforma do usuário.

Abrindo as configurações da barra de guias

O acesso às configurações da barra de guias permite o upload e a configuração de ícones personalizados para os itens do menu de navegação.

1. No seu painel do WordPress, vá para Painel > Aplicativo MP > Menu > Barra de guias.

2. A pré-visualização da barra de guias ao vivo aparecerá à direita.
   
3. Alterne a visualização para Mais tela conforme necessário.

Carregando ícone personalizado

O upload de ícones personalizados substitui os ícones de navegação padrão por imagens da marca, para uma aparência personalizada.

1. Clique na seta suspensa ao lado de um item do menu da barra de guias (por exemplo, Início).

2. Clique em Ícone do item.

3. Ir para o costume guia.
4. Clique no botão Ícone de upload, selecione um arquivo PNG, SVG ou JPEG com fundo transparente.

Recortar e aplicar ícone

O recorte de ícones ajusta os limites das imagens carregadas, garantindo o ajuste e a exibição adequados na interface de navegação.

1. Na caixa de diálogo de recorte, ajuste as bordas do ícone para que caibam dentro do quadrado.

2. Clique em Feito, em seguida, clique em Use este ícone.
   
3. Se o tamanho não estiver adequado, exclua o ícone e faça um novo upload com um recorte melhor.
   
4. Clique em Menu Atualizar para salvar as alterações.

Usando preenchimento de cor para combinar estilos

A aplicação de preenchimento de cor converte áreas brancas do ícone em transparentes e sobrepõe as cores da marca para um estilo coeso.

1. Abra as configurações do ícone personalizado.
   
2. Habilitar o Preenchimento de cor caixa de seleção.

3. Clique no botão Cor do ícone experimente e escolha a tonalidade da sua marca.
   
4. Escolha Estilo do ícone (Preenchido ou Contorno) e Estilo da caixa (Quadrado ou Circular).
   
5. Clique em Use este ícone, então Menu Atualizar para salvar.

Observação: O preenchimento de cor converte as áreas brancas em transparentes e sobrepõe a cor escolhida.

Repetindo para mais menu da tela

A configuração do menu Mais tela aplica ícones personalizados aos itens de navegação secundários, mantendo a consistência da marca.

1. Mude para o Menu Mais telas guia em Painel > Aplicativo MP > Menu > Barra de guias.

2. Repita as etapas de upload, recorte e preenchimento de cor para cada item do menu Mais tela.
   
3. Clique no botão Salvar menu quando todos os ícones estiverem no lugar.

Testes no aplicativo

O teste do aplicativo verifica a exatidão da exibição do ícone personalizado em todas as plataformas, garantindo a implementação e a aparência adequadas.

1. Feche à força o aplicativo MemberPress no seu dispositivo.
   
2. Reabra o aplicativo para carregar as configurações mais recentes do ícone.
   
3. Confirme se os ícones personalizados são exibidos corretamente na barra de guias e na tela Mais no iOS e no Android.