Agrega widgets en tu Biblioteca Virtual

Estás aquí:
< Regresar

¿Qué es un Widget y por qué insertar uno en tu Biblioteca Virtual?

El espacio para agregar un Widget te permite insertar cualquier código HTML para poder agregar cualquier elemennto que quieras por encima a los carruseles de tu biblioteca. Puede ser un banner publicitario, un texto, un link a algun sitio externo, o lo que quieras.

 

Ingresar Widgets en tu Biblioteca Virtual puede servir para invitarlos a suscribirse a tu contenido de una manera más insistente o bien para llevarlos a donde pueden descargar tu aplicación para dispositivos móviles.

Aquí un ejemplo de un carrusel agregado en widgets:

Para agregar un banner como este puedes usar este código HTML y cambia los espacios de la_url_de_tu_imagen por las distintas URL de las imagenes que quieras subir y que aparezcan en este carrusel:

<div class="container">
    <div class="carousel-widget" data-flickity='{"autoPlay": 3500,"wrapAround": true,"contain": false,"imagesLoaded": true,"lazyLoad": 3,"prevNextButtons": false,"cellAlign": "center","adaptiveHeight": true}'>
        <div class="carousel-cell is-selected">
            <img data-flickity-lazyload="la_url_de_tu_imagen_1" class="carousel-cell-image" />
        </div>
        <div class="carousel-cell">
            <img data-flickity-lazyload="la_url_de_tu_imagen_2" class="carousel-cell-image" />
        </div>
        <div class="carousel-cell">
            <img data-flickity-lazyload="la_url_de_tu_imagen_3" class="carousel-cell-image" />
        </div>
    </div>
</div>

Luego deberás agregar algo de código CSS dentro de los Ajustes avanzados para que este banner quede bien configurado. Aquí el código a insertar en CSS acompañando a este código anterior:

.carousel-widget .flickity-slider .carousel-cell {
    width: 100%;
    text-align: center;
}
.carousel-widget .flickity-slider .carousel-cell img {
    max-width: 100%;
}

Te mostramos paso a paso como acceder al menú para insertar tu widget:

1) Ve a Panel de control -> Ajustes -> Widgets

2) Agrega el código de tu widget. Este puede ser en texto plano, lenguaje de código CSS o HTML

3) Click en Guardar

 

Mira la versión en video de nuestro tutorial

Espero que este tutorial  te haya sido de ayuda, si tienes alguna duda solo debes escribirnos a [email protected].

¡Saludos!

El equipo de soporte de publica.la