Aller au contenu principal

Merchandising

Contenu et animation du merch​

⚠️ Attention : Il est impératif dans MapS de respecter l'ordre des balises, des classes, etc.
Sans cela, des problèmes d'affichage peuvent survenir côté frontend.

Section Hero​

La section Hero correspond au champ "carousel" sur MapS. Le même code HTML peut être utilisé pour le champ "carousel bis" :

❗ Attention: il faut remplir deux liens (deux balises <a>), car un permet de rendre tout l'encart Hero cliquable, l'autre permet de rendre le contenu texte cliquable (pour des besoins de SEO).

<div class="hero">
  <a href="#" title="" class="hero-stretched-link"></a>
  <picture>
    <source
      type="image/jpeg"
      media="(max-width:375px)"
      srcset="
        https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=375&height=340&gravity=auto
      "
    />
    <source
      type="image/jpeg"
      media="(max-width:577px)"
      srcset="
        https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=577&height=380&gravity=auto
      "
    />
    <source
      type="image/jpeg"
      media="(max-width:769px)"
      srcset="
        https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=769&height=420&gravity=auto
      "
    />
    <source
      type="image/jpeg"
      media="(max-width:993px)"
      srcset="
        https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=993&height=500&gravity=auto
      "
    />
    <source
      type="image/jpeg"
      media="(max-width:1201px)"
      srcset="
        https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=1201&height=540&gravity=auto
      "
    />
    <source
      type="image/jpeg"
      media="(max-width:1401px)"
      srcset="
        https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=1401&height=580&gravity=auto
      "
    />
    <source
      type="image/jpeg"
      media="(max-width:1921px)"
      srcset="
        https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=1921&height=620&gravity=auto
      "
    />
    <img
      alt="alt"
      fetchpriority="high"
      width="1588"
      height="500"
      decoding="async"
      class="hero-img"
      src="https://media.odalys-vacances.com/plus/v4/hero/location-vacances-early-booking-ete-2025.jpg?width=1921&height=620&gravity=auto"
    />
  </picture>
  <a href="#" title="" class="hero-content-link">
    <span class="hero-content">
      <span class="hero-content-first-title"> Early Booking</span>
      <span class="hero-content-second-title">
        <span> Derniers jours</span>
      </span>
      <span class="hero-content-list">
        <span>Jusqu'à -30%</span>
      </span>
    </span>
  </a>
</div>

Note importante : Il est essentiel de changer la source de l'image pour toutes les résolutions (balises <source>), afin de garantir un affichage performant et adapté à tous les écrans. Les paramètres d'URL de taille (e.g., width=577&height=290) doivent être conservés.

Section Réassurance​

Particularité de cette section : les pictos, en effet, les pictos ne peuvent pas avoir la même taille (font-size), car selon l'icône, le rendu peut être différent. On peut donc avoir des tailles d'icônes différentes, c'est pour cela qu'il est possible de surcharger la balise <span>, comme ici : <span class="odalys-icon OCIbig text-[40px] md:text-[48px] lg:text-[54px]"></span>.

Dans l'exemple ci-dessus, l'icône à une font-size de 40px, de 48px sur les résolutions moyennes, et 54px sur les résolutions larges. Il est donc important de jouer avec la font-size pour que les icônes aient des tailles équilibrées entres elles.

<div class="reinsurance-grid">
  <div class="reinsurance-item">
    <div class="reinsurance-icon-container">
      <span
        class="odalys-icon stay rotate-[16deg] text-[28px] text-brand-primary md:text-[32px]"
      ></span>
    </div>
    <h2 class="reinsurance-item-title">
      Des séjours pour<br />toutes vos envies
    </h2>
  </div>
  <div class="reinsurance-item">
    <div class="reinsurance-icon-container">
      <span
        class="odalys-icon pay-3times rotate-[20deg] text-[42px] text-brand-primary md:text-[46px] lg:text-[54px]"
      ></span>
    </div>
    <h2 class="reinsurance-item-title">Paiement facilité<br />3 ou 4 fois</h2>
  </div>
  <div class="reinsurance-item">
    <div class="reinsurance-icon-container">
      <span
        class="odalys-icon OCIbig rotate-[18deg] text-[42px] text-brand-primary md:text-[46px] lg:text-[54px]"
      ></span>
    </div>
    <h2 class="reinsurance-item-title">
      Check-in en ligne<br />facile et rapide
    </h2>
  </div>
  <div class="reinsurance-item">
    <div class="reinsurance-icon-container">
      <span
        class="odalys-icon serenity -rotate-[4deg] text-[32px] text-brand-primary md:text-[38px] lg:text-[42px]"
      ></span>
    </div>
    <h2 class="reinsurance-item-title">
      Partir l'esprit léger<br />avec nos assurances
    </h2>
  </div>
