In order to make the content of the article you want to publish more interesting or for any other type of need, the CMS provides extra features that allow you to manage complex structures such as: carousels, sliders, accordions, etc.

These HTML structures always need the support of specific JavaScript and CSS code that the end user is not always able to manage. For this reason it will therefore be sufficient to deal with the HTML relating to the functionality that you want to apply and include it by ticking it, the "special function" of reference.

Carousel

Here is an example of the HTML code needed to create the carousel

<div class="owl-carousel owl-theme">
    <div class="item">
        <a href="/booking/availabilityV2.php" target="_blank">
            <img src="[custom_image_url]">
        </a>
    </div>
    <div class="item">
        <img src="[custom_image_url]">
    </div>
    <div class="item">
        <img src="[custom_image_url]">
    </div>
    <div class="item">
        <img src="[custom_image_url]">
    </div>
    <div class="item">
        <img src="[custom_image_url]">
    </div>
</div>

It is necessary that a div with class="owl-carousel owl-theme" acts as a container for each div with class="item" which will contain either a single image, or linked to an image or other.

It is possible to handle some advanced options via an additional HTML element <input type="hidden" class="owl-carousel-settings"> placed at the beginning of the article.

Options are handled via data-attributes and they are the following:

• number of images to show (data-items="1")
• margin between the images (data-margin="30")
• presence of navigation buttons (data-nav="true")
• presence of navigation dots (data-dots="false")

Example: <input type="hidden" class="owl-carousel-settings" data-items="4" data-margin="60" data-nav="false">

Below is a short video tutorial on how to manage a carousel.

Google Maps

You can embed and customize a Google Map to obtail a result similar to the following:

To create a map as you see in the example, you'll need this HTML in your article:

<div class="google-map-settings">
    <input type="hidden" name="map-element-id" value="cms-gmap"> <!-- REQUIRED: ID of the map element (below) -->
    <input type="hidden" name="center-lat" value="45.4334469">   <!-- REQUIRED: Latitude of the map center -->
    <input type="hidden" name="center-lng" value="12.3370927">   <!-- REQUIRED: Longitue of the map center -->
    <input type="hidden" name="zoom" value="13">                 <!-- OPTIONAL: Zoom level between 0 (the entire world can be seen on one map) and 21+ -->
    <input type="hidden" name="disable-default-ui" value="0">    <!-- OPTIONAL: if 1, disable all the map control buttons (zoom, fullscreen, street view...) -->
    <input type="hidden" name="map-type" value="roadmap">        <!-- OPTIONAL: valid values are:
                                                                          · roadmap -> displays the default road map view. (This is the default map type.)
                                                                          · satellite -> displays Google Earth satellite images.
                                                                          · hybrid -> displays a mixture of normal and satellite views.
                                                                          · terrain -> displays a physical map based on terrain information -->

    <!-- If you want to define markers, insert one input with name "marker" for each marker. Use data-attributes to control marker position an naming -->
    <input type="hidden" name="marker" data-lat="45.434187" data-lng="12.338575" data-title="Piazza San Marco">
    <input type="hidden" name="marker" data-lat="45.438066" data-lng="12.335931" data-title="Ponte di Rialto">
    <input type="hidden" name="marker" data-lat="45.435042" data-lng="12.351862" data-title="Arsenale">
    <input type="hidden" name="marker" data-lat="45.425465" data-lng="12.324955" data-title="Giudecca">
</div>

<!-- This is the effective map element. The ID of this element is the one you have to pass to "map-element-id" in the settings above. -->
<!-- Remember to set width and height or the map will not be visible --> 
<div id="cms-gmap" class="cms_gmaps" style="height: 400px; width: 100%; max-width: 900px; margin: 0 auto;"></div>