Banners
¿Has notado que la mayoría de los sitios web profesionales te muestran un carrusel de imágenes al ingresar? Durante años esta ha sido la manera más efectiva de mostrar información importante a los usuarios, de una forma agradable a la vista.
En MGPanel puedes construir estos carruseles de imágenes de forma rápida y sencilla, agregar tantas imágenes como necesites y mostrarlos en cualquier sección de tu sitio web.
De ahora en adelante a los carruseles de imágenes los llamaremos "Banners".
¿Qué son los Banners?
Los banners son una sección muy común en la mayoría de los sitios web profesionales, sirven para promocionar productos, servicios o presentar información relevante a través de un carrusel de imágenes.
Por lo general se colocan debajo del menú y son el elemento visual más llamativo apenas los usuarios entran al sitio web, de allí viene su importancia.
Esta es la forma que tendrá tu banner apenas lo hayas creado:
Éste es tu primer banner de ejemplo
Puedes agregar tantas imágenes como desees
Y también puedes agregar etiquetas HTML dentro de la imágen cómo texto o botónes...
¿Ya estás listo para crear tus banners en MGPanel?
Nota: Nos basamos en el carrusel de imágenes de Bootstrap para la creación de los banners por lo livianos y sencillos que son, además de ser fáciles de entender. Puedes conocer la estructura HTML y otras funciones de este carrusel en la documentación de bootstrap v4.6.
En MGPanel incorporamos una herramienta para crear todos los banners que necesites, totalmente personalizables y fáciles de incorporar en cualquier sección de tu sitio web: El Gestor de Banners.
Gestor de Banners
El Gestor de Banners es donde se encuentran todos los banners de tu sitio web ordenados según su fecha de creación. Desde aquí podrás crear nuevos banners, así como ver la información básica de los que ya has creado como el código, título y status, y realizar acciones tales como editar y eliminar.
Crear Nuevo Banner
Los banners se crean desde el Gestor de Banners, en la opción “Nuevo banner”. Una vez dentro, encontrarás una serie de campos para rellenar divididos en dos secciones, la primera corresponde a la información general del banner y la segunda permite configurar cada item o imagen del banner de forma individual.
En los siguientes cuadros te explicamos los campos con más detalle:
Configuración General
Son las configuraciones que afectan al banner y no dependen de los ítems.
| Configuración General | ||
|---|---|---|
| Campos | Descripción | Tipo |
| Título del banner (*) | Nombre asignado al banner para identificarlo. | String |
| Código (*) | El código es el método para llamar al banner dentro de tu sitio web. Cada banner tiene un código único y este es asignado automáticamente por MGPanel. Si quieres saber como mostrar el banner en tu sitio web haz click aquí. | Método Especial |
| Estatus | Indica si el banner debe mostrarse o no en el sitio web mediante un interruptor de dos estados: Activo e Inactivo. | Switch |
| Métodos | Permite escoger el método de transición al cambiar de imágenes. Actualmente ofrecemos dos métodos:
|
Switch |
Configuración Individual: Agregar Items al Banner
Los ítems son las imágenes que conforman el banner, puedes agregar tantos como necesites, aunque el rango recomendado es entre 3 a 5 imágenes.
Para agregar más imágenes solo debes dar click a “Agregar item” y se desplegará un nuevo segmento de item.
| Configuración Individual | ||
|---|---|---|
| Campos | Descripción | Tipo |
| Imágen | En este recuadro se carga la imagen a mostrar en cada item del banner. El tamaño máximo permitido es de 1MB. | Almacenamiento |
| Editor de Código HTML | Interfaz destinada a la programación del código HTML que corresponde al cuerpo del item. | Code HTML |
| Orden | Número que define el orden del item dentro del banner. | Number |
| Visibilidad | Permite activar o desactivar un item para que este pueda aparecer o no en el banner. | Switch |
¿Cómo agregar un banner a mi página web?
Cada banner tiene un código que MGPanel asigna automáticamente para identificarlo y que permita “invocarlo”. El método para hacerlo es colocar dentro de tu editor HTML el código del banner usando el siguiente formato:
“##_” + CODIGODELBANNER
Supongamos que el código de tu banner es “BANNER0002”, entonces te debería quedar algo como esto:
##_BANNER0002
Basta con escribir esto dentro tu código HTML para que tu banner se muestre en el módulo o contenido donde lo hayas invocado.
¿Ya revisaste todo y aún tienes dudas?
Contáctacta a nuestro equipo de soporte para una mejor atención
Contactar con Soporte