</div>

Masonries​

Le premier bloc est composé de deux textes éditables dans BOOM (traductions).

Premier texte : la clé est "our_vacation_rental_ideas" Second texte : la clé est "need_inspiration_for_your_holidays"

Concernant les autres blocs, ce sont des blocs avec image, il est possible de choisir parmi deux formats d'image :

  • grand : 355px par 453px
  • petit : 355px par 304px

Il n'est pas obligatoire de respecter ces formats, mais si on veut respecter la grille telle qu'elle a été créée, il est préférable d'utiliser ces formats et d'alterner les tailles pour créer cet effet de "masonry".

Calendrier​

La section calendrier se gère par une URL de recherche.

Zone carte​

Le code HTML ci-dessous permet de modifier le contenu texte situé à côté de la carte interactive :

<div class="map-container">
  <div class="map-icon-container">
    <span class="odalys-icon lieu">
      <em aria-hidden="true">icon</em>
    </span>
  </div>

  <h2 class="map-title">Odalys Vacances, plus de 400 résidences et hôtels</h2>
  <h3 class="map-subtitle">
    20000 appartements, 40 hôtels, 40 chalets à la montagne, 3000 mobil-homes
    dans plus de 400 résidences de vacances en France, Corse, Italie, Espagne et
    Croatie.
  </h3>
  <p class="map-text">
    Acteur incontournable sur le marché de l’hébergement touristique, Odalys
    Vacances accueille chaque année plus de 2 millions de vacanciers dans ses
    locations saisonnières situées au cœur ou à proximité de destinations
    touristiques populaires.
  </p>
  <p class="map-text">
    Nous vous proposons différents types d'hébergements adaptés à tous, allant
    des parcs résidentiels de plein air (mobil-homes) aux chalets et villas de
    standing en passant par les résidences, les résidences clubs, les résidences
    Prestige, les appart ‘hôtels de centre-ville et les hôtels. Vous profitez
    d'une grande souplesse dans le choix de vos dates de départ et d'arrivée :
    réservez en ligne votre location de vacances pour deux nuits ou un séjour de
    plusieurs semaines.
  </p>
  <p class="map-text">
    Location vacances à la mer, à la montagne, à la campagne... ou encore au
    ski. Odalys Vacances : Des moments ensemble qu’on oublie pas.
  </p>
</div>

Actualités​

<div class="actus-container">
  <div class="actus-title-container">
    <h2 class="actus-title false-button">Nos actualités</h2>
  </div>
  <div class="actus-outer">
    <div class="news-card-alt-container">
      <div class="news-card-alt">
        <div class="news-card-alt-icon-container">
          <span class="odalys-icon lieu text-brand-primary">
            <em aria-hidden="true">icon</em>
          </span>
        </div>
        <span class="news-card-alt-title"
          >Utilisez vos Chèques-Vacances pour le paiement de votre séjour
          Odalys</span
        >
        <a href="#" class="stretched-link news-card-alt-link">En savoir plus</a>
      </div>
      <div class="news-card-alt">
        <div class="news-card-alt-icon-container">
          <span class="odalys-icon lieu text-brand-primary">
            <em aria-hidden="true">icon</em>
          </span>
        </div>
        <span class="news-card-alt-title"
          >Nouveau<br />Réglez votre séjour en 3 ou 4 fois par carte bancaire
          sans frais !</span
        >
        <a href="#" class="stretched-link news-card-alt-link">En savoir plus</a>
      </div>
    </div>
    <div class="actus-items">
      <div class="actus-item">
        <div class="news-card">
          <img
            src="https://integrationv4.odalys-tools.com/assets/actu-thumb_1.92cb3c19.webp"
            alt="alt"
            width="100"
            height="100"
          />
          <div>
            <h3>Odalys Groupe</h3>
            <p>Découvrez toute l'actualité du Groupe Odalys.</p>
            <a href="#">En savoir plus</a>
          </div>
        </div>
      </div>
      <div class="actus-item">
        <div class="news-card">
          <img
            src="https://integrationv4.odalys-tools.com/assets/actu-thumb_1.92cb3c19.webp"
            alt="alt"
            width="100"
            height="100"
          />
          <div>
            <h3>Vente de Mobil-Homes</h3>
            <p>
              Devenez propriétaire d’un mobil home sur un camping de plein air
              touristique et profitez de tous les avantages clés de ce projet.
            </p>
            <a href="#">En savoir plus</a>
          </div>
        </div>
      </div>
      <div class="actus-item">
        <div class="news-card">
          <img
            src="https://integrationv4.odalys-tools.com/assets/actu-thumb_1.92cb3c19.webp"
            alt="alt"
            width="100"
            height="100"
          />
          <div>
            <h3>Attestation d'Excellence TripAdvisor</h3>
            <p>
              Découvrez nos établissements qui ont décroché la célèbre
              Attestation d'Excellence TripAdvisor !
            </p>
            <a href="#">En savoir plus</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Liens SEO​

