Intégrer sur le site une image avec des points cliquables

Voir en action sur la page d'accueil du site https://www.lamaisondezelie.net/, autre exemple sur l'image sur cette page.

Un click sur chaque  sur la carte permet d'afficher des informations à droite de la carte (ci-dessous pour Autun)

Des possibilités infinies pour votre diaporama (composant Smartslider PRO)

Bien sûr le diaporama de ce site est construit avec Smartslider

 voir un autre exemple - image animée

Nombreux exemples de diaporamas sur le site de l'éditeur : 

Un résumé des fonctionnalités (en anglais, très simple et explicite) : nos préférées sont certainement les fonctions liées au responsive, au SEO, et les animations de toutes sortes...

Le blog de l'éditeur regorge également de ressources.

Pour construire un diaporama, on peut:

• partir d'un exemple de diaporama entier (plusieurs slides) et le modifier,
• partir d'un seul slide et le modifier,
• partir d'un slide et l'enrichir avec les nombreux widgets disponibles (texte, texte animé, image, média, module Joomla etc...),
• partir d'une page blanche !

Un diaporama peut aussi être construit dynamiquement à partir d'articles sélectionnés ou une catégorie d'articles Joomla (par exemple on peut afficher automatiquement le titre et l'image d'intro sur 4 slides pour les 4 actualités les plus récentes).

Nombreuses ressources disponibles sur le site de l'éditeur:

Une courte vidéo sur les quelques bases pour construire le diaporama ("Slide editing layers") et comprendre comment placer les contenus et éléments graphiques.
Passionnant et très accessible, aussi bien pour le webmaster que pour le client !

Nombreux types de champs possibles

• insertion de textes explicatifs, titres et images,
• champs de saisie avec règles de validation (Exemples : email, valeurs numériques uniquement...),
• zone de message, cases à cocher, listes déroulantes,
• calendrier et heures,
• fichier joint avec contrôle sur le type et le poids,
• tous ces champs peuvent être obligatoires ou non (très visible sur le site),
• case à cocher "Je ne suis pas un robot",
• possibilités de pop up et messages d'alerte/explication,
• possibilité de sélection par échelle de valeur (test ci-dessous)

Affichages design avec un plugin

Besoins avancés

