Modèles
Généralités
Dans la barre d'outils, le 5è picto commande l'ouverture d'une fenêtre "Modèles".
 |
Ces modèles ont été créés afin de simplifier les mises en pages, et répondent aux cas les plus répandus.
Les modèles notés [RESPONSIVE] sont conçus pour s'adapter aux différents écrans (Portables, tablette, micro-ordinateur...). Pour que ces modèles fonctionnent, le site doit être lui aussi conçu en "responsive-design".
 |
| Boîte de dialogue "Modèles" |
Insertion
- Placer le curseur à l'endroit où le modèle doit être inséré
(si modèle en habillage, taper d'abord le texte, et placer le curseur au début du paragraphe souhaité) - Cliquer sur l'icône "Modèles"
- Décocher la case "Remplacer le contenu actuel" (si cette case reste cochée, le modèle inséré effacera et remplacera tout le contenu du champ)
- Sélectionner le modèle choisi
Le modèle doit s'afficher, avec une image générique.
Personnalisation
> Pour remplacer l'image générique par l'image choisie, suivre les étapes suivantes :
- Faire un clic droit sur l'image générique.
- Choisir "Propriétés de l'image"
- Cliquer sur "Explorer le serveur"
- Envoyer l'image via ce formulaire, ou redimensionner l'image, ou choisir une image dans la liste
- Insérer dans le champ "Texte de remplacement" un texte décrivant l'image
- Appuyer sur le bouton "Ok"
> Suppression de la légende pour les modèles en comportant :
- Placer le curseur dans la zone de la légende
- Faire un clic droit
- Choisir "Lignes > Supprimer les lignes"
Modèles spécifiques
Modèles "[IMG] Image largeur 100%"
> Prévoir une image à l'italienne (format horizontal) dont la largeur est comprise entre 960 et 1920 px.
 |
| Exemple |
Modèles "[GALERIE] Galerie 2021"
 |
| Onglet Galerie |
> Après chargement du modèle, 1 image est pré-chargée. Double cliquer sur le modèle pour accéder aux options.
Galerie 2021 - Onglet Galerie
Cet onglet commande l'intégralité de la galerie. Les options définies seront donc appliquées à toute la galerie et ses vignettes.
> Galerie - Taille des vignettes
Choix de la taille des vignettes, par ordre croissant : XXS | XS | S | M | L | XL
> Galerie - Alignement
Choix de l'alignement des vignettes dans les galerie : Gauche | Centré | Droit
> Galerie - Marge des éléments
Marge séparant les vignettes, par ordre croissant : 0 | 0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5
> Galerie - Largeur des éléments
Mode de calcul de la largeur des vignettes : Fixe | Adaptatif
Fixe : Lors d'un redimensionnement de la fenêtre, la largeur des vignettes ne changera qu'au travers des crans responsives.
Adaptatif : Lors d'un redimensionnement de la fenêtre, la largeur des vignettes changera proportionnellement à celle de l'écran, à l'intérieur des crans responsives.
> Galerie - Légendes - Taille
Taille du corps de la légende, par ordre croissant : 0.6 | 0.7 | 0.8 | 0.9 | 1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5
> Galerie - Mise en page
Mise en page des vignettes et de leur légende : Légende sous vignette | Légende en surimpression sur la vignette | Légende uniquement en calque
Légende sous vignette : La légende se place sous l'image.
Légende en surimpression sur la vignette : La légende sera placée sur l'mage.
Légende uniquement en calque : La légende n'apparaîtra pas dans la galerie mais uniquement après clic sur l'image afin de la voir en plus grand.
> Galerie - Effet
Effet lors du passage de la souris sur la vignette : Par défaut | Vignette en N et B, roll en couleur
Par défaut : Comportement par défaut
Vignette en N et B, roll en couleur : Les vignettes seront automatiquement en Noir et Blanc, et repasseront en couleur lors du survol de la vignette par le pointeur de la souris
> Galerie - Vignettes - Ratio Largeur (nombre entier)
> Galerie - Vignettes - Ratio Hauteur (nombre entier)
Ces 2 valeurs déterminent le ratio des vignettes.
Ex : 1 et 1 feront des images carrées
Ex : 16 et 9 feront des images en 16/9
Ex : 4 et 3 feront des images 4/3
> Galerie - Vignettes - Cadrage
Mode de recadrage si l'on a défini un ratio : Rognage (avec perte) | Sans perte
Rognage (avec perte) : Le ratio demandé se verra découpé dans l'image, l'image sera donc recadrée et ses parties hautes et basses ou gauches et droites se verront donc supprimées.
Sans perte : Des marges seront créées en haut et bas ou à gauche et à droite de la vignette pour la contenir entièrement dans la ratio entré.
> Galerie - Id
Renseigner ce champ par une chaîne de caractères si plusieurs galeries dans la même page.
 |
| Onglet Photo "n" |
Galerie 2021 - Onglet Photo"n"
Les onglets de type "photo n" (ex Photo 1, Photo 2...) ne s'appliquent qu'à la vignette en cours.
> Image - URL
Choix de l'image. Contrairement aux versions précédentes des galeries, l'image téléchargée sur le serveur n'a pas besoin d'être taillée spécifiquement pour son utilisation dans la galerie 2021.
> Image - Texte alternatif
Quelques mots décrivant l'image.
> Image - Légende
Légende de la vignette "photo 1".
> Vignette - Lien personnalisé
Si ce champ n'est pas renseigné, le clic sur la vignette provoquera un agrandissement de cette image.
Dans le cas où ce champ est renseigné, au lieu d'ouvrir l'image en grand, le clic pointera vers le lien renseigné.
Cette fonctionnalité est utile notamment pour faire une galerie de logos pointant vers les sites des entreprises.
> Image - Lien personnalisé - Cible
Permet de définir si le lien personnalisé sera ouvert en nouvelle fenêtre ou dans la fenêtre courante (même fenêtre) de votre navigateur.
Modèles "[GALERIE] Liste d'images cliquables"
Ne plus utiliser - privilégier le modèle "Galerie 2021".
> Après chargement du modèle, 10 images sont pré-chargées.
> Tailles physiques d'images recommandées :
- Taille XXS : 60px > Hauteur > 120px
- Taille XS : 90px > Hauteur > 180px
- Taille S : 120px > Hauteur > 240px
- Taille M : 180px > Hauteur > 360px
- Taille L : 240px > Hauteur > 480px
 |
| Exemple |
> Pour charger vos images :
- Cliquer droit sur l'image
- Cliquer sur "Propriétés de l'image"
- Cliquer sur "Parcourir le serveur"
- Une nouvelle fenêtre apparaît. Charger votre image sur le serveur
- Cliquer sur le lien "redimensionner" afin créer une image au poids et à la taille adéquate pour le modèle choisi (ex : 360px pour du M)
- Une nouvelle image dont le nom se termine par sa taille apparaît. Cliquer sur son nom
- La fenêtre vient de se fermer, et le nom de l'image est bien entrée dans le champ "url"
- Entrer le texte de remplacement (Texte décrivant l'image, nécessaire au référencement, et aux normes HTML)
- Passer dans l'onglet "Lien"
- Cliquer sur "Explorer le serveur", pour charger la mm image, mais en plus grande définition
- Cliquer sur l'image chargée en étape 4 ou créer une image de 1024px de hauteur en suivant les étapes de 5 à 6
- La fenêtre vient de se fermer, et le nom de l'image est bien entré dans le champ "url"
- Cliquer en bas de la fenêtre sur OK, le calque se ferme
- Répéter l'opération sur les autres images à changer
> Pour ajouter une nouvelle image :
- Se placer après le dernier élément
- Appuyer sur la touche [ENTREE]
- Une zone est maintenant créée. Cliquer sur une image voisine
- La copier (CTRL + C)
- Se placer dans la nouvelle zone créée précédemment
- Coller l'image (CTRL + V)
- Changer le visuel (Clic droit sur l'image, propriétés de l'image, Explorer le serveur ), le texte alternatif
- Passer dans l'onglet "Lien"
- Changer l'image en en sélectionnant une version plus grande ou la même. C'est cette image qui sera affichée en lightbox (calque)
La cote la plus grande de cette image (largeur ou hauteur) est de 1024px.
> Pour supprimer une nouvelle image :
- Se placer après l'image à supprimer
- Presser la touche [DEL]
- Puis presser la touche [SUPPR]
Modèles "[GALERIE] Liste d'images cliquables avec légendes"
Ne plus utiliser - privilégier le modèle "Galerie 2021".
> Après chargement du modèle, 10 images sont pré-chargées.
> Tailles physiques d'images recommandées :
- Taille XXS : 60px > Hauteur > 120px
- Taille XS : 90px > Hauteur > 180px
- Taille S : 120px > Hauteur > 240px
- Taille M : 180px > Hauteur > 360px
- Taille L : 240px > Hauteur > 480px
 |
| Exemple |
> Pour charger vos images :
- Cliquer droit sur l'image
- Cliquer sur "Propriétés de l'image"
- Cliquer sur "Parcourir le serveur"
- Une nouvelle fenêtre apparaît. Charger votre image sur le serveur
- Cliquer sur le lien "Redimensionner" afin créer une image au poids et à la taille adéquate pour le modèle choisi (ex : 360px pour du M)
- Une nouvelle image dont le nom se termine par sa taille apparaît. Cliquer sur son nom
- La fenêtre vient de se fermer, et le nom de l'image est bien entré dans le champ "url"
- Entrer le texte de remplacement (Texte décrivant l'image, nécessaire au référencement, et aux normes HTML)
- Passer dans l'onglet "Lien"
- Cliquer sur "Explorer le serveur", pour charger la mm image, mais en plus grande définition
- Cliquer sur l'image chargée en étape 4 ou créer une image de 1024px de hauteur en suivant les étapes de 5 à 6
- La fenêtre vient de se fermer, et le nom de l'image est bien entrée dans le champ "url"
- Cliquer en bas de la fenêtre sur OK, le calque se ferme
- Changer la légende en la balayant de la remplaçant
- Re-cliquer droit sur l'image, et cliquer sur "Editer le lien"
- Passer sur l'onglet "Avancé"
- Répéter la légende dans le champ "Description (Title)" et cliquer sur OK
- Répéter l'opération sur les autres images à changer
> Pour ajouter une nouvelle image :
- Cliquer sur l'image du dernier élément
- En pied du champ, cliquer sur le "li" dans la ligne "body ul li a img"
- La copier (CTRL + C)
- Coller la sélection (CTRL + V)
- Re-Coller la sélection (CTRL + V) - Un nouvel élément est créé.
- Répéter l'opration autant de fois que nécessaire
- Changer le visuel (Clic droit sur l'image, propriétés de l'image, Explorer le serveur ), le texte alternatif
- Passer dans l'onglet "Lien"
- Changer l'image en en sélectionnant une version plus grande ou la même. C'est cette image qui sera affichée en lightbox (calque)
La cote la plus grande de cette image (largeur ou hauteur) est de 1024px. - Balayer la légende, et la changer.
> Pour supprimer une nouvelle image :
- Se placer à la fin du dernier caractère de la légende de l'image à supprimer
- Cliquer (maintenir le clic) et balayer vers le haut jusqu'à sélectionner aussi l'image
- Presser la touche [SUPPR]
- Puis presser la touche [DEL]
Modèles "Images centrées"
> Tailles physiques d'images recommandées :
- Taille M : 480px > Largeur > 800px
- Taille L : 640px > Largeur > 960px
- Taille XL : 800px > Largeur > 1280px
 |
| Exemple |
Modèles "Images en habillages"
> Tailles physiques d'images recommandées :
- Taille M : 360px > Largeur > 640px
- Taille L : 480px > Largeur > 800px
- Taille XL : 640px > Largeur > 960px
 |
| Exemple |
Modèles "Images en colonnes"
- Taille XL : 640px > Largeur > 960px
 |
| Exemple |