Panotour - Avancé - Modèles HTML
Sommaire
WIP
INTRODUCTION
Sur cette page, nous apprendrons comment utiliser les différents modèles HTML que fourni Panotour Pro, et comment améliorer l'expérience utilisateur grâce au design web.
Cette notion avancée requiert des connaissances en HTML, CSS et JS.
Les avantages d'un modèle HTML :
- Interactivité améliorée : Déclenchez des actions à l'extérieur du conteneur HTML de la visite virtuelle.
- Meilleure expérience utilisateur
- Personnalisation et créativité illimitée de la page web finale contenant la visite.
- Une interaction plus responsive pour les petits écrans.
Comment ajouter un Modèle HTML
Les fichiers de modèle HTML sont à placer dans le dossier de l'utilisateur Panotour Pro.
Pour trouver ce dossier, lancez Panotour Pro et allez dans Edition > Ouvrir le dossier de l'utilisateur.
Vous pouvez ajouter autant de modèles HTML dans ce dossier que vous le désirez.
En ouvrant un explorateur de fichiers, le chemin de fichier ressemblera à :
C:\Users\username\Documents\Kolor\PanotourPro 2\html
Ce dossier est vide par défaut. Une fois que vous aurez ajouté des modèles HTML, ceux-ci apparaîtront en plus des deux fournis par défaut, dans le menu déroulant pour les modèles HTML dans l'onglet Génération de Panotour Pro.
Comment créer un modèle HTML pour Panotour
Actuellement, le moyen conseillé pour créer vos propres modèles est de vous baser sur les deux modèles existant dans Panotour. Pour les retrouver, lancez Panotour Pro et allez dans Edition > Ouvrir le dossier des modèles. Le chemin de fichier ressemblera à :
C:\Program Files\Kolor\Panotour Pro 2.1\Resources\html
EXEMPLES DE MODÈLES HTML PERSONNALISÉS
Téléchargement
Voici quelques exemples de modèles HTML personnalisés. Cliquez sur les liens en gras pour les télécharger :
- Html_Custom_Templates.zip contient 3 modèles génériques HTML démontrant la flexibilité du moteur Panotour, et 3 modèles HTML responsives basés sur Twitter Bootstrap :
- Générique :
- Basé Bootstrap :
- Générique :
- Bootstrap External Commands with Colors.zip contient un plugin qui permet à vos modèles HTML d'intéragir plus avec les données de votre projet (dans ces exemples, les couleurs de votre projet), et 3 modèles HTML responsives:
Modèles Génériques
Generic Hierarchical Tree
- A two columns template with a small left column on the left containing the groups and the panoramas links.
- A main column displaying the virtual tour.
- This template is a basic customization but demonstrates the flexibility of the Panotour Pro template engine.
Generic Thumbnails Left
- A two columns template with a small left column on the left containing the thumbnails and the panoramas titles that link to the virtual tour.
- A main column displaying the virtual tour.
- This template is a basic customization but demonstrates the flexibility of the Panotour Pro template engine.
Generic Thumbnails Under
- A single column template with a bottom row containing the thumbnails that link to the panoramas in the virtual tour.
- A main column displaying the virtual tour.
- This template is a basic customization but demonstrates the flexibility of the Panotour Pro template engine.
Modèles basés sur Twitter Bootstrap
- A responsive design based on Bootstrap
- A simple full page design with a responsive top navigation bar that link to the panoramas in the virtual tour.
Launch the example tour (Resize your browser to see the responsive behavior working)
Bootstrap Thumbs Left - Responsive
- A responsive design based on Bootstrap
- A page design with a responsive left column containing the thumbnails that link to the panoramas in the virtual tour.
- Resize your browser to see the responsive design working: Left column disappear on small devices to be replaced by a top navigation bar.
Launch the example tour (Resize your browser to see the responsive behavior working)
Bootstrap Thumbs Under - Responsive
- A responsive design based on Bootstrap
- A page design with a responsive bottom row containing the thumbnails that link to the panoramas in the virtual tour.
- Resize your browser to see the responsive design working: Bottom row will disappear on small devices to be replaced by a top navigation bar.
Launch the example tour (Resize your browser to see the responsive behavior working)
Modèles basés sur Twitter Bootstrap utilisant les Couleurs du Projet
Here is a small collection of responsive templates based on the project colors (Project Properties > Display > Colors).
Installation
The following templates require an additional plugin called "Bootstrap_External_Commands" to work properly, which is included into the download .zip.
Remember to always include the Bootstrap_External_Commands plugin into each project exported with these templates. Otherwise your tour will not work properly.
Bootstrap Full Page with Project Colors
- A responsive design based on Bootstrap
- This responsive template is based on the project colors.
- The tour is displayed in a full page mode with the control bar above.
- Responsive top navigation bar.
- Depending to the foreground and background colors of your project, results may be completely different.
- The control bar is customized by the template.
- You can toggle the thumbnails bar on and off.
- Drag the thumbnails bar with your mouse.
- The info button displays a modal box with the current panorama title, description, breadcrumb and group description.
- Controls: Previous Next panoramas, Start Stop autorotation, Zoom in and out, Show Title and Description, Show Help, Toggle Thumbnails, Toggle Fullscreen
- Resize your browser to see the responsive design working.
Launch the example tour (Resize your browser to see the responsive behavior working)
Launch the example tour (Resize your browser to see the responsive behavior working)
Bootstrap Light on Dark with Project Colors
- A responsive design based on Bootstrap
- This responsive template is based on the project colors.
- Intended to be used with a clear foreground color and a dark background color.
- The tour is displayed in a container in the left of the page with thumbnails bar and control bar under the tour.
- The control bar is customized by the template.
- You can toggle the thumbnails bar.
- Drag the thumbnails bar with your mouse.
- Title of the current panorama is displayed on the right.
- Breadcrumb on the right with Current Project / Current Group / Current Panorama.
- Tabs with Panorama Description / Group Description / Project Description
- Controls: Previous Next panoramas, Start Stop autorotation, Zoom in and out, Show Title and Description, Show Help, Toggle Thumbnails, Toggle Fullscreen
- Resize your browser to see the responsive design working.
Bootstrap Light on Dark Template intended to be used with a light foreground color and a dark background color
Launch the tour (Resize your browser to see the responsive behavior working)
Bootstrap Dark on Light with Project Colors
- A responsive design based on Bootstrap
- This responsive template is based on the project colors.
- Intended to be used with a dark foreground color and a clear background color.
- The tour is displayed in a container in the left of the page with thumbnails bar and control bar under the tour.
- The control bar is customized by the template.
- You can toggle the thumbnails bar.
- Drag the thumbnails bar with your mouse.
- Title of the current panorama is displayed on the right.
- Breadcrumb on the right with Current Project / Current Group / Current Panorama.
- Tabs with Panorama Description / Group Description / Project Description
- Controls: Previous Next panoramas, Start Stop autorotation, Zoom in and out, Show Title and Description, Show Help, Toggle Thumbnails, Toggle Fullscreen
- Resize your browser to see the responsive design working.
Bootstrap Dark on Light Template intended to be used with a dark foreground color and a light background color
Launch the tour (Resize your browser to see the responsive behavior working)