<div class="links-container">
  <div class="links-grid">
    <!-- Grid item 1 -->
    <div>
      <div>
        <h3 class="links-section-title">
          <a href="#">Location Vacances Mer</a>
        </h3>
        <nav>
          <a href="#">Location Aquitaine</a> <a href="#">Location Bretagne</a>
          <a href="#">Location Corse</a>
          <a href="#">Location C&ocirc;te d'Azur</a>
          <a href="#">Location Languedoc Roussillon</a>
        </nav>
      </div>
    </div>
    <!-- Grid item 2 -->
    <div>
      <div>
        <h3 class="links-section-title">
          <a href="#">Location Nord et Ouest</a>
        </h3>
        <nav>
          <a href="#">Location Nord Picardie</a>
          <a href="#">Location Normandie</a>
          <a href="#">Location Pays Basque</a>
          <a href="#">Location Pays de la Loire</a>
          <a href="#">Location Poitou Charentes</a>
        </nav>
      </div>
    </div>
    <!-- Grid item 3 -->
    <div>
      <div>
        <h3 class="links-section-title">
          <a href="#">Location Centre et Est</a>
        </h3>
        <nav>
          <a href="#">Location Centre Ville</a> <a href="#">Location Alsace</a>
          <a href="#">Location Bourgogne et Ain</a>
          <a href="#">Location Centre, Limousin et Auvergne</a>
          <a href="#">Location Lyonnais</a>
        </nav>
      </div>
    </div>
    <!-- Grid item 4 -->
    <div>
      <div>
        <h3 class="links-section-title">
          <a href="#">Location Sud et Montagne</a>
        </h3>
        <nav>
          <a href="#">Location Pyr&eacute;n&eacute;es</a>
          <a href="#">Location Provence et Luberon</a>
          <a href="#">Location Sud Ouest</a>
          <a href="#">Vacances vertes &agrave; la campagne</a>
          <a href="#">Location Alpes du Sud</a>
        </nav>
      </div>
    </div>
    <!-- Grid item 5 -->
    <div>
      <div>
        <h3 class="links-section-title"><a href="#">Location Italie</a></h3>
        <nav>
          <a href="#">Location Alpes Italiennes</a>
          <a href="#">Location Campanie</a> <a href="#">Location Ile d'Elbe</a>
          <a href="#">Location Latium</a> <a href="#">Location Les Pouilles</a>
        </nav>
      </div>
    </div>
    <!-- Grid item 6 -->
    <div>
      <div>
        <h3 class="links-section-title"><a href="#">Location Croatie</a></h3>
        <nav><a href="#">Location Istrie</a></nav>
      </div>
    </div>
    <!-- Grid item 7 -->
    <div>
      <div>
        <h3 class="links-section-title">
          <a href="#">Location Ski et Montagne</a>
        </h3>
        <nav>
          <a href="#">Location Alpes du Sud</a>
          <a href="#">Location Alpes Italiennes</a>
          <a href="#">Location Haute Savoie</a>
          <a href="#">Location Is&egrave;re</a> <a href="#">Location Savoie</a>
        </nav>
      </div>
    </div>
    <!-- Grid item 8 -->
    <div>
      <div>
        <h3 class="links-section-title"><a href="#">Location Espagne</a></h3>
        <nav>
          <a href="#">Location Costa Brava</a>
          <a href="#">Location Costa del Azahar</a>
          <a href="#">Location Costa Doradae</a>
        </nav>
      </div>
    </div>
  </div>
</div>

Bloc RSE​

