Add widgets to your Virtual Library

You are here:
< Back

What Is A Widget And Why Insert One In Your Virtual Library?

The space to add a Widget allows you to insert any HTML code to be able to add any element you want above the carousels of your library. It can be an advertising banner, a text, a link to an external site, or whatever you want.

Entering Widgets in your Virtual Library can be used to invite them to subscribe to your content in a more insistent way or to take them to where they can download your application to mobile devices.

Here is an example of a carousel added in widgets:

<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="url_of_your_image_1" class="carousel-cell-image" />
        </div>
        <div class="carousel-cell">
            <img data-flickity-lazyload="url_of_your_image_2" class="carousel-cell-image" />
        </div>
        <div class="carousel-cell">
            <img data-flickity-lazyload="url_of_your_image_3" class="carousel-cell-image" />
        </div>
    </div>
</div>

To add a banner like this you can use this HTML code and change the spaces of the url_of_your_image by the different URLs of the images you want to upload and that appear in this carousel:

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

Then you will have to add some CSS code inside the Advanced Settings so that this banner is well configured. Here is the code to insert in CSS accompanying this previous code:

We show you step by step how to access the menu to insert your widget:

1) Go to Control Panel -> Settings -> Widgets

2) Add your widget code. This can be plain text, CSS code language or HTML

3) Click Save

I hope this tutorial has been helpful, if you have any questions just write to us at [email protected].

Greetings!

The support team of publica.la