Añadir una barra de pestañas personalizada y más iconos de pantalla en la aplicación MemberPress

Puede personalizar la navegación de su aplicación MemberPress cargando sus propios iconos personalizados para la barra de pestañas y la pantalla Más. Esto le da a su aplicación un aspecto de marca, pulido que se alinea con su identidad visual. Esta guía le guiará a través de la carga de iconos personalizados, la aplicación de la función de relleno de color, y probarlos en dispositivos iOS y Android.

Función de icono personalizado

Los requisitos de la función de iconos personalizados definen configuraciones para la personalización de la marca de navegación mediante activos de iconos cargados y personalización del color.

Carga de iconos permite sustituir los iconos de navegación predeterminados por imágenes personalizadas en toda la interfaz de la aplicación. Los iconos personalizados refuerzan la identidad de marca y la coherencia visual entre los elementos de navegación.

Función de relleno de color convierte las áreas blancas de los iconos en transparentes y superpone los colores de la marca para lograr un estilo cohesivo. La aplicación de color garantiza que los iconos coincidan con el tema general de la aplicación y el esquema de color.

Ajuste del recorte permite modificar los límites de los iconos, garantizando un ajuste adecuado a las restricciones de navegación. Un recorte adecuado evita distorsiones y mantiene la claridad de los iconos en todos los dispositivos.

Personalización del estilo ofrece variaciones de iconos con relleno o contorno y opciones de contenedor cuadrado o circular. La flexibilidad de estilo se adapta a diferentes preferencias de diseño y directrices de marca.

Coherencia entre plataformas garantiza que los iconos personalizados se muestren correctamente tanto en dispositivos iOS como Android. La apariencia uniforme mantiene el reconocimiento de la marca independientemente de la plataforma del usuario.

Abrir la configuración de la barra de pestañas

El acceso a la configuración de la barra de pestañas permite cargar y configurar iconos personalizados para los elementos del menú de navegación.

1. En tu panel de control de WordPress, ve a Panel de control > MP App > Menú > Barra de pestañas.

2. La vista previa de la barra de pestañas aparecerá a la derecha.
   
3. Conmutar la vista previa a Más pantalla según sea necesario.

Subir un icono personalizado

La carga de iconos personalizados sustituye los iconos de navegación predeterminados por activos de imagen de marca para una apariencia personalizada.

1. Haga clic en la flecha desplegable situada junto a un elemento de menú de la barra de pestañas (por ejemplo, Inicio).

2. Haga clic en Icono del artículo.

3. Ir a la costumbre ficha.
4. Haga clic en el botón Icono de carga, y seleccione un archivo PNG, SVG o JPEG con fondo transparente.

Recortar y aplicar icono

El recorte de iconos ajusta los límites de la imagen cargada, garantizando un ajuste y una visualización adecuados dentro de la interfaz de navegación.

1. En el cuadro de diálogo de recorte, ajuste los bordes del icono para que quepan dentro del cuadrado.

2. Haga clic en Hecho, luego haga clic en Utilice este icono.
   
3. Si el tamaño no es el adecuado, elimina el icono y vuelve a cargarlo con un recorte mejor.
   
4. Haga clic en Menú de actualización para guardar los cambios.

Uso del relleno de color para combinar estilos

La aplicación de relleno de color convierte las áreas blancas de los iconos en transparentes y superpone los colores de la marca para conseguir un estilo cohesivo.

1. Abra la configuración del icono personalizado.
   
2. Habilitar el Relleno de color casilla de verificación.

3. Haga clic en el botón Color del icono muestra y elige el tono de tu marca.
   
4. Elija Estilo de icono (Relleno o Contorno) y Estilo de caja (Cuadrada o Circular).
   
5. Haga clic en Utilice este iconoentonces Menú de actualización para ahorrar.

Nota: Relleno de color convierte las áreas blancas en transparentes y las superpone al color elegido.

Menú de repetición para más pantallas

La configuración del menú Más pantallas aplica iconos personalizados a los elementos de navegación secundarios, manteniendo la coherencia de la marca.

1. Cambiar a la Más menú de pantalla pestaña bajo Panel de control > MP App > Menú > Barra de pestañas.

2. Repita los pasos de carga, recorte y relleno de color para cada elemento del menú Más pantalla.|
   
3. Haga clic en el botón Guardar menú cuando todos los iconos estén en su sitio.

Pruebas en la aplicación

Las pruebas de aplicaciones verifican que los iconos personalizados se muestren correctamente en todas las plataformas, garantizando su correcta implementación y apariencia.

1. Fuerza el cierre de la aplicación MemberPress en tu dispositivo.
   
2. Vuelva a abrir la aplicación para cargar la última configuración de iconos.
   
3. Confirme que los iconos personalizados se muestran correctamente en la barra de pestañas y en la pantalla Más en iOS y Android.