• Multi-langues : le même formulaire est affiché pour chaque langue (il n'est pas nécessaire de créer un formulaire par langue),
• Champs conditionnels : si la valeur du champ "Particulier/Professionnel" est "Particulier" alors on affiche le champ "Particulier" (test ci-dessous):
  
  Particulier/Professionnel

  Merci de sélectionnerParticulierProfessionnel

  Entrée non valide

  Particulier

  Merci de sélectionnerChoix1 particulierChoix2 particulierChoix3 particulier

  Entrée non valide

  Professionnel

  Merci de sélectionnerChoix1 professionnelChoix2 professionnelChoix3 professionnel

  Entrée non valide

  Société

  Entrée non valide

  Nom

  Entrée non valide
• Possibilité d'effectuer des calculs : champ1 = nombre, champ2= valeur, champ3 (non saisi, uniquement affiché)=total,
• Possibilité d'afficher dynamiquement les valeurs d'une table au sein d'une liste déroulante,
• Lorsqu'un utilisateur est connecté (un adhérent), il est possible de récupérer automatiquement ses informations au sein du formulaire.

Autres fonctionnalités

• Affichage du formulaire en 2 colonnes responsives (cf champs conditionnels ci-dessus),
• Export/import en csv du détail des soumissions
• Multi-destinataires (y compris cc et cci)
• Emails de l'administrateur et de l'utilisateur administrables comme un article (simplicité, insertion de couleurs, d'images, de liens...),
• L'objet des emails est également très simple à maintenir,
• Le message de remerciements affiché à l'écran est également administrable comme un article.

RGPD

• case de consentement à cocher et lien vers la page de gestion des données personnelles,
• case de consentement à cocher pour s'inscrire à une newsletter,
• le mail de l'utilisateur comporte l'intégralité des informations qu'il a transmis,
• la transmission d'une soumission peut-être validée via un email de confirmation,
• automatisation de la suppression des soumissions de plus de X jours (X est paramétrable par formulaire),
• fonctionnalité exceptionnelle : au sein du mail reçu par l'utilisateur, celui-ci dispose d'un lien pour supprimer les informations de sa soumission au sein de la base de données (cf image ci-dessous)

Nos conseils

• pour des formulaires efficaces et attractifs,
• pour effectuer tous les tests avant mise en production,
• pour exploiter au mieux les soumissions (droits spécifiques, affichage privé, export...)

Exemples d'utilisation

• commande de produits,
• réservation de séjour,
• transmission de notes de frais (et affichage privatif par utilisateur de son historique).

Points forts du site :

• Intègre une solution de gestion des réservation, simple à administrer,
• Affiche les avis de plusieurs sites,
• Carte intéractive : points cliquables,
• Diaporamas, galeries photos, onglets, accordéons ...

En détail :

• Site adapté aux tablettes et mobiles (chargement allégé),
• Performances de chargement du site optimisées,
• Formulaire de contact sécurisé avec boites de sélection et aide à la saisie des dates,
• Affichage des avis clients (nombres/notes) sur la page d'accueil et un lien vers la page des avis,
• Affichage des avis de plusieurs sites sous la forme d'onglets,
• Flip-book en page d'accueil pour des actualités,
• Carte intéractive avec click sur de multiples zones qui ouvrent une nouvelle page,
• Multi-langues toutes zones,
• Diaporama et légendes traduites,
• Plusieurs types de galeries photos (vignettes et survol par la souris, par click sur image et effet "lightbox") et légendes traduites,
• Visites panoramiques,
• Affichages d'articles en onglets (destinations de tourisme),
• Google Map,
• Plan de site intégré,
• Lien Instagram,
• Menu spécifiques et pages "Tourisme",
• Plusieurs visuels de plannings de réservation (affichage journalier, mensuel) ou intégration d'un calendrier externe,
• Intégration/synchronisation possible d'un calendrier externe ICAL,
• Une administration permettant une gestion des réservations, un paiement en ligne, l'émission automatique du contrat de location, le calcul de la taxe de séjour.
• Nombreux liens internes et navigation ergonomique,
• Référencement de chaque page individuellement en 2 langues.

Points forts du site :

• Joomla4,
• Intégration d'une carte interactive,
• Icônes fixes pour affichage du menu d'accessibilité,
• Galeries photos, onglets et schémas complexes.

Fonctionnalités du site en détail :

• Performances de chargement du site optimisées sous Joomla4,
• Affichage du menu d'accessibilité aux déficients visuels de Joomla4,
• Bouton fixe "Info" pour ouvrir un panneau latéral à droite de l'écran,
• Graphisme épuré (2 couleurs vives et contrastées),
• Intégration d'une carte pour situer les établissements de soin pour la santé mentale en Bourgogne Sud, plusieurs filtres disponibles,
• Sur la carte, possibilité d'afficher les informations rattachées à chaque établissement,
• Alimentation dynamique chaque nuit des données de la carte,
• Possibilité d'utilisation d'une solution très simple de popup,
• Formulaire de contact sécurisé avec "Je ne suis pas un robot",
• Affichage avec des onglets,
• Galerie photo avec texte d'accompagnement,
• Plan de site intégré,
• Liens réseaux sociaux (Youtube, Twitter, Facebook),
• Référencement de chaque page très soigné.

Points forts du site :

• Graphisme épuré (maquettage),
• Site bilingue,
• Diaporamas et animations,
• Formulaire spécifique offres d'emploi.

Fonctionnalités du site en détail :

• Performances de chargement du site optimisées sous Joomla4,
• Diaporama avec textes et liens,
• Animations sur la page d'accueil (scrollreveal),
• Graphisme épuré (3 tons de bleu contrastés),
• Graphisme avec image de fond sur certains modules
• Formulaire spécifique pour des offres d'emplois,
• Possibilité d'utilisation d'une solution très simple de popup,
• Affichage FAQ avec des accordéons,
• Blog d'actualités,
• Pied de page complexe,
• Plan de site intégré,
• Liens réseaux sociaux (Youtube, Linkedin),
• SEO : hiérarchie h1,h2,h3 rigoureusement respectée,
• Référencement de chaque page très soigné.

Points forts du site :

• Joomla4,
• Gestion d'événements (agenda des spectacles),
• Menu fixe avec image spécifique qui apparaît,
• Diaporamas, galeries photos, onglets, accordéons ...

 
Fonctionnalités du site en détail :

• Performances de chargement du site optimisées sous Joomla4,
• Affichage du menu d'accessibilité aux déficients visuels de Joomla4,
• Graphisme spécifique avec de nombreuses images de fond (chats),
• Gestion des événements (spectacles de plusieurs catégories et avec localisation OpenStreetMap),
• Gestion des événements avec un module d'agenda en page d'accueil,
• Gestion des événements avec une page globale d'agenda,
• Gestion des événements avec un module "Prochains spectacles",
• Blog d'actualités,
• Possibilité d'utilisation d'une solution très simple de popup,
• Formulaire de contact sécurisé avec "Je ne suis pas un robot",
• Affichage des commentaires avec un accordéon,
• Structure commune des spectacles avec onglets,
• 2 types de diaporamas (accueil et pages spectacles)
• Plan de site intégré,
• Liens réseaux sociaux (Youtube),
• Nombreux liens internes et navigation ergonomique,
• Référencement de chaque page très soigné.

Points forts du site :

• Intègre de nombreux modules avec animations douces,
• Plusieurs formulaires avec champs conditionnels,
• Conforme au RGPD,
• Schéma intéractif avec points cliquables,
• Diaporama Smartslider, accordéons ...

Fonctionnalités en détail :

• Charte graphique définie avec précision (couleurs, icônes, logos, ..),
• Plusieurs animations sur la page d'accueil (fonction ScrollReveal),
• Performances de chargement du site optimisées,
• Diaporama avec animations,
• Template compatible Joomla4 (éditeur Inspiretheme sous framework Gantry5),
• Blog optimisé en SEO avec possibilité de d'abonnement pour être notifié à chaque nouvel article,
• Blog avec sélections par tags, par catégories,
• Formulaire d'inscription sécurisé avec "Je ne suis pas un robot", champs conditionnels et affichage optimisé pour mobile,
• RGPD : recueil du consentement pour tout formulaire, politique de gestion des données personnelles, gestion des cookies.
• Affichage en accordéons et liens vers chaque items des accordéons,
• Plan de site optimisé,
• Affichage d'événements (formations) avec possibilité d'inscription et paiement en ligne,
• Back-office de gestion des inscriptions aux événements (liste des inscrits par date de formation),
• Référencement spécifique des pages des événements (pour chaque formation),
• Gestion d'un agenda avec événements par catégories (calendriers, listes des événements),
• Popup avec la liste des prochaines formations,
• Images avec zones cliquables,
• Page d'avis clients,
• Google Map,
• Nombreux liens internes et navigation ergonomique avec modules en colonne de droite,
• Menu avec sous-titres,
• Référencement optimisé pour chaque page

Les points forts du site :

• Effet de slide sur des modules en page d'accueil.
• Menu fixe,
• Conforme aux recommandations Google (balise h1 en premier dans le HTML),
• Performances de chargement particulièrement optimisées (poste fixe et mobile).

 Détails de la structure du site:

• Présentation détaillée des 2 activités de création et d'entretien d'espaces verts,
• Référencement local (Chalon, Mercurey, Fontaines, Côte Chalonnaise),
• Galerie photo adaptée aux tablettes et mobiles,
• Formulaire de contact avec anti-spam "Je ne suis pas un Robot",
• Plan de site intégré,
• Google Map,
• Modules de témoignages,
• Un logo qui donne une dimension joyeuse et dynamique,
• Adresse email cryptée en pied de page.

Points clés du site :

• Adapté aux tablettes et mobiles,
• Plusieurs menus,
• Animation (dates d'évènements),
• Originalité du contenu et recherche iconographique importante.

Détails de la conception du site:

• Affichage très souple adapté aux tablettes et mobiles,
• Simplicité de mise à jour des textes et photos,
• Formulaire de contact sécurisé avec plusieurs boites de sélection,
• Administration simple d'articles liés à des évènements (stages, conférences, réunions),
• Graphisme : création de schémas pour expliquer l'activité,
• Google Map,
• Plan de site intégré,
• Modules affiché ou supprimé d'1 click,
• Fenêtres Pop-up permettant d'accéder au contenu des stages tout en consultant la liste.