<section class="rse-section" aria-labelledby="tourisme-durable">
  <div class="container">
    <h2 id="tourisme-durable">
      <img
        src="https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18823.webp"
        alt=""
        width="32"
        height="21"
        loading="lazy"
      />
      S'engager pour un tourisme durable et responsable
    </h2>

    <div class="rse-section-grid">
      <article class="rse-section-card">
        <a href="/initiatives-solidaires">
          <figure>
            <picture>
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1697010415/1/18334.webp?width=358&height=358&gravity=auto
                "
                type="image/webp"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1697010415/1/18334.webp?width=200&height=200&gravity=auto
                "
                type="image/webp"
                media="(max-width: 767px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1697010415/1/18334.jpg?width=358&height=358&gravity=auto
                "
                type="image/jpeg"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1697010415/1/18334.jpg?width=200&height=200&gravity=auto
                "
                type="image/jpeg"
                media="(max-width: 767px)"
              />
              <img
                src="https://mediasv4.odalys-vacances.com/_backppd_/1697010415/1/18334.jpg?width=358&height=358&gravity=auto"
                width="358"
                height="358"
                alt="Enfants jouant dans une piscine"
                loading="lazy"
                decoding="async"
              />
            </picture>
            <figcaption>
              <h3>Favoriser l’accès aux vacances</h3>
              <p>Découvrez nos initiatives solidaires</p>
            </figcaption>
          </figure>
        </a>
      </article>

      <article class="rse-section-card">
        <a href="/empreinte-environnementale">
          <figure>
            <picture>
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18336.webp?width=358&height=358&gravity=auto
                "
                type="image/webp"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18336.webp?width=200&height=200&gravity=auto
                "
                type="image/webp"
                media="(max-width: 767px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18336.jpg?width=358&height=358&gravity=auto
                "
                type="image/jpeg"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18336.jpg?width=200&height=200&gravity=auto
                "
                type="image/jpeg"
                media="(max-width: 767px)"
              />
              <img
                src="https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18336.jpg?width=358&height=358&gravity=auto"
                width="358"
                height="358"
                alt="Personnes avec des vélos devant un bâtiment"
                loading="lazy"
                decoding="async"
              />
            </picture>
            <figcaption>
              <h3>Diminuer notre empreinte environnementale</h3>
              <p>Mobilité douce, sobriété, implantation locale</p>
            </figcaption>
          </figure>
        </a>
      </article>

      <article class="rse-section-card">
        <a href="/biodiversite">
          <figure>
            <picture>
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18335.webp?width=358&height=358&gravity=auto
                "
                type="image/webp"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18335.webp?width=200&height=200&gravity=auto
                "
                type="image/webp"
                media="(max-width: 767px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18335.jpg?width=358&height=358&gravity=auto
                "
                type="image/jpeg"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18335.jpg?width=200&height=200&gravity=auto
                "
                type="image/jpeg"
                media="(max-width: 767px)"
              />
              <img
                src="https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18335.jpg?width=358&height=358&gravity=auto"
                width="358"
                height="358"
                alt="Enfant soufflant sur un pissenlit dans un champ"
                loading="lazy"
                decoding="async"
              />
            </picture>
            <figcaption>
              <h3>Préserver la biodiversité</h3>
              <p>Des actions engagées pour la nature</p>
            </figcaption>
          </figure>
        </a>
      </article>

      <article class="rse-section-card">
        <a href="/charte-verte">
          <figure>
            <picture>
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18340.webp?width=358&height=358&gravity=auto
                "
                type="image/webp"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18340.webp?width=200&height=200&gravity=auto
                "
                type="image/webp"
                media="(max-width: 767px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18340.jpg?width=358&height=358&gravity=auto
                "
                type="image/jpeg"
                media="(min-width: 768px)"
              />
              <source
                srcset="
                  https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18340.jpg?width=200&height=200&gravity=auto
                "
                type="image/jpeg"
                media="(max-width: 767px)"
              />
              <img
                src="https://mediasv4.odalys-vacances.com/_backppd_/1701359946/1/18340.jpg?width=358&height=358&gravity=auto"
                width="358"
                height="358"
                alt="Bâtiments en montagne avec logo Charte Verte"
                loading="lazy"
                decoding="async"
              />
            </picture>
            <figcaption>
              <h3>Labelliser Charte Verte nos établissements</h3>
              <p>30 critères exigeants et engagés</p>
            </figcaption>
          </figure>
        </a>
      </article>
    </div>
  </div>
</section>

Quelques mots sur l'accessibilité​

Cette section respecte les bonnes pratiques d’accessibilité numérique. Voici les éléments clés à connaître et vérifier :

✅ Bonnes pratiques mises en place​

Structure sémantique correcte
Chaque bloc est un <article> contenant un lien (<a>) englobant une figure avec image, titre (<h3>) et description.

Titre de section identifiable
Le <h2> est associé à aria-labelledby, ce qui permet aux technologies d’assistance de bien identifier la section.

Images avec attribut alt pertinent
Chaque image contient un alt décrivant brièvement son contenu visuel.

Liens explicites
Chaque image est cliquable et mène vers une page dédiée ; le titre dans le bloc rend la destination du lien claire.

Webmastering​

Ajout et changement de pictos​

MapS supprime les balises vides pour des raisons de sécurité, ce qui entraîne la suppression des icônes créées comme suit :

<span class="odalys-icon"></span>

Ainsi, ce code n'affichera pas de picto et la balise sera supprimée par MapS.

Solution : Pour contrer ce comportement, utilisez le code suivant pour insérer un picto :

<span class="odalys-icon"><em aria-hidden="true">icon</em></span>

L'ajout de CSS doit se faire dans le fichier hébergé ici : https://media.odalys-vacances.com/plus/v4/css/stylev4.css